@gemboss/ui 0.35.7 → 0.39.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.
@@ -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/settings-dialog.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/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.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}
@@ -26,8 +26,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
26
26
 
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
- <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="#settings">Hộp cài đặt</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="#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="#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.35.7</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>2b39ddd48ea9</code>.</p></header>
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="#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="#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="#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.39.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>7281c1753cf3</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-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/settings-dialog.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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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/settings-dialog.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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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/settings-dialog.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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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/settings-dialog.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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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/settings-dialog.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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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/settings-dialog.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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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/settings-dialog.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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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/settings-dialog.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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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/settings-dialog.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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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="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/settings-dialog.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;:c57-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;:c57-R0:&quot;&gt;&lt;div class=&quot;ui-settings__pane-head&quot;&gt;&lt;h2 class=&quot;ui-settings__pane-title&quot; id=&quot;:c57-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;:c57-R0:&quot; tabindex=&quot;-1&quot;&gt;
3659
+ <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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;:c57-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;:c57-R0:&quot;&gt;&lt;div class=&quot;ui-settings__pane-head&quot;&gt;&lt;h2 class=&quot;ui-settings__pane-title&quot; id=&quot;:c57-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;:c57-R0:&quot; tabindex=&quot;-1&quot;&gt;
3660
3660
  &lt;div class=&quot;ui-settings__layout&quot;&gt;
3661
3661
  &lt;nav class=&quot;ui-settings__rail&quot; aria-label=&quot;Settings sections&quot;&gt;
3662
3662
  &lt;div class=&quot;ui-settings__search&quot;&gt;
@@ -3752,10 +3752,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3752
3752
  &lt;/svg&gt;
3753
3753
  &lt;/button&gt;
3754
3754
  &lt;/dialog&gt;</code></pre></details></figure></section>
3755
- <section id="shell"><h2>Khung app</h2><p>Topbar 56px, rail 240px, ≤760px thành ngăn kéo. Logo <code>BrandLockup</code>, 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 + AccountMenu + Icon</figcaption><iframe title="AppShell + BrandLockup + 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/settings-dialog.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;:c58-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;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;:c58-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;
3755
+ <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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;:c58-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;:c58-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;:c58-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c58-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c58-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;:c58-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-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;
3756
3756
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3757
3757
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3758
- &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;:c58-R0:&quot;&gt;
3758
+ &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;:c58-R0:&quot;&gt;
3759
3759
  &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
3760
3760
  &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;
3761
3761
  &lt;/path&gt;
@@ -3774,6 +3774,1904 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3774
3774
  &lt;/svg&gt;
3775
3775
  &lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;
3776
3776
  &lt;/a&gt;
