@gemboss/ui 0.25.0 → 0.32.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"><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"><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="#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="#chat">Thân chat</a><a href="#reactions">Reactions</a><a href="#assistant-engine">Trợ lý: chọn engine</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.25.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>884d1aacfac5</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="#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.32.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>749fece68d29</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;
@@ -516,7 +516,49 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
516
516
  &lt;i&gt;
517
517
  &lt;/i&gt;Lượt mở website&lt;/span&gt;
518
518
  &lt;/figcaption&gt;
519
- &lt;/figure&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Thanh ngang (<code>ui-barlist</code>, <code>--v</code> = n / n lớn nhất, <code>__note</code> dòng phụ)</figcaption><div class="cat-live"><ol class="ui-barlist"><li><span class="ui-barlist__label">Tiếng Việt</span><span class="ui-barlist__val">512<span class="ui-barlist__share">49,8%</span></span><span class="ui-barlist__bar" style="--v:1"></span><span class="ui-barlist__note">Đọc hết 31%</span></li><li><span class="ui-barlist__label">English</span><span class="ui-barlist__val">390<span class="ui-barlist__share">37,9%</span></span><span class="ui-barlist__bar" style="--v:.762;--c:var(--ui-series-2)"></span><span class="ui-barlist__note">Đọc hết 27%</span></li><li><span class="ui-barlist__label">中文</span><span class="ui-barlist__val">126<span class="ui-barlist__share">12,3%</span></span><span class="ui-barlist__bar" style="--v:.246;--c:var(--ui-series-3)"></span><span class="ui-barlist__note">Đọc hết 35%</span></li></ol></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;ol class=&quot;ui-barlist&quot;&gt;
519
+ &lt;/figure&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Sparkline (0.30.0, <code>Sparkline</code>, CSS <code>minichart.css</code> do component tự nạp): đường mực nhạt, điểm mới nhất một chấm iris; khoảng trống (<code>null</code>) làm đứt đường; đếm thì đáy là 0. <code>tone</code> success / critical / series; có <code>label</code> thì là ảnh có tên</figcaption><div class="cat-live"><div class="cat-row"><svg class="ui-spark" width="120" height="28" viewBox="0 0 120 28" aria-hidden="true" focusable="false"><path class="ui-spark__area" d="M3 17.7 L22 12.8 L41 15.2 L60 10.3 L79 5.4 L98 7.9 L117 3 L117 25 L3 25 Z"></path><path class="ui-spark__line" d="M3 17.7 L22 12.8 L41 15.2 L60 10.3 L79 5.4 L98 7.9 L117 3"></path><circle class="ui-spark__end" cx="117" cy="3" r="2.5"></circle></svg><svg class="ui-spark ui-spark--critical" width="120" height="28" viewBox="0 0 120 28" role="img" aria-label="Errors, 7 days: 9 then 3"><title>Errors, 7 days: 9 then 3</title><path class="ui-spark__area" d="M3 3 L22 5.4 L41 5.4 L60 10.3 L60 25 L3 25 Z"></path><path class="ui-spark__area" d="M98 15.2 L117 17.7 L117 25 L98 25 Z"></path><path class="ui-spark__line" d="M3 3 L22 5.4 L41 5.4 L60 10.3"></path><path class="ui-spark__line" d="M98 15.2 L117 17.7"></path><circle class="ui-spark__end" cx="117" cy="17.7" r="2.5"></circle></svg><svg class="ui-spark ui-spark--series" width="120" height="28" viewBox="0 0 120 28" role="img" aria-label="Rank over 7 days: #12 then #2"><title>Rank over 7 days: #12 then #2</title><path class="ui-spark__area" d="M3 25 L22 19.5 L41 15.8 L60 15.8 L79 10.3 L98 8.5 L117 6.7 L117 25 L3 25 Z"></path><path class="ui-spark__line" d="M3 25 L22 19.5 L41 15.8 L60 15.8 L79 10.3 L98 8.5 L117 6.7"></path><circle class="ui-spark__end" cx="117" cy="6.7" r="2.5"></circle></svg></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;cat-row&quot;&gt;
520
+ &lt;svg class=&quot;ui-spark&quot; width=&quot;120&quot; height=&quot;28&quot; viewBox=&quot;0 0 120 28&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
521
+ &lt;path class=&quot;ui-spark__area&quot; d=&quot;M3 17.7 L22 12.8 L41 15.2 L60 10.3 L79 5.4 L98 7.9 L117 3 L117 25 L3 25 Z&quot;&gt;
522
+ &lt;/path&gt;
523
+ &lt;path class=&quot;ui-spark__line&quot; d=&quot;M3 17.7 L22 12.8 L41 15.2 L60 10.3 L79 5.4 L98 7.9 L117 3&quot;&gt;
524
+ &lt;/path&gt;
525
+ &lt;circle class=&quot;ui-spark__end&quot; cx=&quot;117&quot; cy=&quot;3&quot; r=&quot;2.5&quot;&gt;
526
+ &lt;/circle&gt;
527
+ &lt;/svg&gt;
528
+ &lt;svg class=&quot;ui-spark ui-spark--critical&quot; width=&quot;120&quot; height=&quot;28&quot; viewBox=&quot;0 0 120 28&quot; role=&quot;img&quot; aria-label=&quot;Errors, 7 days: 9 then 3&quot;&gt;
529
+ &lt;title&gt;Errors, 7 days: 9 then 3&lt;/title&gt;
530
+ &lt;path class=&quot;ui-spark__area&quot; d=&quot;M3 3 L22 5.4 L41 5.4 L60 10.3 L60 25 L3 25 Z&quot;&gt;
531
+ &lt;/path&gt;
532
+ &lt;path class=&quot;ui-spark__area&quot; d=&quot;M98 15.2 L117 17.7 L117 25 L98 25 Z&quot;&gt;
533
+ &lt;/path&gt;
534
+ &lt;path class=&quot;ui-spark__line&quot; d=&quot;M3 3 L22 5.4 L41 5.4 L60 10.3&quot;&gt;
535
+ &lt;/path&gt;
536
+ &lt;path class=&quot;ui-spark__line&quot; d=&quot;M98 15.2 L117 17.7&quot;&gt;
537
+ &lt;/path&gt;
538
+ &lt;circle class=&quot;ui-spark__end&quot; cx=&quot;117&quot; cy=&quot;17.7&quot; r=&quot;2.5&quot;&gt;
539
+ &lt;/circle&gt;
540
+ &lt;/svg&gt;
541
+ &lt;svg class=&quot;ui-spark ui-spark--series&quot; width=&quot;120&quot; height=&quot;28&quot; viewBox=&quot;0 0 120 28&quot; role=&quot;img&quot; aria-label=&quot;Rank over 7 days: #12 then #2&quot;&gt;
542
+ &lt;title&gt;Rank over 7 days: #12 then #2&lt;/title&gt;
543
+ &lt;path class=&quot;ui-spark__area&quot; d=&quot;M3 25 L22 19.5 L41 15.8 L60 15.8 L79 10.3 L98 8.5 L117 6.7 L117 25 L3 25 Z&quot;&gt;
544
+ &lt;/path&gt;
545
+ &lt;path class=&quot;ui-spark__line&quot; d=&quot;M3 25 L22 19.5 L41 15.8 L60 15.8 L79 10.3 L98 8.5 L117 6.7&quot;&gt;
546
+ &lt;/path&gt;
547
+ &lt;circle class=&quot;ui-spark__end&quot; cx=&quot;117&quot; cy=&quot;6.7&quot; r=&quot;2.5&quot;&gt;
548
+ &lt;/circle&gt;
549
+ &lt;/svg&gt;
550
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>ShareBar (0.30.0): một thanh chia theo tỉ phần, phần bằng 0 không chiếm chỗ; tên ảnh đọc mọi phần. Tông là tông của badge</figcaption><div class="cat-live"><div class="ui-sharebar" role="img" aria-label="Status: New 25, Contacted 2, Qualified 4, Archived 3, Spam 2"><span class="ui-sharebar__seg ui-sharebar__seg--info" style="flex-grow:0.6944" title="New 25"></span><span class="ui-sharebar__seg ui-sharebar__seg--warning" style="flex-grow:0.0556" title="Contacted 2"></span><span class="ui-sharebar__seg ui-sharebar__seg--success" style="flex-grow:0.1111" title="Qualified 4"></span><span class="ui-sharebar__seg ui-sharebar__seg--neutral" style="flex-grow:0.0833" title="Archived 3"></span><span class="ui-sharebar__seg ui-sharebar__seg--critical" style="flex-grow:0.0556" title="Spam 2"></span></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-sharebar&quot; role=&quot;img&quot; aria-label=&quot;Status: New 25, Contacted 2, Qualified 4, Archived 3, Spam 2&quot;&gt;
551
+ &lt;span class=&quot;ui-sharebar__seg ui-sharebar__seg--info&quot; style=&quot;flex-grow:0.6944&quot; title=&quot;New 25&quot;&gt;
552
+ &lt;/span&gt;
553
+ &lt;span class=&quot;ui-sharebar__seg ui-sharebar__seg--warning&quot; style=&quot;flex-grow:0.0556&quot; title=&quot;Contacted 2&quot;&gt;
554
+ &lt;/span&gt;
555
+ &lt;span class=&quot;ui-sharebar__seg ui-sharebar__seg--success&quot; style=&quot;flex-grow:0.1111&quot; title=&quot;Qualified 4&quot;&gt;
556
+ &lt;/span&gt;
557
+ &lt;span class=&quot;ui-sharebar__seg ui-sharebar__seg--neutral&quot; style=&quot;flex-grow:0.0833&quot; title=&quot;Archived 3&quot;&gt;
558
+ &lt;/span&gt;
559
+ &lt;span class=&quot;ui-sharebar__seg ui-sharebar__seg--critical&quot; style=&quot;flex-grow:0.0556&quot; title=&quot;Spam 2&quot;&gt;
560
+ &lt;/span&gt;
561
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Thanh ngang (<code>ui-barlist</code>, <code>--v</code> = n / n lớn nhất, <code>__note</code> dòng phụ)</figcaption><div class="cat-live"><ol class="ui-barlist"><li><span class="ui-barlist__label">Tiếng Việt</span><span class="ui-barlist__val">512<span class="ui-barlist__share">49,8%</span></span><span class="ui-barlist__bar" style="--v:1"></span><span class="ui-barlist__note">Đọc hết 31%</span></li><li><span class="ui-barlist__label">English</span><span class="ui-barlist__val">390<span class="ui-barlist__share">37,9%</span></span><span class="ui-barlist__bar" style="--v:.762;--c:var(--ui-series-2)"></span><span class="ui-barlist__note">Đọc hết 27%</span></li><li><span class="ui-barlist__label">中文</span><span class="ui-barlist__val">126<span class="ui-barlist__share">12,3%</span></span><span class="ui-barlist__bar" style="--v:.246;--c:var(--ui-series-3)"></span><span class="ui-barlist__note">Đọc hết 35%</span></li></ol></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;ol class=&quot;ui-barlist&quot;&gt;
520
562
  &lt;li&gt;
521
563
  &lt;span class=&quot;ui-barlist__label&quot;&gt;Tiếng Việt&lt;/span&gt;
522
564
  &lt;span class=&quot;ui-barlist__val&quot;&gt;512&lt;span class=&quot;ui-barlist__share&quot;&gt;49,8%&lt;/span&gt;
@@ -743,7 +785,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
743
785
  &lt;/tbody&gt;
744
786
  &lt;/table&gt;
745
787
  &lt;/div&gt;
746
- &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;/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;/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;
747
789
  &lt;div class=&quot;ui-table-wrap&quot;&gt;
748
790
  &lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;
749
791
  &lt;caption class=&quot;ui-sr-only&quot;&gt;Pages captured per day&lt;/caption&gt;
@@ -875,7 +917,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
875
917
  &lt;/tr&gt;
876
918
  &lt;/tbody&gt;
877
919
  &lt;/table&gt;
878
- &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;/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;/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;
879
921
  &lt;div class=&quot;ui-table-wrap&quot;&gt;
880
922
  &lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;
881
923
  &lt;caption class=&quot;ui-sr-only&quot;&gt;Jobs&lt;/caption&gt;
@@ -1301,7 +1343,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1301
1343
  &lt;/tbody&gt;
1302
1344
  &lt;/table&gt;
1303
1345
  &lt;/div&gt;
1304
- &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;/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;/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;
1305
1347
  &lt;div class=&quot;ui-index&quot;&gt;
1306
1348
  &lt;div class=&quot;ui-index__sortbar&quot; role=&quot;group&quot; aria-label=&quot;Sort&quot;&gt;
1307
1349
  &lt;span aria-hidden=&quot;true&quot;&gt;Sort&lt;/span&gt;
@@ -1743,7 +1785,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1743
1785
  &lt;/div&gt;
1744
1786
  &lt;/li&gt;
1745
1787
  &lt;/ul&gt;
1746
- &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;/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;&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;/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&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;
1788
+ &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;/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;&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;/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&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;
1747
1789
  &lt;div class=&quot;ui-resource&quot;&gt;
1748
1790
  &lt;div class=&quot;ui-bulkbar&quot;&gt;