3777
+ &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;:c58-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;
3778
+ &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;
3779
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3780
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
3781
+ &lt;/circle&gt;
3782
+ &lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
3783
+ &lt;/circle&gt;
3784
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
3785
+ &lt;/circle&gt;
3786
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
3787
+ &lt;/circle&gt;
3788
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
3789
+ &lt;/circle&gt;
3790
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
3791
+ &lt;/circle&gt;
3792
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
3793
+ &lt;/circle&gt;
3794
+ &lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
3795
+ &lt;/circle&gt;
3796
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
3797
+ &lt;/circle&gt;
3798
+ &lt;/g&gt;
3799
+ &lt;/svg&gt;
3800
+ &lt;/button&gt;
3801
+ &lt;dialog open id=&quot;:c58-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c58-Rkj:svc-t&quot;&gt;
3802
+ &lt;div class=&quot;gb-svc__head&quot;&gt;
3803
+ &lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c58-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;
3804
+ &lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;
3805
+ &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;
3806
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3807
+ &lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;
3808
+ &lt;/path&gt;
3809
+ &lt;/g&gt;
3810
+ &lt;/svg&gt;
3811
+ &lt;/button&gt;
3812
+ &lt;/div&gt;
3813
+ &lt;div class=&quot;gb-svc__search&quot;&gt;
3814
+ &lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;
3815
+ &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;
3816
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3817
+ &lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;
3818
+ &lt;/circle&gt;
3819
+ &lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;
3820
+ &lt;/path&gt;
3821
+ &lt;/g&gt;
3822
+ &lt;/svg&gt;
3823
+ &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;
3824
+ &lt;/label&gt;
3825
+ &lt;/div&gt;
3826
+ &lt;div class=&quot;gb-svc__body&quot;&gt;
3827
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-gemboss&quot;&gt;
3828
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;
3829
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
3830
+ &lt;li&gt;
3831
+ &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;
3832
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
3833
+ &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;
3834
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3835
+ &lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
3836
+ &lt;/rect&gt;
3837
+ &lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
3838
+ &lt;/rect&gt;
3839
+ &lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
3840
+ &lt;/rect&gt;
3841
+ &lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
3842
+ &lt;/rect&gt;
3843
+ &lt;/g&gt;
3844
+ &lt;/svg&gt;
3845
+ &lt;/span&gt;
3846
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;
3847
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;
3848
+ &lt;/a&gt;
3849
+ &lt;/li&gt;
3850
+ &lt;/ul&gt;
3851
+ &lt;/div&gt;
3852
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-build&quot;&gt;
3853
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;
3854
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
3855
+ &lt;li&gt;
3856
+ &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;
3857
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
3858
+ &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;
3859
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3860
+ &lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;
3861
+ &lt;/path&gt;
3862
+ &lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;
3863
+ &lt;/path&gt;
3864
+ &lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;
3865
+ &lt;/path&gt;
3866
+ &lt;/g&gt;
3867
+ &lt;/svg&gt;
3868
+ &lt;/span&gt;
3869
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;
3870
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;
3871
+ &lt;/a&gt;
3872
+ &lt;/li&gt;
3873
+ &lt;li&gt;
3874
+ &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;
3875
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
3876
+ &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;
3877
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3878
+ &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;
3879
+ &lt;/rect&gt;
3880
+ &lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;
3881
+ &lt;/circle&gt;
3882
+ &lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;
3883
+ &lt;/path&gt;
3884
+ &lt;/g&gt;
3885
+ &lt;/svg&gt;
3886
+ &lt;/span&gt;
3887
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;
3888
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;
3889
+ &lt;/a&gt;
3890
+ &lt;/li&gt;
3891
+ &lt;li&gt;
3892
+ &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;
3893
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
3894
+ &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;
3895
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3896
+ &lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;
3897
+ &lt;/path&gt;
3898
+ &lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;
3899
+ &lt;/path&gt;
3900
+ &lt;/g&gt;
3901
+ &lt;/svg&gt;
3902
+ &lt;/span&gt;
3903
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;
3904
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;
3905
+ &lt;/a&gt;
3906
+ &lt;/li&gt;
3907
+ &lt;li&gt;
3908
+ &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;
3909
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
3910
+ &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;
3911
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3912
+ &lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;
3913
+ &lt;/path&gt;
3914
+ &lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;
3915
+ &lt;/circle&gt;
3916
+ &lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;
3917
+ &lt;/circle&gt;
3918
+ &lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;
3919
+ &lt;/circle&gt;
3920
+ &lt;/g&gt;
3921
+ &lt;/svg&gt;
3922
+ &lt;/span&gt;
3923
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;
3924
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;
3925
+ &lt;/a&gt;
3926
+ &lt;/li&gt;
3927
+ &lt;/ul&gt;
3928
+ &lt;/div&gt;
3929
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-market&quot;&gt;
3930
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;
3931
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
3932
+ &lt;li&gt;
3933
+ &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;
3934
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
3935
+ &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;
3936
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3937
+ &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;
3938
+ &lt;/path&gt;
3939
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;
3940
+ &lt;/circle&gt;
3941
+ &lt;/g&gt;
3942
+ &lt;/svg&gt;
3943
+ &lt;/span&gt;
3944
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;
3945
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;
3946
+ &lt;/a&gt;
3947
+ &lt;/li&gt;
3948
+ &lt;li&gt;
3949
+ &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;
3950
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
3951
+ &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;
3952
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3953
+ &lt;path d=&quot;M3 16.5h14&quot;&gt;
3954
+ &lt;/path&gt;
3955
+ &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;
3956
+ &lt;/rect&gt;
3957
+ &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;
3958
+ &lt;/rect&gt;
3959
+ &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;
3960
+ &lt;/rect&gt;
3961
+ &lt;/g&gt;
3962
+ &lt;/svg&gt;
3963
+ &lt;/span&gt;
3964
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;
3965
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;
3966
+ &lt;/a&gt;
3967
+ &lt;/li&gt;
3968
+ &lt;li&gt;
3969
+ &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;
3970
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
3971
+ &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;
3972
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3973
+ &lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;
3974
+ &lt;/path&gt;
3975
+ &lt;/g&gt;
3976
+ &lt;/svg&gt;
3977
+ &lt;/span&gt;
3978
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;
3979
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;
3980
+ &lt;/a&gt;
3981
+ &lt;/li&gt;
3982
+ &lt;li&gt;
3983
+ &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;
3984
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
3985
+ &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;
3986
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3987
+ &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;
3988
+ &lt;/rect&gt;
3989
+ &lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;
3990
+ &lt;/path&gt;
3991
+ &lt;/g&gt;
3992
+ &lt;/svg&gt;
3993
+ &lt;/span&gt;
3994
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;
3995
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;
3996
+ &lt;/a&gt;
3997
+ &lt;/li&gt;
3998
+ &lt;li&gt;
3999
+ &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;
4000
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4001
+ &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;
4002
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4003
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;
4004
+ &lt;/circle&gt;
4005
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;
4006
+ &lt;/circle&gt;
4007
+ &lt;path d=&quot;M10 10l5-5&quot;&gt;
4008
+ &lt;/path&gt;
4009
+ &lt;/g&gt;
4010
+ &lt;/svg&gt;
4011
+ &lt;/span&gt;
4012
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;
4013
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;
4014
+ &lt;/a&gt;
4015
+ &lt;/li&gt;
4016
+ &lt;/ul&gt;
4017
+ &lt;/div&gt;
4018
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-content&quot;&gt;
4019
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;
4020
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4021
+ &lt;li&gt;
4022
+ &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;
4023
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4024
+ &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;
4025
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4026
+ &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;
4027
+ &lt;/rect&gt;
4028
+ &lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;
4029
+ &lt;/path&gt;
4030
+ &lt;/g&gt;
4031
+ &lt;/svg&gt;
4032
+ &lt;/span&gt;
4033
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;
4034
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;
4035
+ &lt;/a&gt;
4036
+ &lt;/li&gt;
4037
+ &lt;li&gt;
4038
+ &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;
4039
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4040
+ &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;
4041
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4042
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;
4043
+ &lt;/circle&gt;
4044
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;
4045
+ &lt;/circle&gt;
4046
+ &lt;path d=&quot;M10 10l5-5&quot;&gt;
4047
+ &lt;/path&gt;
4048
+ &lt;/g&gt;
4049
+ &lt;/svg&gt;
4050
+ &lt;/span&gt;
4051
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;
4052
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;
4053
+ &lt;/a&gt;
4054
+ &lt;/li&gt;
4055
+ &lt;li&gt;
4056
+ &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;
4057
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4058
+ &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;
4059
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4060
+ &lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;
4061
+ &lt;/circle&gt;
4062
+ &lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;
4063
+ &lt;/path&gt;
4064
+ &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;
4065
+ &lt;/path&gt;
4066
+ &lt;/g&gt;
4067
+ &lt;/svg&gt;
4068
+ &lt;/span&gt;
4069
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;
4070
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;
4071
+ &lt;/a&gt;
4072
+ &lt;/li&gt;
4073
+ &lt;li&gt;
4074
+ &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;
4075
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4076
+ &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;
4077
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4078
+ &lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;
4079
+ &lt;/path&gt;
4080
+ &lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;
4081
+ &lt;/path&gt;
4082
+ &lt;/g&gt;
4083
+ &lt;/svg&gt;
4084
+ &lt;/span&gt;
4085
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;
4086
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;
4087
+ &lt;/a&gt;
4088
+ &lt;/li&gt;
4089
+ &lt;/ul&gt;
4090
+ &lt;/div&gt;
4091
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-customers&quot;&gt;
4092
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;
4093
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4094
+ &lt;li&gt;
4095
+ &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;
4096
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4097
+ &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;
4098
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4099
+ &lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;
4100
+ &lt;/path&gt;
4101
+ &lt;/g&gt;
4102
+ &lt;/svg&gt;
4103
+ &lt;/span&gt;
4104
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;
4105
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;
4106
+ &lt;/a&gt;
4107
+ &lt;/li&gt;
4108
+ &lt;li&gt;
4109
+ &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;
4110
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4111
+ &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;
4112
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4113
+ &lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;
4114
+ &lt;/path&gt;
4115
+ &lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;
4116
+ &lt;/path&gt;
4117
+ &lt;/g&gt;
4118
+ &lt;/svg&gt;
4119
+ &lt;/span&gt;
4120
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;
4121
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;
4122
+ &lt;/a&gt;
4123
+ &lt;/li&gt;
4124
+ &lt;/ul&gt;
4125
+ &lt;/div&gt;
4126
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-team&quot;&gt;
4127
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;
4128
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4129
+ &lt;li&gt;
4130
+ &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;
4131
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4132
+ &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;
4133
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4134
+ &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;
4135
+ &lt;/path&gt;
4136
+ &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;
4137
+ &lt;/path&gt;
4138
+ &lt;/g&gt;
4139
+ &lt;/svg&gt;
4140
+ &lt;/span&gt;
4141
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;
4142
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;
4143
+ &lt;/a&gt;
4144
+ &lt;/li&gt;
4145
+ &lt;li&gt;
4146
+ &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;
4147
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4148
+ &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;
4149
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4150
+ &lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;
4151
+ &lt;/path&gt;
4152
+ &lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;
4153
+ &lt;/circle&gt;
4154
+ &lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;
4155
+ &lt;/circle&gt;
4156
+ &lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;
4157
+ &lt;/circle&gt;
4158
+ &lt;/g&gt;
4159
+ &lt;/svg&gt;
4160
+ &lt;/span&gt;
4161
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;
4162
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;
4163
+ &lt;/a&gt;
4164
+ &lt;/li&gt;
4165
+ &lt;/ul&gt;
4166
+ &lt;/div&gt;
4167
+ &lt;/div&gt;
4168
+ &lt;div class=&quot;gb-svc__foot&quot;&gt;
4169
+ &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;
4170
+ &lt;/a&gt;
4171
+ &lt;/div&gt;
4172
+ &lt;/dialog&gt;
4173
+ &lt;/div&gt;
4174
+ &lt;div class=&quot;gemboss-topbar-center&quot;&gt;
4175
+ &lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;
4176
+ &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;
4177
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4178
+ &lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;
4179
+ &lt;/circle&gt;
4180
+ &lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;
4181
+ &lt;/path&gt;
4182
+ &lt;/g&gt;
4183
+ &lt;/svg&gt;
4184
+ &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;
4185
+ &lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;
4186
+ &lt;/form&gt;
4187
+ &lt;/div&gt;
4188
+ &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
4189
+ &lt;details class=&quot;gb-account&quot;&gt;
4190
+ &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;
4191
+ &lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;
4192
+ &lt;div class=&quot;gb-account-head&quot;&gt;
4193
+ &lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;
4194
+ &lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;
4195
+ &lt;/div&gt;
4196
+ &lt;/div&gt;
4197
+ &lt;/details&gt;
4198
+ &lt;/div&gt;
4199
+ &lt;/header&gt;
4200
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c58-R0:&quot;&gt;
4201
+ &lt;div class=&quot;gnav-scroll&quot;&gt;
4202
+ &lt;div class=&quot;gnav-group active&quot;&gt;
4203
+ &lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;
4204
+ &lt;span class=&quot;gnav-ico&quot;&gt;
4205
+ &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;
4206
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4207
+ &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;
4208
+ &lt;/rect&gt;
4209
+ &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;
4210
+ &lt;/rect&gt;
4211
+ &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;
4212
+ &lt;/rect&gt;
4213
+ &lt;/g&gt;
4214
+ &lt;/svg&gt;
4215
+ &lt;/span&gt;
4216
+ &lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;
4217
+ &lt;/a&gt;
4218
+ &lt;/div&gt;
4219
+ &lt;/div&gt;
4220
+ &lt;/nav&gt;
4221
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;
4222
+ &lt;/button&gt;
4223
+ &lt;main class=&quot;gemboss-platform-main&quot;&gt;
4224
+ &lt;div style=&quot;padding:24px&quot;&gt;
4225
+ &lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;
4226
+ &lt;/div&gt;
4227
+ &lt;/main&gt;
4228
+ &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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;:c58-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;:c58-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;:c58-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c58-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c58-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;:c58-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-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;
4229
+ &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
4230
+ &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
4231
+ &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;:c58-R0:&quot;&gt;
4232
+ &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
4233
+ &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;
4234
+ &lt;/path&gt;
4235
+ &lt;/svg&gt;
4236
+ &lt;/button&gt;
4237
+ &lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;
4238
+ &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;
4239
+ &lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;
4240
+ &lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;
4241
+ &lt;/polygon&gt;
4242
+ &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;
4243
+ &lt;/path&gt;
4244
+ &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;
4245
+ &lt;/path&gt;
4246
+ &lt;/g&gt;
4247
+ &lt;/svg&gt;
4248
+ &lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;
4249
+ &lt;/a&gt;
4250
+ &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;:c58-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;
4251
+ &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;
4252
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4253
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
4254
+ &lt;/circle&gt;
4255
+ &lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
4256
+ &lt;/circle&gt;
4257
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
4258
+ &lt;/circle&gt;
4259
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
4260
+ &lt;/circle&gt;
4261
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
4262
+ &lt;/circle&gt;
4263
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
4264
+ &lt;/circle&gt;
4265
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
4266
+ &lt;/circle&gt;
4267
+ &lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
4268
+ &lt;/circle&gt;
4269
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
4270
+ &lt;/circle&gt;
4271
+ &lt;/g&gt;
4272
+ &lt;/svg&gt;
4273
+ &lt;/button&gt;
4274
+ &lt;dialog open id=&quot;:c58-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c58-Rkj:svc-t&quot;&gt;
4275
+ &lt;div class=&quot;gb-svc__head&quot;&gt;
4276
+ &lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c58-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;
4277
+ &lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;
4278
+ &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;
4279
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4280
+ &lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;
4281
+ &lt;/path&gt;
4282
+ &lt;/g&gt;
4283
+ &lt;/svg&gt;
4284
+ &lt;/button&gt;
4285
+ &lt;/div&gt;
4286
+ &lt;div class=&quot;gb-svc__search&quot;&gt;
4287
+ &lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;
4288
+ &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;
4289
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4290
+ &lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;
4291
+ &lt;/circle&gt;
4292
+ &lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;
4293
+ &lt;/path&gt;
4294
+ &lt;/g&gt;
4295
+ &lt;/svg&gt;
4296
+ &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;
4297
+ &lt;/label&gt;
4298
+ &lt;/div&gt;
4299
+ &lt;div class=&quot;gb-svc__body&quot;&gt;
4300
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-gemboss&quot;&gt;
4301
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;
4302
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4303
+ &lt;li&gt;
4304
+ &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;
4305
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4306
+ &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;
4307
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4308
+ &lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
4309
+ &lt;/rect&gt;
4310
+ &lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
4311
+ &lt;/rect&gt;
4312
+ &lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
4313
+ &lt;/rect&gt;
4314
+ &lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
4315
+ &lt;/rect&gt;
4316
+ &lt;/g&gt;
4317
+ &lt;/svg&gt;
4318
+ &lt;/span&gt;
4319
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;
4320
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;
4321
+ &lt;/a&gt;
4322
+ &lt;/li&gt;
4323
+ &lt;/ul&gt;
4324
+ &lt;/div&gt;
4325
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-build&quot;&gt;
4326
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;
4327
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4328
+ &lt;li&gt;
4329
+ &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;
4330
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4331
+ &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;
4332
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4333
+ &lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;
4334
+ &lt;/path&gt;
4335
+ &lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;
4336
+ &lt;/path&gt;
4337
+ &lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;
4338
+ &lt;/path&gt;
4339
+ &lt;/g&gt;
4340
+ &lt;/svg&gt;
4341
+ &lt;/span&gt;
4342
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;
4343
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;
4344
+ &lt;/a&gt;
4345
+ &lt;/li&gt;
4346
+ &lt;li&gt;
4347
+ &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;
4348
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4349
+ &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;
4350
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4351
+ &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;
4352
+ &lt;/rect&gt;
4353
+ &lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;
4354
+ &lt;/circle&gt;
4355
+ &lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;
4356
+ &lt;/path&gt;
4357
+ &lt;/g&gt;
4358
+ &lt;/svg&gt;
4359
+ &lt;/span&gt;
4360
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;
4361
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;
4362
+ &lt;/a&gt;
4363
+ &lt;/li&gt;
4364
+ &lt;li&gt;
4365
+ &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;
4366
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4367
+ &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;
4368
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4369
+ &lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;
4370
+ &lt;/path&gt;
4371
+ &lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;
4372
+ &lt;/path&gt;
4373
+ &lt;/g&gt;
4374
+ &lt;/svg&gt;
4375
+ &lt;/span&gt;
4376
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;
4377
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;
4378
+ &lt;/a&gt;
4379
+ &lt;/li&gt;
4380
+ &lt;li&gt;
4381
+ &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;
4382
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4383
+ &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;
4384
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4385
+ &lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;
4386
+ &lt;/path&gt;
4387
+ &lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;
4388
+ &lt;/circle&gt;
4389
+ &lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;
4390
+ &lt;/circle&gt;
4391
+ &lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;
4392
+ &lt;/circle&gt;
4393
+ &lt;/g&gt;
4394
+ &lt;/svg&gt;
4395
+ &lt;/span&gt;
4396
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;
4397
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;
4398
+ &lt;/a&gt;
4399
+ &lt;/li&gt;
4400
+ &lt;/ul&gt;
4401
+ &lt;/div&gt;
4402
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-market&quot;&gt;
4403
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;
4404
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4405
+ &lt;li&gt;
4406
+ &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;
4407
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4408
+ &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;
4409
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4410
+ &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;
4411
+ &lt;/path&gt;
4412
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;
4413
+ &lt;/circle&gt;
4414
+ &lt;/g&gt;
4415
+ &lt;/svg&gt;
4416
+ &lt;/span&gt;
4417
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;
4418
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;
4419
+ &lt;/a&gt;
4420
+ &lt;/li&gt;
4421
+ &lt;li&gt;
4422
+ &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;
4423
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4424
+ &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;
4425
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4426
+ &lt;path d=&quot;M3 16.5h14&quot;&gt;
4427
+ &lt;/path&gt;
4428
+ &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;
4429
+ &lt;/rect&gt;
4430
+ &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;
4431
+ &lt;/rect&gt;
4432
+ &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;
4433
+ &lt;/rect&gt;
4434
+ &lt;/g&gt;
4435
+ &lt;/svg&gt;
4436
+ &lt;/span&gt;
4437
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;
4438
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;
4439
+ &lt;/a&gt;
4440
+ &lt;/li&gt;
4441
+ &lt;li&gt;
4442
+ &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;
4443
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4444
+ &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;
4445
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4446
+ &lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;
4447
+ &lt;/path&gt;
4448
+ &lt;/g&gt;
4449
+ &lt;/svg&gt;
4450
+ &lt;/span&gt;
4451
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;
4452
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;
4453
+ &lt;/a&gt;
4454
+ &lt;/li&gt;
4455
+ &lt;li&gt;
4456
+ &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;
4457
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4458
+ &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;
4459
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4460
+ &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;
4461
+ &lt;/rect&gt;
4462
+ &lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;
4463
+ &lt;/path&gt;
4464
+ &lt;/g&gt;
4465
+ &lt;/svg&gt;
4466
+ &lt;/span&gt;
4467
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;
4468
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;
4469
+ &lt;/a&gt;
4470
+ &lt;/li&gt;
4471
+ &lt;li&gt;
4472
+ &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;
4473
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4474
+ &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;
4475
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4476
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;
4477
+ &lt;/circle&gt;
4478
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;
4479
+ &lt;/circle&gt;
4480
+ &lt;path d=&quot;M10 10l5-5&quot;&gt;
4481
+ &lt;/path&gt;
4482
+ &lt;/g&gt;
4483
+ &lt;/svg&gt;
4484
+ &lt;/span&gt;
4485
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;
4486
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;
4487
+ &lt;/a&gt;
4488
+ &lt;/li&gt;
4489
+ &lt;/ul&gt;
4490
+ &lt;/div&gt;
4491
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-content&quot;&gt;
4492
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;
4493
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4494
+ &lt;li&gt;
4495
+ &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;
4496
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4497
+ &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;
4498
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4499
+ &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;
4500
+ &lt;/rect&gt;
4501
+ &lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;
4502
+ &lt;/path&gt;
4503
+ &lt;/g&gt;
4504
+ &lt;/svg&gt;
4505
+ &lt;/span&gt;
4506
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;
4507
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;
4508
+ &lt;/a&gt;
4509
+ &lt;/li&gt;
4510
+ &lt;li&gt;
4511
+ &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;
4512
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4513
+ &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;
4514
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4515
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;
4516
+ &lt;/circle&gt;
4517
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;
4518
+ &lt;/circle&gt;
4519
+ &lt;path d=&quot;M10 10l5-5&quot;&gt;
4520
+ &lt;/path&gt;
4521
+ &lt;/g&gt;
4522
+ &lt;/svg&gt;
4523
+ &lt;/span&gt;
4524
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;
4525
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;
4526
+ &lt;/a&gt;
4527
+ &lt;/li&gt;
4528
+ &lt;li&gt;
4529
+ &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;
4530
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4531
+ &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;
4532
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4533
+ &lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;
4534
+ &lt;/circle&gt;
4535
+ &lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;
4536
+ &lt;/path&gt;
4537
+ &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;
4538
+ &lt;/path&gt;
4539
+ &lt;/g&gt;
4540
+ &lt;/svg&gt;
4541
+ &lt;/span&gt;
4542
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;
4543
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;
4544
+ &lt;/a&gt;
4545
+ &lt;/li&gt;
4546
+ &lt;li&gt;
4547
+ &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;
4548
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4549
+ &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;
4550
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4551
+ &lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;
4552
+ &lt;/path&gt;
4553
+ &lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;
4554
+ &lt;/path&gt;
4555
+ &lt;/g&gt;
4556
+ &lt;/svg&gt;
4557
+ &lt;/span&gt;
4558
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;
4559
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;
4560
+ &lt;/a&gt;
4561
+ &lt;/li&gt;
4562
+ &lt;/ul&gt;
4563
+ &lt;/div&gt;
4564
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-customers&quot;&gt;
4565
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;
4566
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4567
+ &lt;li&gt;
4568
+ &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;
4569
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4570
+ &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;
4571
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4572
+ &lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;
4573
+ &lt;/path&gt;
4574
+ &lt;/g&gt;
4575
+ &lt;/svg&gt;
4576
+ &lt;/span&gt;
4577
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;
4578
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;
4579
+ &lt;/a&gt;
4580
+ &lt;/li&gt;
4581
+ &lt;li&gt;
4582
+ &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;
4583
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4584
+ &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;
4585
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4586
+ &lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;
4587
+ &lt;/path&gt;
4588
+ &lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;
4589
+ &lt;/path&gt;
4590
+ &lt;/g&gt;
4591
+ &lt;/svg&gt;
4592
+ &lt;/span&gt;
4593
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;
4594
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;
4595
+ &lt;/a&gt;
4596
+ &lt;/li&gt;
4597
+ &lt;/ul&gt;
4598
+ &lt;/div&gt;
4599
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-team&quot;&gt;
4600
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;
4601
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4602
+ &lt;li&gt;
4603
+ &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;
4604
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4605
+ &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;
4606
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4607
+ &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;
4608
+ &lt;/path&gt;
4609
+ &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;
4610
+ &lt;/path&gt;
4611
+ &lt;/g&gt;
4612
+ &lt;/svg&gt;
4613
+ &lt;/span&gt;
4614
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;
4615
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;
4616
+ &lt;/a&gt;
4617
+ &lt;/li&gt;
4618
+ &lt;li&gt;
4619
+ &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;
4620
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4621
+ &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;
4622
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4623
+ &lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;
4624
+ &lt;/path&gt;
4625
+ &lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;
4626
+ &lt;/circle&gt;
4627
+ &lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;
4628
+ &lt;/circle&gt;
4629
+ &lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;
4630
+ &lt;/circle&gt;
4631
+ &lt;/g&gt;
4632
+ &lt;/svg&gt;
4633
+ &lt;/span&gt;
4634
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;
4635
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;
4636
+ &lt;/a&gt;
4637
+ &lt;/li&gt;
4638
+ &lt;/ul&gt;
4639
+ &lt;/div&gt;
4640
+ &lt;/div&gt;
4641
+ &lt;div class=&quot;gb-svc__foot&quot;&gt;
4642
+ &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;
4643
+ &lt;/a&gt;
4644
+ &lt;/div&gt;
4645
+ &lt;/dialog&gt;
4646
+ &lt;/div&gt;
4647
+ &lt;div class=&quot;gemboss-topbar-center&quot;&gt;
4648
+ &lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;
4649
+ &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;
4650
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4651
+ &lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;
4652
+ &lt;/circle&gt;
4653
+ &lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;
4654
+ &lt;/path&gt;
4655
+ &lt;/g&gt;
4656
+ &lt;/svg&gt;
4657
+ &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;
4658
+ &lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;
4659
+ &lt;/form&gt;
4660
+ &lt;/div&gt;
4661
+ &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
4662
+ &lt;details class=&quot;gb-account&quot;&gt;
4663
+ &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;
4664
+ &lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;
4665
+ &lt;div class=&quot;gb-account-head&quot;&gt;
4666
+ &lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;
4667
+ &lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;
4668
+ &lt;/div&gt;
4669
+ &lt;/div&gt;
4670
+ &lt;/details&gt;
4671
+ &lt;/div&gt;
4672
+ &lt;/header&gt;
4673
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c58-R0:&quot;&gt;
4674
+ &lt;div class=&quot;gnav-scroll&quot;&gt;
4675
+ &lt;div class=&quot;gnav-group active&quot;&gt;
4676
+ &lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;
4677
+ &lt;span class=&quot;gnav-ico&quot;&gt;
4678
+ &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;
4679
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4680
+ &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;
4681
+ &lt;/rect&gt;
4682
+ &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;
4683
+ &lt;/rect&gt;
4684
+ &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;
4685
+ &lt;/rect&gt;
4686
+ &lt;/g&gt;
4687
+ &lt;/svg&gt;
4688
+ &lt;/span&gt;
4689
+ &lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;
4690
+ &lt;/a&gt;
4691
+ &lt;/div&gt;
4692
+ &lt;/div&gt;
4693
+ &lt;/nav&gt;
4694
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;
4695
+ &lt;/button&gt;
4696
+ &lt;main class=&quot;gemboss-platform-main&quot;&gt;
4697
+ &lt;div style=&quot;padding:24px&quot;&gt;
4698
+ &lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;
4699
+ &lt;/div&gt;
4700
+ &lt;/main&gt;
4701
+ &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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;:c58-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;:c58-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;:c58-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c58-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c58-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;:c58-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-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;:c58-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;
4702
+ &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
4703
+ &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
4704
+ &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;:c58-R0:&quot;&gt;
4705
+ &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
4706
+ &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;
4707
+ &lt;/path&gt;
4708
+ &lt;/svg&gt;
4709
+ &lt;/button&gt;
4710
+ &lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;
4711
+ &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;
4712
+ &lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;
4713
+ &lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;
4714
+ &lt;/polygon&gt;
4715
+ &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;
4716
+ &lt;/path&gt;
4717
+ &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;
4718
+ &lt;/path&gt;
4719
+ &lt;/g&gt;
4720
+ &lt;/svg&gt;
4721
+ &lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;
4722
+ &lt;/a&gt;
4723
+ &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;:c58-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;
4724
+ &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;
4725
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4726
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
4727
+ &lt;/circle&gt;
4728
+ &lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
4729
+ &lt;/circle&gt;
4730
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
4731
+ &lt;/circle&gt;
4732
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
4733
+ &lt;/circle&gt;
4734
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
4735
+ &lt;/circle&gt;
4736
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
4737
+ &lt;/circle&gt;
4738
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
4739
+ &lt;/circle&gt;
4740
+ &lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
4741
+ &lt;/circle&gt;
4742
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
4743
+ &lt;/circle&gt;
4744
+ &lt;/g&gt;
4745
+ &lt;/svg&gt;
4746
+ &lt;/button&gt;
4747
+ &lt;dialog open id=&quot;:c58-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c58-Rkj:svc-t&quot;&gt;
4748
+ &lt;div class=&quot;gb-svc__head&quot;&gt;
4749
+ &lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c58-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;
4750
+ &lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;
4751
+ &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;
4752
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4753
+ &lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;
4754
+ &lt;/path&gt;
4755
+ &lt;/g&gt;
4756
+ &lt;/svg&gt;
4757
+ &lt;/button&gt;
4758
+ &lt;/div&gt;
4759
+ &lt;div class=&quot;gb-svc__search&quot;&gt;
4760
+ &lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;
4761
+ &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;
4762
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4763
+ &lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;
4764
+ &lt;/circle&gt;
4765
+ &lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;
4766
+ &lt;/path&gt;
4767
+ &lt;/g&gt;
4768
+ &lt;/svg&gt;
4769
+ &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;
4770
+ &lt;/label&gt;
4771
+ &lt;/div&gt;
4772
+ &lt;div class=&quot;gb-svc__body&quot;&gt;
4773
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-gemboss&quot;&gt;
4774
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;
4775
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4776
+ &lt;li&gt;
4777
+ &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;
4778
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4779
+ &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;
4780
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4781
+ &lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
4782
+ &lt;/rect&gt;
4783
+ &lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
4784
+ &lt;/rect&gt;
4785
+ &lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
4786
+ &lt;/rect&gt;
4787
+ &lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
4788
+ &lt;/rect&gt;
4789
+ &lt;/g&gt;
4790
+ &lt;/svg&gt;
4791
+ &lt;/span&gt;
4792
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;
4793
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;
4794
+ &lt;/a&gt;
4795
+ &lt;/li&gt;
4796
+ &lt;/ul&gt;
4797
+ &lt;/div&gt;
4798
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-build&quot;&gt;
4799
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;
4800
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4801
+ &lt;li&gt;
4802
+ &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;
4803
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4804
+ &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;
4805
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4806
+ &lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;
4807
+ &lt;/path&gt;
4808
+ &lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;
4809
+ &lt;/path&gt;
4810
+ &lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;
4811
+ &lt;/path&gt;
4812
+ &lt;/g&gt;
4813
+ &lt;/svg&gt;
4814
+ &lt;/span&gt;
4815
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;
4816
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;
4817
+ &lt;/a&gt;
4818
+ &lt;/li&gt;
4819
+ &lt;li&gt;
4820
+ &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;
4821
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4822
+ &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;
4823
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4824
+ &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;
4825
+ &lt;/rect&gt;
4826
+ &lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;
4827
+ &lt;/circle&gt;
4828
+ &lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;
4829
+ &lt;/path&gt;
4830
+ &lt;/g&gt;
4831
+ &lt;/svg&gt;
4832
+ &lt;/span&gt;
4833
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;
4834
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;
4835
+ &lt;/a&gt;
4836
+ &lt;/li&gt;
4837
+ &lt;li&gt;
4838
+ &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;
4839
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4840
+ &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;
4841
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4842
+ &lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;
4843
+ &lt;/path&gt;
4844
+ &lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;
4845
+ &lt;/path&gt;
4846
+ &lt;/g&gt;
4847
+ &lt;/svg&gt;
4848
+ &lt;/span&gt;
4849
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;
4850
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;
4851
+ &lt;/a&gt;
4852
+ &lt;/li&gt;
4853
+ &lt;li&gt;
4854
+ &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;
4855
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4856
+ &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;
4857
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4858
+ &lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;
4859
+ &lt;/path&gt;
4860
+ &lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;
4861
+ &lt;/circle&gt;
4862
+ &lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;
4863
+ &lt;/circle&gt;
4864
+ &lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;
4865
+ &lt;/circle&gt;
4866
+ &lt;/g&gt;
4867
+ &lt;/svg&gt;
4868
+ &lt;/span&gt;
4869
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;
4870
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;
4871
+ &lt;/a&gt;
4872
+ &lt;/li&gt;
4873
+ &lt;/ul&gt;
4874
+ &lt;/div&gt;
4875
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-market&quot;&gt;
4876
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;
4877
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4878
+ &lt;li&gt;
4879
+ &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;
4880
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4881
+ &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;
4882
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4883
+ &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;
4884
+ &lt;/path&gt;
4885
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;
4886
+ &lt;/circle&gt;
4887
+ &lt;/g&gt;
4888
+ &lt;/svg&gt;
4889
+ &lt;/span&gt;
4890
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;
4891
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;
4892
+ &lt;/a&gt;
4893
+ &lt;/li&gt;
4894
+ &lt;li&gt;
4895
+ &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;
4896
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4897
+ &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;
4898
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4899
+ &lt;path d=&quot;M3 16.5h14&quot;&gt;
4900
+ &lt;/path&gt;
4901
+ &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;
4902
+ &lt;/rect&gt;
4903
+ &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;
4904
+ &lt;/rect&gt;
4905
+ &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;
4906
+ &lt;/rect&gt;
4907
+ &lt;/g&gt;
4908
+ &lt;/svg&gt;
4909
+ &lt;/span&gt;
4910
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;
4911
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;
4912
+ &lt;/a&gt;
4913
+ &lt;/li&gt;
4914
+ &lt;li&gt;
4915
+ &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;
4916
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4917
+ &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;
4918
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4919
+ &lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;
4920
+ &lt;/path&gt;
4921
+ &lt;/g&gt;
4922
+ &lt;/svg&gt;
4923
+ &lt;/span&gt;
4924
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;
4925
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;
4926
+ &lt;/a&gt;
4927
+ &lt;/li&gt;
4928
+ &lt;li&gt;
4929
+ &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;
4930
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4931
+ &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;
4932
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4933
+ &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;
4934
+ &lt;/rect&gt;
4935
+ &lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;
4936
+ &lt;/path&gt;
4937
+ &lt;/g&gt;
4938
+ &lt;/svg&gt;
4939
+ &lt;/span&gt;
4940
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;
4941
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;
4942
+ &lt;/a&gt;
4943
+ &lt;/li&gt;
4944
+ &lt;li&gt;
4945
+ &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;
4946
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4947
+ &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;
4948
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4949
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;
4950
+ &lt;/circle&gt;
4951
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;
4952
+ &lt;/circle&gt;
4953
+ &lt;path d=&quot;M10 10l5-5&quot;&gt;
4954
+ &lt;/path&gt;
4955
+ &lt;/g&gt;
4956
+ &lt;/svg&gt;
4957
+ &lt;/span&gt;
4958
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;
4959
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;
4960
+ &lt;/a&gt;
4961
+ &lt;/li&gt;
4962
+ &lt;/ul&gt;
4963
+ &lt;/div&gt;
4964
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-content&quot;&gt;
4965
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;
4966
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
4967
+ &lt;li&gt;
4968
+ &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;
4969
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4970
+ &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;
4971
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4972
+ &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;
4973
+ &lt;/rect&gt;
4974
+ &lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;
4975
+ &lt;/path&gt;
4976
+ &lt;/g&gt;
4977
+ &lt;/svg&gt;
4978
+ &lt;/span&gt;
4979
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;
4980
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;
4981
+ &lt;/a&gt;
4982
+ &lt;/li&gt;
4983
+ &lt;li&gt;
4984
+ &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;
4985
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
4986
+ &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;
4987
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4988
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;
4989
+ &lt;/circle&gt;
4990
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;
4991
+ &lt;/circle&gt;
4992
+ &lt;path d=&quot;M10 10l5-5&quot;&gt;
4993
+ &lt;/path&gt;
4994
+ &lt;/g&gt;
4995
+ &lt;/svg&gt;
4996
+ &lt;/span&gt;
4997
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;
4998
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;
4999
+ &lt;/a&gt;
5000
+ &lt;/li&gt;
5001
+ &lt;li&gt;
5002
+ &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;
5003
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5004
+ &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;
5005
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5006
+ &lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;
5007
+ &lt;/circle&gt;
5008
+ &lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;
5009
+ &lt;/path&gt;
5010
+ &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;
5011
+ &lt;/path&gt;
5012
+ &lt;/g&gt;
5013
+ &lt;/svg&gt;
5014
+ &lt;/span&gt;
5015
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;
5016
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;
5017
+ &lt;/a&gt;
5018
+ &lt;/li&gt;
5019
+ &lt;li&gt;
5020
+ &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;
5021
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5022
+ &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;
5023
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5024
+ &lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;
5025
+ &lt;/path&gt;
5026
+ &lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;
5027
+ &lt;/path&gt;
5028
+ &lt;/g&gt;
5029
+ &lt;/svg&gt;
5030
+ &lt;/span&gt;
5031
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;
5032
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;
5033
+ &lt;/a&gt;
5034
+ &lt;/li&gt;
5035
+ &lt;/ul&gt;
5036
+ &lt;/div&gt;
5037
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-customers&quot;&gt;
5038
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;
5039
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
5040
+ &lt;li&gt;
5041
+ &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;
5042
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5043
+ &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;
5044
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5045
+ &lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;
5046
+ &lt;/path&gt;
5047
+ &lt;/g&gt;
5048
+ &lt;/svg&gt;
5049
+ &lt;/span&gt;
5050
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;
5051
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;
5052
+ &lt;/a&gt;
5053
+ &lt;/li&gt;
5054
+ &lt;li&gt;
5055
+ &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;
5056
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5057
+ &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;
5058
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5059
+ &lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;
5060
+ &lt;/path&gt;
5061
+ &lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;
5062
+ &lt;/path&gt;
5063
+ &lt;/g&gt;
5064
+ &lt;/svg&gt;
5065
+ &lt;/span&gt;
5066
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;
5067
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;
5068
+ &lt;/a&gt;
5069
+ &lt;/li&gt;
5070
+ &lt;/ul&gt;
5071
+ &lt;/div&gt;
5072
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c58-Rkj:svc-team&quot;&gt;
5073
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c58-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;
5074
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
5075
+ &lt;li&gt;
5076
+ &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;
5077
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5078
+ &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;
5079
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5080
+ &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;
5081
+ &lt;/path&gt;
5082
+ &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;
5083
+ &lt;/path&gt;
5084
+ &lt;/g&gt;
5085
+ &lt;/svg&gt;
5086
+ &lt;/span&gt;
5087
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;
5088
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;
5089
+ &lt;/a&gt;
5090
+ &lt;/li&gt;
5091
+ &lt;li&gt;
5092
+ &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;
5093
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5094
+ &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;
5095
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5096
+ &lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;
5097
+ &lt;/path&gt;
5098
+ &lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;
5099
+ &lt;/circle&gt;
5100
+ &lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;
5101
+ &lt;/circle&gt;
5102
+ &lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;
5103
+ &lt;/circle&gt;
5104
+ &lt;/g&gt;
5105
+ &lt;/svg&gt;
5106
+ &lt;/span&gt;
5107
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;
5108
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;
5109
+ &lt;/a&gt;
5110
+ &lt;/li&gt;
5111
+ &lt;/ul&gt;
5112
+ &lt;/div&gt;
5113
+ &lt;/div&gt;
5114
+ &lt;div class=&quot;gb-svc__foot&quot;&gt;
5115
+ &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;
5116
+ &lt;/a&gt;
5117
+ &lt;/div&gt;
5118
+ &lt;/dialog&gt;
5119
+ &lt;/div&gt;
5120
+ &lt;div class=&quot;gemboss-topbar-center&quot;&gt;
5121
+ &lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;
5122
+ &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;
5123
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5124
+ &lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;
5125
+ &lt;/circle&gt;
5126
+ &lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;
5127
+ &lt;/path&gt;
5128
+ &lt;/g&gt;
5129
+ &lt;/svg&gt;
5130
+ &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;
5131
+ &lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;
5132
+ &lt;/form&gt;
5133
+ &lt;/div&gt;
5134
+ &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
5135
+ &lt;details class=&quot;gb-account&quot;&gt;
5136
+ &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;
5137
+ &lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;
5138
+ &lt;div class=&quot;gb-account-head&quot;&gt;
5139
+ &lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;
5140
+ &lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;
5141
+ &lt;/div&gt;
5142
+ &lt;/div&gt;
5143
+ &lt;/details&gt;
5144
+ &lt;/div&gt;
5145
+ &lt;/header&gt;
5146
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c58-R0:&quot;&gt;
5147
+ &lt;div class=&quot;gnav-scroll&quot;&gt;
5148
+ &lt;div class=&quot;gnav-group active&quot;&gt;
5149
+ &lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;
5150
+ &lt;span class=&quot;gnav-ico&quot;&gt;
5151
+ &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;
5152
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5153
+ &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;
5154
+ &lt;/rect&gt;
5155
+ &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;
5156
+ &lt;/rect&gt;
5157
+ &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;
5158
+ &lt;/rect&gt;
5159
+ &lt;/g&gt;
5160
+ &lt;/svg&gt;
5161
+ &lt;/span&gt;
5162
+ &lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;
5163
+ &lt;/a&gt;
5164
+ &lt;/div&gt;
5165
+ &lt;/div&gt;
5166
+ &lt;/nav&gt;
5167
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;
5168
+ &lt;/button&gt;
5169
+ &lt;main class=&quot;gemboss-platform-main&quot;&gt;
5170
+ &lt;div style=&quot;padding:24px&quot;&gt;
5171
+ &lt;h1 style=&quot;margin:0&quot;&gt;Review queue&lt;/h1&gt;
5172
+ &lt;/div&gt;
5173
+ &lt;/main&gt;
5174
+ &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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;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;: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;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;
5175
+ &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
5176
+ &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
5177
+ &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;
5178
+ &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
5179
+ &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;
5180
+ &lt;/path&gt;
5181
+ &lt;/svg&gt;
5182
+ &lt;/button&gt;
5183
+ &lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemCapture home&quot;&gt;
5184
+ &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;
5185
+ &lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;
5186
+ &lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;
5187
+ &lt;/polygon&gt;
5188
+ &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;
5189
+ &lt;/path&gt;
5190
+ &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;
5191
+ &lt;/path&gt;
5192
+ &lt;/g&gt;
5193
+ &lt;/svg&gt;
5194
+ &lt;span class=&quot;gb-brand-name&quot;&gt;GemCapture&lt;/span&gt;
5195
+ &lt;/a&gt;
5196
+ &lt;span data-gb-service-switcher=&quot;gemcapture&quot; hidden=&quot;&quot;&gt;
5197
+ &lt;/span&gt;
5198
+ &lt;/div&gt;
5199
+ &lt;div class=&quot;gemboss-topbar-center&quot;&gt;
5200
+ &lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;
5201
+ &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;
5202
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5203
+ &lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;
5204
+ &lt;/circle&gt;
5205
+ &lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;
5206
+ &lt;/path&gt;
5207
+ &lt;/g&gt;
5208
+ &lt;/svg&gt;
5209
+ &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;
5210
+ &lt;kbd class=&quot;gemboss-topbar-search-kbd&quot; aria-hidden=&quot;true&quot;&gt;⌘K&lt;/kbd&gt;
5211
+ &lt;/form&gt;
5212
+ &lt;/div&gt;
5213
+ &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
5214
+ &lt;details class=&quot;gb-account&quot;&gt;
5215
+ &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;
5216
+ &lt;div role=&quot;menu&quot; class=&quot;gemboss-popover-surface gemboss-account-menu&quot;&gt;
5217
+ &lt;div class=&quot;gb-account-head&quot;&gt;
5218
+ &lt;div class=&quot;gb-account-name&quot;&gt;Minh Anh&lt;/div&gt;
5219
+ &lt;div class=&quot;gb-account-email&quot;&gt;ma@gemboss.ai&lt;/div&gt;
5220
+ &lt;/div&gt;
5221
+ &lt;/div&gt;
5222
+ &lt;/details&gt;
5223
+ &lt;/div&gt;
5224
+ &lt;/header&gt;
5225
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c59-R0:&quot;&gt;
5226
+ &lt;div class=&quot;gnav-scroll&quot;&gt;
5227
+ &lt;div class=&quot;gnav-group active&quot;&gt;
5228
+ &lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;
5229
+ &lt;span class=&quot;gnav-ico&quot;&gt;
5230
+ &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;
5231
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5232
+ &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;
5233
+ &lt;/rect&gt;
5234
+ &lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;
5235
+ &lt;/path&gt;
5236
+ &lt;/g&gt;
5237
+ &lt;/svg&gt;
5238
+ &lt;/span&gt;
5239
+ &lt;span class=&quot;gnav-label&quot;&gt;Captures&lt;/span&gt;
5240
+ &lt;/a&gt;
5241
+ &lt;/div&gt;
5242
+ &lt;/div&gt;
5243
+ &lt;/nav&gt;
5244
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;
5245
+ &lt;/button&gt;
5246
+ &lt;main class=&quot;gemboss-platform-main&quot;&gt;
5247
+ &lt;div style=&quot;padding:24px&quot;&gt;
5248
+ &lt;h1 style=&quot;margin:0&quot;&gt;Live captures&lt;/h1&gt;
5249
+ &lt;/div&gt;
5250
+ &lt;/main&gt;
5251
+ &lt;/div&gt;
5252
+ &lt;script src=&quot;../src/kit-plain.js&quot;&gt;
5253
+ &lt;/script&gt;
5254
+ &lt;script src=&quot;../src/service-switcher-plain.js&quot;&gt;
5255
+ &lt;/script&gt;
5256
+ &lt;script&gt;gembossUI.initMenus(); gembossUI.initServiceSwitcher();&lt;/script&gt;</code></pre></details></figure></section>
5257
+ <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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;: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;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;:c60-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;:c60-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c60-Rkj:svc-t&quot;&gt;&lt;div class=&quot;gb-svc__head&quot;&gt;&lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c60-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;:c60-Rkj:svc-gemboss&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-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;:c60-Rkj:svc-build&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-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;:c60-Rkj:svc-market&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-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;:c60-Rkj:svc-content&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-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;:c60-Rkj:svc-customers&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-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;:c60-Rkj:svc-team&quot;&gt;&lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-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;:c60-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;
5258
+ &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
5259
+ &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
5260
+ &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;:c60-R0:&quot;&gt;
5261
+ &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
5262
+ &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;
5263
+ &lt;/path&gt;
5264
+ &lt;/svg&gt;
5265
+ &lt;/button&gt;
5266
+ &lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;
5267
+ &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;
5268
+ &lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;
5269
+ &lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;
5270
+ &lt;/polygon&gt;
5271
+ &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;
5272
+ &lt;/path&gt;
5273
+ &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;
5274
+ &lt;/path&gt;
5275
+ &lt;/g&gt;
5276
+ &lt;/svg&gt;
5277
+ &lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;
5278
+ &lt;/a&gt;
5279
+ &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;:c60-Rkj:svc&quot; aria-label=&quot;Switch service&quot; title=&quot;Switch service&quot;&gt;
5280
+ &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;
5281
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5282
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
5283
+ &lt;/circle&gt;
5284
+ &lt;circle cx=&quot;10&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
5285
+ &lt;/circle&gt;
5286
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;4.5&quot; r=&quot;1&quot;&gt;
5287
+ &lt;/circle&gt;
5288
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
5289
+ &lt;/circle&gt;
5290
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
5291
+ &lt;/circle&gt;
5292
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;10&quot; r=&quot;1&quot;&gt;
5293
+ &lt;/circle&gt;
5294
+ &lt;circle cx=&quot;4.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
5295
+ &lt;/circle&gt;
5296
+ &lt;circle cx=&quot;10&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
5297
+ &lt;/circle&gt;
5298
+ &lt;circle cx=&quot;15.5&quot; cy=&quot;15.5&quot; r=&quot;1&quot;&gt;
5299
+ &lt;/circle&gt;
5300
+ &lt;/g&gt;
5301
+ &lt;/svg&gt;
5302
+ &lt;/button&gt;
5303
+ &lt;dialog id=&quot;:c60-Rkj:svc&quot; class=&quot;gb-svc&quot; aria-labelledby=&quot;:c60-Rkj:svc-t&quot;&gt;
5304
+ &lt;div class=&quot;gb-svc__head&quot;&gt;
5305
+ &lt;h2 class=&quot;gb-svc__title&quot; id=&quot;:c60-Rkj:svc-t&quot;&gt;Gem services&lt;/h2&gt;
5306
+ &lt;button type=&quot;button&quot; class=&quot;ui-modal__close&quot; aria-label=&quot;Close&quot;&gt;
5307
+ &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;
5308
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5309
+ &lt;path d=&quot;M5 5l10 10M15 5 5 15&quot;&gt;
5310
+ &lt;/path&gt;
5311
+ &lt;/g&gt;
5312
+ &lt;/svg&gt;
5313
+ &lt;/button&gt;
5314
+ &lt;/div&gt;
5315
+ &lt;div class=&quot;gb-svc__search&quot;&gt;
5316
+ &lt;label class=&quot;gemboss-field gemboss-field--group&quot;&gt;
5317
+ &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;
5318
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5319
+ &lt;circle cx=&quot;8.8&quot; cy=&quot;8.8&quot; r=&quot;5.3&quot;&gt;
5320
+ &lt;/circle&gt;
5321
+ &lt;path d=&quot;M12.8 12.8 17 17&quot;&gt;
5322
+ &lt;/path&gt;
5323
+ &lt;/g&gt;
5324
+ &lt;/svg&gt;
5325
+ &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;
5326
+ &lt;/label&gt;
5327
+ &lt;/div&gt;
5328
+ &lt;div class=&quot;gb-svc__body&quot;&gt;
5329
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c60-Rkj:svc-gemboss&quot;&gt;
5330
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-Rkj:svc-gemboss&quot;&gt;GemBoss&lt;/h3&gt;
5331
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
5332
+ &lt;li&gt;
5333
+ &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;
5334
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5335
+ &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;
5336
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5337
+ &lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
5338
+ &lt;/rect&gt;
5339
+ &lt;rect x=&quot;11&quot; y=&quot;3&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
5340
+ &lt;/rect&gt;
5341
+ &lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
5342
+ &lt;/rect&gt;
5343
+ &lt;rect x=&quot;11&quot; y=&quot;11&quot; width=&quot;6&quot; height=&quot;6&quot; rx=&quot;1.3&quot;&gt;
5344
+ &lt;/rect&gt;
5345
+ &lt;/g&gt;
5346
+ &lt;/svg&gt;
5347
+ &lt;/span&gt;
5348
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemBoss&lt;/span&gt;
5349
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller app and the ops console.&lt;/span&gt;
5350
+ &lt;/a&gt;
5351
+ &lt;/li&gt;
5352
+ &lt;/ul&gt;
5353
+ &lt;/div&gt;
5354
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c60-Rkj:svc-build&quot;&gt;
5355
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-Rkj:svc-build&quot;&gt;Build the store&lt;/h3&gt;
5356
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
5357
+ &lt;li&gt;
5358
+ &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;
5359
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5360
+ &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;
5361
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5362
+ &lt;path d=&quot;M10 3 17 6.8 10 10.6 3 6.8z&quot;&gt;
5363
+ &lt;/path&gt;
5364
+ &lt;path d=&quot;M3 10.1l7 3.8 7-3.8&quot;&gt;
5365
+ &lt;/path&gt;
5366
+ &lt;path d=&quot;M3 13.4l7 3.8 7-3.8&quot;&gt;
5367
+ &lt;/path&gt;
5368
+ &lt;/g&gt;
5369
+ &lt;/svg&gt;
5370
+ &lt;/span&gt;
5371
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemFactory&lt;/span&gt;
5372
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Review sections, elements and templates.&lt;/span&gt;
5373
+ &lt;/a&gt;
5374
+ &lt;/li&gt;
5375
+ &lt;li&gt;
5376
+ &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;
5377
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5378
+ &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;
5379
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5380
+ &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;
5381
+ &lt;/rect&gt;
5382
+ &lt;circle cx=&quot;7.3&quot; cy=&quot;7.8&quot; r=&quot;1.3&quot;&gt;
5383
+ &lt;/circle&gt;
5384
+ &lt;path d=&quot;M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6&quot;&gt;
5385
+ &lt;/path&gt;
5386
+ &lt;/g&gt;
5387
+ &lt;/svg&gt;
5388
+ &lt;/span&gt;
5389
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemMedia&lt;/span&gt;
5390
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Images and videos made for stores, and their cost.&lt;/span&gt;
5391
+ &lt;/a&gt;
5392
+ &lt;/li&gt;
5393
+ &lt;li&gt;
5394
+ &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;
5395
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5396
+ &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;
5397
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5398
+ &lt;path d=&quot;M5 2.8h6.8l3.2 3.2v11.2H5z&quot;&gt;
5399
+ &lt;/path&gt;
5400
+ &lt;path d=&quot;M11.8 2.8V6H15M7.5 10h5M7.5 13h5&quot;&gt;
5401
+ &lt;/path&gt;
5402
+ &lt;/g&gt;
5403
+ &lt;/svg&gt;
5404
+ &lt;/span&gt;
5405
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemForm&lt;/span&gt;
5406
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Form submissions from stores.&lt;/span&gt;
5407
+ &lt;/a&gt;
5408
+ &lt;/li&gt;
5409
+ &lt;li&gt;
5410
+ &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;
5411
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5412
+ &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;
5413
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5414
+ &lt;path d=&quot;M3 5h14M3 10h14M3 15h14&quot;&gt;
5415
+ &lt;/path&gt;
5416
+ &lt;circle cx=&quot;7&quot; cy=&quot;5&quot; r=&quot;1.6&quot;&gt;
5417
+ &lt;/circle&gt;
5418
+ &lt;circle cx=&quot;13&quot; cy=&quot;10&quot; r=&quot;1.6&quot;&gt;
5419
+ &lt;/circle&gt;
5420
+ &lt;circle cx=&quot;9&quot; cy=&quot;15&quot; r=&quot;1.6&quot;&gt;
5421
+ &lt;/circle&gt;
5422
+ &lt;/g&gt;
5423
+ &lt;/svg&gt;
5424
+ &lt;/span&gt;
5425
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemX&lt;/span&gt;
5426
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Tests and personalization across every store.&lt;/span&gt;
5427
+ &lt;/a&gt;
5428
+ &lt;/li&gt;
5429
+ &lt;/ul&gt;
5430
+ &lt;/div&gt;
5431
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c60-Rkj:svc-market&quot;&gt;
5432
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-Rkj:svc-market&quot;&gt;Read the market&lt;/h3&gt;
5433
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
5434
+ &lt;li&gt;
5435
+ &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;
5436
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5437
+ &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;
5438
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5439
+ &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;
5440
+ &lt;/path&gt;
5441
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.5&quot;&gt;
5442
+ &lt;/circle&gt;
5443
+ &lt;/g&gt;
5444
+ &lt;/svg&gt;
5445
+ &lt;/span&gt;
5446
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemWatcher&lt;/span&gt;
5447
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Store and market intelligence.&lt;/span&gt;
5448
+ &lt;/a&gt;
5449
+ &lt;/li&gt;
5450
+ &lt;li&gt;
5451
+ &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;
5452
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5453
+ &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;
5454
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5455
+ &lt;path d=&quot;M3 16.5h14&quot;&gt;
5456
+ &lt;/path&gt;
5457
+ &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;
5458
+ &lt;/rect&gt;
5459
+ &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;
5460
+ &lt;/rect&gt;
5461
+ &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;
5462
+ &lt;/rect&gt;
5463
+ &lt;/g&gt;
5464
+ &lt;/svg&gt;
5465
+ &lt;/span&gt;
5466
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemMarket&lt;/span&gt;
5467
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Each store&amp;#x27;s market read and its competitors.&lt;/span&gt;
5468
+ &lt;/a&gt;
5469
+ &lt;/li&gt;
5470
+ &lt;li&gt;
5471
+ &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;
5472
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5473
+ &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;
5474
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5475
+ &lt;path d=&quot;M2.5 10h3l2-5 3 10 2-5h5&quot;&gt;
5476
+ &lt;/path&gt;
5477
+ &lt;/g&gt;
5478
+ &lt;/svg&gt;
5479
+ &lt;/span&gt;
5480
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemPixel&lt;/span&gt;
5481
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Events every store sends, and whether they add up.&lt;/span&gt;
5482
+ &lt;/a&gt;
5483
+ &lt;/li&gt;
5484
+ &lt;li&gt;
5485
+ &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;
5486
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5487
+ &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;
5488
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5489
+ &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;
5490
+ &lt;/rect&gt;
5491
+ &lt;path d=&quot;M2.5 7.5h15M6 11h8M6 13.5h5&quot;&gt;
5492
+ &lt;/path&gt;
5493
+ &lt;/g&gt;
5494
+ &lt;/svg&gt;
5495
+ &lt;/span&gt;
5496
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCapture&lt;/span&gt;
5497
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Page captures and visual checks.&lt;/span&gt;
5498
+ &lt;/a&gt;
5499
+ &lt;/li&gt;
5500
+ &lt;li&gt;
5501
+ &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;
5502
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5503
+ &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;
5504
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5505
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;
5506
+ &lt;/circle&gt;
5507
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;
5508
+ &lt;/circle&gt;
5509
+ &lt;path d=&quot;M10 10l5-5&quot;&gt;
5510
+ &lt;/path&gt;
5511
+ &lt;/g&gt;
5512
+ &lt;/svg&gt;
5513
+ &lt;/span&gt;
5514
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Search Radar&lt;/span&gt;
5515
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Rankings on the App Store, Google and AI answers.&lt;/span&gt;
5516
+ &lt;/a&gt;
5517
+ &lt;/li&gt;
5518
+ &lt;/ul&gt;
5519
+ &lt;/div&gt;
5520
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c60-Rkj:svc-content&quot;&gt;
5521
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-Rkj:svc-content&quot;&gt;Content and community&lt;/h3&gt;
5522
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
5523
+ &lt;li&gt;
5524
+ &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;
5525
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5526
+ &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;
5527
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5528
+ &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;
5529
+ &lt;/rect&gt;
5530
+ &lt;path d=&quot;M6 7h8M6 10h8M6 13h5&quot;&gt;
5531
+ &lt;/path&gt;
5532
+ &lt;/g&gt;
5533
+ &lt;/svg&gt;
5534
+ &lt;/span&gt;
5535
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemPress&lt;/span&gt;
5536
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Articles and the content store.&lt;/span&gt;
5537
+ &lt;/a&gt;
5538
+ &lt;/li&gt;
5539
+ &lt;li&gt;
5540
+ &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;
5541
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5542
+ &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;
5543
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5544
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;7&quot;&gt;
5545
+ &lt;/circle&gt;
5546
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;3.5&quot;&gt;
5547
+ &lt;/circle&gt;
5548
+ &lt;path d=&quot;M10 10l5-5&quot;&gt;
5549
+ &lt;/path&gt;
5550
+ &lt;/g&gt;
5551
+ &lt;/svg&gt;
5552
+ &lt;/span&gt;
5553
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Content Radar&lt;/span&gt;
5554
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;From the topics worth writing to articles.&lt;/span&gt;
5555
+ &lt;/a&gt;
5556
+ &lt;/li&gt;
5557
+ &lt;li&gt;
5558
+ &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;
5559
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5560
+ &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;
5561
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5562
+ &lt;circle cx=&quot;7.5&quot; cy=&quot;7.3&quot; r=&quot;2.8&quot;&gt;
5563
+ &lt;/circle&gt;
5564
+ &lt;path d=&quot;M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4&quot;&gt;
5565
+ &lt;/path&gt;
5566
+ &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;
5567
+ &lt;/path&gt;
5568
+ &lt;/g&gt;
5569
+ &lt;/svg&gt;
5570
+ &lt;/span&gt;
5571
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity&lt;/span&gt;
5572
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The seller community.&lt;/span&gt;
5573
+ &lt;/a&gt;
5574
+ &lt;/li&gt;
5575
+ &lt;li&gt;
5576
+ &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;
5577
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5578
+ &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;
5579
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5580
+ &lt;path d=&quot;M3 8v4h3l6 4V4L6 8H3z&quot;&gt;
5581
+ &lt;/path&gt;
5582
+ &lt;path d=&quot;M15 7.5a3.5 3.5 0 0 1 0 5&quot;&gt;
5583
+ &lt;/path&gt;
5584
+ &lt;/g&gt;
5585
+ &lt;/svg&gt;
5586
+ &lt;/span&gt;
5587
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCommunity News&lt;/span&gt;
5588
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;News posts and how they are read.&lt;/span&gt;
5589
+ &lt;/a&gt;
5590
+ &lt;/li&gt;
5591
+ &lt;/ul&gt;
5592
+ &lt;/div&gt;
5593
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c60-Rkj:svc-customers&quot;&gt;
5594
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-Rkj:svc-customers&quot;&gt;Customers&lt;/h3&gt;
5595
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
5596
+ &lt;li&gt;
5597
+ &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;
5598
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5599
+ &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;
5600
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5601
+ &lt;path d=&quot;M3 4.5h14v9H8.5L5 16.5v-3H3z&quot;&gt;
5602
+ &lt;/path&gt;
5603
+ &lt;/g&gt;
5604
+ &lt;/svg&gt;
5605
+ &lt;/span&gt;
5606
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemCare&lt;/span&gt;
5607
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The customer care inbox.&lt;/span&gt;
5608
+ &lt;/a&gt;
5609
+ &lt;/li&gt;
5610
+ &lt;li&gt;
5611
+ &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;
5612
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5613
+ &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;
5614
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5615
+ &lt;path d=&quot;M3 11l2-7h10l2 7v5H3z&quot;&gt;
5616
+ &lt;/path&gt;
5617
+ &lt;path d=&quot;M3 11h4l1 2h4l1-2h4&quot;&gt;
5618
+ &lt;/path&gt;
5619
+ &lt;/g&gt;
5620
+ &lt;/svg&gt;
5621
+ &lt;/span&gt;
5622
+ &lt;span class=&quot;gb-svc__name&quot;&gt;GemFeedback&lt;/span&gt;
5623
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;The feedback backlog.&lt;/span&gt;
5624
+ &lt;/a&gt;
5625
+ &lt;/li&gt;
5626
+ &lt;/ul&gt;
5627
+ &lt;/div&gt;
5628
+ &lt;div class=&quot;gb-svc__group&quot; role=&quot;group&quot; aria-labelledby=&quot;:c60-Rkj:svc-team&quot;&gt;
5629
+ &lt;h3 class=&quot;gb-svc__heading&quot; id=&quot;:c60-Rkj:svc-team&quot;&gt;Team and partners&lt;/h3&gt;
5630
+ &lt;ul class=&quot;gb-svc__grid&quot; role=&quot;list&quot;&gt;
5631
+ &lt;li&gt;
5632
+ &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;
5633
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5634
+ &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;
5635
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5636
+ &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;
5637
+ &lt;/path&gt;
5638
+ &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;
5639
+ &lt;/path&gt;
5640
+ &lt;/g&gt;
5641
+ &lt;/svg&gt;
5642
+ &lt;/span&gt;
5643
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Partner Radar&lt;/span&gt;
5644
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Partners and agencies, as a CRM.&lt;/span&gt;
5645
+ &lt;/a&gt;
5646
+ &lt;/li&gt;
5647
+ &lt;li&gt;
5648
+ &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;
5649
+ &lt;span class=&quot;gb-svc__mark&quot; aria-hidden=&quot;true&quot;&gt;
5650
+ &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;
5651
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5652
+ &lt;path d=&quot;M8 5h9M8 10h9M8 15h9&quot;&gt;
5653
+ &lt;/path&gt;
5654
+ &lt;circle cx=&quot;4&quot; cy=&quot;5&quot; r=&quot;.9&quot;&gt;
5655
+ &lt;/circle&gt;
5656
+ &lt;circle cx=&quot;4&quot; cy=&quot;10&quot; r=&quot;.9&quot;&gt;
5657
+ &lt;/circle&gt;
5658
+ &lt;circle cx=&quot;4&quot; cy=&quot;15&quot; r=&quot;.9&quot;&gt;
5659
+ &lt;/circle&gt;
5660
+ &lt;/g&gt;
5661
+ &lt;/svg&gt;
5662
+ &lt;/span&gt;
5663
+ &lt;span class=&quot;gb-svc__name&quot;&gt;Taskdesk&lt;/span&gt;
5664
+ &lt;span class=&quot;gb-svc__purpose&quot;&gt;Every job the fleet is running.&lt;/span&gt;
5665
+ &lt;/a&gt;
5666
+ &lt;/li&gt;
5667
+ &lt;/ul&gt;
5668
+ &lt;/div&gt;
5669
+ &lt;/div&gt;
5670
+ &lt;div class=&quot;gb-svc__foot&quot;&gt;
5671
+ &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;
5672
+ &lt;/a&gt;
5673
+ &lt;/div&gt;
5674
+ &lt;/dialog&gt;
3777
5675
  &lt;/div&gt;