1749
1791
  &lt;label class=&quot;ui-table__checkbox&quot;&gt;
@@ -1820,7 +1862,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1820
1862
  &lt;/li&gt;
1821
1863
  &lt;/ul&gt;
1822
1864
  &lt;/div&gt;
1823
- &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;/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;
1865
+ &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;/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;
1824
1866
  &lt;ul class=&quot;ui-list&quot; aria-label=&quot;People&quot;&gt;
1825
1867
  &lt;li class=&quot;ui-list__item&quot;&gt;
1826
1868
  &lt;div class=&quot;ui-list__media&quot;&gt;
@@ -1935,7 +1977,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1935
1977
  &lt;time class=&quot;ui-list__time&quot;&gt;Yesterday&lt;/time&gt;
1936
1978
  &lt;/li&gt;
1937
1979
  &lt;/ul&gt;
1938
- &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;/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;
1980
+ &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;/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;
1939
1981
  &lt;ul class=&quot;ui-list ui-list--compact ui-list--activity ui-list--wrap&quot; aria-label=&quot;Relationship history&quot;&gt;
1940
1982
  &lt;li class=&quot;ui-list__item&quot;&gt;
1941
1983
  &lt;span class=&quot;ui-list__dot ui-list__dot--info&quot; aria-hidden=&quot;true&quot;&gt;
@@ -2378,7 +2420,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2378
2420
  &lt;/header&gt;
2379
2421
  &lt;p class=&quot;ui-board__empty&quot;&gt;Nothing here&lt;/p&gt;
2380
2422
  &lt;/section&gt;
2381
- &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;/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;
2423
+ &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;/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;
2382
2424
  &lt;div class=&quot;ui-board&quot; role=&quot;region&quot; aria-label=&quot;Element pipeline&quot;&gt;
2383
2425
  &lt;section class=&quot;ui-board__col&quot; data-col=&quot;todo&quot; aria-labelledby=&quot;ui-board-todo&quot;&gt;
2384
2426
  &lt;header class=&quot;ui-board__head&quot;&gt;
@@ -2608,7 +2650,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2608
2650
  &lt;/header&gt;
2609
2651
  &lt;p class=&quot;ui-board__empty&quot;&gt;Nothing here&lt;/p&gt;
2610
2652
  &lt;/section&gt;
2611
- &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;/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;
2653
+ &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;/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;
2612
2654
  &lt;div class=&quot;ui-board&quot; id=&quot;catalog-paged&quot; role=&quot;region&quot; aria-label=&quot;Ideas&quot;&gt;
2613
2655
  &lt;section class=&quot;ui-board__col&quot; data-col=&quot;enough&quot; aria-labelledby=&quot;catalog-paged-enough&quot;&gt;
2614
2656
  &lt;header class=&quot;ui-board__head&quot;&gt;
@@ -3545,10 +3587,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3545
3587
  &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Xoá&lt;/button&gt;
3546
3588
  &lt;/div&gt;
3547
3589
  &lt;/div&gt;</code></pre></details></figure></section>
3548
- <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;/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;:c52-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;:c52-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;
3590
+ <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;/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;:c56-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;:c56-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;
3549
3591
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3550
3592
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3551
- &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;:c52-R0:&quot;&gt;
3593
+ &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;:c56-R0:&quot;&gt;
3552
3594
  &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
3553
3595
  &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;
3554
3596
  &lt;/path&gt;
@@ -3599,7 +3641,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3599
3641
  &lt;/details&gt;
3600
3642
  &lt;/div&gt;
3601
3643
  &lt;/header&gt;
3602
- &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c52-R0:&quot;&gt;
3644
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c56-R0:&quot;&gt;
3603
3645
  &lt;div class=&quot;gnav-scroll&quot;&gt;
3604
3646
  &lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;
3605
3647
  &lt;div class=&quot;gnav-group active&quot;&gt;
@@ -3677,10 +3719,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3677
3719
  &lt;/div&gt;
3678
3720
  &lt;/main&gt;
3679
3721
  &lt;/div&gt;</code></pre></details></figure></section>
3680
- <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;/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;:c53-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;:c53-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;
3722
+ <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;/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;:c57-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;:c57-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;
3681
3723
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3682
3724
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3683
- &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;:c53-R0:&quot;&gt;
3725
+ &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;:c57-R0:&quot;&gt;
3684
3726
  &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
3685
3727
  &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;
3686
3728
  &lt;/path&gt;
@@ -3705,7 +3747,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3705
3747
  &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
3706
3748
  &lt;/div&gt;
3707
3749
  &lt;/header&gt;
3708
- &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c53-R0:&quot;&gt;
3750
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c57-R0:&quot;&gt;
3709
3751
  &lt;div class=&quot;gnav-scroll&quot;&gt;
3710
3752
  &lt;div class=&quot;gnav-group&quot;&gt;
3711
3753
  &lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;
@@ -3797,10 +3839,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3797
3839
  &lt;/span&gt;
3798
3840
  &lt;/div&gt;
3799
3841
  &lt;/div&gt;</code></pre></details></figure></section>
3800
- <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;/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;:c55-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;:c55-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;
3842
+ <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;/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-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;
3801
3843
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3802
3844
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3803
- &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;:c55-R0:&quot;&gt;
3845
+ &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;
3804
3846
  &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
3805
3847
  &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;
3806
3848
  &lt;/path&gt;
@@ -3825,7 +3867,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3825
3867
  &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
3826
3868
  &lt;/div&gt;
3827
3869
  &lt;/header&gt;
3828
- &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c55-R0:&quot;&gt;
3870
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c59-R0:&quot;&gt;
3829
3871
  &lt;div class=&quot;gnav-scroll&quot;&gt;
3830
3872
  &lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;
3831
3873
  &lt;div class=&quot;gnav-group active&quot;&gt;
@@ -3891,10 +3933,10 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3891
3933
  &lt;/div&gt;
3892
3934
  &lt;/div&gt;
3893
3935
  &lt;/main&gt;
3894
- &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;/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;:c56-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;:c56-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;
3936
+ &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;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-platform-shell&quot;&gt;&lt;header class=&quot;gemboss-platform-topbar&quot;&gt;&lt;div class=&quot;gemboss-topbar-start&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c60-R0:&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M3 5.5h14M3 10h14M3 14.5h14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.7&quot; stroke-linecap=&quot;round&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;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;: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;/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;
3895
3937
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3896
3938
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3897
- &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;:c56-R0:&quot;&gt;
3939
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-menu-btn&quot; aria-label=&quot;Open menu&quot; aria-expanded=&quot;false&quot; data-label-open=&quot;Open menu&quot; data-label-close=&quot;Close menu&quot; aria-controls=&quot;:c60-R0:&quot;&gt;
3898
3940
  &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
3899
3941
  &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;
3900
3942
  &lt;/path&gt;
@@ -3919,7 +3961,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3919
3961
  &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
3920
3962
  &lt;/div&gt;
3921
3963
  &lt;/header&gt;
3922
- &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c56-R0:&quot;&gt;
3964
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:c60-R0:&quot;&gt;
3923
3965
  &lt;div class=&quot;gnav-scroll&quot;&gt;
3924
3966
  &lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;
3925
3967
  &lt;div class=&quot;gnav-group active&quot;&gt;
@@ -3988,7 +4030,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3988
4030
  &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;
3989
4031
  &lt;div class=&quot;ui-card&quot;&gt;Một mục trong feed, cột 720px.&lt;/div&gt;
3990
4032
  &lt;/div&gt;</code></pre></details></figure></section>
3991
- <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;/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;:c59-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;:c59-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;
4033
+ <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;/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;:c63-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;:c63-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;
3992
4034
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3993
4035
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3994
4036
  &lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;
@@ -4047,11 +4089,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4047
4089
  &lt;/path&gt;
4048
4090
  &lt;/g&gt;
4049
4091
  &lt;/svg&gt;
4050
- &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;:c59-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;
4092
+ &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;:c63-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;
4051
4093
  &lt;/div&gt;
4052
4094
  &lt;p class=&quot;gb-search-empty&quot; aria-live=&quot;polite&quot;&gt;
4053
4095
  &lt;/p&gt;
4054
- &lt;div class=&quot;gb-search-results&quot; id=&quot;:c59-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;
4096
+ &lt;div class=&quot;gb-search-results&quot; id=&quot;:c63-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;
4055
4097
  &lt;/div&gt;
4056
4098
  &lt;div class=&quot;gb-search-foot&quot; aria-hidden=&quot;true&quot;&gt;
4057
4099
  &lt;span&gt;↵ open&lt;/span&gt;
@@ -4144,7 +4186,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4144
4186
  &lt;/section&gt;
4145
4187
  &lt;/div&gt;
4146
4188
  &lt;/div&gt;
4147
- &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;/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;:c59-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;:c59-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;
4189
+ &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;/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;:c63-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;:c63-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;
4148
4190
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
4149
4191
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
4150
4192
  &lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;
@@ -4203,11 +4245,11 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4203
4245
  &lt;/path&gt;
4204
4246
  &lt;/g&gt;
4205
4247
  &lt;/svg&gt;
4206
- &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;:c59-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;
4248
+ &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;:c63-Rt:&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;
4207
4249
  &lt;/div&gt;
4208
4250
  &lt;p class=&quot;gb-search-empty&quot; aria-live=&quot;polite&quot;&gt;
4209
4251
  &lt;/p&gt;
4210
- &lt;div class=&quot;gb-search-results&quot; id=&quot;:c59-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;
4252
+ &lt;div class=&quot;gb-search-results&quot; id=&quot;:c63-Rt:&quot; role=&quot;listbox&quot; aria-busy=&quot;false&quot;&gt;
4211
4253
  &lt;/div&gt;
4212
4254
  &lt;div class=&quot;gb-search-foot&quot; aria-hidden=&quot;true&quot;&gt;
4213
4255
  &lt;span&gt;↵ open&lt;/span&gt;
@@ -4404,7 +4446,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4404
4446
  &lt;/a&gt;
4405
4447
  &lt;/li&gt;
4406
4448
  &lt;/ol&gt;</code></pre></details></figure></section>
4407
- <section id="auth"><h2>Đăng nhập</h2><figure class="cat-demo cat-screen"><figcaption>AuthLayout + PasswordField</figcaption><iframe title="AuthLayout + PasswordField" style="height:620px" 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;/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><details class="cat-code"><summary>Markup</summary><pre><code>&lt;main class=&quot;gb-auth&quot;&gt;
4449
+ <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;/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;
4408
4450
  &lt;div class=&quot;gb-auth-split&quot;&gt;
4409
4451
  &lt;div class=&quot;gb-auth-stage&quot;&gt;
4410
4452
  &lt;div class=&quot;gb-auth-card&quot;&gt;
@@ -4453,7 +4495,96 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4453
4495
  &lt;/div&gt;
4454
4496
  &lt;/aside&gt;
4455
4497
  &lt;/div&gt;
4498
+ &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;/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;
4499
+ &lt;div class=&quot;gb-auth-split&quot;&gt;
4500
+ &lt;div class=&quot;gb-auth-stage&quot;&gt;
4501
+ &lt;div class=&quot;gb-auth-card&quot;&gt;
4502
+ &lt;header class=&quot;gb-auth-header&quot;&gt;
4503
+ &lt;span class=&quot;gb-auth-mark&quot; aria-hidden=&quot;true&quot;&gt;
4504
+ &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;
4505
+ &lt;rect width=&quot;32&quot; height=&quot;32&quot; rx=&quot;7&quot; style=&quot;fill:var(--gb-mark-bg)&quot;&gt;
4506
+ &lt;/rect&gt;
4507
+ &lt;g transform=&quot;translate(16,16) scale(0.24) translate(-50,-62)&quot;&gt;
4508
+ &lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#8a93ff&quot;&gt;
4509
+ &lt;/polygon&gt;
4510
+ &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;
4511
+ &lt;/path&gt;
4512
+ &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;
4513
+ &lt;/path&gt;
4514
+ &lt;/g&gt;
4515
+ &lt;/svg&gt;
4516
+ &lt;/span&gt;
4517
+ &lt;h1&gt;gemform&lt;/h1&gt;
4518
+ &lt;p&gt;GemBoss Ops · internal tool&lt;/p&gt;
4519
+ &lt;/header&gt;
4520
+ &lt;form class=&quot;gb-auth-form&quot; method=&quot;post&quot; action=&quot;#&quot;&gt;
4521
+ &lt;div class=&quot;gb-auth-field&quot;&gt;
4522
+ &lt;label for=&quot;pw2&quot;&gt;Password&lt;/label&gt;
4523
+ &lt;div class=&quot;gb-auth-pw&quot;&gt;
4524
+ &lt;input class=&quot;gb-auth-input&quot; id=&quot;pw2&quot; type=&quot;password&quot;/&gt;
4525
+ &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;
4526
+ &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;
4527
+ &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;
4528
+ &lt;/path&gt;
4529
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;2.6&quot;&gt;
4530
+ &lt;/circle&gt;
4531
+ &lt;/svg&gt;
4532
+ &lt;/button&gt;
4533
+ &lt;/div&gt;
4534
+ &lt;/div&gt;
4535
+ &lt;button type=&quot;submit&quot; class=&quot;gb-auth-submit&quot;&gt;Sign in&lt;/button&gt;
4536
+ &lt;/form&gt;
4537
+ &lt;/div&gt;
4538
+ &lt;/div&gt;
4539
+ &lt;aside class=&quot;gb-auth-panel gb-auth-panel--grid&quot;&gt;
4540
+ &lt;div class=&quot;gb-auth-panel-in&quot;&gt;
4541
+ &lt;p class=&quot;gb-auth-eyebrow&quot;&gt;gemform · GemBoss Ops&lt;/p&gt;
4542
+ &lt;h2 class=&quot;gb-auth-panel-h&quot;&gt;Every Gem registration, in one place.&lt;/h2&gt;
4543
+ &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;
4544
+ &lt;/div&gt;
4545
+ &lt;/aside&gt;
4546
+ &lt;/div&gt;
4456
4547
  &lt;/main&gt;</code></pre></details></figure></section>
4548
+ <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:c72-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:c72-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:c72-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;
4549
+ &lt;summary class=&quot;ui-setup__head&quot;&gt;
4550
+ &lt;h2 class=&quot;ui-setup__title&quot;&gt;Telegram alerts&lt;/h2&gt;
4551
+ &lt;span class=&quot;ui-badge ui-badge--warning&quot;&gt;1/3&lt;/span&gt;
4552
+ &lt;/summary&gt;
4553
+ &lt;div class=&quot;ui-setup__inner&quot;&gt;
4554
+ &lt;p class=&quot;ui-setup__desc&quot;&gt;Ping a chat the moment a registration lands.&lt;/p&gt;
4555
+ &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;
4556
+ &lt;div class=&quot;ui-setup__steps&quot;&gt;
4557
+ &lt;details class=&quot;ui-setup__step&quot; name=&quot;gb-setup:c72-R0:&quot; data-state=&quot;done&quot;&gt;
4558
+ &lt;summary class=&quot;ui-setup__row&quot;&gt;
4559
+ &lt;span class=&quot;ui-setup__mark&quot; aria-hidden=&quot;true&quot;&gt;✓&lt;/span&gt;
4560
+ &lt;span class=&quot;ui-setup__label&quot;&gt;Connect a bot&lt;/span&gt;
4561
+ &lt;/summary&gt;
4562
+ &lt;div class=&quot;ui-setup__body&quot;&gt;
4563
+ &lt;p&gt;Sending as @gemform_alerts_bot.&lt;/p&gt;
4564
+ &lt;/div&gt;
4565
+ &lt;/details&gt;
4566
+ &lt;details class=&quot;ui-setup__step&quot; name=&quot;gb-setup:c72-R0:&quot; open=&quot;&quot; data-state=&quot;todo&quot;&gt;
4567
+ &lt;summary class=&quot;ui-setup__row&quot;&gt;
4568
+ &lt;span class=&quot;ui-setup__mark&quot; aria-hidden=&quot;true&quot;&gt;○&lt;/span&gt;
4569
+ &lt;span class=&quot;ui-setup__label&quot;&gt;Choose where alerts go&lt;/span&gt;
4570
+ &lt;/summary&gt;
4571
+ &lt;div class=&quot;ui-setup__body&quot;&gt;
4572
+ &lt;p&gt;Say hi to the bot from the chat you want alerts in, then find it here.&lt;/p&gt;
4573
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Find my chat&lt;/button&gt;
4574
+ &lt;/div&gt;
4575
+ &lt;/details&gt;
4576
+ &lt;details class=&quot;ui-setup__step&quot; name=&quot;gb-setup:c72-R0:&quot; data-state=&quot;todo&quot;&gt;
4577
+ &lt;summary class=&quot;ui-setup__row&quot;&gt;
4578
+ &lt;span class=&quot;ui-setup__mark&quot; aria-hidden=&quot;true&quot;&gt;○&lt;/span&gt;
4579
+ &lt;span class=&quot;ui-setup__label&quot;&gt;Send a test alert&lt;/span&gt;
4580
+ &lt;/summary&gt;
4581
+ &lt;div class=&quot;ui-setup__body&quot;&gt;
4582
+ &lt;p&gt;One message to every chat, to see it land.&lt;/p&gt;
4583
+ &lt;/div&gt;
4584
+ &lt;/details&gt;
4585
+ &lt;/div&gt;
4586
+ &lt;/div&gt;
4587
+ &lt;/details&gt;</code></pre></details></figure></section>
4457
4588
  <section id="chat"><h2>Thân chat</h2><p>Một câu trả lời trông thế nào, ở bất kỳ bề mặt nào đặt một ô chat: tin người dùng / trợ lý, markdown, các bước đang làm (narration), chỉ báo "đang làm", câu hỏi gợi ý, chip lựa chọn, ô soạn. CSS là <code>chat.css</code> của gói (admin <code>@import</code> nó). Khung bao ngoài (cột, ngăn, popup) và hành vi (stream, Dừng, phím) là của bề mặt.</p><figure class="cat-demo"><figcaption>Hội thoại: người dùng, trợ lý (markdown), các bước, đang làm</figcaption><div class="cat-live"><div style="display:flex;flex-direction:column;max-width:520px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg)"><div class="gemboss-ec-head"><div class="gemboss-ec-title">Trợ lý</div><div class="gemboss-ec-sub">Hội thoại #1042</div></div><div class="gemboss-ec-scroll" style="max-height:none"><div class="gemboss-ec-msg user"><div class="gemboss-ec-bubble">Khách nói trang checkout trắng sau khi publish.</div></div><div class="gemboss-ec-msg assistant"><ul class="gemboss-narr"><li class="gemboss-narr-row ok"><span class="gemboss-narr-dot">✓</span><span class="gemboss-narr-text">Đọc hội thoại</span></li><li class="gemboss-narr-row running"><span class="gemboss-narr-dot"><span class="gemboss-narr-spin"></span></span><span class="gemboss-narr-text">Tìm bài help liên quan</span></li></ul><div class="gemboss-ec-bubble"><p class="gemboss-md-p">Gợi ý trả lời: vào <a class="gemboss-ec-md-link" href="#chat">Settings › Checkout</a>, tắt <code class="gemboss-md-code">legacy script</code> rồi publish lại.</p><ul class="gemboss-md-list"><li>Nếu vẫn trắng: xoá cache trình duyệt.</li></ul><span class="gemboss-ec-cursor"></span></div></div><div class="gemboss-ec-pending"><span class="gemboss-ec-pending-star">✳</span><span class="gemboss-ec-pending-verb">Đang nghĩ</span><span class="gemboss-ec-pending-meta">4s</span></div><div class="gemboss-ec-starters"><button type="button" class="gemboss-ec-starter">Nên trả lời thế nào?</button><button type="button" class="gemboss-ec-starter">Trước đây giải quyết sao?</button></div></div><form class="gemboss-ec-input" onsubmit="return false"><textarea rows="1" aria-label="Hỏi trợ lý" placeholder="Hỏi về hội thoại này…"></textarea><button type="submit" aria-label="Gửi">↑</button></form></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;display:flex;flex-direction:column;max-width:520px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg)&quot;&gt;
4458
4589
  &lt;div class=&quot;gemboss-ec-head&quot;&gt;
4459
4590
  &lt;div class=&quot;gemboss-ec-title&quot;&gt;Trợ lý&lt;/div&gt;
@@ -4690,60 +4821,171 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4690
4821
  &lt;/div&gt;
4691
4822
  &lt;/div&gt;
4692
4823
  &lt;/div&gt;</code></pre></details></figure></section>