3778
5676
  &lt;div class=&quot;gemboss-topbar-center&quot;&gt;
3779
5677
  &lt;form role=&quot;search&quot; method=&quot;get&quot; action=&quot;#&quot; class=&quot;gemboss-topbar-search&quot;&gt;
@@ -3806,7 +5704,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3806
5704
  &lt;/details&gt;
3807
5705
  &lt;/div&gt;
3808
5706
  &lt;/header&gt;
3809
- &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c58-R0:&quot;&gt;
5707
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c60-R0:&quot;&gt;
3810
5708
  &lt;div class=&quot;gnav-scroll&quot;&gt;
3811
5709
  &lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;
3812
5710
  &lt;div class=&quot;gnav-group active&quot;&gt;
@@ -3884,10 +5782,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3884
5782
  &lt;/div&gt;
3885
5783
  &lt;/main&gt;
3886
5784
  &lt;/div&gt;</code></pre></details></figure></section>
3887
- <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/settings-dialog.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;/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;:c59-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;
5785
+ <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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;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;:c61-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;
3888
5786
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3889
5787
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3890
- &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;
5788
+ &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;
3891
5789
  &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
3892
5790
  &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;
3893
5791
  &lt;/path&gt;
@@ -3912,7 +5810,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3912
5810
  &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
3913
5811
  &lt;/div&gt;
3914
5812
  &lt;/header&gt;
3915
- &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c59-R0:&quot;&gt;
5813
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c61-R0:&quot;&gt;
3916
5814
  &lt;div class=&quot;gnav-scroll&quot;&gt;
3917
5815
  &lt;div class=&quot;gnav-group&quot;&gt;
3918
5816
  &lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;
@@ -4004,10 +5902,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4004
5902
  &lt;/span&gt;
4005
5903
  &lt;/div&gt;
4006
5904
  &lt;/div&gt;</code></pre></details></figure></section>
4007
- <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/settings-dialog.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;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;:c61-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;
5905
+ <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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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-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;
4008
5906
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
4009
5907
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
4010
- &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;
5908
+ &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;
4011
5909
  &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
4012
5910
  &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;
4013
5911
  &lt;/path&gt;
@@ -4032,7 +5930,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4032
5930
  &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
4033
5931
  &lt;/div&gt;
4034
5932
  &lt;/header&gt;
4035
- &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c61-R0:&quot;&gt;
5933
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c63-R0:&quot;&gt;
4036
5934
  &lt;div class=&quot;gnav-scroll&quot;&gt;
4037
5935
  &lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;
4038
5936
  &lt;div class=&quot;gnav-group active&quot;&gt;
@@ -4098,10 +5996,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4098
5996
  &lt;/div&gt;
4099
5997
  &lt;/div&gt;
4100
5998
  &lt;/main&gt;
4101
- &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/settings-dialog.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;: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;/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;: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;/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;
5999
+ &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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;:c64-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;:c64-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;
4102
6000
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
4103
6001
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
4104
- &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;:c62-R0:&quot;&gt;
6002
+ &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;:c64-R0:&quot;&gt;
4105
6003
  &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
4106
6004
  &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;
4107
6005
  &lt;/path&gt;
@@ -4126,7 +6024,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4126
6024
  &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
4127
6025
  &lt;/div&gt;
4128
6026
  &lt;/header&gt;
4129
- &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c62-R0:&quot;&gt;
6027
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c64-R0:&quot;&gt;
4130
6028
  &lt;div class=&quot;gnav-scroll&quot;&gt;
4131
6029
  &lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;
4132
6030
  &lt;div class=&quot;gnav-group active&quot;&gt;
@@ -4195,7 +6093,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4195
6093
  &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;
4196
6094
  &lt;div class=&quot;ui-card&quot;&gt;Một mục trong feed, cột 720px.&lt;/div&gt;
4197
6095
  &lt;/div&gt;</code></pre></details></figure></section>
4198
- <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/settings-dialog.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;:c65-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;:c65-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;
6096
+ <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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;:c67-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;:c67-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;
4199
6097
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
4200
6098
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
4201
6099
  &lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;
@@ -4254,11 +6152,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4254
6152
  &lt;/path&gt;
4255
6153
  &lt;/g&gt;
4256
6154
  &lt;/svg&gt;
4257
- &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;:c65-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;
6155
+ &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;:c67-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;
4258
6156
  &lt;/div&gt;
4259
6157
  &lt;p class=&quot;gb-search-empty&quot; aria-live=&quot;polite&quot;&gt;
4260
6158
  &lt;/p&gt;
4261
- &lt;div class=&quot;gb-search-results&quot; id=&quot;:c65-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;
6159
+ &lt;div class=&quot;gb-search-results&quot; id=&quot;:c67-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;
4262
6160
  &lt;/div&gt;
4263
6161
  &lt;div class=&quot;gb-search-foot&quot; aria-hidden=&quot;true&quot;&gt;
4264
6162
  &lt;span&gt;↵ open&lt;/span&gt;
@@ -4351,7 +6249,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4351
6249
  &lt;/section&gt;
4352
6250
  &lt;/div&gt;
4353
6251
  &lt;/div&gt;
4354
- &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/settings-dialog.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;:c65-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;:c65-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;
6252
+ &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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;:c67-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;:c67-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;
4355
6253
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
4356
6254
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
4357
6255
  &lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;
@@ -4410,11 +6308,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4410
6308
  &lt;/path&gt;
4411
6309
  &lt;/g&gt;
4412
6310
  &lt;/svg&gt;
4413
- &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;:c65-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;
6311
+ &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;:c67-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;
4414
6312
  &lt;/div&gt;
4415
6313
  &lt;p class=&quot;gb-search-empty&quot; aria-live=&quot;polite&quot;&gt;
4416
6314
  &lt;/p&gt;
4417
- &lt;div class=&quot;gb-search-results&quot; id=&quot;:c65-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;
6315
+ &lt;div class=&quot;gb-search-results&quot; id=&quot;:c67-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;
4418
6316
  &lt;/div&gt;
4419
6317
  &lt;div class=&quot;gb-search-foot&quot; aria-hidden=&quot;true&quot;&gt;
4420
6318
  &lt;span&gt;↵ open&lt;/span&gt;
@@ -4611,7 +6509,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4611
6509
  &lt;/a&gt;
4612
6510
  &lt;/li&gt;
4613
6511
  &lt;/ol&gt;</code></pre></details></figure></section>
4614
- <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/settings-dialog.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;
6512
+ <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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;
4615
6513
  &lt;div class=&quot;gb-auth-split&quot;&gt;
4616
6514
  &lt;div class=&quot;gb-auth-stage&quot;&gt;
4617
6515
  &lt;div class=&quot;gb-auth-card&quot;&gt;
@@ -4660,7 +6558,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4660
6558
  &lt;/div&gt;
4661
6559
  &lt;/aside&gt;
4662
6560
  &lt;/div&gt;
4663
- &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/settings-dialog.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;
6561
+ &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/settings-dialog.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/service-switcher.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;
4664
6562
  &lt;div class=&quot;gb-auth-split&quot;&gt;
4665
6563
  &lt;div class=&quot;gb-auth-stage&quot;&gt;
4666
6564
  &lt;div class=&quot;gb-auth-card&quot;&gt;
@@ -4710,7 +6608,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4710
6608
  &lt;/aside&gt;
4711
6609
  &lt;/div&gt;
4712
6610
  &lt;/main&gt;</code></pre></details></figure></section>
4713
- <section id="setup"><h2>Hướng dẫn thiết lập</h2><p><code>SetupGuide</code> (0.30.0, CSS <code>setup-guide.css</code> do component tự nạp): Setup guide của admin (StoreChecklistCard) thành component. Đầu thẻ có số đã xong và thanh; các bước gập, bước mở là bước đầu chưa xong; bấm đầu thẻ để gập cả hướng dẫn. Toàn <code>&lt;details&gt;</code>, một nhóm <code>name</code> nên trình duyệt giữ một bước mở, không cần script: trang HTML thuần viết đúng markup này là chạy.</p><figure class="cat-demo"><figcaption>SetupGuide</figcaption><div class="cat-live"><details class="ui-card ui-setup" open=""><summary class="ui-setup__head"><h2 class="ui-setup__title">Telegram alerts</h2><span class="ui-badge ui-badge--warning">1/3</span></summary><div class="ui-setup__inner"><p class="ui-setup__desc">Ping a chat the moment a registration lands.</p><progress class="ui-setup__bar" value="1" max="3" aria-label="Setup progress">1/3</progress><div class="ui-setup__steps"><details class="ui-setup__step" name="gb-setup:c74-R0:" data-state="done"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">Connect a bot</span></summary><div class="ui-setup__body"><p>Sending as @gemform_alerts_bot.</p></div></details><details class="ui-setup__step" name="gb-setup:c74-R0:" open="" data-state="todo"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Choose where alerts go</span></summary><div class="ui-setup__body"><p>Say hi to the bot from the chat you want alerts in, then find it here.</p><button type="button" class="ui-btn">Find my chat</button></div></details><details class="ui-setup__step" name="gb-setup:c74-R0:" data-state="todo"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Send a test alert</span></summary><div class="ui-setup__body"><p>One message to every chat, to see it land.</p></div></details></div></div></details></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;details class=&quot;ui-card ui-setup&quot; open=&quot;&quot;&gt;
6611
+ <section id="setup"><h2>Hướng dẫn thiết lập</h2><p><code>SetupGuide</code> (0.30.0, CSS <code>setup-guide.css</code> do component tự nạp): Setup guide của admin (StoreChecklistCard) thành component. Đầu thẻ có số đã xong và thanh; các bước gập, bước mở là bước đầu chưa xong; bấm đầu thẻ để gập cả hướng dẫn. Toàn <code>&lt;details&gt;</code>, một nhóm <code>name</code> nên trình duyệt giữ một bước mở, không cần script: trang HTML thuần viết đúng markup này là chạy.</p><figure class="cat-demo"><figcaption>SetupGuide</figcaption><div class="cat-live"><details class="ui-card ui-setup" open=""><summary class="ui-setup__head"><h2 class="ui-setup__title">Telegram alerts</h2><span class="ui-badge ui-badge--warning">1/3</span></summary><div class="ui-setup__inner"><p class="ui-setup__desc">Ping a chat the moment a registration lands.</p><progress class="ui-setup__bar" value="1" max="3" aria-label="Setup progress">1/3</progress><div class="ui-setup__steps"><details class="ui-setup__step" name="gb-setup:c76-R0:" data-state="done"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">✓</span><span class="ui-setup__label">Connect a bot</span></summary><div class="ui-setup__body"><p>Sending as @gemform_alerts_bot.</p></div></details><details class="ui-setup__step" name="gb-setup:c76-R0:" open="" data-state="todo"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Choose where alerts go</span></summary><div class="ui-setup__body"><p>Say hi to the bot from the chat you want alerts in, then find it here.</p><button type="button" class="ui-btn">Find my chat</button></div></details><details class="ui-setup__step" name="gb-setup:c76-R0:" data-state="todo"><summary class="ui-setup__row"><span class="ui-setup__mark" aria-hidden="true">○</span><span class="ui-setup__label">Send a test alert</span></summary><div class="ui-setup__body"><p>One message to every chat, to see it land.</p></div></details></div></div></details></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;details class=&quot;ui-card ui-setup&quot; open=&quot;&quot;&gt;
4714
6612
  &lt;summary class=&quot;ui-setup__head&quot;&gt;
4715
6613
  &lt;h2 class=&quot;ui-setup__title&quot;&gt;Telegram alerts&lt;/h2&gt;
4716
6614
  &lt;span class=&quot;ui-badge ui-badge--warning&quot;&gt;1/3&lt;/span&gt;
@@ -4719,7 +6617,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4719
6617
  &lt;p class=&quot;ui-setup__desc&quot;&gt;Ping a chat the moment a registration lands.&lt;/p&gt;
4720
6618
  &lt;progress class=&quot;ui-setup__bar&quot; value=&quot;1&quot; max=&quot;3&quot; aria-label=&quot;Setup progress&quot;&gt;1/3&lt;/progress&gt;
4721
6619
  &lt;div class=&quot;ui-setup__steps&quot;&gt;
4722
- &lt;details class=&quot;ui-setup__step&quot; name=&quot;gb-setup:c74-R0:&quot; data-state=&quot;done&quot;&gt;
6620
+ &lt;details class=&quot;ui-setup__step&quot; name=&quot;gb-setup:c76-R0:&quot; data-state=&quot;done&quot;&gt;
4723
6621
  &lt;summary class=&quot;ui-setup__row&quot;&gt;
4724
6622
  &lt;span class=&quot;ui-setup__mark&quot; aria-hidden=&quot;true&quot;&gt;✓&lt;/span&gt;
4725
6623
  &lt;span class=&quot;ui-setup__label&quot;&gt;Connect a bot&lt;/span&gt;
@@ -4728,7 +6626,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4728
6626
  &lt;p&gt;Sending as @gemform_alerts_bot.&lt;/p&gt;