4693
- <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=":c70-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=":c70-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=":c71-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=":c71-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=":c72-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=":c72-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=":c73-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=":c73-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;
4824
+ <section id="action-card"><h2>Thẻ hành động</h2><p>Trợ lý đề xuất, người bấm. <code>ActionCard</code> + <code>ActionCardSection</code> / <code>ActionCardItem</code> / <code>ActionChange</code> (CSS <code>action-card.css</code> do component tự nạp). Mỗi mục hiện giá trị bây giờ và sau; cảnh báo trước khi áp dụng; chỉ nút chính thay đổi; sau đó banner kết quả có Undo. Lần đầu dựng ở GemFeedback (gộp request, đổi trạng thái / người phụ trách / label / ngày).</p><figure class="cat-demo"><figcaption>Gộp: Keeping / Merging, bỏ chọn, đổi bản giữ lại, cảnh báo</figcaption><div class="cat-live"><section class="ui-action-card" aria-label="Merge 2 into #7"><header class="ui-action-card__head"><h3 class="ui-action-card__title">Merge 2 into #7</h3><div class="ui-action-card__aside"><a class="ui-link" href="#">Open the review page</a></div></header><div class="ui-action-card__section"><p class="ui-label ui-action-card__label">Keeping</p><ul class="ui-action-card__list"><li class="ui-action-card__item ui-action-card__item--kept"><a class="ui-action-card__name" href="#">#7 Bulk edit product prices</a><div class="ui-action-card__meta"><span class="ui-tag">Idea</span> ▲ 18 · 4 comments</div><p class="ui-action-card__excerpt">Change the price of many products at once, from one screen.</p></li></ul></div><div class="ui-action-card__section"><p class="ui-label ui-action-card__label">Merging into it</p><ul class="ui-action-card__list"><li class="ui-action-card__item"><label class="ui-check ui-action-card__pick"><input type="checkbox" checked=""/><span><a class="ui-action-card__name" href="#">#12 Edit prices for many products in bulk</a></span></label><div class="ui-action-card__meta">▲ 3 · 1 comment</div><div class="ui-action-card__item-foot"><button type="button" class="ui-btn ui-btn--ghost ui-btn--sm">Keep this one instead</button></div></li><li class="ui-action-card__item"><label class="ui-check ui-action-card__pick"><input type="checkbox" checked=""/><span><a class="ui-action-card__name" href="#">#15 Bulk price editor</a></span></label><div class="ui-action-card__meta">▲ 2</div></li></ul></div><div class="ui-banner ui-banner--warning" role="note"><div class="ui-banner__head"><p class="ui-banner__title">Before you apply</p></div><div class="ui-banner__body"><ul class="ui-action-card__warn"><li>#15 is Planned, #7 is Idea: the merged request&#x27;s status is not carried over.</li></ul></div></div><footer class="ui-action-card__foot"><p class="ui-action-card__summary">#7 will count 23 people (each person once).</p><div class="ui-action-card__actions"><button type="button" class="ui-btn ui-btn--primary">Merge 2 into #7</button><button type="button" class="ui-btn ui-btn--ghost">Not duplicates</button></div></footer></section></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;section class=&quot;ui-action-card&quot; aria-label=&quot;Merge 2 into #7&quot;&gt;
4825
+ &lt;header class=&quot;ui-action-card__head&quot;&gt;
4826
+ &lt;h3 class=&quot;ui-action-card__title&quot;&gt;Merge 2 into #7&lt;/h3&gt;
4827
+ &lt;div class=&quot;ui-action-card__aside&quot;&gt;
4828
+ &lt;a class=&quot;ui-link&quot; href=&quot;#&quot;&gt;Open the review page&lt;/a&gt;
4829
+ &lt;/div&gt;
4830
+ &lt;/header&gt;
4831
+ &lt;div class=&quot;ui-action-card__section&quot;&gt;
4832
+ &lt;p class=&quot;ui-label ui-action-card__label&quot;&gt;Keeping&lt;/p&gt;
4833
+ &lt;ul class=&quot;ui-action-card__list&quot;&gt;
4834
+ &lt;li class=&quot;ui-action-card__item ui-action-card__item--kept&quot;&gt;
4835
+ &lt;a class=&quot;ui-action-card__name&quot; href=&quot;#&quot;&gt;#7 Bulk edit product prices&lt;/a&gt;
4836
+ &lt;div class=&quot;ui-action-card__meta&quot;&gt;
4837
+ &lt;span class=&quot;ui-tag&quot;&gt;Idea&lt;/span&gt; ▲ 18 · 4 comments&lt;/div&gt;
4838
+ &lt;p class=&quot;ui-action-card__excerpt&quot;&gt;Change the price of many products at once, from one screen.&lt;/p&gt;
4839
+ &lt;/li&gt;
4840
+ &lt;/ul&gt;
4841
+ &lt;/div&gt;
4842
+ &lt;div class=&quot;ui-action-card__section&quot;&gt;
4843
+ &lt;p class=&quot;ui-label ui-action-card__label&quot;&gt;Merging into it&lt;/p&gt;
4844
+ &lt;ul class=&quot;ui-action-card__list&quot;&gt;
4845
+ &lt;li class=&quot;ui-action-card__item&quot;&gt;
4846
+ &lt;label class=&quot;ui-check ui-action-card__pick&quot;&gt;
4847
+ &lt;input type=&quot;checkbox&quot; checked=&quot;&quot;/&gt;
4848
+ &lt;span&gt;
4849
+ &lt;a class=&quot;ui-action-card__name&quot; href=&quot;#&quot;&gt;#12 Edit prices for many products in bulk&lt;/a&gt;
4850
+ &lt;/span&gt;
4851
+ &lt;/label&gt;
4852
+ &lt;div class=&quot;ui-action-card__meta&quot;&gt;▲ 3 · 1 comment&lt;/div&gt;
4853
+ &lt;div class=&quot;ui-action-card__item-foot&quot;&gt;
4854
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost ui-btn--sm&quot;&gt;Keep this one instead&lt;/button&gt;
4855
+ &lt;/div&gt;
4856
+ &lt;/li&gt;
4857
+ &lt;li class=&quot;ui-action-card__item&quot;&gt;
4858
+ &lt;label class=&quot;ui-check ui-action-card__pick&quot;&gt;
4859
+ &lt;input type=&quot;checkbox&quot; checked=&quot;&quot;/&gt;
4860
+ &lt;span&gt;
4861
+ &lt;a class=&quot;ui-action-card__name&quot; href=&quot;#&quot;&gt;#15 Bulk price editor&lt;/a&gt;
4862
+ &lt;/span&gt;
4863
+ &lt;/label&gt;
4864
+ &lt;div class=&quot;ui-action-card__meta&quot;&gt;▲ 2&lt;/div&gt;
4865
+ &lt;/li&gt;
4866
+ &lt;/ul&gt;
4867
+ &lt;/div&gt;
4868
+ &lt;div class=&quot;ui-banner ui-banner--warning&quot; role=&quot;note&quot;&gt;
4869
+ &lt;div class=&quot;ui-banner__head&quot;&gt;
4870
+ &lt;p class=&quot;ui-banner__title&quot;&gt;Before you apply&lt;/p&gt;
4871
+ &lt;/div&gt;
4872
+ &lt;div class=&quot;ui-banner__body&quot;&gt;
4873
+ &lt;ul class=&quot;ui-action-card__warn&quot;&gt;
4874
+ &lt;li&gt;#15 is Planned, #7 is Idea: the merged request&amp;#x27;s status is not carried over.&lt;/li&gt;
4875
+ &lt;/ul&gt;
4876
+ &lt;/div&gt;
4877
+ &lt;/div&gt;
4878
+ &lt;footer class=&quot;ui-action-card__foot&quot;&gt;
4879
+ &lt;p class=&quot;ui-action-card__summary&quot;&gt;#7 will count 23 people (each person once).&lt;/p&gt;
4880
+ &lt;div class=&quot;ui-action-card__actions&quot;&gt;
4881
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Merge 2 into #7&lt;/button&gt;
4882
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost&quot;&gt;Not duplicates&lt;/button&gt;
4883
+ &lt;/div&gt;
4884
+ &lt;/footer&gt;
4885
+ &lt;/section&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Đổi trạng thái: bây giờ → sau, đã như vậy, có vấn đề</figcaption><div class="cat-live"><section class="ui-action-card" aria-label="Move 2 requests to Planned"><header class="ui-action-card__head"><h3 class="ui-action-card__title">Move 2 requests to Planned</h3></header><div class="ui-action-card__section"><ul class="ui-action-card__list"><li class="ui-action-card__item"><a class="ui-action-card__name" href="#">#500 Infinite load on product grids</a><div class="ui-action-card__meta"><span class="ui-action-card__change"><span class="ui-tag">Idea</span><span aria-hidden="true"> → </span><span class="ui-sr-only"> to </span><span class="ui-tag ui-tag--accent">Planned</span></span></div></li><li class="ui-action-card__item"><a class="ui-action-card__name" href="#">#492 Rename layers</a><div class="ui-action-card__meta"><span class="ui-action-card__same">Already Planned</span></div></li><li class="ui-action-card__item"><a class="ui-action-card__name" href="#">#31 Old duplicate</a><div class="ui-action-card__meta"><span class="ui-tag ui-tag--warning">Merged into #7</span></div></li></ul></div><footer class="ui-action-card__foot"><p class="ui-action-card__summary">2 requests change. 14 emails to followers.</p><div class="ui-action-card__actions"><button type="button" class="ui-btn ui-btn--primary">Move to Planned</button></div></footer></section></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;section class=&quot;ui-action-card&quot; aria-label=&quot;Move 2 requests to Planned&quot;&gt;
4886
+ &lt;header class=&quot;ui-action-card__head&quot;&gt;
4887
+ &lt;h3 class=&quot;ui-action-card__title&quot;&gt;Move 2 requests to Planned&lt;/h3&gt;
4888
+ &lt;/header&gt;
4889
+ &lt;div class=&quot;ui-action-card__section&quot;&gt;
4890
+ &lt;ul class=&quot;ui-action-card__list&quot;&gt;
4891
+ &lt;li class=&quot;ui-action-card__item&quot;&gt;
4892
+ &lt;a class=&quot;ui-action-card__name&quot; href=&quot;#&quot;&gt;#500 Infinite load on product grids&lt;/a&gt;
4893
+ &lt;div class=&quot;ui-action-card__meta&quot;&gt;
4894
+ &lt;span class=&quot;ui-action-card__change&quot;&gt;
4895
+ &lt;span class=&quot;ui-tag&quot;&gt;Idea&lt;/span&gt;
4896
+ &lt;span aria-hidden=&quot;true&quot;&gt; → &lt;/span&gt;
4897
+ &lt;span class=&quot;ui-sr-only&quot;&gt; to &lt;/span&gt;
4898
+ &lt;span class=&quot;ui-tag ui-tag--accent&quot;&gt;Planned&lt;/span&gt;
4899
+ &lt;/span&gt;
4900
+ &lt;/div&gt;
4901
+ &lt;/li&gt;
4902
+ &lt;li class=&quot;ui-action-card__item&quot;&gt;
4903
+ &lt;a class=&quot;ui-action-card__name&quot; href=&quot;#&quot;&gt;#492 Rename layers&lt;/a&gt;
4904
+ &lt;div class=&quot;ui-action-card__meta&quot;&gt;
4905
+ &lt;span class=&quot;ui-action-card__same&quot;&gt;Already Planned&lt;/span&gt;
4906
+ &lt;/div&gt;
4907
+ &lt;/li&gt;
4908
+ &lt;li class=&quot;ui-action-card__item&quot;&gt;
4909
+ &lt;a class=&quot;ui-action-card__name&quot; href=&quot;#&quot;&gt;#31 Old duplicate&lt;/a&gt;
4910
+ &lt;div class=&quot;ui-action-card__meta&quot;&gt;
4911
+ &lt;span class=&quot;ui-tag ui-tag--warning&quot;&gt;Merged into #7&lt;/span&gt;
4912
+ &lt;/div&gt;
4913
+ &lt;/li&gt;
4914
+ &lt;/ul&gt;
4915
+ &lt;/div&gt;
4916
+ &lt;footer class=&quot;ui-action-card__foot&quot;&gt;
4917
+ &lt;p class=&quot;ui-action-card__summary&quot;&gt;2 requests change. 14 emails to followers.&lt;/p&gt;
4918
+ &lt;div class=&quot;ui-action-card__actions&quot;&gt;
4919
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Move to Planned&lt;/button&gt;
4920
+ &lt;/div&gt;
4921
+ &lt;/footer&gt;
4922
+ &lt;/section&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Sau khi áp dụng: kết quả + Undo</figcaption><div class="cat-live"><section class="ui-action-card" aria-label="Merged into #7"><header class="ui-action-card__head"><h3 class="ui-action-card__title">Merged into #7</h3></header><div class="ui-banner ui-banner--success" role="status"><div class="ui-banner__body"><p>#12 and #15 are now part of #7.</p><div class="ui-banner__actions"><button type="button" class="ui-btn">Undo</button></div></div></div></section></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;section class=&quot;ui-action-card&quot; aria-label=&quot;Merged into #7&quot;&gt;
4923
+ &lt;header class=&quot;ui-action-card__head&quot;&gt;
4924
+ &lt;h3 class=&quot;ui-action-card__title&quot;&gt;Merged into #7&lt;/h3&gt;
4925
+ &lt;/header&gt;
4926
+ &lt;div class=&quot;ui-banner ui-banner--success&quot; role=&quot;status&quot;&gt;
4927
+ &lt;div class=&quot;ui-banner__body&quot;&gt;
4928
+ &lt;p&gt;#12 and #15 are now part of #7.&lt;/p&gt;
4929
+ &lt;div class=&quot;ui-banner__actions&quot;&gt;
4930
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Undo&lt;/button&gt;
4931
+ &lt;/div&gt;
4932
+ &lt;/div&gt;
4933
+ &lt;/div&gt;
4934
+ &lt;/section&gt;</code></pre></details></figure></section>
4935
+ <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=":c79-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=":c79-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=":c80-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=":c80-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=":c81-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=":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: 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=":c82-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;
4694
4936
  &lt;span class=&quot;gb-engine&quot;&gt;
4695
- &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;:c70-R0:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
4937
+ &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;:c79-R0:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
4696
4938
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--ok&quot; aria-hidden=&quot;true&quot;&gt;
4697
4939
  &lt;/span&gt;
4698
4940
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
4699
4941
  &lt;/span&gt;
4700
4942
  &lt;/button&gt;
4701
- &lt;div id=&quot;:c70-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;
4943
+ &lt;div id=&quot;:c79-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;
4702
4944
  &lt;/div&gt;
4703
4945
  &lt;/span&gt;
4704
4946
  &lt;span class=&quot;gb-engine&quot;&gt;
4705
- &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;:c71-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;
4947
+ &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;:c80-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;
4706
4948
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; aria-hidden=&quot;true&quot;&gt;
4707
4949
  &lt;/span&gt;
4708
4950
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
4709
4951
  &lt;/span&gt;
4710
4952
  &lt;/button&gt;
4711
- &lt;div id=&quot;:c71-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;
4953
+ &lt;div id=&quot;:c80-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;
4712
4954
  &lt;/div&gt;
4713
4955
  &lt;/span&gt;
4714
4956
  &lt;span class=&quot;gb-engine&quot;&gt;
4715
- &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;:c72-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;
4957
+ &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. Bridge on your machine: Not connected&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Not connected&quot;&gt;
4716
4958
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--down&quot; aria-hidden=&quot;true&quot;&gt;
4717
4959
  &lt;/span&gt;
4718
4960
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
4719
4961
  &lt;/span&gt;
4720
4962
  &lt;/button&gt;
4721
- &lt;div id=&quot;:c72-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;
4963
+ &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;
4722
4964
  &lt;/div&gt;
4723
4965
  &lt;/span&gt;
4724
4966
  &lt;span class=&quot;gb-engine&quot;&gt;
4725
- &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;:c73-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;
4967
+ &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: Checking&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Checking&quot;&gt;
4726
4968
  &lt;span class=&quot;gb-engine-dot gb-engine-dot--idle&quot; aria-hidden=&quot;true&quot;&gt;
4727
4969
  &lt;/span&gt;
4728
4970
  &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
4729
4971
  &lt;/span&gt;
4730
4972
  &lt;/button&gt;
4731
- &lt;div id=&quot;:c73-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;
4973
+ &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;
4732
4974
  &lt;/div&gt;
4733
4975
  &lt;/span&gt;
4734
- &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=":c74-R0:-tab-engine" aria-controls=":c74-R0:-pane-engine" aria-selected="true" tabindex="0">Engine</button><button type="button" role="tab" id=":c74-R0:-tab-setup" aria-controls=":c74-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=":c74-R0:-tab-status" aria-controls=":c74-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c74-R0:-pane-engine" aria-labelledby=":c74-R0:-tab-engine"><div class="gb-engine-field"><span class="gb-engine-label" id=":c74-Rd:">Engine</span><div class="gb-engine-list" role="radiogroup" aria-labelledby=":c74-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=":c74-R5d:">Model</span><div class="gb-engine-opts" role="group" aria-labelledby=":c74-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=":c74-R7d:">Effort</span><div class="gb-engine-opts" role="group" aria-labelledby=":c74-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;
4976
+ &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=":c83-R0:-tab-engine" aria-controls=":c83-R0:-pane-engine" aria-selected="true" tabindex="0">Engine</button><button type="button" role="tab" id=":c83-R0:-tab-setup" aria-controls=":c83-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=":c83-R0:-tab-status" aria-controls=":c83-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c83-R0:-pane-engine" aria-labelledby=":c83-R0:-tab-engine"><div class="gb-engine-field"><span class="gb-engine-label" id=":c83-Rd:">Engine</span><div class="gb-engine-list" role="radiogroup" aria-labelledby=":c83-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=":c83-R5d:">Model</span><div class="gb-engine-opts" role="group" aria-labelledby=":c83-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=":c83-R7d:">Effort</span><div class="gb-engine-opts" role="group" aria-labelledby=":c83-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;
4735
4977
  &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;
4736
4978
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
4737
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c74-R0:-tab-engine&quot; aria-controls=&quot;:c74-R0:-pane-engine&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Engine&lt;/button&gt;
4738
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c74-R0:-tab-setup&quot; aria-controls=&quot;:c74-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;
4979
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c83-R0:-tab-engine&quot; aria-controls=&quot;:c83-R0:-pane-engine&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Engine&lt;/button&gt;
4980
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c83-R0:-tab-setup&quot; aria-controls=&quot;:c83-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;
4739
4981
  &lt;/span&gt;
4740
4982
  &lt;/button&gt;