4729
6627
  &lt;/div&gt;
4730
6628
  &lt;/details&gt;
4731
- &lt;details class=&quot;ui-setup__step&quot; name=&quot;gb-setup:c74-R0:&quot; open=&quot;&quot; data-state=&quot;todo&quot;&gt;
6629
+ &lt;details class=&quot;ui-setup__step&quot; name=&quot;gb-setup:c76-R0:&quot; open=&quot;&quot; data-state=&quot;todo&quot;&gt;
4732
6630
  &lt;summary class=&quot;ui-setup__row&quot;&gt;
4733
6631
  &lt;span class=&quot;ui-setup__mark&quot; aria-hidden=&quot;true&quot;&gt;○&lt;/span&gt;
4734
6632
  &lt;span class=&quot;ui-setup__label&quot;&gt;Choose where alerts go&lt;/span&gt;
@@ -4738,7 +6636,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4738
6636
  &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Find my chat&lt;/button&gt;
4739
6637
  &lt;/div&gt;
4740
6638
  &lt;/details&gt;
4741
- &lt;details class=&quot;ui-setup__step&quot; name=&quot;gb-setup:c74-R0:&quot; data-state=&quot;todo&quot;&gt;
6639
+ &lt;details class=&quot;ui-setup__step&quot; name=&quot;gb-setup:c76-R0:&quot; data-state=&quot;todo&quot;&gt;
4742
6640
  &lt;summary class=&quot;ui-setup__row&quot;&gt;
4743
6641
  &lt;span class=&quot;ui-setup__mark&quot; aria-hidden=&quot;true&quot;&gt;○&lt;/span&gt;
4744
6642
  &lt;span class=&quot;ui-setup__label&quot;&gt;Send a test alert&lt;/span&gt;
@@ -5097,60 +6995,60 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5097
6995
  &lt;/div&gt;
5098
6996
  &lt;/div&gt;
5099
6997
  &lt;/section&gt;</code></pre></details></figure></section>
5100
- <section id="assistant-engine"><h2>Trợ lý: chọn engine</h2><p><code>EnginePicker</code> (<code>@gemboss/ui/assistant</code>, CSS <code>assistant-engine.css</code> do component tự nạp). Một chip ở hàng soạn tin như admin: tên engine, model nếu khác mặc định, chấm cầu nối (xanh chạy, vàng lỗi thời, đỏ mất kết nối, rỗng đang kiểm). Bấm mở popup ở top layer với ba tab: Engine (engine, model, effort), Setup (lệnh cài/cập nhật + Copy, mã ghép nối), Status (trạng thái, phiên bản, tự khởi động). Không chèn khối nào vào khung chat; lượt hỏng vì cầu nối hiện MỘT dòng <code>BridgeNotice</code> có "Open setup" mở đúng tab Setup. Dữ liệu và logic cầu nối là của bề mặt.</p><figure class="cat-demo"><figcaption>Chip theo trạng thái cầu nối: chạy, lỗi thời, mất kết nối, đang kiểm</figcaption><div class="cat-live"><div class="cat-row"><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c81-R0:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c81-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c82-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Outdated" title="Engine: Claude Code · Opus. Bridge on your machine: Outdated"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c82-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c83-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Not connected" title="Engine: Claude Code · Opus. Bridge on your machine: Not connected"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c83-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c84-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Checking" title="Engine: Claude Code · Opus. Bridge on your machine: Checking"><span class="gb-engine-dot gb-engine-dot--idle" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c84-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;cat-row&quot;&gt;
6998
+ <section id="assistant-engine"><h2>Trợ lý: chọn engine</h2><p><code>EnginePicker</code> (<code>@gemboss/ui/assistant</code>, CSS <code>assistant-engine.css</code> do component tự nạp). Một chip ở hàng soạn tin như admin: tên engine, model nếu khác mặc định, chấm cầu nối (xanh chạy, vàng lỗi thời, đỏ mất kết nối, rỗng đang kiểm). Bấm mở popup ở top layer với ba tab: Engine (engine, model, effort), Setup (lệnh cài/cập nhật + Copy, mã ghép nối), Status (trạng thái, phiên bản, tự khởi động). Không chèn khối nào vào khung chat; lượt hỏng vì cầu nối hiện MỘT dòng <code>BridgeNotice</code> có "Open setup" mở đúng tab Setup. Dữ liệu và logic cầu nối là của bề mặt.</p><figure class="cat-demo"><figcaption>Chip theo trạng thái cầu nối: chạy, lỗi thời, mất kết nối, đang kiểm</figcaption><div class="cat-live"><div class="cat-row"><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c83-R0:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c83-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c84-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Outdated" title="Engine: Claude Code · Opus. Bridge on your machine: Outdated"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c84-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c85-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Not connected" title="Engine: Claude Code · Opus. Bridge on your machine: Not connected"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c85-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span><span class="gb-engine"><button type="button" class="gb-engine-chip" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c86-R0:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Checking" title="Engine: Claude Code · Opus. Bridge on your machine: Checking"><span class="gb-engine-dot gb-engine-dot--idle" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span></button><div id=":c86-R0:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;cat-row&quot;&gt;
5101
6999
  &lt;span class=&quot;gb-engine&quot;&gt;
5102
- &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c81-R0:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
7000
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c83-R0:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
5103
7001
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--ok&quot; aria-hidden=&quot;true&quot;&gt;
5104
7002
  &lt;/span&gt;
5105
7003
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
5106
7004
  &lt;/span&gt;
5107
7005
  &lt;/button&gt;
5108
- &lt;div id=&quot;:c81-R0:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
7006
+ &lt;div id=&quot;:c83-R0:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
5109
7007
  &lt;/div&gt;
5110
7008
  &lt;/span&gt;
5111
7009
  &lt;span class=&quot;gb-engine&quot;&gt;
5112
- &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c82-R0:&quot; aria-label=&quot;Engine: Claude Code · Opus. Bridge on your machine: Outdated&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Outdated&quot;&gt;
7010
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c84-R0:&quot; aria-label=&quot;Engine: Claude Code · Opus. Bridge on your machine: Outdated&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Outdated&quot;&gt;
5113
7011
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; aria-hidden=&quot;true&quot;&gt;
5114
7012
  &lt;/span&gt;
5115
7013
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
5116
7014
  &lt;/span&gt;
5117
7015
  &lt;/button&gt;
5118
- &lt;div id=&quot;:c82-R0:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
7016
+ &lt;div id=&quot;:c84-R0:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
5119
7017
  &lt;/div&gt;
5120
7018
  &lt;/span&gt;
5121
7019
  &lt;span class=&quot;gb-engine&quot;&gt;
5122
- &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c83-R0:&quot; aria-label=&quot;Engine: Claude Code · Opus. Bridge on your machine: Not connected&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Not connected&quot;&gt;
7020
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c85-R0:&quot; aria-label=&quot;Engine: Claude Code · Opus. Bridge on your machine: Not connected&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Not connected&quot;&gt;
5123
7021
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--down&quot; aria-hidden=&quot;true&quot;&gt;
5124
7022
  &lt;/span&gt;
5125
7023
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
5126
7024
  &lt;/span&gt;
5127
7025
  &lt;/button&gt;
5128
- &lt;div id=&quot;:c83-R0:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
7026
+ &lt;div id=&quot;:c85-R0:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
5129
7027
  &lt;/div&gt;
5130
7028
  &lt;/span&gt;
5131
7029
  &lt;span class=&quot;gb-engine&quot;&gt;
5132
- &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c84-R0:&quot; aria-label=&quot;Engine: Claude Code · Opus. Bridge on your machine: Checking&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Checking&quot;&gt;
7030
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c86-R0:&quot; aria-label=&quot;Engine: Claude Code · Opus. Bridge on your machine: Checking&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Checking&quot;&gt;
5133
7031
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--idle&quot; aria-hidden=&quot;true&quot;&gt;
5134
7032
  &lt;/span&gt;
5135
7033
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
5136
7034
  &lt;/span&gt;
5137
7035
  &lt;/button&gt;
5138
- &lt;div id=&quot;:c84-R0:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
7036
+ &lt;div id=&quot;:c86-R0:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
5139
7037
  &lt;/div&gt;
5140
7038
  &lt;/span&gt;
5141
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Engine</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c85-R0:-tab-engine" aria-controls=":c85-R0:-pane-engine" aria-selected="true" tabindex="0">Engine</button><button type="button" role="tab" id=":c85-R0:-tab-setup" aria-controls=":c85-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c85-R0:-tab-status" aria-controls=":c85-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c85-R0:-pane-engine" aria-labelledby=":c85-R0:-tab-engine"><div class="gb-engine-field"><span class="gb-engine-label" id=":c85-Rd:">Engine</span><div class="gb-engine-list" role="radiogroup" aria-labelledby=":c85-Rd:"><button type="button" role="radio" aria-checked="true" data-engine="claude" tabindex="0" class="gb-engine-row"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Claude Code</span><span class="ui-badge ui-badge--success">your plan</span></span><span class="gb-engine-note">Your Claude subscription, through the bridge on your machine</span></button><button type="button" role="radio" aria-checked="false" data-engine="codex" tabindex="-1" class="gb-engine-row" disabled=""><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Codex</span><span class="ui-badge ui-badge--warning">not installed</span></span><span class="gb-engine-note">Install Codex on that machine, then reopen this</span></button><button type="button" role="radio" aria-checked="false" data-engine="server" tabindex="-1" class="gb-engine-row"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Server</span></span><span class="gb-engine-note">Content Radar&#x27;s own capacity</span></button></div></div><div class="gb-engine-field"><span class="gb-engine-label" id=":c85-R5d:">Model</span><div class="gb-engine-opts" role="group" aria-labelledby=":c85-R5d:"><button type="button" class="gb-engine-opt" aria-pressed="false">Default</button><button type="button" class="gb-engine-opt" aria-pressed="true">Opus</button><button type="button" class="gb-engine-opt" aria-pressed="false">Sonnet</button><button type="button" class="gb-engine-opt" aria-pressed="false">Haiku</button></div></div><div class="gb-engine-field"><span class="gb-engine-label" id=":c85-R7d:">Effort</span><div class="gb-engine-opts" role="group" aria-labelledby=":c85-R7d:"><button type="button" class="gb-engine-opt" aria-pressed="true">Default</button><button type="button" class="gb-engine-opt" aria-pressed="false">Low</button><button type="button" class="gb-engine-opt" aria-pressed="false">Medium</button><button type="button" class="gb-engine-opt" aria-pressed="false">High</button><button type="button" class="gb-engine-opt" aria-pressed="false">Max</button></div></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
7039
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Engine</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c87-R0:-tab-engine" aria-controls=":c87-R0:-pane-engine" aria-selected="true" tabindex="0">Engine</button><button type="button" role="tab" id=":c87-R0:-tab-setup" aria-controls=":c87-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c87-R0:-tab-status" aria-controls=":c87-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c87-R0:-pane-engine" aria-labelledby=":c87-R0:-tab-engine"><div class="gb-engine-field"><span class="gb-engine-label" id=":c87-Rd:">Engine</span><div class="gb-engine-list" role="radiogroup" aria-labelledby=":c87-Rd:"><button type="button" role="radio" aria-checked="true" data-engine="claude" tabindex="0" class="gb-engine-row"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Claude Code</span><span class="ui-badge ui-badge--success">your plan</span></span><span class="gb-engine-note">Your Claude subscription, through the bridge on your machine</span></button><button type="button" role="radio" aria-checked="false" data-engine="codex" tabindex="-1" class="gb-engine-row" disabled=""><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Codex</span><span class="ui-badge ui-badge--warning">not installed</span></span><span class="gb-engine-note">Install Codex on that machine, then reopen this</span></button><button type="button" role="radio" aria-checked="false" data-engine="server" tabindex="-1" class="gb-engine-row"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Server</span></span><span class="gb-engine-note">Content Radar&#x27;s own capacity</span></button></div></div><div class="gb-engine-field"><span class="gb-engine-label" id=":c87-R5d:">Model</span><div class="gb-engine-opts" role="group" aria-labelledby=":c87-R5d:"><button type="button" class="gb-engine-opt" aria-pressed="false">Default</button><button type="button" class="gb-engine-opt" aria-pressed="true">Opus</button><button type="button" class="gb-engine-opt" aria-pressed="false">Sonnet</button><button type="button" class="gb-engine-opt" aria-pressed="false">Haiku</button></div></div><div class="gb-engine-field"><span class="gb-engine-label" id=":c87-R7d:">Effort</span><div class="gb-engine-opts" role="group" aria-labelledby=":c87-R7d:"><button type="button" class="gb-engine-opt" aria-pressed="true">Default</button><button type="button" class="gb-engine-opt" aria-pressed="false">Low</button><button type="button" class="gb-engine-opt" aria-pressed="false">Medium</button><button type="button" class="gb-engine-opt" aria-pressed="false">High</button><button type="button" class="gb-engine-opt" aria-pressed="false">Max</button></div></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
5142
7040
  &lt;div class=&quot;gb-engine-panel gb-engine-panel--inline gemboss-popover-surface&quot; role=&quot;group&quot; aria-label=&quot;Assistant engine&quot;&gt;
5143
7041
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5144
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c85-R0:-tab-engine&quot; aria-controls=&quot;:c85-R0:-pane-engine&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Engine&lt;/button&gt;
5145
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c85-R0:-tab-setup&quot; aria-controls=&quot;:c85-R0:-pane-setup&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Setup&lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; role=&quot;img&quot; aria-label=&quot;Update available&quot;&gt;
7042
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c87-R0:-tab-engine&quot; aria-controls=&quot;:c87-R0:-pane-engine&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Engine&lt;/button&gt;
7043
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c87-R0:-tab-setup&quot; aria-controls=&quot;:c87-R0:-pane-setup&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Setup&lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; role=&quot;img&quot; aria-label=&quot;Update available&quot;&gt;
5146
7044
  &lt;/span&gt;
5147
7045
  &lt;/button&gt;
5148
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c85-R0:-tab-status&quot; aria-controls=&quot;:c85-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
7046
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c87-R0:-tab-status&quot; aria-controls=&quot;:c87-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
5149
7047
  &lt;/div&gt;
5150
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c85-R0:-pane-engine&quot; aria-labelledby=&quot;:c85-R0:-tab-engine&quot;&gt;
7048
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c87-R0:-pane-engine&quot; aria-labelledby=&quot;:c87-R0:-tab-engine&quot;&gt;
5151
7049
  &lt;div class=&quot;gb-engine-field&quot;&gt;
5152
- &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c85-Rd:&quot;&gt;Engine&lt;/span&gt;
5153
- &lt;div class=&quot;gb-engine-list&quot; role=&quot;radiogroup&quot; aria-labelledby=&quot;:c85-Rd:&quot;&gt;
7050
+ &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c87-Rd:&quot;&gt;Engine&lt;/span&gt;
7051
+ &lt;div class=&quot;gb-engine-list&quot; role=&quot;radiogroup&quot; aria-labelledby=&quot;:c87-Rd:&quot;&gt;
5154
7052
  &lt;button type=&quot;button&quot; role=&quot;radio&quot; aria-checked=&quot;true&quot; data-engine=&quot;claude&quot; tabindex=&quot;0&quot; class=&quot;gb-engine-row&quot;&gt;
5155
7053
  &lt;span class=&quot;gb-engine-rowhead&quot;&gt;
5156
7054
  &lt;span class=&quot;gb-engine-rowname&quot;&gt;Claude Code&lt;/span&gt;
@@ -5174,8 +7072,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5174
7072
  &lt;/div&gt;
5175
7073
  &lt;/div&gt;
5176
7074
  &lt;div class=&quot;gb-engine-field&quot;&gt;
5177
- &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c85-R5d:&quot;&gt;Model&lt;/span&gt;
5178
- &lt;div class=&quot;gb-engine-opts&quot; role=&quot;group&quot; aria-labelledby=&quot;:c85-R5d:&quot;&gt;
7075
+ &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c87-R5d:&quot;&gt;Model&lt;/span&gt;
7076
+ &lt;div class=&quot;gb-engine-opts&quot; role=&quot;group&quot; aria-labelledby=&quot;:c87-R5d:&quot;&gt;
5179
7077
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot;&gt;Default&lt;/button&gt;
5180
7078
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;true&quot;&gt;Opus&lt;/button&gt;
5181
7079
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot;&gt;Sonnet&lt;/button&gt;
@@ -5183,8 +7081,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5183
7081
  &lt;/div&gt;
5184
7082
  &lt;/div&gt;
5185
7083
  &lt;div class=&quot;gb-engine-field&quot;&gt;
5186
- &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c85-R7d:&quot;&gt;Effort&lt;/span&gt;
5187
- &lt;div class=&quot;gb-engine-opts&quot; role=&quot;group&quot; aria-labelledby=&quot;:c85-R7d:&quot;&gt;
7084
+ &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c87-R7d:&quot;&gt;Effort&lt;/span&gt;
7085
+ &lt;div class=&quot;gb-engine-opts&quot; role=&quot;group&quot; aria-labelledby=&quot;:c87-R7d:&quot;&gt;
5188
7086
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;true&quot;&gt;Default&lt;/button&gt;
5189
7087
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot;&gt;Low&lt;/button&gt;
5190
7088
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot;&gt;Medium&lt;/button&gt;
@@ -5194,16 +7092,16 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5194
7092
  &lt;/div&gt;
5195
7093
  &lt;/div&gt;
5196
7094
  &lt;/div&gt;
5197
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Setup (cầu nối lỗi thời)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c86-R0:-tab-engine" aria-controls=":c86-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c86-R0:-tab-setup" aria-controls=":c86-R0:-pane-setup" aria-selected="true" tabindex="0">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c86-R0:-tab-status" aria-controls=":c86-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c86-R0:-pane-setup" aria-labelledby=":c86-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--warn"><strong>Bridge on your machine: outdated.</strong> A turn can fail with &quot;The bridge has no data token&quot;, and Codex cannot see the radar tools.</p><div class="gb-engine-steps"><p>Paste the command into Terminal, then press Enter.</p></div><pre class="gb-engine-cmd"><code>curl -fsSL https://content-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div><p class="gb-engine-note">The pairing code stays the same: the panel reconnects in a few seconds.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
7095
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Setup (cầu nối lỗi thời)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c88-R0:-tab-engine" aria-controls=":c88-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c88-R0:-tab-setup" aria-controls=":c88-R0:-pane-setup" aria-selected="true" tabindex="0">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c88-R0:-tab-status" aria-controls=":c88-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c88-R0:-pane-setup" aria-labelledby=":c88-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--warn"><strong>Bridge on your machine: outdated.</strong> A turn can fail with &quot;The bridge has no data token&quot;, and Codex cannot see the radar tools.</p><div class="gb-engine-steps"><p>Paste the command into Terminal, then press Enter.</p></div><pre class="gb-engine-cmd"><code>curl -fsSL https://content-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div><p class="gb-engine-note">The pairing code stays the same: the panel reconnects in a few seconds.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
5198
7096
  &lt;div class=&quot;gb-engine-panel gb-engine-panel--inline gemboss-popover-surface&quot; role=&quot;group&quot; aria-label=&quot;Assistant engine&quot;&gt;
5199
7097
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5200
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c86-R0:-tab-engine&quot; aria-controls=&quot;:c86-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5201
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c86-R0:-tab-setup&quot; aria-controls=&quot;:c86-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; role=&quot;img&quot; aria-label=&quot;Update available&quot;&gt;
7098
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c88-R0:-tab-engine&quot; aria-controls=&quot;:c88-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
7099
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c88-R0:-tab-setup&quot; aria-controls=&quot;:c88-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; role=&quot;img&quot; aria-label=&quot;Update available&quot;&gt;
5202
7100
  &lt;/span&gt;
5203
7101
  &lt;/button&gt;
5204
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c86-R0:-tab-status&quot; aria-controls=&quot;:c86-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
7102
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c88-R0:-tab-status&quot; aria-controls=&quot;:c88-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
5205
7103
  &lt;/div&gt;
5206
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c86-R0:-pane-setup&quot; aria-labelledby=&quot;:c86-R0:-tab-setup&quot;&gt;
7104
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c88-R0:-pane-setup&quot; aria-labelledby=&quot;:c88-R0:-tab-setup&quot;&gt;
5207
7105
  &lt;p class=&quot;gb-engine-callout gb-engine-callout--warn&quot;&gt;
5208
7106
  &lt;strong&gt;Bridge on your machine: outdated.&lt;/strong&gt; A turn can fail with &amp;quot;The bridge has no data token&amp;quot;, and Codex cannot see the radar tools.&lt;/p&gt;
5209
7107
  &lt;div class=&quot;gb-engine-steps&quot;&gt;
@@ -5220,16 +7118,16 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5220
7118
  &lt;p class=&quot;gb-engine-note&quot;&gt;The pairing code stays the same: the panel reconnects in a few seconds.&lt;/p&gt;
5221
7119
  &lt;/div&gt;
5222
7120
  &lt;/div&gt;
5223
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Status</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c87-R0:-tab-engine" aria-controls=":c87-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c87-R0:-tab-setup" aria-controls=":c87-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c87-R0:-tab-status" aria-controls=":c87-R0:-pane-status" aria-selected="true" tabindex="0">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c87-R0:-pane-status" aria-labelledby=":c87-R0:-tab-status"><dl class="gb-engine-rows"><dt>Bridge on your machine</dt><dd><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span> Outdated</dd><dt>Version</dt><dd>8 · Latest 10</dd><dt>Starts at sign-in</dt><dd>Yes</dd></dl><p class="gb-engine-note">A turn can fail with &quot;The bridge has no data token&quot;, and Codex cannot see the radar tools.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
7121
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Popup, tab Status</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c89-R0:-tab-engine" aria-controls=":c89-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c89-R0:-tab-setup" aria-controls=":c89-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c89-R0:-tab-status" aria-controls=":c89-R0:-pane-status" aria-selected="true" tabindex="0">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c89-R0:-pane-status" aria-labelledby=":c89-R0:-tab-status"><dl class="gb-engine-rows"><dt>Bridge on your machine</dt><dd><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span> Outdated</dd><dt>Version</dt><dd>8 · Latest 10</dd><dt>Starts at sign-in</dt><dd>Yes</dd></dl><p class="gb-engine-note">A turn can fail with &quot;The bridge has no data token&quot;, and Codex cannot see the radar tools.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
5224
7122
  &lt;div class=&quot;gb-engine-panel gb-engine-panel--inline gemboss-popover-surface&quot; role=&quot;group&quot; aria-label=&quot;Assistant engine&quot;&gt;
5225
7123
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5226
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c87-R0:-tab-engine&quot; aria-controls=&quot;:c87-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5227
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c87-R0:-tab-setup&quot; aria-controls=&quot;:c87-R0:-pane-setup&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Setup&lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; role=&quot;img&quot; aria-label=&quot;Update available&quot;&gt;
7124
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c89-R0:-tab-engine&quot; aria-controls=&quot;:c89-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
7125
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c89-R0:-tab-setup&quot; aria-controls=&quot;:c89-R0:-pane-setup&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Setup&lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; role=&quot;img&quot; aria-label=&quot;Update available&quot;&gt;
5228
7126
  &lt;/span&gt;
5229
7127
  &lt;/button&gt;
5230
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c87-R0:-tab-status&quot; aria-controls=&quot;:c87-R0:-pane-status&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Status&lt;/button&gt;
7128
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c89-R0:-tab-status&quot; aria-controls=&quot;:c89-R0:-pane-status&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Status&lt;/button&gt;
5231
7129
  &lt;/div&gt;
5232
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c87-R0:-pane-status&quot; aria-labelledby=&quot;:c87-R0:-tab-status&quot;&gt;
7130
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c89-R0:-pane-status&quot; aria-labelledby=&quot;:c89-R0:-tab-status&quot;&gt;
5233
7131
  &lt;dl class=&quot;gb-engine-rows&quot;&gt;
5234
7132
  &lt;dt&gt;Bridge on your machine&lt;/dt&gt;
5235
7133
  &lt;dd&gt;
@@ -5249,14 +7147,14 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5249
7147
  &lt;span class=&quot;gb-engine-notice-text&quot;&gt;The bridge on your machine is not responding: it was stopped, or the machine slept.&lt;/span&gt;
5250
7148
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-notice-link&quot;&gt;Open setup&lt;/button&gt;
5251
7149
  &lt;/p&gt;</code></pre></details></figure></section>
5252
- <section id="assistant-bridge"><h2>Trợ lý: cầu nối trên máy (0.32.0)</h2><p><code>useBridge</code> + <code>createBridgeClient</code> + <code>bridgePickerProps</code> (<code>@gemboss/ui/assistant</code>): dò cầu nối sau quyền Local Network Access của Chrome (chỉ hỏi từ một cú bấm), ghép cặp bằng mã trang tự sinh và nhét vào lệnh cài, token dữ liệu ngắn hạn, gửi lượt + đọc stream (<code>readTurnEvents</code>), dò mỗi 3 giây khi đồng đội đang cài, dò lại khi quay về tab, Stop / Remove. Ba radar từng giữ ba bản chép; bề mặt nay chỉ cấp cổng, khoá mã, tên app và phần riêng của nó. Dưới đây là tab Setup / Status mà gói dựng cho từng trạng thái.</p><figure class="cat-demo"><figcaption>Chưa có quyền gọi máy này: nút Allow, chưa có lệnh để chạy</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c89-R0:-tab-engine" aria-controls=":c89-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c89-R0:-tab-setup" aria-controls=":c89-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c89-R0:-tab-status" aria-controls=":c89-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c89-R0:-pane-setup" aria-labelledby=":c89-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong> The browser needs permission to connect to this computer (localhost).</p><div class="gb-engine-steps"><p>Chrome will ask to “access devices on your local network”: choose Allow.</p><div><button type="button" class="ui-btn ui-btn--primary">Allow connecting to this computer</button></div></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
7150
+ <section id="assistant-bridge"><h2>Trợ lý: cầu nối trên máy (0.32.0)</h2><p><code>useBridge</code> + <code>createBridgeClient</code> + <code>bridgePickerProps</code> (<code>@gemboss/ui/assistant</code>): dò cầu nối sau quyền Local Network Access của Chrome (chỉ hỏi từ một cú bấm), ghép cặp bằng mã trang tự sinh và nhét vào lệnh cài, token dữ liệu ngắn hạn, gửi lượt + đọc stream (<code>readTurnEvents</code>), dò mỗi 3 giây khi đồng đội đang cài, dò lại khi quay về tab, Stop / Remove. Ba radar từng giữ ba bản chép; bề mặt nay chỉ cấp cổng, khoá mã, tên app và phần riêng của nó. Dưới đây là tab Setup / Status mà gói dựng cho từng trạng thái.</p><figure class="cat-demo"><figcaption>Chưa có quyền gọi máy này: nút Allow, chưa có lệnh để chạy</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c91-R0:-tab-engine" aria-controls=":c91-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c91-R0:-tab-setup" aria-controls=":c91-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c91-R0:-tab-status" aria-controls=":c91-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c91-R0:-pane-setup" aria-labelledby=":c91-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong> The browser needs permission to connect to this computer (localhost).</p><div class="gb-engine-steps"><p>Chrome will ask to “access devices on your local network”: choose Allow.</p><div><button type="button" class="ui-btn ui-btn--primary">Allow connecting to this computer</button></div></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
5253
7151
  &lt;div class=&quot;gb-engine-panel gb-engine-panel--inline gemboss-popover-surface&quot; role=&quot;group&quot; aria-label=&quot;Assistant engine&quot;&gt;
5254
7152
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5255
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c89-R0:-tab-engine&quot; aria-controls=&quot;:c89-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5256
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c89-R0:-tab-setup&quot; aria-controls=&quot;:c89-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
5257
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c89-R0:-tab-status&quot; aria-controls=&quot;:c89-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
7153
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c91-R0:-tab-engine&quot; aria-controls=&quot;:c91-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
7154
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c91-R0:-tab-setup&quot; aria-controls=&quot;:c91-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
7155
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c91-R0:-tab-status&quot; aria-controls=&quot;:c91-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
5258
7156
  &lt;/div&gt;
5259
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c89-R0:-pane-setup&quot; aria-labelledby=&quot;:c89-R0:-tab-setup&quot;&gt;
7157
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c91-R0:-pane-setup&quot; aria-labelledby=&quot;:c91-R0:-tab-setup&quot;&gt;
5260
7158
  &lt;p class=&quot;gb-engine-callout gb-engine-callout--down&quot;&gt;
5261
7159
  &lt;strong&gt;Bridge on your machine: not connected.&lt;/strong&gt; The browser needs permission to connect to this computer (localhost).&lt;/p&gt;
5262
7160
  &lt;div class=&quot;gb-engine-steps&quot;&gt;
@@ -5267,14 +7165,14 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5267
7165
  &lt;/div&gt;
5268
7166
  &lt;/div&gt;
5269
7167
  &lt;/div&gt;
5270
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Chrome đã chặn: ba bước mở lại trong cài đặt trang</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c90-R0:-tab-engine" aria-controls=":c90-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c90-R0:-tab-setup" aria-controls=":c90-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c90-R0:-tab-status" aria-controls=":c90-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c90-R0:-pane-setup" aria-labelledby=":c90-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong> Chrome is blocking this page from connecting to your computer.</p><div class="gb-engine-steps"><ol><li>Click the <strong>⚙︎ / ⓘ</strong> icon to the left of the address bar.</li><li>Find <strong>Local network access</strong> and choose <strong>Allow</strong>.</li><li>Come back to this tab. The panel picks it up without a reload.</li></ol><div><button type="button" class="ui-btn">Check again</button></div></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
7168
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Chrome đã chặn: ba bước mở lại trong cài đặt trang</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c92-R0:-tab-engine" aria-controls=":c92-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c92-R0:-tab-setup" aria-controls=":c92-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c92-R0:-tab-status" aria-controls=":c92-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c92-R0:-pane-setup" aria-labelledby=":c92-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong> Chrome is blocking this page from connecting to your computer.</p><div class="gb-engine-steps"><ol><li>Click the <strong>⚙︎ / ⓘ</strong> icon to the left of the address bar.</li><li>Find <strong>Local network access</strong> and choose <strong>Allow</strong>.</li><li>Come back to this tab. The panel picks it up without a reload.</li></ol><div><button type="button" class="ui-btn">Check again</button></div></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
5271
7169
  &lt;div class=&quot;gb-engine-panel gb-engine-panel--inline gemboss-popover-surface&quot; role=&quot;group&quot; aria-label=&quot;Assistant engine&quot;&gt;
5272
7170
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5273
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c90-R0:-tab-engine&quot; aria-controls=&quot;:c90-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5274
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c90-R0:-tab-setup&quot; aria-controls=&quot;:c90-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
5275
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c90-R0:-tab-status&quot; aria-controls=&quot;:c90-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
7171
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c92-R0:-tab-engine&quot; aria-controls=&quot;:c92-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
7172
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c92-R0:-tab-setup&quot; aria-controls=&quot;:c92-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
7173
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c92-R0:-tab-status&quot; aria-controls=&quot;:c92-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
5276
7174
  &lt;/div&gt;
5277
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c90-R0:-pane-setup&quot; aria-labelledby=&quot;:c90-R0:-tab-setup&quot;&gt;
7175
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c92-R0:-pane-setup&quot; aria-labelledby=&quot;:c92-R0:-tab-setup&quot;&gt;
5278
7176
  &lt;p class=&quot;gb-engine-callout gb-engine-callout--down&quot;&gt;
5279
7177
  &lt;strong&gt;Bridge on your machine: not connected.&lt;/strong&gt; Chrome is blocking this page from connecting to your computer.&lt;/p&gt;
5280
7178
  &lt;div class=&quot;gb-engine-steps&quot;&gt;
@@ -5289,14 +7187,14 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5289
7187
  &lt;/div&gt;
5290
7188
  &lt;/div&gt;
5291
7189
  &lt;/div&gt;
5292
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Cầu nối chạy nhưng mã khác: ô Pair (Enter cũng ghép) + lệnh cài lại mang mã của trình duyệt này</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c91-R0:-tab-engine" aria-controls=":c91-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c91-R0:-tab-setup" aria-controls=":c91-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c91-R0:-tab-status" aria-controls=":c91-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c91-R0:-pane-setup" aria-labelledby=":c91-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong> The bridge is running on your machine but is not paired with this browser.</p><div class="gb-engine-steps"><p>Paste the <strong>pairing code</strong> shown in the terminal:</p><form class="ui-toolbar"><input class="gemboss-field" style="flex:1 1 140px;min-width:0;text-transform:uppercase;letter-spacing:.08em" placeholder="e.g. 7KQ2M9XA" aria-label="Pairing code" autoComplete="off" spellcheck="false" value=""/><button type="button" class="ui-btn ui-btn--primary">Pair</button></form><p role="status">Wrong code. Check the pairing code line in the terminal.</p><p>Or reinstall with this command, which includes this browser’s code:</p></div><pre class="gb-engine-cmd"><code>curl -fsSL https://partner-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div><p class="gb-engine-note">The panel connects as soon as the bridge starts, and the bridge starts with your computer after that. Requires macOS, Node.js, and Claude Code or Codex signed in.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
7190
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Cầu nối chạy nhưng mã khác: ô Pair (Enter cũng ghép) + lệnh cài lại mang mã của trình duyệt này</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c93-R0:-tab-engine" aria-controls=":c93-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c93-R0:-tab-setup" aria-controls=":c93-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c93-R0:-tab-status" aria-controls=":c93-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c93-R0:-pane-setup" aria-labelledby=":c93-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong> The bridge is running on your machine but is not paired with this browser.</p><div class="gb-engine-steps"><p>Paste the <strong>pairing code</strong> shown in the terminal:</p><form class="ui-toolbar"><input class="gemboss-field" style="flex:1 1 140px;min-width:0;text-transform:uppercase;letter-spacing:.08em" placeholder="e.g. 7KQ2M9XA" aria-label="Pairing code" autoComplete="off" spellcheck="false" value=""/><button type="button" class="ui-btn ui-btn--primary">Pair</button></form><p role="status">Wrong code. Check the pairing code line in the terminal.</p><p>Or reinstall with this command, which includes this browser’s code:</p></div><pre class="gb-engine-cmd"><code>curl -fsSL https://partner-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div><p class="gb-engine-note">The panel connects as soon as the bridge starts, and the bridge starts with your computer after that. Requires macOS, Node.js, and Claude Code or Codex signed in.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
5293
7191
  &lt;div class=&quot;gb-engine-panel gb-engine-panel--inline gemboss-popover-surface&quot; role=&quot;group&quot; aria-label=&quot;Assistant engine&quot;&gt;
5294
7192
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5295
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c91-R0:-tab-engine&quot; aria-controls=&quot;:c91-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5296
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c91-R0:-tab-setup&quot; aria-controls=&quot;:c91-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
5297
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c91-R0:-tab-status&quot; aria-controls=&quot;:c91-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
7193
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c93-R0:-tab-engine&quot; aria-controls=&quot;:c93-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
7194
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c93-R0:-tab-setup&quot; aria-controls=&quot;:c93-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
7195
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c93-R0:-tab-status&quot; aria-controls=&quot;:c93-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
5298
7196
  &lt;/div&gt;
5299
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c91-R0:-pane-setup&quot; aria-labelledby=&quot;:c91-R0:-tab-setup&quot;&gt;
7197
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c93-R0:-pane-setup&quot; aria-labelledby=&quot;:c93-R0:-tab-setup&quot;&gt;
5300
7198
  &lt;p class=&quot;gb-engine-callout gb-engine-callout--down&quot;&gt;
5301
7199
  &lt;strong&gt;Bridge on your machine: not connected.&lt;/strong&gt; The bridge is running on your machine but is not paired with this browser.&lt;/p&gt;
5302
7200
  &lt;div class=&quot;gb-engine-steps&quot;&gt;
@@ -5319,14 +7217,14 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5319
7217
  &lt;p class=&quot;gb-engine-note&quot;&gt;The panel connects as soon as the bridge starts, and the bridge starts with your computer after that. Requires macOS, Node.js, and Claude Code or Codex signed in.&lt;/p&gt;
5320
7218
  &lt;/div&gt;
5321
7219
  &lt;/div&gt;
5322
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Chưa thấy cầu nối: hai bước + lệnh cài</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c92-R0:-tab-engine" aria-controls=":c92-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c92-R0:-tab-setup" aria-controls=":c92-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c92-R0:-tab-status" aria-controls=":c92-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c92-R0:-pane-setup" aria-labelledby=":c92-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not set up.</strong></p><div class="gb-engine-steps"><ol><li>Open <strong>Terminal</strong> (⌘ + Space, type Terminal).</li><li>Paste this command and press Enter (about 1 minute).</li></ol></div><pre class="gb-engine-cmd"><code>curl -fsSL https://partner-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div><p class="gb-engine-note">The panel connects as soon as the bridge starts, and the bridge starts with your computer after that. Requires macOS, Node.js, and Claude Code or Codex signed in.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
7220
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Chưa thấy cầu nối: hai bước + lệnh cài</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c94-R0:-tab-engine" aria-controls=":c94-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c94-R0:-tab-setup" aria-controls=":c94-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c94-R0:-tab-status" aria-controls=":c94-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c94-R0:-pane-setup" aria-labelledby=":c94-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not set up.</strong></p><div class="gb-engine-steps"><ol><li>Open <strong>Terminal</strong> (⌘ + Space, type Terminal).</li><li>Paste this command and press Enter (about 1 minute).</li></ol></div><pre class="gb-engine-cmd"><code>curl -fsSL https://partner-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div><p class="gb-engine-note">The panel connects as soon as the bridge starts, and the bridge starts with your computer after that. Requires macOS, Node.js, and Claude Code or Codex signed in.</p></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
5323
7221
  &lt;div class=&quot;gb-engine-panel gb-engine-panel--inline gemboss-popover-surface&quot; role=&quot;group&quot; aria-label=&quot;Assistant engine&quot;&gt;
5324
7222
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5325
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c92-R0:-tab-engine&quot; aria-controls=&quot;:c92-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5326
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c92-R0:-tab-setup&quot; aria-controls=&quot;:c92-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
5327
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c92-R0:-tab-status&quot; aria-controls=&quot;:c92-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
7223
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c94-R0:-tab-engine&quot; aria-controls=&quot;:c94-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
7224
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c94-R0:-tab-setup&quot; aria-controls=&quot;:c94-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
7225
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c94-R0:-tab-status&quot; aria-controls=&quot;:c94-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
5328
7226
  &lt;/div&gt;
5329
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c92-R0:-pane-setup&quot; aria-labelledby=&quot;:c92-R0:-tab-setup&quot;&gt;
7227
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c94-R0:-pane-setup&quot; aria-labelledby=&quot;:c94-R0:-tab-setup&quot;&gt;
5330
7228
  &lt;p class=&quot;gb-engine-callout gb-engine-callout--down&quot;&gt;
5331
7229
  &lt;strong&gt;Bridge on your machine: not set up.&lt;/strong&gt;
5332
7230
  &lt;/p&gt;
@@ -5347,16 +7245,16 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5347
7245
  &lt;p class=&quot;gb-engine-note&quot;&gt;The panel connects as soon as the bridge starts, and the bridge starts with your computer after that. Requires macOS, Node.js, and Claude Code or Codex signed in.&lt;/p&gt;
5348
7246
  &lt;/div&gt;
5349
7247
  &lt;/div&gt;
5350
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Đã nối, bản cũ: Status với phiên bản, tự khởi động, Check again / Stop / Remove</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c93-R0:-tab-engine" aria-controls=":c93-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c93-R0:-tab-setup" aria-controls=":c93-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c93-R0:-tab-status" aria-controls=":c93-R0:-pane-status" aria-selected="true" tabindex="0">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c93-R0:-pane-status" aria-labelledby=":c93-R0:-tab-status"><dl class="gb-engine-rows"><dt>Bridge on your machine</dt><dd><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span> Outdated</dd><dt>Version</dt><dd>2 · Latest 3</dd><dt>Starts at sign-in</dt><dd>Yes</dd></dl><p class="gb-engine-note">This bridge is older than the one the panel expects: update it once (Setup).</p><div class="gb-engine-actions"><button type="button" class="ui-btn">Check again</button><button type="button" class="ui-btn">Stop bridge</button><button type="button" class="ui-btn ui-btn--critical">Remove from this machine</button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
7248
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Đã nối, bản cũ: Status với phiên bản, tự khởi động, Check again / Stop / Remove</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c95-R0:-tab-engine" aria-controls=":c95-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c95-R0:-tab-setup" aria-controls=":c95-R0:-pane-setup" aria-selected="false" tabindex="-1">Setup<span class="gb-engine-dot gb-engine-dot--warn" role="img" aria-label="Update available"></span></button><button type="button" role="tab" id=":c95-R0:-tab-status" aria-controls=":c95-R0:-pane-status" aria-selected="true" tabindex="0">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c95-R0:-pane-status" aria-labelledby=":c95-R0:-tab-status"><dl class="gb-engine-rows"><dt>Bridge on your machine</dt><dd><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span> Outdated</dd><dt>Version</dt><dd>2 · Latest 3</dd><dt>Starts at sign-in</dt><dd>Yes</dd></dl><p class="gb-engine-note">This bridge is older than the one the panel expects: update it once (Setup).</p><div class="gb-engine-actions"><button type="button" class="ui-btn">Check again</button><button type="button" class="ui-btn">Stop bridge</button><button type="button" class="ui-btn ui-btn--critical">Remove from this machine</button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
5351
7249
  &lt;div class=&quot;gb-engine-panel gb-engine-panel--inline gemboss-popover-surface&quot; role=&quot;group&quot; aria-label=&quot;Assistant engine&quot;&gt;