4741
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c74-R0:-tab-status&quot; aria-controls=&quot;:c74-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
4983
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c83-R0:-tab-status&quot; aria-controls=&quot;:c83-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
4742
4984
  &lt;/div&gt;
4743
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c74-R0:-pane-engine&quot; aria-labelledby=&quot;:c74-R0:-tab-engine&quot;&gt;
4985
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c83-R0:-pane-engine&quot; aria-labelledby=&quot;:c83-R0:-tab-engine&quot;&gt;
4744
4986
  &lt;div class=&quot;gb-engine-field&quot;&gt;
4745
- &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c74-Rd:&quot;&gt;Engine&lt;/span&gt;
4746
- &lt;div class=&quot;gb-engine-list&quot; role=&quot;radiogroup&quot; aria-labelledby=&quot;:c74-Rd:&quot;&gt;
4987
+ &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c83-Rd:&quot;&gt;Engine&lt;/span&gt;
4988
+ &lt;div class=&quot;gb-engine-list&quot; role=&quot;radiogroup&quot; aria-labelledby=&quot;:c83-Rd:&quot;&gt;
4747
4989
  &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;
4748
4990
  &lt;span class=&quot;gb-engine-rowhead&quot;&gt;
4749
4991
  &lt;span class=&quot;gb-engine-rowname&quot;&gt;Claude Code&lt;/span&gt;
@@ -4767,8 +5009,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4767
5009
  &lt;/div&gt;
4768
5010
  &lt;/div&gt;
4769
5011
  &lt;div class=&quot;gb-engine-field&quot;&gt;
4770
- &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c74-R5d:&quot;&gt;Model&lt;/span&gt;
4771
- &lt;div class=&quot;gb-engine-opts&quot; role=&quot;group&quot; aria-labelledby=&quot;:c74-R5d:&quot;&gt;
5012
+ &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c83-R5d:&quot;&gt;Model&lt;/span&gt;
5013
+ &lt;div class=&quot;gb-engine-opts&quot; role=&quot;group&quot; aria-labelledby=&quot;:c83-R5d:&quot;&gt;
4772
5014
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot;&gt;Default&lt;/button&gt;
4773
5015
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;true&quot;&gt;Opus&lt;/button&gt;
4774
5016
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot;&gt;Sonnet&lt;/button&gt;
@@ -4776,8 +5018,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4776
5018
  &lt;/div&gt;
4777
5019
  &lt;/div&gt;
4778
5020
  &lt;div class=&quot;gb-engine-field&quot;&gt;
4779
- &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c74-R7d:&quot;&gt;Effort&lt;/span&gt;
4780
- &lt;div class=&quot;gb-engine-opts&quot; role=&quot;group&quot; aria-labelledby=&quot;:c74-R7d:&quot;&gt;
5021
+ &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c83-R7d:&quot;&gt;Effort&lt;/span&gt;
5022
+ &lt;div class=&quot;gb-engine-opts&quot; role=&quot;group&quot; aria-labelledby=&quot;:c83-R7d:&quot;&gt;
4781
5023
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;true&quot;&gt;Default&lt;/button&gt;
4782
5024
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot;&gt;Low&lt;/button&gt;
4783
5025
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot;&gt;Medium&lt;/button&gt;
@@ -4787,16 +5029,16 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4787
5029
  &lt;/div&gt;
4788
5030
  &lt;/div&gt;
4789
5031
  &lt;/div&gt;
4790
- &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=":c75-R0:-tab-engine" aria-controls=":c75-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c75-R0:-tab-setup" aria-controls=":c75-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=":c75-R0:-tab-status" aria-controls=":c75-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c75-R0:-pane-setup" aria-labelledby=":c75-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;
5032
+ &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=":c84-R0:-tab-engine" aria-controls=":c84-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c84-R0:-tab-setup" aria-controls=":c84-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=":c84-R0:-tab-status" aria-controls=":c84-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c84-R0:-pane-setup" aria-labelledby=":c84-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;
4791
5033
  &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;
4792
5034
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
4793
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c75-R0:-tab-engine&quot; aria-controls=&quot;:c75-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
4794
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c75-R0:-tab-setup&quot; aria-controls=&quot;:c75-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;
5035
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c84-R0:-tab-engine&quot; aria-controls=&quot;:c84-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5036
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c84-R0:-tab-setup&quot; aria-controls=&quot;:c84-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;
4795
5037
  &lt;/span&gt;
4796
5038
  &lt;/button&gt;
4797
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c75-R0:-tab-status&quot; aria-controls=&quot;:c75-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
5039
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c84-R0:-tab-status&quot; aria-controls=&quot;:c84-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
4798
5040
  &lt;/div&gt;
4799
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c75-R0:-pane-setup&quot; aria-labelledby=&quot;:c75-R0:-tab-setup&quot;&gt;
5041
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c84-R0:-pane-setup&quot; aria-labelledby=&quot;:c84-R0:-tab-setup&quot;&gt;
4800
5042
  &lt;p class=&quot;gb-engine-callout gb-engine-callout--warn&quot;&gt;
4801
5043
  &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;
4802
5044
  &lt;div class=&quot;gb-engine-steps&quot;&gt;
@@ -4813,16 +5055,16 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4813
5055
  &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;
4814
5056
  &lt;/div&gt;
4815
5057
  &lt;/div&gt;
4816
- &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=":c76-R0:-tab-engine" aria-controls=":c76-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c76-R0:-tab-setup" aria-controls=":c76-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=":c76-R0:-tab-status" aria-controls=":c76-R0:-pane-status" aria-selected="true" tabindex="0">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c76-R0:-pane-status" aria-labelledby=":c76-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;
5058
+ &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=":c85-R0:-tab-engine" aria-controls=":c85-R0:-pane-engine" aria-selected="false" tabindex="-1">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="true" tabindex="0">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c85-R0:-pane-status" aria-labelledby=":c85-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;
4817
5059
  &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;
4818
5060
  &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
4819
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c76-R0:-tab-engine&quot; aria-controls=&quot;:c76-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
4820
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c76-R0:-tab-setup&quot; aria-controls=&quot;:c76-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;
5061
+ &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;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5062
+ &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;
4821
5063
  &lt;/span&gt;
4822
5064
  &lt;/button&gt;
4823
- &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c76-R0:-tab-status&quot; aria-controls=&quot;:c76-R0:-pane-status&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Status&lt;/button&gt;
5065
+ &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;true&quot; tabindex=&quot;0&quot;&gt;Status&lt;/button&gt;
4824
5066
  &lt;/div&gt;
4825
- &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c76-R0:-pane-status&quot; aria-labelledby=&quot;:c76-R0:-tab-status&quot;&gt;
5067
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c85-R0:-pane-status&quot; aria-labelledby=&quot;:c85-R0:-tab-status&quot;&gt;
4826
5068
  &lt;dl class=&quot;gb-engine-rows&quot;&gt;
4827
5069
  &lt;dt&gt;Bridge on your machine&lt;/dt&gt;
4828
5070
  &lt;dd&gt;
@@ -4842,7 +5084,614 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4842
5084
  &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;
4843
5085
  &lt;button type=&quot;button&quot; class=&quot;gb-engine-notice-link&quot;&gt;Open setup&lt;/button&gt;
4844
5086
  &lt;/p&gt;</code></pre></details></figure></section>