5352
7250
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5353
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c93-R0:-tab-engine&quot; aria-controls=&quot;:c93-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5354
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c93-R0:-tab-setup&quot; aria-controls=&quot;:c93-R0:-pane-setup&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Setup&lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; role=&quot;img&quot; aria-label=&quot;Update available&quot;&gt;
7251
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c95-R0:-tab-engine&quot; aria-controls=&quot;:c95-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
7252
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c95-R0:-tab-setup&quot; aria-controls=&quot;:c95-R0:-pane-setup&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Setup&lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; role=&quot;img&quot; aria-label=&quot;Update available&quot;&gt;
5355
7253
  &lt;/span&gt;
5356
7254
  &lt;/button&gt;
5357
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c93-R0:-tab-status&quot; aria-controls=&quot;:c93-R0:-pane-status&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Status&lt;/button&gt;
7255
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c95-R0:-tab-status&quot; aria-controls=&quot;:c95-R0:-pane-status&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Status&lt;/button&gt;
5358
7256
  &lt;/div&gt;
5359
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c93-R0:-pane-status&quot; aria-labelledby=&quot;:c93-R0:-tab-status&quot;&gt;
7257
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c95-R0:-pane-status&quot; aria-labelledby=&quot;:c95-R0:-tab-status&quot;&gt;
5360
7258
  &lt;dl class=&quot;gb-engine-rows&quot;&gt;
5361
7259
  &lt;dt&gt;Bridge on your machine&lt;/dt&gt;
5362
7260
  &lt;dd&gt;
@@ -5376,7 +7274,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5376
7274
  &lt;/div&gt;
5377
7275
  &lt;/div&gt;
5378
7276
  &lt;/div&gt;</code></pre></details></figure></section>
5379
- <section id="assistant-chat"><h2>Trợ lý: khung chat (0.29.0)</h2><p><code>AssistantChat</code> + các mảnh (<code>ChatThread</code>, <code>ChatMessage</code>, <code>ChatMarkdown</code>, <code>ChatSteps</code>, <code>ChatPending</code>, <code>ChatStarters</code>, <code>ChatMeta</code>, <code>ChatError</code>, <code>ChatComposer</code>, <code>ChatAttach</code>) và <code>useChatTurns</code> (ghi lượt theo id). Bề mặt chỉ cấp dữ liệu + hành động; HTML thuần dùng <code>chat-plain.js</code> (cùng markup). CSS: <code>chat.css</code> + <code>chat-composer.css</code> + entry <code>assistant-chat.css</code>, component tự nạp.</p><figure class="cat-demo"><figcaption>Rỗng: lời mở + ví dụ điền sẵn + câu hỏi gợi ý (xuống dòng, không bị cắt)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg assistant"><div class="gemboss-ec-bubble"><p class="gemboss-md-p"><strong>Describe</strong> a meeting, call or message with a partner. The AI proposes the updates; you click <strong>Save</strong>.</p></div><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter gb-chat-starter"><span class="gb-chat-starter-hint">Example, click to fill in</span>Had dinner with Amit Porwal from Wiser yesterday; promised a co-marketing proposal next week.</button></div><p class="gb-chat-label">Or ask about partners in the radar:</p><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter gb-chat-starter">Which partners have a next step due in the next 2 weeks?</button><button type="button" class="gemboss-ec-starter gb-chat-starter">Summarize partner meetings from the last 30 days</button></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c94-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c94-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
7277
+ <section id="assistant-chat"><h2>Trợ lý: khung chat (0.29.0)</h2><p><code>AssistantChat</code> + các mảnh (<code>ChatThread</code>, <code>ChatMessage</code>, <code>ChatMarkdown</code>, <code>ChatSteps</code>, <code>ChatPending</code>, <code>ChatStarters</code>, <code>ChatMeta</code>, <code>ChatError</code>, <code>ChatComposer</code>, <code>ChatAttach</code>) và <code>useChatTurns</code> (ghi lượt theo id). Bề mặt chỉ cấp dữ liệu + hành động; HTML thuần dùng <code>chat-plain.js</code> (cùng markup). CSS: <code>chat.css</code> + <code>chat-composer.css</code> + entry <code>assistant-chat.css</code>, component tự nạp.</p><figure class="cat-demo"><figcaption>Rỗng: lời mở + ví dụ điền sẵn + câu hỏi gợi ý (xuống dòng, không bị cắt)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg assistant"><div class="gemboss-ec-bubble"><p class="gemboss-md-p"><strong>Describe</strong> a meeting, call or message with a partner. The AI proposes the updates; you click <strong>Save</strong>.</p></div><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter gb-chat-starter"><span class="gb-chat-starter-hint">Example, click to fill in</span>Had dinner with Amit Porwal from Wiser yesterday; promised a co-marketing proposal next week.</button></div><p class="gb-chat-label">Or ask about partners in the radar:</p><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter gb-chat-starter">Which partners have a next step due in the next 2 weeks?</button><button type="button" class="gemboss-ec-starter gb-chat-starter">Summarize partner meetings from the last 30 days</button></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c96-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c96-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
5380
7278
  &lt;div class=&quot;gb-chat&quot;&gt;
5381
7279
  &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot;&gt;
5382
7280
  &lt;div class=&quot;gemboss-ec-msg assistant&quot;&gt;
@@ -5401,7 +7299,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5401
7299
  &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5402
7300
  &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5403
7301
  &lt;span class=&quot;gb-engine&quot;&gt;
5404
- &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c94-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
7302
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c96-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
5405
7303
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--ok&quot; aria-hidden=&quot;true&quot;&gt;
5406
7304
  &lt;/span&gt;
5407
7305
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
@@ -5413,7 +7311,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5413
7311
  &lt;/svg&gt;
5414
7312
  &lt;/span&gt;
5415
7313
  &lt;/button&gt;
5416
- &lt;div id=&quot;:c94-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
7314
+ &lt;div id=&quot;:c96-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
5417
7315
  &lt;/div&gt;
5418
7316
  &lt;/span&gt;
5419
7317
  &lt;/div&gt;
@@ -5435,7 +7333,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5435
7333
  &lt;/div&gt;
5436
7334
  &lt;/div&gt;
5437
7335
  &lt;/div&gt;
5438
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Đang chạy: các bước in rồi đứng yên, một nhịp ✳ duy nhất chuyển động; Dừng thay chỗ Gửi</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation" aria-busy="true"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Who is exploring a partnership, and when did we last talk?</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr" aria-label="What it is doing"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Search partners<span class="gb-chat-target"> Wiser</span></span></li><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Read history<span class="gb-chat-target"> Amit Porwal</span></span></li><li class="gemboss-narr-row trace ok"><span class="gemboss-narr-dot" aria-hidden="true">⏺</span><details class="gemboss-narr-trace"><summary><code>partner_timeline(id: 418, days: 30)</code></summary><div class="gemboss-narr-trace-body"><code>{ &quot;events&quot;: 6, &quot;last&quot;: &quot;2026-10-05&quot; }</code></div></details></li><li class="gemboss-narr-row running"><span class="gemboss-narr-dot" aria-hidden="true">·</span><span class="gemboss-narr-text">Draft a proposal</span></li></ul><div class="gemboss-ec-pending" role="status"><span class="gemboss-assistant-sronly">Working</span><span class="gemboss-ec-pending-star" aria-hidden="true">✳</span><span class="gemboss-ec-pending-verb" aria-hidden="true">Working…</span><span class="gemboss-ec-pending-meta" aria-hidden="true">0s</span></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c95-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c95-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="button" class="gemboss-ec-stop" aria-label="Stop" title="Stop"><svg viewBox="0 0 12 12" aria-hidden="true" focusable="false"><rect x="1" y="1" width="10" height="10" rx="2"></rect></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
7336
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Đang chạy: các bước in rồi đứng yên, một nhịp ✳ duy nhất chuyển động; Dừng thay chỗ Gửi</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation" aria-busy="true"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Who is exploring a partnership, and when did we last talk?</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr" aria-label="What it is doing"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Search partners<span class="gb-chat-target"> Wiser</span></span></li><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Read history<span class="gb-chat-target"> Amit Porwal</span></span></li><li class="gemboss-narr-row trace ok"><span class="gemboss-narr-dot" aria-hidden="true">⏺</span><details class="gemboss-narr-trace"><summary><code>partner_timeline(id: 418, days: 30)</code></summary><div class="gemboss-narr-trace-body"><code>{ &quot;events&quot;: 6, &quot;last&quot;: &quot;2026-10-05&quot; }</code></div></details></li><li class="gemboss-narr-row running"><span class="gemboss-narr-dot" aria-hidden="true">·</span><span class="gemboss-narr-text">Draft a proposal</span></li></ul><div class="gemboss-ec-pending" role="status"><span class="gemboss-assistant-sronly">Working</span><span class="gemboss-ec-pending-star" aria-hidden="true">✳</span><span class="gemboss-ec-pending-verb" aria-hidden="true">Working…</span><span class="gemboss-ec-pending-meta" aria-hidden="true">0s</span></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c97-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c97-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="button" class="gemboss-ec-stop" aria-label="Stop" title="Stop"><svg viewBox="0 0 12 12" aria-hidden="true" focusable="false"><rect x="1" y="1" width="10" height="10" rx="2"></rect></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
5439
7337
  &lt;div class=&quot;gb-chat&quot;&gt;
5440
7338
  &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot; aria-busy=&quot;true&quot;&gt;
5441
7339
  &lt;div class=&quot;gemboss-ec-msg user&quot;&gt;
@@ -5483,7 +7381,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5483
7381
  &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5484
7382
  &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5485
7383
  &lt;span class=&quot;gb-engine&quot;&gt;
5486
- &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c95-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
7384
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c97-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
5487
7385
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--ok&quot; aria-hidden=&quot;true&quot;&gt;
5488
7386
  &lt;/span&gt;
5489
7387
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
@@ -5495,7 +7393,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5495
7393
  &lt;/svg&gt;
5496
7394
  &lt;/span&gt;
5497
7395
  &lt;/button&gt;
5498
- &lt;div id=&quot;:c95-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
7396
+ &lt;div id=&quot;:c97-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
5499
7397
  &lt;/div&gt;
5500
7398
  &lt;/span&gt;
5501
7399
  &lt;/div&gt;
@@ -5517,7 +7415,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5517
7415
  &lt;/div&gt;
5518
7416
  &lt;/div&gt;
5519
7417
  &lt;/div&gt;
5520
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Trả lời xong: markdown (bảng, danh sách, code, URL trần thành link từ 0.29.2), dòng Copy · engine · giây</figcaption><div class="cat-live"><div style="width:460px;max-width:100%;height:640px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Who is exploring a partnership?</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr" aria-label="What it is doing"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Search partners<span class="gb-chat-target"> Wiser</span></span></li><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Read history<span class="gb-chat-target"> Amit Porwal</span></span></li><li class="gemboss-narr-row trace ok"><span class="gemboss-narr-dot" aria-hidden="true">⏺</span><details class="gemboss-narr-trace"><summary><code>partner_timeline(id: 418, days: 30)</code></summary><div class="gemboss-narr-trace-body"><code>{ &quot;events&quot;: 6, &quot;last&quot;: &quot;2026-10-05&quot; }</code></div></details></li></ul><div class="gemboss-ec-bubble"><p class="gemboss-md-p"><strong>Wiser</strong> is exploring a deeper partnership.</p><div class="gemboss-md-tablewrap"><table class="gemboss-md-table"><thead><tr><th>Partner</th><th>Last talk</th><th>Next step</th></tr></thead><tbody><tr><td>Wiser</td><td>3 days ago</td><td>Co-marketing proposal</td></tr><tr><td>Loox</td><td>12 days ago</td><td>Intro call</td></tr></tbody></table></div><ul class="gemboss-md-list"><li>Send the proposal by <strong>Friday</strong></li><li>Ask about the <code class="gemboss-md-code">affiliate</code> tier</li></ul><p class="gemboss-md-p">Their partner page: <a class="gemboss-ec-md-link" href="https://wiser.test/partners" target="_blank" rel="noopener noreferrer">https://wiser.test/partners</a>. Notes from the call are in the CRM.</p></div><div class="gb-chat-meta"><button type="button" class="ui-btn ui-btn--ghost gb-chat-copy">Copy</button><span>Claude Code</span><span>6.2s</span></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c96-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c96-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:460px;max-width:100%;height:640px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
7418
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Trả lời xong: markdown (bảng, danh sách, code, URL trần thành link từ 0.29.2), dòng Copy · engine · giây</figcaption><div class="cat-live"><div style="width:460px;max-width:100%;height:640px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Who is exploring a partnership?</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr" aria-label="What it is doing"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Search partners<span class="gb-chat-target"> Wiser</span></span></li><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot" aria-hidden="true">✓</span><span class="gemboss-narr-text">Read history<span class="gb-chat-target"> Amit Porwal</span></span></li><li class="gemboss-narr-row trace ok"><span class="gemboss-narr-dot" aria-hidden="true">⏺</span><details class="gemboss-narr-trace"><summary><code>partner_timeline(id: 418, days: 30)</code></summary><div class="gemboss-narr-trace-body"><code>{ &quot;events&quot;: 6, &quot;last&quot;: &quot;2026-10-05&quot; }</code></div></details></li></ul><div class="gemboss-ec-bubble"><p class="gemboss-md-p"><strong>Wiser</strong> is exploring a deeper partnership.</p><div class="gemboss-md-tablewrap"><table class="gemboss-md-table"><thead><tr><th>Partner</th><th>Last talk</th><th>Next step</th></tr></thead><tbody><tr><td>Wiser</td><td>3 days ago</td><td>Co-marketing proposal</td></tr><tr><td>Loox</td><td>12 days ago</td><td>Intro call</td></tr></tbody></table></div><ul class="gemboss-md-list"><li>Send the proposal by <strong>Friday</strong></li><li>Ask about the <code class="gemboss-md-code">affiliate</code> tier</li></ul><p class="gemboss-md-p">Their partner page: <a class="gemboss-ec-md-link" href="https://wiser.test/partners" target="_blank" rel="noopener noreferrer">https://wiser.test/partners</a>. Notes from the call are in the CRM.</p></div><div class="gb-chat-meta"><button type="button" class="ui-btn ui-btn--ghost gb-chat-copy">Copy</button><span>Claude Code</span><span>6.2s</span></div></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c98-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c98-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:460px;max-width:100%;height:640px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
5521
7419
  &lt;div class=&quot;gb-chat&quot;&gt;
5522
7420
  &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot;&gt;
5523
7421
  &lt;div class=&quot;gemboss-ec-msg user&quot;&gt;
@@ -5593,7 +7491,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5593
7491
  &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5594
7492
  &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5595
7493
  &lt;span class=&quot;gb-engine&quot;&gt;
5596
- &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c96-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
7494
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c98-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
5597
7495
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--ok&quot; aria-hidden=&quot;true&quot;&gt;
5598
7496
  &lt;/span&gt;
5599
7497
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
@@ -5605,7 +7503,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5605
7503
  &lt;/svg&gt;
5606
7504
  &lt;/span&gt;
5607
7505
  &lt;/button&gt;
5608
- &lt;div id=&quot;:c96-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
7506
+ &lt;div id=&quot;:c98-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
5609
7507
  &lt;/div&gt;
5610
7508
  &lt;/span&gt;
5611
7509
  &lt;/div&gt;
@@ -5627,7 +7525,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5627
7525
  &lt;/div&gt;
5628
7526
  &lt;/div&gt;
5629
7527
  &lt;/div&gt;
5630
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Lỗi: lỗi lượt có cách sửa (câu + lệnh + Copy + lỗi gốc gập); lỗi cầu nối là MỘT dòng BridgeNotice (Open setup 24px chuột / 44px chạm)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Summarize last week</div></div><div class="gemboss-ec-msg assistant"><div class="ui-notice ui-notice--danger gb-chat-error" role="alert"><div>Not signed in on your machine. Open Terminal, run the command below, then sign in:</div><code class="gb-chat-cmd">claude</code><div><button type="button" class="ui-btn ui-btn--ghost gb-chat-copy">Copy command</button></div><details class="gb-chat-original"><summary>Original error</summary><span>Error: not logged in · Please run /login</span></details></div></div><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Try again</div></div><div class="gemboss-ec-msg assistant"><p class="gb-engine-notice gb-engine-notice--down" role="status"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-notice-text">The bridge on your machine rejected this browser&#x27;s pairing code (it was installed with another code). Pair again in Setup.</span><button type="button" class="gb-engine-notice-link">Open setup</button></p></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c97-Rv:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Not connected" title="Engine: Claude Code · Opus. Bridge on your machine: Not connected"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c97-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
7528
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Lỗi: lỗi lượt có cách sửa (câu + lệnh + Copy + lỗi gốc gập); lỗi cầu nối là MỘT dòng BridgeNotice (Open setup 24px chuột / 44px chạm)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Summarize last week</div></div><div class="gemboss-ec-msg assistant"><div class="ui-notice ui-notice--danger gb-chat-error" role="alert"><div>Not signed in on your machine. Open Terminal, run the command below, then sign in:</div><code class="gb-chat-cmd">claude</code><div><button type="button" class="ui-btn ui-btn--ghost gb-chat-copy">Copy command</button></div><details class="gb-chat-original"><summary>Original error</summary><span>Error: not logged in · Please run /login</span></details></div></div><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Try again</div></div><div class="gemboss-ec-msg assistant"><p class="gb-engine-notice gb-engine-notice--down" role="status"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-notice-text">The bridge on your machine rejected this browser&#x27;s pairing code (it was installed with another code). Pair again in Setup.</span><button type="button" class="gb-engine-notice-link">Open setup</button></p></div></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c99-Rv:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Not connected" title="Engine: Claude Code · Opus. Bridge on your machine: Not connected"><span class="gb-engine-dot gb-engine-dot--down" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c99-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:420px;max-width:100%;height:520px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
5631
7529
  &lt;div class=&quot;gb-chat&quot;&gt;
5632
7530
  &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot;&gt;
5633
7531
  &lt;div class=&quot;gemboss-ec-msg user&quot;&gt;
@@ -5664,7 +7562,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5664
7562
  &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5665
7563
  &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5666
7564
  &lt;span class=&quot;gb-engine&quot;&gt;
5667
- &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c97-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus. Bridge on your machine: Not connected&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Not connected&quot;&gt;
7565
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c99-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus. Bridge on your machine: Not connected&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Not connected&quot;&gt;
5668
7566
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--down&quot; aria-hidden=&quot;true&quot;&gt;
5669
7567
  &lt;/span&gt;
5670
7568
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
@@ -5676,7 +7574,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5676
7574
  &lt;/svg&gt;
5677
7575
  &lt;/span&gt;
5678
7576
  &lt;/button&gt;
5679
- &lt;div id=&quot;:c97-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
7577
+ &lt;div id=&quot;:c99-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
5680
7578
  &lt;/div&gt;
5681
7579
  &lt;/span&gt;
5682
7580
  &lt;/div&gt;
@@ -5698,7 +7596,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5698
7596
  &lt;/div&gt;
5699
7597
  &lt;/div&gt;
5700
7598
  &lt;/div&gt;
5701
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Ghi chú trong luồng: dòng lặng (đổi engine) và cầu nối lỗi thời (vàng)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:240px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><p class="gb-chat-note">Switched to Codex: a new conversation.</p><p class="gb-engine-notice gb-engine-notice--warn" role="status"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-notice-text">This bridge is older than the one the panel expects: update it once.</span><button type="button" class="gb-engine-notice-link">Open setup</button></p></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c98-Rv:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Outdated" title="Engine: Claude Code · Opus. Bridge on your machine: Outdated"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c98-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:420px;max-width:100%;height:240px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
7599
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Ghi chú trong luồng: dòng lặng (đổi engine) và cầu nối lỗi thời (vàng)</figcaption><div class="cat-live"><div style="width:420px;max-width:100%;height:240px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"><p class="gb-chat-note">Switched to Codex: a new conversation.</p><p class="gb-engine-notice gb-engine-notice--warn" role="status"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-notice-text">This bridge is older than the one the panel expects: update it once.</span><button type="button" class="gb-engine-notice-link">Open setup</button></p></div><div class="gemboss-ec-input" data-density="full"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c100-Rv:" aria-label="Engine: Claude Code · Opus. Bridge on your machine: Outdated" title="Engine: Claude Code · Opus. Bridge on your machine: Outdated"><span class="gb-engine-dot gb-engine-dot--warn" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c100-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:420px;max-width:100%;height:240px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
5702
7600
  &lt;div class=&quot;gb-chat&quot;&gt;
5703
7601
  &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot;&gt;
5704
7602
  &lt;p class=&quot;gb-chat-note&quot;&gt;Switched to Codex: a new conversation.&lt;/p&gt;
@@ -5715,7 +7613,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5715
7613
  &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5716
7614
  &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5717
7615
  &lt;span class=&quot;gb-engine&quot;&gt;
5718
- &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c98-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus. Bridge on your machine: Outdated&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Outdated&quot;&gt;
7616
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c100-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus. Bridge on your machine: Outdated&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Outdated&quot;&gt;
5719
7617
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; aria-hidden=&quot;true&quot;&gt;
5720
7618
  &lt;/span&gt;
5721
7619
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
@@ -5727,7 +7625,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5727
7625
  &lt;/svg&gt;
5728
7626
  &lt;/span&gt;
5729
7627
  &lt;/button&gt;
5730
- &lt;div id=&quot;:c98-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
7628
+ &lt;div id=&quot;:c100-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
5731
7629
  &lt;/div&gt;
5732
7630
  &lt;/span&gt;
5733
7631
  &lt;/div&gt;
@@ -5749,7 +7647,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5749
7647
  &lt;/div&gt;
5750
7648
  &lt;/div&gt;
5751
7649
  &lt;/div&gt;
5752
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Hàng soạn hẹp: tên model rơi trước, rồi tên engine thành DẤU engine (data-density="icon")</figcaption><div class="cat-live"><div style="width:260px;max-width:100%;height:200px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"></div><div class="gemboss-ec-input" data-density="icon"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c99-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c99-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:260px;max-width:100%;height:200px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
7650
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Hàng soạn hẹp: tên model rơi trước, rồi tên engine thành DẤU engine (data-density="icon")</figcaption><div class="cat-live"><div style="width:260px;max-width:100%;height:200px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden"><div class="gb-chat"><div class="gemboss-ec-scroll" role="log" aria-label="Conversation"></div><div class="gemboss-ec-input" data-density="icon"><textarea rows="1" aria-label="Message" placeholder="Ask, or describe a partner meeting…"></textarea><div class="gemboss-ec-toolbar"><div class="gemboss-ec-toolbar-lead"><span class="gb-engine"><button type="button" class="gb-engine-chip has-mark" aria-haspopup="dialog" aria-expanded="false" aria-controls=":c101-Rv:" aria-label="Engine: Claude Code · Opus" title="Engine: Claude Code · Opus"><span class="gb-engine-dot gb-engine-dot--ok" aria-hidden="true"></span><span class="gb-engine-chiplabel">Claude Code<span class="gb-engine-chipsub"> · Opus</span></span><span class="gb-engine-chipmark"><svg class="gemboss-engine-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 13.7L21.6 12.5Q22.2 12 21.6 11.5L12 10.3Z M10.8 13.2L18.43 19.14Q19.21 19.21 19.14 18.43L13.2 10.8Z M10.3 12L11.5 21.6Q12 22.2 12.5 21.6L13.7 12Z M10.8 10.8L4.86 18.43Q4.79 19.21 5.57 19.14L13.2 13.2Z M12 10.3L2.4 11.5Q1.8 12 2.4 12.5L12 13.7Z M13.2 10.8L5.57 4.86Q4.79 4.79 4.86 5.57L10.8 13.2Z M13.7 12L12.5 2.4Q12 1.8 11.5 2.4L10.3 12Z M13.2 13.2L19.14 5.57Q19.21 4.79 18.43 4.86L10.8 10.8Z" fill-rule="nonzero"></path></svg></span></button><div id=":c101-Rv:" class="gb-engine-panel gemboss-popover-surface" role="dialog" aria-label="Assistant engine" popover="manual" hidden=""></div></span></div><div class="gemboss-ec-toolbar-tools"><button type="button" class="gemboss-ec-attach-btn" aria-label="Attach a file" title="Attach a file"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.4 11.1l-8.5 8.5a5.5 5.5 0 01-7.8-7.8l8.5-8.5a3.7 3.7 0 015.2 5.2l-8.5 8.5a1.8 1.8 0 01-2.6-2.6l7.8-7.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><input type="file" hidden="" tabindex="-1"/></div><button type="submit" disabled="" aria-label="Send" title="Send"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10.53 4.47a.75.75 0 0 0-1.06 0l-4.5 4.5a.75.75 0 0 0 1.06 1.06l3.22-3.22v8.69a.75.75 0 0 0 1.5 0v-8.69l3.22 3.22a.75.75 0 1 0 1.06-1.06l-4.5-4.5Z"></path></svg></button></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;width:260px;max-width:100%;height:200px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
5753
7651
  &lt;div class=&quot;gb-chat&quot;&gt;
5754
7652
  &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot;&gt;
5755
7653
  &lt;/div&gt;
@@ -5759,7 +7657,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5759
7657
  &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5760
7658
  &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5761
7659
  &lt;span class=&quot;gb-engine&quot;&gt;
5762
- &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c99-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
7660
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-chip has-mark&quot; aria-haspopup=&quot;dialog&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;:c101-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
5763
7661
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--ok&quot; aria-hidden=&quot;true&quot;&gt;
5764
7662
  &lt;/span&gt;
5765
7663
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
@@ -5771,7 +7669,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5771
7669
  &lt;/svg&gt;
5772
7670
  &lt;/span&gt;
5773
7671
  &lt;/button&gt;
5774
- &lt;div id=&quot;:c99-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
7672
+ &lt;div id=&quot;:c101-Rv:&quot; class=&quot;gb-engine-panel gemboss-popover-surface&quot; role=&quot;dialog&quot; aria-label=&quot;Assistant engine&quot; popover=&quot;manual&quot; hidden=&quot;&quot;&gt;
5775
7673
  &lt;/div&gt;
5776
7674
  &lt;/span&gt;
5777
7675
  &lt;/div&gt;
@@ -5793,12 +7691,12 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5793
7691
  &lt;/div&gt;
5794
7692
  &lt;/div&gt;
5795
7693
  &lt;/div&gt;
5796
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Popup engine kiểu admin: mọi engine với model riêng, một cú bấm chọn cả hai (onPick)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="gb-engine-pane" id=":c100-R0:-pane-engine"><div class="gb-engine-field"><span class="gb-engine-label" id=":c100-R3d:">Engine</span><div class="gb-engine-groups" role="group" aria-labelledby=":c100-R3d:"><div class="gb-engine-group" data-current=""><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Claude Code</span><span class="ui-badge ui-badge--success">Claude Max</span></span><div class="gb-engine-opts" role="group" aria-label="Claude Code"><button type="button" class="gb-engine-opt" aria-pressed="false">Default</button><button type="button" class="gb-engine-opt" aria-pressed="true">Opus</button><button type="button" class="gb-engine-opt" aria-pressed="false">Sonnet</button></div></div><div class="gb-engine-group"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Codex</span><span class="ui-badge ui-badge--warning">installed, not signed in</span></span><span class="gb-engine-note">Run codex login in Terminal.</span><div class="gb-engine-opts" role="group" aria-label="Codex"><button type="button" class="gb-engine-opt" aria-pressed="false" disabled="">Default</button><button type="button" class="gb-engine-opt" aria-pressed="false" disabled="">GPT-5</button></div></div></div></div><div class="gb-engine-notes"><p>Claude Code has no access to this machine in a store session.</p></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
7694
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Popup engine kiểu admin: mọi engine với model riêng, một cú bấm chọn cả hai (onPick)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="gb-engine-pane" id=":c102-R0:-pane-engine"><div class="gb-engine-field"><span class="gb-engine-label" id=":c102-R3d:">Engine</span><div class="gb-engine-groups" role="group" aria-labelledby=":c102-R3d:"><div class="gb-engine-group" data-current=""><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Claude Code</span><span class="ui-badge ui-badge--success">Claude Max</span></span><div class="gb-engine-opts" role="group" aria-label="Claude Code"><button type="button" class="gb-engine-opt" aria-pressed="false">Default</button><button type="button" class="gb-engine-opt" aria-pressed="true">Opus</button><button type="button" class="gb-engine-opt" aria-pressed="false">Sonnet</button></div></div><div class="gb-engine-group"><span class="gb-engine-rowhead"><span class="gb-engine-rowname">Codex</span><span class="ui-badge ui-badge--warning">installed, not signed in</span></span><span class="gb-engine-note">Run codex login in Terminal.</span><div class="gb-engine-opts" role="group" aria-label="Codex"><button type="button" class="gb-engine-opt" aria-pressed="false" disabled="">Default</button><button type="button" class="gb-engine-opt" aria-pressed="false" disabled="">GPT-5</button></div></div></div></div><div class="gb-engine-notes"><p>Claude Code has no access to this machine in a store session.</p></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
5797
7695
  &lt;div class=&quot;gb-engine-panel gb-engine-panel--inline gemboss-popover-surface&quot; role=&quot;group&quot; aria-label=&quot;Assistant engine&quot;&gt;
5798
- &lt;div class=&quot;gb-engine-pane&quot; id=&quot;:c100-R0:-pane-engine&quot;&gt;
7696
+ &lt;div class=&quot;gb-engine-pane&quot; id=&quot;:c102-R0:-pane-engine&quot;&gt;
5799
7697
  &lt;div class=&quot;gb-engine-field&quot;&gt;
5800
- &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c100-R3d:&quot;&gt;Engine&lt;/span&gt;
5801
- &lt;div class=&quot;gb-engine-groups&quot; role=&quot;group&quot; aria-labelledby=&quot;:c100-R3d:&quot;&gt;
7698
+ &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c102-R3d:&quot;&gt;Engine&lt;/span&gt;
7699
+ &lt;div class=&quot;gb-engine-groups&quot; role=&quot;group&quot; aria-labelledby=&quot;:c102-R3d:&quot;&gt;
5802
7700
  &lt;div class=&quot;gb-engine-group&quot; data-current=&quot;&quot;&gt;
5803
7701
  &lt;span class=&quot;gb-engine-rowhead&quot;&gt;
5804
7702
  &lt;span class=&quot;gb-engine-rowname&quot;&gt;Claude Code&lt;/span&gt;
@@ -5828,14 +7726,14 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5828
7726
  &lt;/div&gt;
5829
7727
  &lt;/div&gt;
5830
7728
  &lt;/div&gt;
5831
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Tab Setup với form ghép cặp của bề mặt: nút submit giữ kiểu của nó trong composer (0.29.2)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c101-R0:-tab-engine" aria-controls=":c101-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c101-R0:-tab-setup" aria-controls=":c101-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c101-R0:-tab-status" aria-controls=":c101-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c101-R0:-pane-setup" aria-labelledby=":c101-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong></p><div class="gb-engine-steps"><form class="ui-toolbar"><input class="gemboss-field" aria-label="Pairing code" placeholder="Pairing code"/><button type="submit" class="ui-btn ui-btn--primary">Pair</button></form></div><pre class="gb-engine-cmd"><code>curl -fsSL https://radar.test/bridge/install.sh | sh</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
7729
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Tab Setup với form ghép cặp của bề mặt: nút submit giữ kiểu của nó trong composer (0.29.2)</figcaption><div class="cat-live"><div style="max-width:360px"><div class="gb-engine-panel gb-engine-panel--inline gemboss-popover-surface" role="group" aria-label="Assistant engine"><div class="ui-tabs gb-engine-tabs" role="tablist" aria-label="Engine, setup and status"><button type="button" role="tab" id=":c103-R0:-tab-engine" aria-controls=":c103-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c103-R0:-tab-setup" aria-controls=":c103-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c103-R0:-tab-status" aria-controls=":c103-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c103-R0:-pane-setup" aria-labelledby=":c103-R0:-tab-setup"><p class="gb-engine-callout gb-engine-callout--down"><strong>Bridge on your machine: not connected.</strong></p><div class="gb-engine-steps"><form class="ui-toolbar"><input class="gemboss-field" aria-label="Pairing code" placeholder="Pairing code"/><button type="submit" class="ui-btn ui-btn--primary">Pair</button></form></div><pre class="gb-engine-cmd"><code>curl -fsSL https://radar.test/bridge/install.sh | sh</code></pre><div class="gb-engine-actions"><button type="button" class="ui-btn ui-btn--primary">Copy command</button><span class="gb-engine-said" role="status"></span></div></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:360px&quot;&gt;
5832
7730
  &lt;div class=&quot;gb-engine-panel gb-engine-panel--inline gemboss-popover-surface&quot; role=&quot;group&quot; aria-label=&quot;Assistant engine&quot;&gt;
5833
7731
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5834
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c101-R0:-tab-engine&quot; aria-controls=&quot;:c101-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5835
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c101-R0:-tab-setup&quot; aria-controls=&quot;:c101-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
5836
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c101-R0:-tab-status&quot; aria-controls=&quot;:c101-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
7732
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c103-R0:-tab-engine&quot; aria-controls=&quot;:c103-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
7733
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c103-R0:-tab-setup&quot; aria-controls=&quot;:c103-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
7734
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c103-R0:-tab-status&quot; aria-controls=&quot;:c103-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
5837
7735
  &lt;/div&gt;
5838
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c101-R0:-pane-setup&quot; aria-labelledby=&quot;:c101-R0:-tab-setup&quot;&gt;
7736
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c103-R0:-pane-setup&quot; aria-labelledby=&quot;:c103-R0:-tab-setup&quot;&gt;
5839
7737
  &lt;p class=&quot;gb-engine-callout gb-engine-callout--down&quot;&gt;
5840
7738
  &lt;strong&gt;Bridge on your machine: not connected.&lt;/strong&gt;
5841
7739
  &lt;/p&gt;
@@ -5856,7 +7754,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5856
7754
  &lt;/div&gt;
5857
7755
  &lt;/div&gt;
5858
7756
  &lt;/div&gt;</code></pre></details></figure></section>
5859
- <section id="assistant"><h2>Trợ lý: cột phiên</h2><p><code>SessionRail</code> (React). Khung toàn màn hình / cửa sổ nổi / cột phải cao hết màn (<code>allowSide</code>) / thanh là <code>AssistantHost</code>, cần React vì có trạng thái.</p><figure class="cat-demo"><figcaption>SessionRail</figcaption><div class="cat-live"><div style="height:360px;display:flex"><aside class="gemboss-assistant-rail"><div class="gemboss-assistant-rail-top"><button type="button" class="gemboss-assistant-newchat" title="Phiên mới"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9"></path><path d="M14.5 3.5l2 2L10 12H8v-2z"></path></g></svg><span>Phiên mới</span></button><button type="button" class="gemboss-assistant-collapse" aria-label="Collapse sidebar" title="Collapse"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5l-5 5 5 5"></path></g></svg></button></div><div class="gemboss-assistant-search gemboss-field gemboss-field--group"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"></circle><path d="M13 13l3.5 3.5"></path></g></svg><input class="gemboss-field__bare" placeholder="Tìm phiên…" aria-label="Search history" value=""/><kbd class="gemboss-assistant-kbd">/</kbd></div><div class="gemboss-assistant-threads"><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Đã ghim</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="So sánh advertorial với listicle"><span class="gemboss-assistant-thread-titlerow"><svg viewBox="0 0 20 20" class="gemboss-assistant-pin-dot" aria-hidden="true" focusable="false"><path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor"></path><path d="M10 11v5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg><span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span></span><span class="gemboss-assistant-thread-meta">5/9/2026</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm nay</div><div class="gemboss-assistant-thread active"><button type="button" class="gemboss-assistant-thread-main" title="Store nào đang dựng loạt landing?"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Store nào đang dựng loạt landing?</span></span><span class="gemboss-assistant-thread-meta">3 giờ trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm qua</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="Landing điểm cao nhất của corpus"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Landing điểm cao nhất của corpus</span></span><span class="gemboss-assistant-thread-meta">1 ngày trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div></div></aside></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;height:360px;display:flex&quot;&gt;
7757
+ <section id="assistant"><h2>Trợ lý: cột phiên</h2><p><code>SessionRail</code> (React). Khung toàn màn hình / cửa sổ nổi / cột phải cao hết màn (<code>allowSide</code>) / thanh là <code>AssistantHost</code>, cần React vì có trạng thái.</p><figure class="cat-demo"><figcaption>SessionRail</figcaption><div class="cat-live"><div style="height:360px;display:flex"><aside class="gemboss-assistant-rail"><div class="gemboss-assistant-rail-top"><button type="button" class="gemboss-assistant-newchat" title="Phiên mới"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9"></path><path d="M14.5 3.5l2 2L10 12H8v-2z"></path></g></svg><span>Phiên mới</span></button><button type="button" class="gemboss-assistant-collapse" aria-label="Collapse sidebar" title="Collapse"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5l-5 5 5 5"></path></g></svg></button></div><div class="gemboss-assistant-search gemboss-field gemboss-field--group"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"></circle><path d="M13 13l3.5 3.5"></path></g></svg><input class="gemboss-field__bare" placeholder="Tìm phiên…" aria-label="Search history" value=""/><kbd class="gemboss-assistant-kbd">/</kbd></div><div class="gemboss-assistant-threads"><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Đã ghim</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="So sánh advertorial với listicle"><span class="gemboss-assistant-thread-titlerow"><svg viewBox="0 0 20 20" class="gemboss-assistant-pin-dot" aria-hidden="true" focusable="false"><path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor"></path><path d="M10 11v5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg><span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span></span><span class="gemboss-assistant-thread-meta">9/9/2026</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm nay</div><div class="gemboss-assistant-thread active"><button type="button" class="gemboss-assistant-thread-main" title="Store nào đang dựng loạt landing?"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Store nào đang dựng loạt landing?</span></span><span class="gemboss-assistant-thread-meta">3 giờ trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm qua</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="Landing điểm cao nhất của corpus"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Landing điểm cao nhất của corpus</span></span><span class="gemboss-assistant-thread-meta">1 ngày trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div></div></aside></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;height:360px;display:flex&quot;&gt;
5860
7758
  &lt;aside class=&quot;gemboss-assistant-rail&quot;&gt;
5861
7759
  &lt;div class=&quot;gemboss-assistant-rail-top&quot;&gt;
5862
7760
  &lt;button type=&quot;button&quot; class=&quot;gemboss-assistant-newchat&quot; title=&quot;Phiên mới&quot;&gt;
@@ -5905,7 +7803,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5905
7803
  &lt;/svg&gt;
5906
7804
  &lt;span class=&quot;gemboss-assistant-thread-title&quot;&gt;So sánh advertorial với listicle&lt;/span&gt;
5907
7805
  &lt;/span&gt;
5908
- &lt;span class=&quot;gemboss-assistant-thread-meta&quot;&gt;5/9/2026&lt;/span&gt;
7806
+ &lt;span class=&quot;gemboss-assistant-thread-meta&quot;&gt;9/9/2026&lt;/span&gt;
5909
7807
  &lt;/button&gt;
5910
7808
  &lt;div class=&quot;gemboss-assistant-thread-actions&quot;&gt;
5911
7809
  &lt;button type=&quot;button&quot; class=&quot;gemboss-assistant-thread-act&quot; aria-label=&quot;Options&quot;&gt;
@@ -5976,7 +7874,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
5976
7874
  &lt;/div&gt;
5977
7875
  &lt;/aside&gt;
5978
7876
  &lt;/div&gt;</code></pre></details></figure></section>
5979
- <section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 44 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code>&lt;g&gt;</code>, không trên <code>&lt;svg&gt;</code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="reaction"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg><code>reaction</code></div><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="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"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="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"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="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"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code>&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;
7877
+ <section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 45 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code>&lt;g&gt;</code>, không trên <code>&lt;svg&gt;</code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="reaction"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg><code>reaction</code></div><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="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"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="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"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="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"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="apps"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="4.5" r="1"></circle><circle cx="10" cy="4.5" r="1"></circle><circle cx="15.5" cy="4.5" r="1"></circle><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle><circle cx="4.5" cy="15.5" r="1"></circle><circle cx="10" cy="15.5" r="1"></circle><circle cx="15.5" cy="15.5" r="1"></circle></g></svg><code>apps</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code>&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;
5980
7878
  &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5981
7879
  &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;
5982
7880
  &lt;/rect&gt;