4845
- <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">29/8/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;
5087
+ <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=":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="true" tabindex="0">Setup</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-setup" aria-labelledby=":c87-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;
5088
+ &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;
5089
+ &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5090
+ &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;
5091
+ &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;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
5092
+ &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;
5093
+ &lt;/div&gt;
5094
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c87-R0:-pane-setup&quot; aria-labelledby=&quot;:c87-R0:-tab-setup&quot;&gt;
5095
+ &lt;p class=&quot;gb-engine-callout gb-engine-callout--down&quot;&gt;
5096
+ &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;
5097
+ &lt;div class=&quot;gb-engine-steps&quot;&gt;
5098
+ &lt;p&gt;Chrome will ask to “access devices on your local network”: choose Allow.&lt;/p&gt;
5099
+ &lt;div&gt;
5100
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Allow connecting to this computer&lt;/button&gt;
5101
+ &lt;/div&gt;
5102
+ &lt;/div&gt;
5103
+ &lt;/div&gt;
5104
+ &lt;/div&gt;
5105
+ &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=":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</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--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;
5106
+ &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;
5107
+ &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5108
+ &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;
5109
+ &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;/button&gt;
5110
+ &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;
5111
+ &lt;/div&gt;
5112
+ &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;
5113
+ &lt;p class=&quot;gb-engine-callout gb-engine-callout--down&quot;&gt;
5114
+ &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;
5115
+ &lt;div class=&quot;gb-engine-steps&quot;&gt;
5116
+ &lt;ol&gt;
5117
+ &lt;li&gt;Click the &lt;strong&gt;⚙︎ / ⓘ&lt;/strong&gt; icon to the left of the address bar.&lt;/li&gt;
5118
+ &lt;li&gt;Find &lt;strong&gt;Local network access&lt;/strong&gt; and choose &lt;strong&gt;Allow&lt;/strong&gt;.&lt;/li&gt;
5119
+ &lt;li&gt;Come back to this tab. The panel picks it up without a reload.&lt;/li&gt;
5120
+ &lt;/ol&gt;
5121
+ &lt;div&gt;
5122
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Check again&lt;/button&gt;
5123
+ &lt;/div&gt;
5124
+ &lt;/div&gt;
5125
+ &lt;/div&gt;
5126
+ &lt;/div&gt;
5127
+ &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=":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 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;
5128
+ &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;
5129
+ &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5130
+ &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;
5131
+ &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;
5132
+ &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;
5133
+ &lt;/div&gt;
5134
+ &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;
5135
+ &lt;p class=&quot;gb-engine-callout gb-engine-callout--down&quot;&gt;
5136
+ &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;
5137
+ &lt;div class=&quot;gb-engine-steps&quot;&gt;
5138
+ &lt;p&gt;Paste the &lt;strong&gt;pairing code&lt;/strong&gt; shown in the terminal:&lt;/p&gt;
5139
+ &lt;form class=&quot;ui-toolbar&quot;&gt;
5140
+ &lt;input class=&quot;gemboss-field&quot; style=&quot;flex:1 1 140px;min-width:0;text-transform:uppercase;letter-spacing:.08em&quot; placeholder=&quot;e.g. 7KQ2M9XA&quot; aria-label=&quot;Pairing code&quot; autoComplete=&quot;off&quot; spellcheck=&quot;false&quot; value=&quot;&quot;/&gt;
5141
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Pair&lt;/button&gt;
5142
+ &lt;/form&gt;
5143
+ &lt;p role=&quot;status&quot;&gt;Wrong code. Check the pairing code line in the terminal.&lt;/p&gt;
5144
+ &lt;p&gt;Or reinstall with this command, which includes this browser’s code:&lt;/p&gt;
5145
+ &lt;/div&gt;
5146
+ &lt;pre class=&quot;gb-engine-cmd&quot;&gt;
5147
+ &lt;code&gt;curl -fsSL https://partner-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart&lt;/code&gt;
5148
+ &lt;/pre&gt;
5149
+ &lt;div class=&quot;gb-engine-actions&quot;&gt;
5150
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Copy command&lt;/button&gt;
5151
+ &lt;span class=&quot;gb-engine-said&quot; role=&quot;status&quot;&gt;
5152
+ &lt;/span&gt;
5153
+ &lt;/div&gt;
5154
+ &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;
5155
+ &lt;/div&gt;
5156
+ &lt;/div&gt;
5157
+ &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=":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 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;
5158
+ &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;
5159
+ &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5160
+ &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;
5161
+ &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;
5162
+ &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;
5163
+ &lt;/div&gt;
5164
+ &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;
5165
+ &lt;p class=&quot;gb-engine-callout gb-engine-callout--down&quot;&gt;
5166
+ &lt;strong&gt;Bridge on your machine: not set up.&lt;/strong&gt;
5167
+ &lt;/p&gt;
5168
+ &lt;div class=&quot;gb-engine-steps&quot;&gt;
5169
+ &lt;ol&gt;
5170
+ &lt;li&gt;Open &lt;strong&gt;Terminal&lt;/strong&gt; (⌘ + Space, type Terminal).&lt;/li&gt;
5171
+ &lt;li&gt;Paste this command and press Enter (about 1 minute).&lt;/li&gt;
5172
+ &lt;/ol&gt;
5173
+ &lt;/div&gt;
5174
+ &lt;pre class=&quot;gb-engine-cmd&quot;&gt;
5175
+ &lt;code&gt;curl -fsSL https://partner-radar.ops.gemboss.ai/bridge/install.sh | sh -s -- --code 5PQFMWW9 --autostart&lt;/code&gt;
5176
+ &lt;/pre&gt;
5177
+ &lt;div class=&quot;gb-engine-actions&quot;&gt;
5178
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Copy command&lt;/button&gt;
5179
+ &lt;span class=&quot;gb-engine-said&quot; role=&quot;status&quot;&gt;
5180
+ &lt;/span&gt;
5181
+ &lt;/div&gt;
5182
+ &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;
5183
+ &lt;/div&gt;
5184
+ &lt;/div&gt;
5185
+ &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=":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="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=":c91-R0:-tab-status" aria-controls=":c91-R0:-pane-status" aria-selected="true" tabindex="0">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c91-R0:-pane-status" aria-labelledby=":c91-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;
5186
+ &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;
5187
+ &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5188
+ &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;
5189
+ &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;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;
5190
+ &lt;/span&gt;
5191
+ &lt;/button&gt;
5192
+ &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;true&quot; tabindex=&quot;0&quot;&gt;Status&lt;/button&gt;
5193
+ &lt;/div&gt;
5194
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c91-R0:-pane-status&quot; aria-labelledby=&quot;:c91-R0:-tab-status&quot;&gt;
5195
+ &lt;dl class=&quot;gb-engine-rows&quot;&gt;
5196
+ &lt;dt&gt;Bridge on your machine&lt;/dt&gt;
5197
+ &lt;dd&gt;
5198
+ &lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; aria-hidden=&quot;true&quot;&gt;
5199
+ &lt;/span&gt; Outdated&lt;/dd&gt;
5200
+ &lt;dt&gt;Version&lt;/dt&gt;
5201
+ &lt;dd&gt;2 · Latest 3&lt;/dd&gt;
5202
+ &lt;dt&gt;Starts at sign-in&lt;/dt&gt;
5203
+ &lt;dd&gt;Yes&lt;/dd&gt;
5204
+ &lt;/dl&gt;
5205
+ &lt;p class=&quot;gb-engine-note&quot;&gt;This bridge is older than the one the panel expects: update it once (Setup).&lt;/p&gt;
5206
+ &lt;div class=&quot;gb-engine-actions&quot;&gt;
5207
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Check again&lt;/button&gt;
5208
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn&quot;&gt;Stop bridge&lt;/button&gt;
5209
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--critical&quot;&gt;Remove from this machine&lt;/button&gt;
5210
+ &lt;/div&gt;
5211
+ &lt;/div&gt;
5212
+ &lt;/div&gt;
5213
+ &lt;/div&gt;</code></pre></details></figure></section>
5214
+ <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=":c92-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=":c92-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;
5215
+ &lt;div class=&quot;gb-chat&quot;&gt;
5216
+ &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot;&gt;
5217
+ &lt;div class=&quot;gemboss-ec-msg assistant&quot;&gt;
5218
+ &lt;div class=&quot;gemboss-ec-bubble&quot;&gt;
5219
+ &lt;p class=&quot;gemboss-md-p&quot;&gt;
5220
+ &lt;strong&gt;Describe&lt;/strong&gt; a meeting, call or message with a partner. The AI proposes the updates; you click &lt;strong&gt;Save&lt;/strong&gt;.&lt;/p&gt;
5221
+ &lt;/div&gt;
5222
+ &lt;div class=&quot;gemboss-ec-starters&quot;&gt;
5223
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ec-starter gb-chat-starter&quot;&gt;
5224
+ &lt;span class=&quot;gb-chat-starter-hint&quot;&gt;Example, click to fill in&lt;/span&gt;Had dinner with Amit Porwal from Wiser yesterday; promised a co-marketing proposal next week.&lt;/button&gt;
5225
+ &lt;/div&gt;
5226
+ &lt;p class=&quot;gb-chat-label&quot;&gt;Or ask about partners in the radar:&lt;/p&gt;
5227
+ &lt;div class=&quot;gemboss-ec-starters&quot;&gt;
5228
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ec-starter gb-chat-starter&quot;&gt;Which partners have a next step due in the next 2 weeks?&lt;/button&gt;
5229
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ec-starter gb-chat-starter&quot;&gt;Summarize partner meetings from the last 30 days&lt;/button&gt;
5230
+ &lt;/div&gt;
5231
+ &lt;/div&gt;
5232
+ &lt;/div&gt;
5233
+ &lt;div class=&quot;gemboss-ec-input&quot; data-density=&quot;full&quot;&gt;
5234
+ &lt;textarea rows=&quot;1&quot; aria-label=&quot;Message&quot; placeholder=&quot;Ask, or describe a partner meeting…&quot;&gt;
5235
+ &lt;/textarea&gt;
5236
+ &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5237
+ &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5238
+ &lt;span class=&quot;gb-engine&quot;&gt;
5239
+ &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;:c92-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
5240
+ &lt;span class=&quot;gb-engine-dot gb-engine-dot--ok&quot; aria-hidden=&quot;true&quot;&gt;
5241
+ &lt;/span&gt;
5242
+ &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
5243
+ &lt;/span&gt;
5244
+ &lt;span class=&quot;gb-engine-chipmark&quot;&gt;
5245
+ &lt;svg class=&quot;gemboss-engine-mark&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5246
+ &lt;path d=&quot;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&quot; fill-rule=&quot;nonzero&quot;&gt;
5247
+ &lt;/path&gt;
5248
+ &lt;/svg&gt;
5249
+ &lt;/span&gt;
5250
+ &lt;/button&gt;
5251
+ &lt;div id=&quot;:c92-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;
5252
+ &lt;/div&gt;
5253
+ &lt;/span&gt;
5254
+ &lt;/div&gt;
5255
+ &lt;div class=&quot;gemboss-ec-toolbar-tools&quot;&gt;
5256
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ec-attach-btn&quot; aria-label=&quot;Attach a file&quot; title=&quot;Attach a file&quot;&gt;
5257
+ &lt;svg viewBox=&quot;0 0 24 24&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5258
+ &lt;path d=&quot;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&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5259
+ &lt;/path&gt;
5260
+ &lt;/svg&gt;
5261
+ &lt;/button&gt;
5262
+ &lt;input type=&quot;file&quot; hidden=&quot;&quot; tabindex=&quot;-1&quot;/&gt;
5263
+ &lt;/div&gt;
5264
+ &lt;button type=&quot;submit&quot; disabled=&quot;&quot; aria-label=&quot;Send&quot; title=&quot;Send&quot;&gt;
5265
+ &lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5266
+ &lt;path d=&quot;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&quot;&gt;
5267
+ &lt;/path&gt;
5268
+ &lt;/svg&gt;
5269
+ &lt;/button&gt;
5270
+ &lt;/div&gt;
5271
+ &lt;/div&gt;
5272
+ &lt;/div&gt;
5273
+ &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=":c93-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=":c93-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;
5274
+ &lt;div class=&quot;gb-chat&quot;&gt;
5275
+ &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot; aria-busy=&quot;true&quot;&gt;
5276
+ &lt;div class=&quot;gemboss-ec-msg user&quot;&gt;
5277
+ &lt;div class=&quot;gemboss-ec-bubble&quot;&gt;Who is exploring a partnership, and when did we last talk?&lt;/div&gt;
5278
+ &lt;/div&gt;
5279
+ &lt;div class=&quot;gemboss-ec-msg assistant&quot;&gt;
5280
+ &lt;ul class=&quot;gemboss-narr&quot; aria-label=&quot;What it is doing&quot;&gt;
5281
+ &lt;li class=&quot;gemboss-narr-row ok&quot;&gt;
5282
+ &lt;span class=&quot;gemboss-narr-dot&quot; aria-hidden=&quot;true&quot;&gt;✓&lt;/span&gt;
5283
+ &lt;span class=&quot;gemboss-narr-text&quot;&gt;Search partners&lt;span class=&quot;gb-chat-target&quot;&gt; Wiser&lt;/span&gt;
5284
+ &lt;/span&gt;
5285
+ &lt;/li&gt;
5286
+ &lt;li class=&quot;gemboss-narr-row ok&quot;&gt;
5287
+ &lt;span class=&quot;gemboss-narr-dot&quot; aria-hidden=&quot;true&quot;&gt;✓&lt;/span&gt;
5288
+ &lt;span class=&quot;gemboss-narr-text&quot;&gt;Read history&lt;span class=&quot;gb-chat-target&quot;&gt; Amit Porwal&lt;/span&gt;
5289
+ &lt;/span&gt;
5290
+ &lt;/li&gt;
5291
+ &lt;li class=&quot;gemboss-narr-row trace ok&quot;&gt;
5292
+ &lt;span class=&quot;gemboss-narr-dot&quot; aria-hidden=&quot;true&quot;&gt;⏺&lt;/span&gt;
5293
+ &lt;details class=&quot;gemboss-narr-trace&quot;&gt;
5294
+ &lt;summary&gt;
5295
+ &lt;code&gt;partner_timeline(id: 418, days: 30)&lt;/code&gt;
5296
+ &lt;/summary&gt;
5297
+ &lt;div class=&quot;gemboss-narr-trace-body&quot;&gt;
5298
+ &lt;code&gt;{ &amp;quot;events&amp;quot;: 6, &amp;quot;last&amp;quot;: &amp;quot;2026-10-05&amp;quot; }&lt;/code&gt;
5299
+ &lt;/div&gt;
5300
+ &lt;/details&gt;
5301
+ &lt;/li&gt;
5302
+ &lt;li class=&quot;gemboss-narr-row running&quot;&gt;
5303
+ &lt;span class=&quot;gemboss-narr-dot&quot; aria-hidden=&quot;true&quot;&gt;·&lt;/span&gt;
5304
+ &lt;span class=&quot;gemboss-narr-text&quot;&gt;Draft a proposal&lt;/span&gt;
5305
+ &lt;/li&gt;
5306
+ &lt;/ul&gt;
5307
+ &lt;div class=&quot;gemboss-ec-pending&quot; role=&quot;status&quot;&gt;
5308
+ &lt;span class=&quot;gemboss-assistant-sronly&quot;&gt;Working&lt;/span&gt;
5309
+ &lt;span class=&quot;gemboss-ec-pending-star&quot; aria-hidden=&quot;true&quot;&gt;✳&lt;/span&gt;
5310
+ &lt;span class=&quot;gemboss-ec-pending-verb&quot; aria-hidden=&quot;true&quot;&gt;Working…&lt;/span&gt;
5311
+ &lt;span class=&quot;gemboss-ec-pending-meta&quot; aria-hidden=&quot;true&quot;&gt;0s&lt;/span&gt;
5312
+ &lt;/div&gt;
5313
+ &lt;/div&gt;
5314
+ &lt;/div&gt;
5315
+ &lt;div class=&quot;gemboss-ec-input&quot; data-density=&quot;full&quot;&gt;
5316
+ &lt;textarea rows=&quot;1&quot; aria-label=&quot;Message&quot; placeholder=&quot;Ask, or describe a partner meeting…&quot;&gt;
5317
+ &lt;/textarea&gt;
5318
+ &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5319
+ &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5320
+ &lt;span class=&quot;gb-engine&quot;&gt;
5321
+ &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;:c93-Rv:&quot; aria-label=&quot;Engine: Claude Code · Opus&quot; title=&quot;Engine: Claude Code · Opus&quot;&gt;
5322
+ &lt;span class=&quot;gb-engine-dot gb-engine-dot--ok&quot; aria-hidden=&quot;true&quot;&gt;
5323
+ &lt;/span&gt;
5324
+ &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
5325
+ &lt;/span&gt;
5326
+ &lt;span class=&quot;gb-engine-chipmark&quot;&gt;
5327
+ &lt;svg class=&quot;gemboss-engine-mark&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5328
+ &lt;path d=&quot;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&quot; fill-rule=&quot;nonzero&quot;&gt;
5329
+ &lt;/path&gt;
5330
+ &lt;/svg&gt;
5331
+ &lt;/span&gt;
5332
+ &lt;/button&gt;
5333
+ &lt;div id=&quot;:c93-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;
5334
+ &lt;/div&gt;
5335
+ &lt;/span&gt;
5336
+ &lt;/div&gt;
5337
+ &lt;div class=&quot;gemboss-ec-toolbar-tools&quot;&gt;
5338
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ec-attach-btn&quot; aria-label=&quot;Attach a file&quot; title=&quot;Attach a file&quot;&gt;
5339
+ &lt;svg viewBox=&quot;0 0 24 24&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5340
+ &lt;path d=&quot;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&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5341
+ &lt;/path&gt;
5342
+ &lt;/svg&gt;
5343
+ &lt;/button&gt;
5344
+ &lt;input type=&quot;file&quot; hidden=&quot;&quot; tabindex=&quot;-1&quot;/&gt;
5345
+ &lt;/div&gt;
5346
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ec-stop&quot; aria-label=&quot;Stop&quot; title=&quot;Stop&quot;&gt;
5347
+ &lt;svg viewBox=&quot;0 0 12 12&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5348
+ &lt;rect x=&quot;1&quot; y=&quot;1&quot; width=&quot;10&quot; height=&quot;10&quot; rx=&quot;2&quot;&gt;
5349
+ &lt;/rect&gt;
5350
+ &lt;/svg&gt;
5351
+ &lt;/button&gt;
5352
+ &lt;/div&gt;
5353
+ &lt;/div&gt;
5354
+ &lt;/div&gt;
5355
+ &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=":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:460px;max-width:100%;height:640px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
5356
+ &lt;div class=&quot;gb-chat&quot;&gt;
5357
+ &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot;&gt;
5358
+ &lt;div class=&quot;gemboss-ec-msg user&quot;&gt;
5359
+ &lt;div class=&quot;gemboss-ec-bubble&quot;&gt;Who is exploring a partnership?&lt;/div&gt;
5360
+ &lt;/div&gt;
5361
+ &lt;div class=&quot;gemboss-ec-msg assistant&quot;&gt;
5362
+ &lt;ul class=&quot;gemboss-narr&quot; aria-label=&quot;What it is doing&quot;&gt;
5363
+ &lt;li class=&quot;gemboss-narr-row ok&quot;&gt;
5364
+ &lt;span class=&quot;gemboss-narr-dot&quot; aria-hidden=&quot;true&quot;&gt;✓&lt;/span&gt;
5365
+ &lt;span class=&quot;gemboss-narr-text&quot;&gt;Search partners&lt;span class=&quot;gb-chat-target&quot;&gt; Wiser&lt;/span&gt;
5366
+ &lt;/span&gt;
5367
+ &lt;/li&gt;
5368
+ &lt;li class=&quot;gemboss-narr-row ok&quot;&gt;
5369
+ &lt;span class=&quot;gemboss-narr-dot&quot; aria-hidden=&quot;true&quot;&gt;✓&lt;/span&gt;
5370
+ &lt;span class=&quot;gemboss-narr-text&quot;&gt;Read history&lt;span class=&quot;gb-chat-target&quot;&gt; Amit Porwal&lt;/span&gt;
5371
+ &lt;/span&gt;
5372
+ &lt;/li&gt;
5373
+ &lt;li class=&quot;gemboss-narr-row trace ok&quot;&gt;
5374
+ &lt;span class=&quot;gemboss-narr-dot&quot; aria-hidden=&quot;true&quot;&gt;⏺&lt;/span&gt;
5375
+ &lt;details class=&quot;gemboss-narr-trace&quot;&gt;
5376
+ &lt;summary&gt;
5377
+ &lt;code&gt;partner_timeline(id: 418, days: 30)&lt;/code&gt;
5378
+ &lt;/summary&gt;
5379
+ &lt;div class=&quot;gemboss-narr-trace-body&quot;&gt;
5380
+ &lt;code&gt;{ &amp;quot;events&amp;quot;: 6, &amp;quot;last&amp;quot;: &amp;quot;2026-10-05&amp;quot; }&lt;/code&gt;
5381
+ &lt;/div&gt;
5382
+ &lt;/details&gt;
5383
+ &lt;/li&gt;
5384
+ &lt;/ul&gt;
5385
+ &lt;div class=&quot;gemboss-ec-bubble&quot;&gt;
5386
+ &lt;p class=&quot;gemboss-md-p&quot;&gt;
5387
+ &lt;strong&gt;Wiser&lt;/strong&gt; is exploring a deeper partnership.&lt;/p&gt;
5388
+ &lt;div class=&quot;gemboss-md-tablewrap&quot;&gt;
5389
+ &lt;table class=&quot;gemboss-md-table&quot;&gt;
5390
+ &lt;thead&gt;
5391
+ &lt;tr&gt;
5392
+ &lt;th&gt;Partner&lt;/th&gt;
5393
+ &lt;th&gt;Last talk&lt;/th&gt;
5394
+ &lt;th&gt;Next step&lt;/th&gt;
5395
+ &lt;/tr&gt;
5396
+ &lt;/thead&gt;
5397
+ &lt;tbody&gt;
5398
+ &lt;tr&gt;
5399
+ &lt;td&gt;Wiser&lt;/td&gt;
5400
+ &lt;td&gt;3 days ago&lt;/td&gt;
5401
+ &lt;td&gt;Co-marketing proposal&lt;/td&gt;
5402
+ &lt;/tr&gt;
5403
+ &lt;tr&gt;
5404
+ &lt;td&gt;Loox&lt;/td&gt;
5405
+ &lt;td&gt;12 days ago&lt;/td&gt;
5406
+ &lt;td&gt;Intro call&lt;/td&gt;
5407
+ &lt;/tr&gt;
5408
+ &lt;/tbody&gt;
5409
+ &lt;/table&gt;
5410
+ &lt;/div&gt;
5411
+ &lt;ul class=&quot;gemboss-md-list&quot;&gt;
5412
+ &lt;li&gt;Send the proposal by &lt;strong&gt;Friday&lt;/strong&gt;
5413
+ &lt;/li&gt;
5414
+ &lt;li&gt;Ask about the &lt;code class=&quot;gemboss-md-code&quot;&gt;affiliate&lt;/code&gt; tier&lt;/li&gt;
5415
+ &lt;/ul&gt;
5416
+ &lt;p class=&quot;gemboss-md-p&quot;&gt;Their partner page: &lt;a class=&quot;gemboss-ec-md-link&quot; href=&quot;https://wiser.test/partners&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;https://wiser.test/partners&lt;/a&gt;. Notes from the call are in the CRM.&lt;/p&gt;
5417
+ &lt;/div&gt;
5418
+ &lt;div class=&quot;gb-chat-meta&quot;&gt;
5419
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-chat-copy&quot;&gt;Copy&lt;/button&gt;
5420
+ &lt;span&gt;Claude Code&lt;/span&gt;
5421
+ &lt;span&gt;6.2s&lt;/span&gt;
5422
+ &lt;/div&gt;
5423
+ &lt;/div&gt;
5424
+ &lt;/div&gt;
5425
+ &lt;div class=&quot;gemboss-ec-input&quot; data-density=&quot;full&quot;&gt;
5426
+ &lt;textarea rows=&quot;1&quot; aria-label=&quot;Message&quot; placeholder=&quot;Ask, or describe a partner meeting…&quot;&gt;
5427
+ &lt;/textarea&gt;
5428
+ &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5429
+ &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5430
+ &lt;span class=&quot;gb-engine&quot;&gt;
5431
+ &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;
5432
+ &lt;span class=&quot;gb-engine-dot gb-engine-dot--ok&quot; aria-hidden=&quot;true&quot;&gt;
5433
+ &lt;/span&gt;
5434
+ &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
5435
+ &lt;/span&gt;
5436
+ &lt;span class=&quot;gb-engine-chipmark&quot;&gt;
5437
+ &lt;svg class=&quot;gemboss-engine-mark&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5438
+ &lt;path d=&quot;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&quot; fill-rule=&quot;nonzero&quot;&gt;
5439
+ &lt;/path&gt;
5440
+ &lt;/svg&gt;
5441
+ &lt;/span&gt;
5442
+ &lt;/button&gt;
5443
+ &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;
5444
+ &lt;/div&gt;
5445
+ &lt;/span&gt;
5446
+ &lt;/div&gt;
5447
+ &lt;div class=&quot;gemboss-ec-toolbar-tools&quot;&gt;
5448
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ec-attach-btn&quot; aria-label=&quot;Attach a file&quot; title=&quot;Attach a file&quot;&gt;
5449
+ &lt;svg viewBox=&quot;0 0 24 24&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5450
+ &lt;path d=&quot;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&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5451
+ &lt;/path&gt;
5452
+ &lt;/svg&gt;
5453
+ &lt;/button&gt;
5454
+ &lt;input type=&quot;file&quot; hidden=&quot;&quot; tabindex=&quot;-1&quot;/&gt;
5455
+ &lt;/div&gt;
5456
+ &lt;button type=&quot;submit&quot; disabled=&quot;&quot; aria-label=&quot;Send&quot; title=&quot;Send&quot;&gt;
5457
+ &lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5458
+ &lt;path d=&quot;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&quot;&gt;
5459
+ &lt;/path&gt;
5460
+ &lt;/svg&gt;
5461
+ &lt;/button&gt;
5462
+ &lt;/div&gt;
5463
+ &lt;/div&gt;
5464
+ &lt;/div&gt;
5465
+ &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=":c95-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=":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="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;
5466
+ &lt;div class=&quot;gb-chat&quot;&gt;
5467
+ &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot;&gt;
5468
+ &lt;div class=&quot;gemboss-ec-msg user&quot;&gt;
5469
+ &lt;div class=&quot;gemboss-ec-bubble&quot;&gt;Summarize last week&lt;/div&gt;
5470
+ &lt;/div&gt;
5471
+ &lt;div class=&quot;gemboss-ec-msg assistant&quot;&gt;
5472
+ &lt;div class=&quot;ui-notice ui-notice--danger gb-chat-error&quot; role=&quot;alert&quot;&gt;
5473
+ &lt;div&gt;Not signed in on your machine. Open Terminal, run the command below, then sign in:&lt;/div&gt;
5474
+ &lt;code class=&quot;gb-chat-cmd&quot;&gt;claude&lt;/code&gt;
5475
+ &lt;div&gt;
5476
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost gb-chat-copy&quot;&gt;Copy command&lt;/button&gt;
5477
+ &lt;/div&gt;
5478
+ &lt;details class=&quot;gb-chat-original&quot;&gt;
5479
+ &lt;summary&gt;Original error&lt;/summary&gt;
5480
+ &lt;span&gt;Error: not logged in · Please run /login&lt;/span&gt;
5481
+ &lt;/details&gt;
5482
+ &lt;/div&gt;
5483
+ &lt;/div&gt;
5484
+ &lt;div class=&quot;gemboss-ec-msg user&quot;&gt;
5485
+ &lt;div class=&quot;gemboss-ec-bubble&quot;&gt;Try again&lt;/div&gt;
5486
+ &lt;/div&gt;
5487
+ &lt;div class=&quot;gemboss-ec-msg assistant&quot;&gt;
5488
+ &lt;p class=&quot;gb-engine-notice gb-engine-notice--down&quot; role=&quot;status&quot;&gt;
5489
+ &lt;span class=&quot;gb-engine-dot gb-engine-dot--down&quot; aria-hidden=&quot;true&quot;&gt;
5490
+ &lt;/span&gt;
5491
+ &lt;span class=&quot;gb-engine-notice-text&quot;&gt;The bridge on your machine rejected this browser&amp;#x27;s pairing code (it was installed with another code). Pair again in Setup.&lt;/span&gt;
5492
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-notice-link&quot;&gt;Open setup&lt;/button&gt;
5493
+ &lt;/p&gt;
5494
+ &lt;/div&gt;
5495
+ &lt;/div&gt;
5496
+ &lt;div class=&quot;gemboss-ec-input&quot; data-density=&quot;full&quot;&gt;
5497
+ &lt;textarea rows=&quot;1&quot; aria-label=&quot;Message&quot; placeholder=&quot;Ask, or describe a partner meeting…&quot;&gt;
5498
+ &lt;/textarea&gt;
5499
+ &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5500
+ &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5501
+ &lt;span class=&quot;gb-engine&quot;&gt;
5502
+ &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. Bridge on your machine: Not connected&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Not connected&quot;&gt;
5503
+ &lt;span class=&quot;gb-engine-dot gb-engine-dot--down&quot; aria-hidden=&quot;true&quot;&gt;
5504
+ &lt;/span&gt;
5505
+ &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
5506
+ &lt;/span&gt;
5507
+ &lt;span class=&quot;gb-engine-chipmark&quot;&gt;
5508
+ &lt;svg class=&quot;gemboss-engine-mark&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5509
+ &lt;path d=&quot;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&quot; fill-rule=&quot;nonzero&quot;&gt;
5510
+ &lt;/path&gt;
5511
+ &lt;/svg&gt;
5512
+ &lt;/span&gt;
5513
+ &lt;/button&gt;
5514
+ &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;
5515
+ &lt;/div&gt;
5516
+ &lt;/span&gt;
5517
+ &lt;/div&gt;
5518
+ &lt;div class=&quot;gemboss-ec-toolbar-tools&quot;&gt;
5519
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ec-attach-btn&quot; aria-label=&quot;Attach a file&quot; title=&quot;Attach a file&quot;&gt;
5520
+ &lt;svg viewBox=&quot;0 0 24 24&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5521
+ &lt;path d=&quot;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&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5522
+ &lt;/path&gt;
5523
+ &lt;/svg&gt;
5524
+ &lt;/button&gt;
5525
+ &lt;input type=&quot;file&quot; hidden=&quot;&quot; tabindex=&quot;-1&quot;/&gt;
5526
+ &lt;/div&gt;
5527
+ &lt;button type=&quot;submit&quot; disabled=&quot;&quot; aria-label=&quot;Send&quot; title=&quot;Send&quot;&gt;
5528
+ &lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5529
+ &lt;path d=&quot;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&quot;&gt;
5530
+ &lt;/path&gt;
5531
+ &lt;/svg&gt;
5532
+ &lt;/button&gt;
5533
+ &lt;/div&gt;
5534
+ &lt;/div&gt;
5535
+ &lt;/div&gt;
5536
+ &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=":c96-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=":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:240px;display:flex;border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden&quot;&gt;
5537
+ &lt;div class=&quot;gb-chat&quot;&gt;
5538
+ &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot;&gt;
5539
+ &lt;p class=&quot;gb-chat-note&quot;&gt;Switched to Codex: a new conversation.&lt;/p&gt;
5540
+ &lt;p class=&quot;gb-engine-notice gb-engine-notice--warn&quot; role=&quot;status&quot;&gt;
5541
+ &lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; aria-hidden=&quot;true&quot;&gt;
5542
+ &lt;/span&gt;
5543
+ &lt;span class=&quot;gb-engine-notice-text&quot;&gt;This bridge is older than the one the panel expects: update it once.&lt;/span&gt;
5544
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-notice-link&quot;&gt;Open setup&lt;/button&gt;
5545
+ &lt;/p&gt;
5546
+ &lt;/div&gt;
5547
+ &lt;div class=&quot;gemboss-ec-input&quot; data-density=&quot;full&quot;&gt;
5548
+ &lt;textarea rows=&quot;1&quot; aria-label=&quot;Message&quot; placeholder=&quot;Ask, or describe a partner meeting…&quot;&gt;
5549
+ &lt;/textarea&gt;
5550
+ &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5551
+ &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5552
+ &lt;span class=&quot;gb-engine&quot;&gt;
5553
+ &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. Bridge on your machine: Outdated&quot; title=&quot;Engine: Claude Code · Opus. Bridge on your machine: Outdated&quot;&gt;
5554
+ &lt;span class=&quot;gb-engine-dot gb-engine-dot--warn&quot; aria-hidden=&quot;true&quot;&gt;
5555
+ &lt;/span&gt;
5556
+ &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
5557
+ &lt;/span&gt;
5558
+ &lt;span class=&quot;gb-engine-chipmark&quot;&gt;
5559
+ &lt;svg class=&quot;gemboss-engine-mark&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5560
+ &lt;path d=&quot;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&quot; fill-rule=&quot;nonzero&quot;&gt;
5561
+ &lt;/path&gt;
5562
+ &lt;/svg&gt;
5563
+ &lt;/span&gt;
5564
+ &lt;/button&gt;
5565
+ &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;
5566
+ &lt;/div&gt;
5567
+ &lt;/span&gt;
5568
+ &lt;/div&gt;
5569
+ &lt;div class=&quot;gemboss-ec-toolbar-tools&quot;&gt;
5570
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ec-attach-btn&quot; aria-label=&quot;Attach a file&quot; title=&quot;Attach a file&quot;&gt;
5571
+ &lt;svg viewBox=&quot;0 0 24 24&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5572
+ &lt;path d=&quot;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&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5573
+ &lt;/path&gt;
5574
+ &lt;/svg&gt;
5575
+ &lt;/button&gt;
5576
+ &lt;input type=&quot;file&quot; hidden=&quot;&quot; tabindex=&quot;-1&quot;/&gt;
5577
+ &lt;/div&gt;
5578
+ &lt;button type=&quot;submit&quot; disabled=&quot;&quot; aria-label=&quot;Send&quot; title=&quot;Send&quot;&gt;
5579
+ &lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5580
+ &lt;path d=&quot;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&quot;&gt;
5581
+ &lt;/path&gt;
5582
+ &lt;/svg&gt;
5583
+ &lt;/button&gt;
5584
+ &lt;/div&gt;
5585
+ &lt;/div&gt;
5586
+ &lt;/div&gt;
5587
+ &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=":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="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;
5588
+ &lt;div class=&quot;gb-chat&quot;&gt;
5589
+ &lt;div class=&quot;gemboss-ec-scroll&quot; role=&quot;log&quot; aria-label=&quot;Conversation&quot;&gt;
5590
+ &lt;/div&gt;
5591
+ &lt;div class=&quot;gemboss-ec-input&quot; data-density=&quot;icon&quot;&gt;
5592
+ &lt;textarea rows=&quot;1&quot; aria-label=&quot;Message&quot; placeholder=&quot;Ask, or describe a partner meeting…&quot;&gt;
5593
+ &lt;/textarea&gt;
5594
+ &lt;div class=&quot;gemboss-ec-toolbar&quot;&gt;
5595
+ &lt;div class=&quot;gemboss-ec-toolbar-lead&quot;&gt;
5596
+ &lt;span class=&quot;gb-engine&quot;&gt;
5597
+ &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;
5598
+ &lt;span class=&quot;gb-engine-dot gb-engine-dot--ok&quot; aria-hidden=&quot;true&quot;&gt;
5599
+ &lt;/span&gt;
5600
+ &lt;span class=&quot;gb-engine-chiplabel&quot;&gt;Claude Code&lt;span class=&quot;gb-engine-chipsub&quot;&gt; · Opus&lt;/span&gt;
5601
+ &lt;/span&gt;
5602
+ &lt;span class=&quot;gb-engine-chipmark&quot;&gt;
5603
+ &lt;svg class=&quot;gemboss-engine-mark&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5604
+ &lt;path d=&quot;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&quot; fill-rule=&quot;nonzero&quot;&gt;
5605
+ &lt;/path&gt;
5606
+ &lt;/svg&gt;
5607
+ &lt;/span&gt;
5608
+ &lt;/button&gt;
5609
+ &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;
5610
+ &lt;/div&gt;
5611
+ &lt;/span&gt;
5612
+ &lt;/div&gt;
5613
+ &lt;div class=&quot;gemboss-ec-toolbar-tools&quot;&gt;
5614
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-ec-attach-btn&quot; aria-label=&quot;Attach a file&quot; title=&quot;Attach a file&quot;&gt;
5615
+ &lt;svg viewBox=&quot;0 0 24 24&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5616
+ &lt;path d=&quot;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&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
5617
+ &lt;/path&gt;
5618
+ &lt;/svg&gt;
5619
+ &lt;/button&gt;
5620
+ &lt;input type=&quot;file&quot; hidden=&quot;&quot; tabindex=&quot;-1&quot;/&gt;
5621
+ &lt;/div&gt;
5622
+ &lt;button type=&quot;submit&quot; disabled=&quot;&quot; aria-label=&quot;Send&quot; title=&quot;Send&quot;&gt;
5623
+ &lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
5624
+ &lt;path d=&quot;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&quot;&gt;
5625
+ &lt;/path&gt;
5626
+ &lt;/svg&gt;
5627
+ &lt;/button&gt;
5628
+ &lt;/div&gt;
5629
+ &lt;/div&gt;
5630
+ &lt;/div&gt;
5631
+ &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=":c98-R0:-pane-engine"><div class="gb-engine-field"><span class="gb-engine-label" id=":c98-R3d:">Engine</span><div class="gb-engine-groups" role="group" aria-labelledby=":c98-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;
5632
+ &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;
5633
+ &lt;div class=&quot;gb-engine-pane&quot; id=&quot;:c98-R0:-pane-engine&quot;&gt;
5634
+ &lt;div class=&quot;gb-engine-field&quot;&gt;
5635
+ &lt;span class=&quot;gb-engine-label&quot; id=&quot;:c98-R3d:&quot;&gt;Engine&lt;/span&gt;
5636
+ &lt;div class=&quot;gb-engine-groups&quot; role=&quot;group&quot; aria-labelledby=&quot;:c98-R3d:&quot;&gt;
5637
+ &lt;div class=&quot;gb-engine-group&quot; data-current=&quot;&quot;&gt;
5638
+ &lt;span class=&quot;gb-engine-rowhead&quot;&gt;
5639
+ &lt;span class=&quot;gb-engine-rowname&quot;&gt;Claude Code&lt;/span&gt;
5640
+ &lt;span class=&quot;ui-badge ui-badge--success&quot;&gt;Claude Max&lt;/span&gt;
5641
+ &lt;/span&gt;
5642
+ &lt;div class=&quot;gb-engine-opts&quot; role=&quot;group&quot; aria-label=&quot;Claude Code&quot;&gt;
5643
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot;&gt;Default&lt;/button&gt;
5644
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;true&quot;&gt;Opus&lt;/button&gt;
5645
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot;&gt;Sonnet&lt;/button&gt;
5646
+ &lt;/div&gt;
5647
+ &lt;/div&gt;
5648
+ &lt;div class=&quot;gb-engine-group&quot;&gt;
5649
+ &lt;span class=&quot;gb-engine-rowhead&quot;&gt;
5650
+ &lt;span class=&quot;gb-engine-rowname&quot;&gt;Codex&lt;/span&gt;
5651
+ &lt;span class=&quot;ui-badge ui-badge--warning&quot;&gt;installed, not signed in&lt;/span&gt;
5652
+ &lt;/span&gt;
5653
+ &lt;span class=&quot;gb-engine-note&quot;&gt;Run codex login in Terminal.&lt;/span&gt;
5654
+ &lt;div class=&quot;gb-engine-opts&quot; role=&quot;group&quot; aria-label=&quot;Codex&quot;&gt;
5655
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot; disabled=&quot;&quot;&gt;Default&lt;/button&gt;
5656
+ &lt;button type=&quot;button&quot; class=&quot;gb-engine-opt&quot; aria-pressed=&quot;false&quot; disabled=&quot;&quot;&gt;GPT-5&lt;/button&gt;
5657
+ &lt;/div&gt;
5658
+ &lt;/div&gt;
5659
+ &lt;/div&gt;
5660
+ &lt;/div&gt;
5661
+ &lt;div class=&quot;gb-engine-notes&quot;&gt;
5662
+ &lt;p&gt;Claude Code has no access to this machine in a store session.&lt;/p&gt;
5663
+ &lt;/div&gt;
5664
+ &lt;/div&gt;
5665
+ &lt;/div&gt;
5666
+ &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=":c99-R0:-tab-engine" aria-controls=":c99-R0:-pane-engine" aria-selected="false" tabindex="-1">Engine</button><button type="button" role="tab" id=":c99-R0:-tab-setup" aria-controls=":c99-R0:-pane-setup" aria-selected="true" tabindex="0">Setup</button><button type="button" role="tab" id=":c99-R0:-tab-status" aria-controls=":c99-R0:-pane-status" aria-selected="false" tabindex="-1">Status</button></div><div class="gb-engine-pane" role="tabpanel" id=":c99-R0:-pane-setup" aria-labelledby=":c99-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;
5667
+ &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;
5668
+ &lt;div class=&quot;ui-tabs gb-engine-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Engine, setup and status&quot;&gt;
5669
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c99-R0:-tab-engine&quot; aria-controls=&quot;:c99-R0:-pane-engine&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Engine&lt;/button&gt;
5670
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c99-R0:-tab-setup&quot; aria-controls=&quot;:c99-R0:-pane-setup&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Setup&lt;/button&gt;
5671
+ &lt;button type=&quot;button&quot; role=&quot;tab&quot; id=&quot;:c99-R0:-tab-status&quot; aria-controls=&quot;:c99-R0:-pane-status&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Status&lt;/button&gt;
5672
+ &lt;/div&gt;
5673
+ &lt;div class=&quot;gb-engine-pane&quot; role=&quot;tabpanel&quot; id=&quot;:c99-R0:-pane-setup&quot; aria-labelledby=&quot;:c99-R0:-tab-setup&quot;&gt;
5674
+ &lt;p class=&quot;gb-engine-callout gb-engine-callout--down&quot;&gt;
5675
+ &lt;strong&gt;Bridge on your machine: not connected.&lt;/strong&gt;
5676
+ &lt;/p&gt;
5677
+ &lt;div class=&quot;gb-engine-steps&quot;&gt;
5678
+ &lt;form class=&quot;ui-toolbar&quot;&gt;
5679
+ &lt;input class=&quot;gemboss-field&quot; aria-label=&quot;Pairing code&quot; placeholder=&quot;Pairing code&quot;/&gt;
5680
+ &lt;button type=&quot;submit&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Pair&lt;/button&gt;
5681
+ &lt;/form&gt;
5682
+ &lt;/div&gt;
5683
+ &lt;pre class=&quot;gb-engine-cmd&quot;&gt;
5684
+ &lt;code&gt;curl -fsSL https://radar.test/bridge/install.sh | sh&lt;/code&gt;
5685
+ &lt;/pre&gt;
5686
+ &lt;div class=&quot;gb-engine-actions&quot;&gt;
5687
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Copy command&lt;/button&gt;
5688
+ &lt;span class=&quot;gb-engine-said&quot; role=&quot;status&quot;&gt;
5689
+ &lt;/span&gt;
5690
+ &lt;/div&gt;
5691
+ &lt;/div&gt;
5692
+ &lt;/div&gt;
5693
+ &lt;/div&gt;</code></pre></details></figure></section>
5694
+ <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">30/8/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;
4846
5695
  &lt;aside class=&quot;gemboss-assistant-rail&quot;&gt;
4847
5696
  &lt;div class=&quot;gemboss-assistant-rail-top&quot;&gt;
4848
5697
  &lt;button type=&quot;button&quot; class=&quot;gemboss-assistant-newchat&quot; title=&quot;Phiên mới&quot;&gt;
@@ -4891,7 +5740,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
4891
5740
  &lt;/svg&gt;
4892
5741
  &lt;span class=&quot;gemboss-assistant-thread-title&quot;&gt;So sánh advertorial với listicle&lt;/span&gt;
4893
5742
  &lt;/span&gt;
4894
- &lt;span class=&quot;gemboss-assistant-thread-meta&quot;&gt;29/8/2026&lt;/span&gt;
5743
+ &lt;span class=&quot;gemboss-assistant-thread-meta&quot;&gt;30/8/2026&lt;/span&gt;
4895
5744
  &lt;/button&gt;
4896
5745
  &lt;div class=&quot;gemboss-assistant-thread-actions&quot;&gt;
4897
5746
  &lt;button type=&quot;button&quot; class=&quot;gemboss-assistant-thread-act&quot; aria-label=&quot;Options&quot;&gt;