@gemboss/ui 0.13.0 → 0.21.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"><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"><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="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a></nav>
30
- <main><header class="cat-head"><h1>@gemboss/ui 0.13.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>4fa51b50e621</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="#chat">Thân chat</a><a href="#reactions">Reactions</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.21.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>646a140b4013</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;
@@ -743,7 +743,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
743
743
  &lt;/tbody&gt;
744
744
  &lt;/table&gt;
745
745
  &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;/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;
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;/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
747
  &lt;div class=&quot;ui-table-wrap&quot;&gt;
748
748
  &lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;
749
749
  &lt;caption class=&quot;ui-sr-only&quot;&gt;Pages captured per day&lt;/caption&gt;
@@ -818,6 +818,122 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
818
818
  &lt;/tbody&gt;
819
819
  &lt;/table&gt;
820
820
  &lt;/div&gt;
821
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>1 · Data table nhiều dòng (0.16.0): ô canh TRÊN như Polaris DataTable; tiêu đề hàng (<code>th scope=row</code>) xuống dòng (cắt bằng <code>truncate</code> / <code>ui-clamp-2</code> nếu cần một dòng); link trong ô 24px mà chữ vẫn thẳng hàng với ô bên cạnh</figcaption><div class="cat-live"><div class="ui-table-wrap"><table class="ui-table ui-table--sticky-first"><caption class="ui-sr-only">Jobs</caption><thead><tr><th scope="col">Job</th><th scope="col">State</th><th scope="col">Source</th><th scope="col">Last run</th><th scope="col" class="is-num">Runs</th></tr></thead><tbody><tr><th scope="row" class="ui-table__rowhead"><a href="#job0">Weekly integrations crawl</a><span class="ui-sub">PageFly, GemPages, Replo, Shogun, EComposer and 14 more partner page builders · every Monday 08:00 UTC</span></th><td><span class="ui-tag ui-tag--success">OK</span></td><td><a href="#src0">sitemap</a></td><td>2h ago</td><td class="is-num">1,204</td></tr><tr><th scope="row" class="ui-table__rowhead"><a href="#job1">StoreLeads refresh</a><span class="ui-sub">Apps with a GemPages mention, ranked by install growth · daily</span></th><td><span class="ui-tag ui-tag--warning">Late</span></td><td><a href="#src1">api</a></td><td>26h ago</td><td class="is-num">311</td></tr><tr><th scope="row" class="ui-table__rowhead"><a href="#job2">LinkedIn people at Shopify</a><span class="ui-sub">367 profiles · Find people on the organization page</span></th><td><span class="ui-tag ui-tag--success">OK</span></td><td><a href="#src2">apify</a></td><td>3d ago</td><td class="is-num">18</td></tr></tbody></table></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-table-wrap&quot;&gt;
822
+ &lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;
823
+ &lt;caption class=&quot;ui-sr-only&quot;&gt;Jobs&lt;/caption&gt;
824
+ &lt;thead&gt;
825
+ &lt;tr&gt;
826
+ &lt;th scope=&quot;col&quot;&gt;Job&lt;/th&gt;
827
+ &lt;th scope=&quot;col&quot;&gt;State&lt;/th&gt;
828
+ &lt;th scope=&quot;col&quot;&gt;Source&lt;/th&gt;
829
+ &lt;th scope=&quot;col&quot;&gt;Last run&lt;/th&gt;
830
+ &lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Runs&lt;/th&gt;
831
+ &lt;/tr&gt;
832
+ &lt;/thead&gt;
833
+ &lt;tbody&gt;
834
+ &lt;tr&gt;
835
+ &lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;
836
+ &lt;a href=&quot;#job0&quot;&gt;Weekly integrations crawl&lt;/a&gt;
837
+ &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;
838
+ &lt;/th&gt;
839
+ &lt;td&gt;
840
+ &lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;OK&lt;/span&gt;
841
+ &lt;/td&gt;
842
+ &lt;td&gt;
843
+ &lt;a href=&quot;#src0&quot;&gt;sitemap&lt;/a&gt;
844
+ &lt;/td&gt;
845
+ &lt;td&gt;2h ago&lt;/td&gt;
846
+ &lt;td class=&quot;is-num&quot;&gt;1,204&lt;/td&gt;
847
+ &lt;/tr&gt;
848
+ &lt;tr&gt;
849
+ &lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;
850
+ &lt;a href=&quot;#job1&quot;&gt;StoreLeads refresh&lt;/a&gt;
851
+ &lt;span class=&quot;ui-sub&quot;&gt;Apps with a GemPages mention, ranked by install growth · daily&lt;/span&gt;
852
+ &lt;/th&gt;
853
+ &lt;td&gt;
854
+ &lt;span class=&quot;ui-tag ui-tag--warning&quot;&gt;Late&lt;/span&gt;
855
+ &lt;/td&gt;
856
+ &lt;td&gt;
857
+ &lt;a href=&quot;#src1&quot;&gt;api&lt;/a&gt;
858
+ &lt;/td&gt;
859
+ &lt;td&gt;26h ago&lt;/td&gt;
860
+ &lt;td class=&quot;is-num&quot;&gt;311&lt;/td&gt;
861
+ &lt;/tr&gt;
862
+ &lt;tr&gt;
863
+ &lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;
864
+ &lt;a href=&quot;#job2&quot;&gt;LinkedIn people at Shopify&lt;/a&gt;
865
+ &lt;span class=&quot;ui-sub&quot;&gt;367 profiles · Find people on the organization page&lt;/span&gt;
866
+ &lt;/th&gt;
867
+ &lt;td&gt;
868
+ &lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;OK&lt;/span&gt;
869
+ &lt;/td&gt;
870
+ &lt;td&gt;
871
+ &lt;a href=&quot;#src2&quot;&gt;apify&lt;/a&gt;
872
+ &lt;/td&gt;
873
+ &lt;td&gt;3d ago&lt;/td&gt;
874
+ &lt;td class=&quot;is-num&quot;&gt;18&lt;/td&gt;
875
+ &lt;/tr&gt;
876
+ &lt;/tbody&gt;
877
+ &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;/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
+ &lt;div class=&quot;ui-table-wrap&quot;&gt;
880
+ &lt;table class=&quot;ui-table ui-table--sticky-first&quot;&gt;
881
+ &lt;caption class=&quot;ui-sr-only&quot;&gt;Jobs&lt;/caption&gt;
882
+ &lt;thead&gt;
883
+ &lt;tr&gt;
884
+ &lt;th scope=&quot;col&quot;&gt;Job&lt;/th&gt;
885
+ &lt;th scope=&quot;col&quot;&gt;State&lt;/th&gt;
886
+ &lt;th scope=&quot;col&quot;&gt;Source&lt;/th&gt;
887
+ &lt;th scope=&quot;col&quot;&gt;Last run&lt;/th&gt;
888
+ &lt;th scope=&quot;col&quot; class=&quot;is-num&quot;&gt;Runs&lt;/th&gt;
889
+ &lt;/tr&gt;
890
+ &lt;/thead&gt;
891
+ &lt;tbody&gt;
892
+ &lt;tr&gt;
893
+ &lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;
894
+ &lt;a href=&quot;#job0&quot;&gt;Weekly integrations crawl&lt;/a&gt;
895
+ &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;
896
+ &lt;/th&gt;
897
+ &lt;td&gt;
898
+ &lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;OK&lt;/span&gt;
899
+ &lt;/td&gt;
900
+ &lt;td&gt;
901
+ &lt;a href=&quot;#src0&quot;&gt;sitemap&lt;/a&gt;
902
+ &lt;/td&gt;
903
+ &lt;td&gt;2h ago&lt;/td&gt;
904
+ &lt;td class=&quot;is-num&quot;&gt;1,204&lt;/td&gt;
905
+ &lt;/tr&gt;
906
+ &lt;tr&gt;
907
+ &lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;
908
+ &lt;a href=&quot;#job1&quot;&gt;StoreLeads refresh&lt;/a&gt;
909
+ &lt;span class=&quot;ui-sub&quot;&gt;Apps with a GemPages mention, ranked by install growth · daily&lt;/span&gt;
910
+ &lt;/th&gt;
911
+ &lt;td&gt;
912
+ &lt;span class=&quot;ui-tag ui-tag--warning&quot;&gt;Late&lt;/span&gt;
913
+ &lt;/td&gt;
914
+ &lt;td&gt;
915
+ &lt;a href=&quot;#src1&quot;&gt;api&lt;/a&gt;
916
+ &lt;/td&gt;
917
+ &lt;td&gt;26h ago&lt;/td&gt;
918
+ &lt;td class=&quot;is-num&quot;&gt;311&lt;/td&gt;
919
+ &lt;/tr&gt;
920
+ &lt;tr&gt;
921
+ &lt;th scope=&quot;row&quot; class=&quot;ui-table__rowhead&quot;&gt;
922
+ &lt;a href=&quot;#job2&quot;&gt;LinkedIn people at Shopify&lt;/a&gt;
923
+ &lt;span class=&quot;ui-sub&quot;&gt;367 profiles · Find people on the organization page&lt;/span&gt;
924
+ &lt;/th&gt;
925
+ &lt;td&gt;
926
+ &lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;OK&lt;/span&gt;
927
+ &lt;/td&gt;
928
+ &lt;td&gt;
929
+ &lt;a href=&quot;#src2&quot;&gt;apify&lt;/a&gt;
930
+ &lt;/td&gt;
931
+ &lt;td&gt;3d ago&lt;/td&gt;
932
+ &lt;td class=&quot;is-num&quot;&gt;18&lt;/td&gt;
933
+ &lt;/tr&gt;
934
+ &lt;/tbody&gt;
935
+ &lt;/table&gt;
936
+ &lt;/div&gt;
821
937
  &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>2 · Index table, HTML thuần + kit-plain.js: bấm CẢ HÀNG mở chi tiết (tiêu đề vẫn là link), checkbox / nút / ⋯ không mở; chọn hàng hiện thanh hành động thay header; Shift+click chọn dải; Escape bỏ chọn; sort ở header (aria-sort)</figcaption><div class="cat-live"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-bulkbar" hidden><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label><span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Add to outreach</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button></span></div><div class="ui-table-wrap"><table class="ui-table ui-table--index" data-gb-sort="client"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__check" scope="col"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label></th><th class="ui-table__primary" scope="col" aria-sort="ascending"><button type="button" class="ui-table__sort">Supplier</button></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><button type="button" class="ui-table__sort">Score</button></th><th scope="col">Ads</th><th class="ui-table__actions" scope="col"><span class="ui-sr-only">Actions</span></th></tr></thead><tbody><tr data-href="#c1"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="86">86</td><td data-condensed="hide">TikTok</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c2"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score" data-sort-value="64">64</td><td data-condensed="hide">Meta</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c3"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c3" aria-label="Select Yiwu Bloom Packaging"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a><span class="ui-sub">Trader · Packaging</span></td><td data-label="In">Yiwu</td><td><span class="ui-tag ui-tag--danger">Trader</span></td><td class="is-num" data-label="Score" data-sort-value="31">31</td><td data-condensed="hide">—</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Yiwu Bloom Packaging"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c4"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c4" aria-label="Select Shanghai Kerui Labs"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a><span class="ui-sub">OEM · Serums</span></td><td data-label="In">Shanghai</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="91">91</td><td data-condensed="hide">Google</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shanghai Kerui Labs"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c5"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c5" aria-label="Select Ningbo Haiyue"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c5" title="Ningbo Haiyue">Ningbo Haiyue</a></td><td data-label="In">Ningbo</td><td><span class="ui-tag">Unverified</span></td><td class="is-num" data-label="Score" data-sort-value="0">—</td><td data-condensed="hide">—</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Ningbo Haiyue"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr></tbody></table></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-index&quot;&gt;
822
938
  &lt;div class=&quot;ui-index__sortbar&quot; role=&quot;group&quot; aria-label=&quot;Sort&quot;&gt;
823
939
  &lt;span aria-hidden=&quot;true&quot;&gt;Sort&lt;/span&gt;
@@ -1185,7 +1301,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1185
1301
  &lt;/tbody&gt;
1186
1302
  &lt;/table&gt;
1187
1303
  &lt;/div&gt;
1188
- &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;/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;
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;/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;
1189
1305
  &lt;div class=&quot;ui-index&quot;&gt;
1190
1306
  &lt;div class=&quot;ui-index__sortbar&quot; role=&quot;group&quot; aria-label=&quot;Sort&quot;&gt;
1191
1307
  &lt;span aria-hidden=&quot;true&quot;&gt;Sort&lt;/span&gt;
@@ -1371,7 +1487,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1371
1487
  &lt;/table&gt;
1372
1488
  &lt;/div&gt;
1373
1489
  &lt;/div&gt;
1374
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>2 · Index table (React <code>IndexTable</code>, render tĩnh): cùng class; hàng có <code>is-linked</code> thay vì data-href (React tự xử lý click)</figcaption><div class="cat-live"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-table-wrap"><table class="ui-table ui-table--index"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__primary" scope="col" aria-sort="ascending"><a class="ui-table__sort" href="#collections">Supplier</a></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><a class="ui-table__sort" href="#collections">Score</a></th><th scope="col">Ads</th></tr></thead><tbody><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score">86</td><td data-condensed="hide">TikTok</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score">64</td><td data-condensed="hide">Meta</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a><span class="ui-sub">Trader · Packaging</span></td><td data-label="In">Yiwu</td><td><span class="ui-tag ui-tag--danger">Trader</span></td><td class="is-num" data-label="Score">31</td><td data-condensed="hide">—</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a><span class="ui-sub">OEM · Serums</span></td><td data-label="In">Shanghai</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score">91</td><td data-condensed="hide">Google</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c5" title="Ningbo Haiyue">Ningbo Haiyue</a></td><td data-label="In">Ningbo</td><td><span class="ui-tag">Unverified</span></td><td class="is-num" data-label="Score">—</td><td data-condensed="hide">—</td></tr></tbody></table></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-index&quot;&gt;
1490
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>2 · Index table (React <code>IndexTable</code>, render tĩnh): cùng class; hàng có <code>is-linked</code> thay vì data-href (React tự xử lý click). <code>linkAs</code> (Next <code>Link</code>) dùng cho CẢ link tiêu đề lẫn link sort ở header và chip (0.16.0), <code>sortLinkProps={{ scroll: false }}</code> giữ chỗ cuộn khi sort</figcaption><div class="cat-live"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-table-wrap"><table class="ui-table ui-table--index"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__primary" scope="col" aria-sort="ascending"><a class="ui-table__sort" href="#collections">Supplier</a></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><a class="ui-table__sort" href="#collections">Score</a></th><th scope="col">Ads</th></tr></thead><tbody><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score">86</td><td data-condensed="hide">TikTok</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score">64</td><td data-condensed="hide">Meta</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c3" title="Yiwu Bloom Packaging">Yiwu Bloom Packaging</a><span class="ui-sub">Trader · Packaging</span></td><td data-label="In">Yiwu</td><td><span class="ui-tag ui-tag--danger">Trader</span></td><td class="is-num" data-label="Score">31</td><td data-condensed="hide">—</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c4" title="Shanghai Kerui Labs">Shanghai Kerui Labs</a><span class="ui-sub">OEM · Serums</span></td><td data-label="In">Shanghai</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score">91</td><td data-condensed="hide">Google</td></tr><tr class="is-linked"><td class="ui-table__primary"><a class="ui-table__title" href="#c5" title="Ningbo Haiyue">Ningbo Haiyue</a></td><td data-label="In">Ningbo</td><td><span class="ui-tag">Unverified</span></td><td class="is-num" data-label="Score">—</td><td data-condensed="hide">—</td></tr></tbody></table></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-index&quot;&gt;
1375
1491
  &lt;div class=&quot;ui-index__sortbar&quot; role=&quot;group&quot; aria-label=&quot;Sort&quot;&gt;
1376
1492
  &lt;span aria-hidden=&quot;true&quot;&gt;Sort&lt;/span&gt;
1377
1493
  &lt;a class=&quot;ui-chip&quot; href=&quot;#collections&quot; aria-current=&quot;true&quot;&gt;Supplier ↑&lt;/a&gt;
@@ -1552,7 +1668,209 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1552
1668
  &lt;p class=&quot;ui-list__sub&quot;&gt;content-radar · 6 min read · 03/10/2026&lt;/p&gt;
1553
1669
  &lt;/div&gt;
1554
1670
  &lt;/li&gt;
1555
- &lt;/ul&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>4 · Compact list (<code>CompactList</code>): 36 dưới chuột, 44 dưới ngón tay</figcaption><div class="cat-live"><div style="max-width:420px"><ul class="ui-list ui-list--compact" aria-label="Needs attention"><li class="ui-list__item"><a class="ui-list__row" href="#c1"><span class="ui-list__icon" aria-hidden="true"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="6" fill="currentColor"></circle></svg></span><span class="ui-list__label">3 sources failed overnight</span><span class="ui-list__meta">07:12</span></a></li><li class="ui-list__item"><a class="ui-list__row is-selected" href="#c2" aria-current="page"><span class="ui-list__label">Keyword “page builder” dropped from #3 to #9</span><span class="ui-list__meta">Yesterday</span></a></li><li class="ui-list__item"><a class="ui-list__row" href="#c3"><span class="ui-list__label">12 candidates waiting for review in the pool</span><span class="ui-list__meta">12</span></a></li></ul></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:420px&quot;&gt;
1671
+ &lt;/ul&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>3 · Resource list chọn được (0.16.0, React <code>SelectableResourceList</code>, đang chọn 2): checkbox đầu khe media; thanh hành động là header của list, có từ đầu ("0 selected", nút tắt) nên tích ô đầu không đẩy hàng; Shift+click chọn dải; Escape bỏ chọn; bấm hàng vẫn mở chi tiết</figcaption><div class="cat-live"><div class="ui-resource"><div class="ui-bulkbar"><label class="ui-table__checkbox"><input type="checkbox" aria-label="Select all"/></label><span class="ui-bulkbar__count" aria-live="polite">2 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Shortlist</button><button type="button" class="ui-btn ui-btn--sm">Compare</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Not fit</button></span></div><ul class="ui-list" aria-label="Candidates"><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Lily Tran" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">LT</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s0">Lily Tran</a><p class="ui-list__sub">Head of CRO at Ruggable</p><p class="ui-list__meta">Replied 2 days ago</p><div class="ui-list__badges"><span class="ui-badge">CRO</span><span class="ui-badge">Plus</span></div></div><div class="ui-list__aside"><b>82</b></div></li><li class="ui-list__item"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Marcus Bell"/></label><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">MB</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s1">Marcus Bell</a><p class="ui-list__sub">Founder, Bell &amp; Co. Media. Runs Meta ads for 40 Shopify brands, mostly apparel and home goods; asked about the agency plan twice.</p><p class="ui-list__meta">New</p><div class="ui-list__badges"><span class="ui-badge">Media buyer</span></div></div><div class="ui-list__aside"><b>77</b></div></li><li class="ui-list__item is-selected"><div class="ui-list__media"><label class="ui-list__check"><input type="checkbox" aria-label="Select Aiko Sato" checked=""/></label><span class="gb-avatar gb-avatar--32" data-tone="5" aria-hidden="true">AS</span></div><div class="ui-list__body"><a class="ui-list__title" href="#s2">Aiko Sato</a><p class="ui-list__sub">Shopify app founder (reviews)</p><p class="ui-list__meta">Waiting on intro</p><div class="ui-list__badges"><span class="ui-badge">App</span><span class="ui-badge">Japan</span><span class="ui-badge">Plus</span><span class="ui-badge">+1</span></div></div><div class="ui-list__aside"><b>64</b></div></li></ul></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-resource&quot;&gt;
1672
+ &lt;div class=&quot;ui-bulkbar&quot;&gt;
1673
+ &lt;label class=&quot;ui-table__checkbox&quot;&gt;
1674
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;
1675
+ &lt;/label&gt;
1676
+ &lt;span class=&quot;ui-bulkbar__count&quot; aria-live=&quot;polite&quot;&gt;2 selected&lt;/span&gt;
1677
+ &lt;span class=&quot;ui-bulkbar__actions&quot;&gt;
1678
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Shortlist&lt;/button&gt;
1679
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Compare&lt;/button&gt;
1680
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Not fit&lt;/button&gt;
1681
+ &lt;/span&gt;
1682
+ &lt;/div&gt;
1683
+ &lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;
1684
+ &lt;li class=&quot;ui-list__item is-selected&quot;&gt;
1685
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1686
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1687
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot; checked=&quot;&quot;/&gt;
1688
+ &lt;/label&gt;
1689
+ &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;
1690
+ &lt;/div&gt;
1691
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1692
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;
1693
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;
1694
+ &lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;
1695
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1696
+ &lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;
1697
+ &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1698
+ &lt;/div&gt;
1699
+ &lt;/div&gt;
1700
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1701
+ &lt;b&gt;82&lt;/b&gt;
1702
+ &lt;/div&gt;
1703
+ &lt;/li&gt;
1704
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1705
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1706
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1707
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;
1708
+ &lt;/label&gt;
1709
+ &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;
1710
+ &lt;/div&gt;
1711
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1712
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;
1713
+ &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;
1714
+ &lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;
1715
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1716
+ &lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;
1717
+ &lt;/div&gt;
1718
+ &lt;/div&gt;
1719
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1720
+ &lt;b&gt;77&lt;/b&gt;
1721
+ &lt;/div&gt;
1722
+ &lt;/li&gt;
1723
+ &lt;li class=&quot;ui-list__item is-selected&quot;&gt;
1724
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1725
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1726
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot; checked=&quot;&quot;/&gt;
1727
+ &lt;/label&gt;
1728
+ &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;
1729
+ &lt;/div&gt;
1730
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1731
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;
1732
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;
1733
+ &lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;
1734
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1735
+ &lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;
1736
+ &lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;
1737
+ &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1738
+ &lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;
1739
+ &lt;/div&gt;
1740
+ &lt;/div&gt;
1741
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1742
+ &lt;b&gt;64&lt;/b&gt;
1743
+ &lt;/div&gt;
1744
+ &lt;/li&gt;
1745
+ &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;/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
+ &lt;div class=&quot;ui-resource&quot;&gt;
1748
+ &lt;div class=&quot;ui-bulkbar&quot;&gt;
1749
+ &lt;label class=&quot;ui-table__checkbox&quot;&gt;
1750
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select all&quot;/&gt;
1751
+ &lt;/label&gt;
1752
+ &lt;span class=&quot;ui-bulkbar__count&quot; aria-live=&quot;polite&quot;&gt;0 selected&lt;/span&gt;
1753
+ &lt;span class=&quot;ui-bulkbar__actions&quot;&gt;
1754
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Shortlist&lt;/button&gt;
1755
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot; disabled=&quot;&quot;&gt;Compare&lt;/button&gt;
1756
+ &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;
1757
+ &lt;/span&gt;
1758
+ &lt;/div&gt;
1759
+ &lt;ul class=&quot;ui-list&quot; aria-label=&quot;Candidates&quot;&gt;
1760
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1761
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1762
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1763
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Lily Tran&quot;/&gt;
1764
+ &lt;/label&gt;
1765
+ &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;
1766
+ &lt;/div&gt;
1767
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1768
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s0&quot;&gt;Lily Tran&lt;/a&gt;
1769
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Head of CRO at Ruggable&lt;/p&gt;
1770
+ &lt;p class=&quot;ui-list__meta&quot;&gt;Replied 2 days ago&lt;/p&gt;
1771
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1772
+ &lt;span class=&quot;ui-badge&quot;&gt;CRO&lt;/span&gt;
1773
+ &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1774
+ &lt;/div&gt;
1775
+ &lt;/div&gt;
1776
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1777
+ &lt;b&gt;82&lt;/b&gt;
1778
+ &lt;/div&gt;
1779
+ &lt;/li&gt;
1780
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1781
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1782
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1783
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Marcus Bell&quot;/&gt;
1784
+ &lt;/label&gt;
1785
+ &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;
1786
+ &lt;/div&gt;
1787
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1788
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s1&quot;&gt;Marcus Bell&lt;/a&gt;
1789
+ &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;
1790
+ &lt;p class=&quot;ui-list__meta&quot;&gt;New&lt;/p&gt;
1791
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1792
+ &lt;span class=&quot;ui-badge&quot;&gt;Media buyer&lt;/span&gt;
1793
+ &lt;/div&gt;
1794
+ &lt;/div&gt;
1795
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1796
+ &lt;b&gt;77&lt;/b&gt;
1797
+ &lt;/div&gt;
1798
+ &lt;/li&gt;
1799
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1800
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1801
+ &lt;label class=&quot;ui-list__check&quot;&gt;
1802
+ &lt;input type=&quot;checkbox&quot; aria-label=&quot;Select Aiko Sato&quot;/&gt;
1803
+ &lt;/label&gt;
1804
+ &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;
1805
+ &lt;/div&gt;
1806
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1807
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#s2&quot;&gt;Aiko Sato&lt;/a&gt;
1808
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Shopify app founder (reviews)&lt;/p&gt;
1809
+ &lt;p class=&quot;ui-list__meta&quot;&gt;Waiting on intro&lt;/p&gt;
1810
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1811
+ &lt;span class=&quot;ui-badge&quot;&gt;App&lt;/span&gt;
1812
+ &lt;span class=&quot;ui-badge&quot;&gt;Japan&lt;/span&gt;
1813
+ &lt;span class=&quot;ui-badge&quot;&gt;Plus&lt;/span&gt;
1814
+ &lt;span class=&quot;ui-badge&quot;&gt;+1&lt;/span&gt;
1815
+ &lt;/div&gt;
1816
+ &lt;/div&gt;
1817
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1818
+ &lt;b&gt;64&lt;/b&gt;
1819
+ &lt;/div&gt;
1820
+ &lt;/li&gt;
1821
+ &lt;/ul&gt;
1822
+ &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;/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
+ &lt;ul class=&quot;ui-list&quot; aria-label=&quot;People&quot;&gt;
1825
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1826
+ &lt;div class=&quot;ui-list__media&quot;&gt;
1827
+ &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;
1828
+ &lt;/div&gt;
1829
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1830
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#n1&quot;&gt;Lily Tran&lt;/a&gt;
1831
+ &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;
1832
+ &lt;p class=&quot;ui-list__meta&quot;&gt;linkedin · cro-agency · Austin, TX · posted 2d ago&lt;/p&gt;
1833
+ &lt;/div&gt;
1834
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1835
+ &lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;82&lt;/span&gt;
1836
+ &lt;/div&gt;
1837
+ &lt;div class=&quot;ui-list__actions&quot;&gt;
1838
+ &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;
1839
+ &lt;/div&gt;
1840
+ &lt;/li&gt;
1841
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1842
+ &lt;div class=&quot;ui-list__body&quot;&gt;
1843
+ &lt;a class=&quot;ui-list__title&quot; href=&quot;#n2&quot;&gt;Marcus Bell&lt;/a&gt;
1844
+ &lt;p class=&quot;ui-list__sub&quot;&gt;Founder, Bell UGC Studio · 12,400 followers&lt;/p&gt;
1845
+ &lt;p class=&quot;ui-list__meta&quot;&gt;
1846
+ &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;
1847
+ &lt;/span&gt;
1848
+ &lt;/p&gt;
1849
+ &lt;div class=&quot;ui-list__badges&quot;&gt;
1850
+ &lt;span class=&quot;ui-tag&quot;&gt;Hands-on&lt;/span&gt;
1851
+ &lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;Email verified&lt;/span&gt;
1852
+ &lt;/div&gt;
1853
+ &lt;/div&gt;
1854
+ &lt;div class=&quot;ui-list__aside&quot;&gt;
1855
+ &lt;span&gt;
1856
+ &lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;91&lt;/span&gt;
1857
+ &lt;span class=&quot;ui-sub&quot;&gt;Unverified&lt;/span&gt;
1858
+ &lt;/span&gt;
1859
+ &lt;/div&gt;
1860
+ &lt;div class=&quot;ui-list__actions&quot;&gt;
1861
+ &lt;span&gt;
1862
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--ghost&quot;&gt;Evidence (3)&lt;/button&gt;
1863
+ &lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;
1864
+ &lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More profiles&quot;&gt;⋯&lt;/summary&gt;
1865
+ &lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;
1866
+ &lt;a class=&quot;ui-menu__item&quot; href=&quot;#x&quot;&gt;X ↗&lt;/a&gt;
1867
+ &lt;/div&gt;
1868
+ &lt;/details&gt;
1869
+ &lt;/span&gt;
1870
+ &lt;/div&gt;
1871
+ &lt;/li&gt;
1872
+ &lt;/ul&gt;
1873
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>4 · Compact list (<code>CompactList</code>): 36 dưới chuột, 44 dưới ngón tay</figcaption><div class="cat-live"><div style="max-width:420px"><ul class="ui-list ui-list--compact" aria-label="Needs attention"><li class="ui-list__item"><a class="ui-list__row" href="#c1"><span class="ui-list__icon" aria-hidden="true"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="6" fill="currentColor"></circle></svg></span><span class="ui-list__label">3 sources failed overnight</span><span class="ui-list__meta">07:12</span></a></li><li class="ui-list__item"><a class="ui-list__row is-selected" href="#c2" aria-current="page"><span class="ui-list__label">Keyword “page builder” dropped from #3 to #9</span><span class="ui-list__meta">Yesterday</span></a></li><li class="ui-list__item"><a class="ui-list__row" href="#c3"><span class="ui-list__label">12 candidates waiting for review in the pool</span><span class="ui-list__meta">12</span></a></li></ul></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;max-width:420px&quot;&gt;
1556
1874
  &lt;ul class=&quot;ui-list ui-list--compact&quot; aria-label=&quot;Needs attention&quot;&gt;
1557
1875
  &lt;li class=&quot;ui-list__item&quot;&gt;
1558
1876
  &lt;a class=&quot;ui-list__row&quot; href=&quot;#c1&quot;&gt;
@@ -1617,6 +1935,44 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1617
1935
  &lt;time class=&quot;ui-list__time&quot;&gt;Yesterday&lt;/time&gt;
1618
1936
  &lt;/li&gt;
1619
1937
  &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;/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
+ &lt;ul class=&quot;ui-list ui-list--compact ui-list--activity ui-list--wrap&quot; aria-label=&quot;Relationship history&quot;&gt;
1940
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1941
+ &lt;span class=&quot;ui-list__dot ui-list__dot--info&quot; aria-hidden=&quot;true&quot;&gt;
1942
+ &lt;/span&gt;
1943
+ &lt;div&gt;
1944
+ &lt;span class=&quot;ui-list__label&quot;&gt;
1945
+ &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;
1946
+ &lt;/span&gt;
1947
+ &lt;span class=&quot;ui-list__detail&quot;&gt;by Lily Tran · with Marcus Bell and Aiko Sato&lt;/span&gt;
1948
+ &lt;div class=&quot;ui-list__content&quot;&gt;
1949
+ &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;
1950
+ &lt;/div&gt;
1951
+ &lt;/div&gt;
1952
+ &lt;time class=&quot;ui-list__time&quot; dateTime=&quot;2026-10-03&quot;&gt;Oct 3&lt;/time&gt;
1953
+ &lt;/li&gt;
1954
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1955
+ &lt;span class=&quot;ui-list__dot ui-list__dot--warning&quot; aria-hidden=&quot;true&quot;&gt;
1956
+ &lt;/span&gt;
1957
+ &lt;div&gt;
1958
+ &lt;span class=&quot;ui-list__label&quot;&gt;No reply to the follow-up&lt;/span&gt;
1959
+ &lt;span class=&quot;ui-list__detail&quot;&gt;sent by Lily Tran&lt;/span&gt;
1960
+ &lt;/div&gt;
1961
+ &lt;time class=&quot;ui-list__time&quot;&gt;Sep 28&lt;/time&gt;
1962
+ &lt;/li&gt;
1963
+ &lt;li class=&quot;ui-list__item&quot;&gt;
1964
+ &lt;span class=&quot;ui-list__dot ui-list__dot--success&quot; aria-hidden=&quot;true&quot;&gt;
1965
+ &lt;/span&gt;
1966
+ &lt;div&gt;
1967
+ &lt;span class=&quot;ui-list__label&quot;&gt;Signed the agency plan&lt;/span&gt;
1968
+ &lt;span class=&quot;ui-list__detail&quot;&gt;4 stores · Shopify Plus&lt;/span&gt;
1969
+ &lt;div class=&quot;ui-list__content&quot;&gt;
1970
+ &lt;p&gt;Starts Monday; the first store is the Austin one.&lt;/p&gt;
1971
+ &lt;/div&gt;
1972
+ &lt;/div&gt;
1973
+ &lt;time class=&quot;ui-list__time&quot;&gt;Sep 20&lt;/time&gt;
1974
+ &lt;/li&gt;
1975
+ &lt;/ul&gt;
1620
1976
  &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>5 · Card grid (<code>CardGrid</code> min 240 + <code>MediaCard</code>): auto-fill, khe 16, ảnh + tiêu đề là một link, ⋯ riêng</figcaption><div class="cat-live"><div class="ui-cardgrid" role="list" aria-label="Sections"><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g0" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(0%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(0%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(0%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g0">Hero with countdown</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Live</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g1" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(47%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(47%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(47%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g1">Bundle picker, three tiers</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Draft</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g2" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(94%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(94%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(94%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g2">Reviews carousel</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Live</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g3" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(141%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(141%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(141%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g3">FAQ accordion</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Draft</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g4" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(188%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(188%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(188%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g4">Sticky add to cart</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Live</span></div></div></article><article class="ui-card ui-card--media" role="listitem"><a class="ui-card__media" href="#g5" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(235%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(235%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(235%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__menu"><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions">⋯</summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Duplicate</button></div></details></div><div class="ui-card__body"><a class="ui-card__link" href="#g5">Comparison table</a><span class="ui-card__meta">Section · 12 uses</span><div class="ui-list__badges"><span class="ui-badge">Draft</span></div></div></article></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-cardgrid&quot; role=&quot;list&quot; aria-label=&quot;Sections&quot;&gt;
1621
1977
  &lt;article class=&quot;ui-card ui-card--media&quot; role=&quot;listitem&quot;&gt;
1622
1978
  &lt;a class=&quot;ui-card__media&quot; href=&quot;#g0&quot; tabindex=&quot;-1&quot; aria-hidden=&quot;true&quot;&gt;
@@ -1859,8 +2215,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1859
2215
  &lt;/div&gt;
1860
2216
  &lt;/div&gt;
1861
2217
  &lt;/article&gt;
1862
- &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>6 · Board (<code>Board</code>): 12 card mỗi cột rồi "Show N more" (details lồng nhau, không cần script), cột rỗng vẫn hiện</figcaption><div class="cat-live"><div class="ui-board" role="region" aria-label="Element pipeline"><section class="ui-board__col" aria-labelledby="ui-board-todo"><header class="ui-board__head"><span class="ui-board__dot" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-todo">To do</span><span class="ui-board__count">14</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b0">Popup variant 1</a><span class="ui-card__meta">#120 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b1">Popup variant 2</a><span class="ui-card__meta">#121 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b2">Popup variant 3</a><span class="ui-card__meta">#122 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b3">Popup variant 4</a><span class="ui-card__meta">#123 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b4">Popup variant 5</a><span class="ui-card__meta">#124 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b5">Popup variant 6</a><span class="ui-card__meta">#125 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b6">Popup variant 7</a><span class="ui-card__meta">#126 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b7">Popup variant 8</a><span class="ui-card__meta">#127 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b8">Popup variant 9</a><span class="ui-card__meta">#128 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b9">Popup variant 10</a><span class="ui-card__meta">#129 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b10">Popup variant 11</a><span class="ui-card__meta">#130 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b11">Popup variant 12</a><span class="ui-card__meta">#131 · 2 errors</span></div></article></li></ol><details class="ui-board__more"><summary class="ui-btn ui-btn--sm">Show 2 more</summary><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b12">Popup variant 13</a><span class="ui-card__meta">#132 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b13">Popup variant 14</a><span class="ui-card__meta">#133 · 2 errors</span></div></article></li></ol></details></section><section class="ui-board__col" aria-labelledby="ui-board-review"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--info" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-review">Review</span><span class="ui-board__count">2</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b40">Countdown bar, 6 frames</a><span class="ui-card__meta">#160 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b41">Spin to win, no bait</a><span class="ui-card__meta">#161 · 2 errors</span></div></article></li></ol></section><section class="ui-board__col" aria-labelledby="ui-board-done"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-done">Done</span><span class="ui-board__count">0</span></header><p class="ui-board__empty">Nothing here</p></section></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-board&quot; role=&quot;region&quot; aria-label=&quot;Element pipeline&quot;&gt;
1863
- &lt;section class=&quot;ui-board__col&quot; aria-labelledby=&quot;ui-board-todo&quot;&gt;
2218
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>6 · Board (<code>Board</code>): 12 card mỗi cột rồi "Show N more" (details lồng nhau, không cần script), cột rỗng vẫn hiện</figcaption><div class="cat-live"><div class="ui-board" role="region" aria-label="Element pipeline"><section class="ui-board__col" data-col="todo" aria-labelledby="ui-board-todo"><header class="ui-board__head"><span class="ui-board__dot" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-todo">To do</span><span class="ui-board__count">14</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b0">Popup variant 1</a><span class="ui-card__meta">#120 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b1">Popup variant 2</a><span class="ui-card__meta">#121 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b2">Popup variant 3</a><span class="ui-card__meta">#122 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b3">Popup variant 4</a><span class="ui-card__meta">#123 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b4">Popup variant 5</a><span class="ui-card__meta">#124 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b5">Popup variant 6</a><span class="ui-card__meta">#125 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b6">Popup variant 7</a><span class="ui-card__meta">#126 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b7">Popup variant 8</a><span class="ui-card__meta">#127 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b8">Popup variant 9</a><span class="ui-card__meta">#128 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b9">Popup variant 10</a><span class="ui-card__meta">#129 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b10">Popup variant 11</a><span class="ui-card__meta">#130 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b11">Popup variant 12</a><span class="ui-card__meta">#131 · 2 errors</span></div></article></li></ol><details class="ui-board__more"><summary class="ui-btn ui-btn--sm">Show 2 more</summary><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b12">Popup variant 13</a><span class="ui-card__meta">#132 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b13">Popup variant 14</a><span class="ui-card__meta">#133 · 2 errors</span></div></article></li></ol></details></section><section class="ui-board__col" data-col="review" aria-labelledby="ui-board-review"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--info" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-review">Review</span><span class="ui-board__count">2</span></header><ol class="ui-board__list"><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b40">Countdown bar, 6 frames</a><span class="ui-card__meta">#160 · 2 errors</span></div></article></li><li><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#b41">Spin to win, no bait</a><span class="ui-card__meta">#161 · 2 errors</span></div></article></li></ol></section><section class="ui-board__col" data-col="done" aria-labelledby="ui-board-done"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="ui-board-done">Done</span><span class="ui-board__count">0</span></header><p class="ui-board__empty">Nothing here</p></section></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-board&quot; role=&quot;region&quot; aria-label=&quot;Element pipeline&quot;&gt;
2219
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;todo&quot; aria-labelledby=&quot;ui-board-todo&quot;&gt;
1864
2220
  &lt;header class=&quot;ui-board__head&quot;&gt;
1865
2221
  &lt;span class=&quot;ui-board__dot&quot; aria-hidden=&quot;true&quot;&gt;
1866
2222
  &lt;/span&gt;
@@ -1987,7 +2343,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1987
2343
  &lt;/ol&gt;
1988
2344
  &lt;/details&gt;
1989
2345
  &lt;/section&gt;
1990
- &lt;section class=&quot;ui-board__col&quot; aria-labelledby=&quot;ui-board-review&quot;&gt;
2346
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;review&quot; aria-labelledby=&quot;ui-board-review&quot;&gt;
1991
2347
  &lt;header class=&quot;ui-board__head&quot;&gt;
1992
2348
  &lt;span class=&quot;ui-board__dot ui-board__dot--info&quot; aria-hidden=&quot;true&quot;&gt;
1993
2349
  &lt;/span&gt;
@@ -2013,7 +2369,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2013
2369
  &lt;/li&gt;
2014
2370
  &lt;/ol&gt;
2015
2371
  &lt;/section&gt;
2016
- &lt;section class=&quot;ui-board__col&quot; aria-labelledby=&quot;ui-board-done&quot;&gt;
2372
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;done&quot; aria-labelledby=&quot;ui-board-done&quot;&gt;
2017
2373
  &lt;header class=&quot;ui-board__head&quot;&gt;
2018
2374
  &lt;span class=&quot;ui-board__dot ui-board__dot--success&quot; aria-hidden=&quot;true&quot;&gt;
2019
2375
  &lt;/span&gt;
@@ -2022,9 +2378,9 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2022
2378
  &lt;/header&gt;
2023
2379
  &lt;p class=&quot;ui-board__empty&quot;&gt;Nothing here&lt;/p&gt;
2024
2380
  &lt;/section&gt;
2025
- &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;/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; 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; 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; 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;
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;/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;
2026
2382
  &lt;div class=&quot;ui-board&quot; role=&quot;region&quot; aria-label=&quot;Element pipeline&quot;&gt;
2027
- &lt;section class=&quot;ui-board__col&quot; aria-labelledby=&quot;ui-board-todo&quot;&gt;
2383
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;todo&quot; aria-labelledby=&quot;ui-board-todo&quot;&gt;
2028
2384
  &lt;header class=&quot;ui-board__head&quot;&gt;
2029
2385
  &lt;span class=&quot;ui-board__dot&quot; aria-hidden=&quot;true&quot;&gt;
2030
2386
  &lt;/span&gt;
@@ -2151,7 +2507,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2151
2507
  &lt;/ol&gt;
2152
2508
  &lt;/details&gt;
2153
2509
  &lt;/section&gt;
2154
- &lt;section class=&quot;ui-board__col&quot; aria-labelledby=&quot;ui-board-review&quot;&gt;
2510
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;review&quot; aria-labelledby=&quot;ui-board-review&quot;&gt;
2155
2511
  &lt;header class=&quot;ui-board__head&quot;&gt;
2156
2512
  &lt;span class=&quot;ui-board__dot ui-board__dot--info&quot; aria-hidden=&quot;true&quot;&gt;
2157
2513
  &lt;/span&gt;
@@ -2177,7 +2533,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2177
2533
  &lt;/li&gt;
2178
2534
  &lt;/ol&gt;
2179
2535
  &lt;/section&gt;
2180
- &lt;section class=&quot;ui-board__col&quot; aria-labelledby=&quot;ui-board-done&quot;&gt;
2536
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;done&quot; aria-labelledby=&quot;ui-board-done&quot;&gt;
2181
2537
  &lt;header class=&quot;ui-board__head&quot;&gt;
2182
2538
  &lt;span class=&quot;ui-board__dot ui-board__dot--success&quot; aria-hidden=&quot;true&quot;&gt;
2183
2539
  &lt;/span&gt;
@@ -2187,6 +2543,434 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2187
2543
  &lt;p class=&quot;ui-board__empty&quot;&gt;Nothing here&lt;/p&gt;
2188
2544
  &lt;/section&gt;
2189
2545
  &lt;/div&gt;
2546
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>6 · Board chuyển thẻ được (0.18.0, <code>onMove</code> / <code>data-gb-move</code>): kéo thả, HOẶC Tab tới thẻ → Space nhấc → mũi tên → Space thả (Escape trả về); vùng aria-live đọc từng bước; thả xong bắn <code>gb:move</code> { id, from, to, index }. Không bật thì board chỉ đọc như cũ</figcaption><div class="cat-live"><div class="ui-board" id="catalog-move" role="region" aria-label="Review queue" data-gb-move=""><p id="catalog-move-move-help" hidden="">Press Space to pick the card up, arrow keys to move it, Space to drop it, Escape to cancel.</p><div class="ui-sr-only" aria-live="assertive" data-gb-live=""></div><section class="ui-board__col" data-col="draft" aria-labelledby="catalog-move-draft"><header class="ui-board__head"><span class="ui-board__dot" aria-hidden="true"></span><span class="ui-board__name" id="catalog-move-draft">Draft</span><span class="ui-board__count">3</span></header><ol class="ui-board__list"><li data-id="d14" data-name="Hero with countdown" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#d14">Hero with countdown</a><span class="ui-card__meta">#14 · Section</span></div></article></li><li data-id="d15" data-name="Bundle picker" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#d15">Bundle picker</a><span class="ui-card__meta">#15 · Section</span></div></article></li><li data-id="d16" data-name="Reviews carousel" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#d16">Reviews carousel</a><span class="ui-card__meta">#16 · Section</span></div></article></li></ol></section><section class="ui-board__col" data-col="review" aria-labelledby="catalog-move-review"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--info" aria-hidden="true"></span><span class="ui-board__name" id="catalog-move-review">In review</span><span class="ui-board__count">1</span></header><ol class="ui-board__list"><li data-id="r21" data-name="FAQ accordion" tabindex="0" draggable="true" aria-describedby="catalog-move-move-help"><article class="ui-card ui-card--media"><div class="ui-card__body"><a class="ui-card__link" href="#r21">FAQ accordion</a><span class="ui-card__meta">#21 · Section</span></div></article></li></ol></section><section class="ui-board__col" data-col="approved" aria-labelledby="catalog-move-approved"><header class="ui-board__head"><span class="ui-board__dot ui-board__dot--success" aria-hidden="true"></span><span class="ui-board__name" id="catalog-move-approved">Approved</span><span class="ui-board__count">0</span></header><p class="ui-board__empty">Nothing here</p></section></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-board&quot; id=&quot;catalog-move&quot; role=&quot;region&quot; aria-label=&quot;Review queue&quot; data-gb-move=&quot;&quot;&gt;
2547
+ &lt;p id=&quot;catalog-move-move-help&quot; hidden=&quot;&quot;&gt;Press Space to pick the card up, arrow keys to move it, Space to drop it, Escape to cancel.&lt;/p&gt;
2548
+ &lt;div class=&quot;ui-sr-only&quot; aria-live=&quot;assertive&quot; data-gb-live=&quot;&quot;&gt;
2549
+ &lt;/div&gt;
2550
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;draft&quot; aria-labelledby=&quot;catalog-move-draft&quot;&gt;
2551
+ &lt;header class=&quot;ui-board__head&quot;&gt;
2552
+ &lt;span class=&quot;ui-board__dot&quot; aria-hidden=&quot;true&quot;&gt;
2553
+ &lt;/span&gt;
2554
+ &lt;span class=&quot;ui-board__name&quot; id=&quot;catalog-move-draft&quot;&gt;Draft&lt;/span&gt;
2555
+ &lt;span class=&quot;ui-board__count&quot;&gt;3&lt;/span&gt;
2556
+ &lt;/header&gt;
2557
+ &lt;ol class=&quot;ui-board__list&quot;&gt;
2558
+ &lt;li data-id=&quot;d14&quot; data-name=&quot;Hero with countdown&quot; tabindex=&quot;0&quot; draggable=&quot;true&quot; aria-describedby=&quot;catalog-move-move-help&quot;&gt;
2559
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2560
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2561
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#d14&quot;&gt;Hero with countdown&lt;/a&gt;
2562
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#14 · Section&lt;/span&gt;
2563
+ &lt;/div&gt;
2564
+ &lt;/article&gt;
2565
+ &lt;/li&gt;
2566
+ &lt;li data-id=&quot;d15&quot; data-name=&quot;Bundle picker&quot; tabindex=&quot;0&quot; draggable=&quot;true&quot; aria-describedby=&quot;catalog-move-move-help&quot;&gt;
2567
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2568
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2569
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#d15&quot;&gt;Bundle picker&lt;/a&gt;
2570
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#15 · Section&lt;/span&gt;
2571
+ &lt;/div&gt;
2572
+ &lt;/article&gt;
2573
+ &lt;/li&gt;
2574
+ &lt;li data-id=&quot;d16&quot; data-name=&quot;Reviews carousel&quot; tabindex=&quot;0&quot; draggable=&quot;true&quot; aria-describedby=&quot;catalog-move-move-help&quot;&gt;
2575
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2576
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2577
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#d16&quot;&gt;Reviews carousel&lt;/a&gt;
2578
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#16 · Section&lt;/span&gt;
2579
+ &lt;/div&gt;
2580
+ &lt;/article&gt;
2581
+ &lt;/li&gt;
2582
+ &lt;/ol&gt;
2583
+ &lt;/section&gt;
2584
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;review&quot; aria-labelledby=&quot;catalog-move-review&quot;&gt;
2585
+ &lt;header class=&quot;ui-board__head&quot;&gt;
2586
+ &lt;span class=&quot;ui-board__dot ui-board__dot--info&quot; aria-hidden=&quot;true&quot;&gt;
2587
+ &lt;/span&gt;
2588
+ &lt;span class=&quot;ui-board__name&quot; id=&quot;catalog-move-review&quot;&gt;In review&lt;/span&gt;
2589
+ &lt;span class=&quot;ui-board__count&quot;&gt;1&lt;/span&gt;
2590
+ &lt;/header&gt;
2591
+ &lt;ol class=&quot;ui-board__list&quot;&gt;
2592
+ &lt;li data-id=&quot;r21&quot; data-name=&quot;FAQ accordion&quot; tabindex=&quot;0&quot; draggable=&quot;true&quot; aria-describedby=&quot;catalog-move-move-help&quot;&gt;
2593
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2594
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2595
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#r21&quot;&gt;FAQ accordion&lt;/a&gt;
2596
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#21 · Section&lt;/span&gt;
2597
+ &lt;/div&gt;
2598
+ &lt;/article&gt;
2599
+ &lt;/li&gt;
2600
+ &lt;/ol&gt;
2601
+ &lt;/section&gt;
2602
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;approved&quot; aria-labelledby=&quot;catalog-move-approved&quot;&gt;
2603
+ &lt;header class=&quot;ui-board__head&quot;&gt;
2604
+ &lt;span class=&quot;ui-board__dot ui-board__dot--success&quot; aria-hidden=&quot;true&quot;&gt;
2605
+ &lt;/span&gt;
2606
+ &lt;span class=&quot;ui-board__name&quot; id=&quot;catalog-move-approved&quot;&gt;Approved&lt;/span&gt;
2607
+ &lt;span class=&quot;ui-board__count&quot;&gt;0&lt;/span&gt;
2608
+ &lt;/header&gt;
2609
+ &lt;p class=&quot;ui-board__empty&quot;&gt;Nothing here&lt;/p&gt;
2610
+ &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;/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
+ &lt;div class=&quot;ui-board&quot; id=&quot;catalog-paged&quot; role=&quot;region&quot; aria-label=&quot;Ideas&quot;&gt;
2613
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;enough&quot; aria-labelledby=&quot;catalog-paged-enough&quot;&gt;
2614
+ &lt;header class=&quot;ui-board__head&quot;&gt;
2615
+ &lt;span class=&quot;ui-board__dot ui-board__dot--success&quot; aria-hidden=&quot;true&quot;&gt;
2616
+ &lt;/span&gt;
2617
+ &lt;span class=&quot;ui-board__name&quot; id=&quot;catalog-paged-enough&quot;&gt;Ready to write&lt;/span&gt;
2618
+ &lt;span class=&quot;ui-board__count&quot;&gt;412&lt;/span&gt;
2619
+ &lt;/header&gt;
2620
+ &lt;ol class=&quot;ui-board__list&quot;&gt;
2621
+ &lt;li data-id=&quot;i0&quot; data-name=&quot;Idea 1&quot;&gt;
2622
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2623
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2624
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i0&quot;&gt;Idea 1&lt;/a&gt;
2625
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#0 · Section&lt;/span&gt;
2626
+ &lt;/div&gt;
2627
+ &lt;/article&gt;
2628
+ &lt;/li&gt;
2629
+ &lt;li data-id=&quot;i1&quot; data-name=&quot;Idea 2&quot;&gt;
2630
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2631
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2632
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i1&quot;&gt;Idea 2&lt;/a&gt;
2633
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#1 · Section&lt;/span&gt;
2634
+ &lt;/div&gt;
2635
+ &lt;/article&gt;
2636
+ &lt;/li&gt;
2637
+ &lt;li data-id=&quot;i2&quot; data-name=&quot;Idea 3&quot;&gt;
2638
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2639
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2640
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i2&quot;&gt;Idea 3&lt;/a&gt;
2641
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#2 · Section&lt;/span&gt;
2642
+ &lt;/div&gt;
2643
+ &lt;/article&gt;
2644
+ &lt;/li&gt;
2645
+ &lt;li data-id=&quot;i3&quot; data-name=&quot;Idea 4&quot;&gt;
2646
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2647
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2648
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i3&quot;&gt;Idea 4&lt;/a&gt;
2649
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#3 · Section&lt;/span&gt;
2650
+ &lt;/div&gt;
2651
+ &lt;/article&gt;
2652
+ &lt;/li&gt;
2653
+ &lt;li data-id=&quot;i4&quot; data-name=&quot;Idea 5&quot;&gt;
2654
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2655
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2656
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i4&quot;&gt;Idea 5&lt;/a&gt;
2657
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#4 · Section&lt;/span&gt;
2658
+ &lt;/div&gt;
2659
+ &lt;/article&gt;
2660
+ &lt;/li&gt;
2661
+ &lt;li data-id=&quot;i5&quot; data-name=&quot;Idea 6&quot;&gt;
2662
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2663
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2664
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i5&quot;&gt;Idea 6&lt;/a&gt;
2665
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#5 · Section&lt;/span&gt;
2666
+ &lt;/div&gt;
2667
+ &lt;/article&gt;
2668
+ &lt;/li&gt;
2669
+ &lt;li data-id=&quot;i6&quot; data-name=&quot;Idea 7&quot;&gt;
2670
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2671
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2672
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i6&quot;&gt;Idea 7&lt;/a&gt;
2673
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#6 · Section&lt;/span&gt;
2674
+ &lt;/div&gt;
2675
+ &lt;/article&gt;
2676
+ &lt;/li&gt;
2677
+ &lt;li data-id=&quot;i7&quot; data-name=&quot;Idea 8&quot;&gt;
2678
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2679
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2680
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i7&quot;&gt;Idea 8&lt;/a&gt;
2681
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#7 · Section&lt;/span&gt;
2682
+ &lt;/div&gt;
2683
+ &lt;/article&gt;
2684
+ &lt;/li&gt;
2685
+ &lt;li data-id=&quot;i8&quot; data-name=&quot;Idea 9&quot;&gt;
2686
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2687
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2688
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i8&quot;&gt;Idea 9&lt;/a&gt;
2689
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#8 · Section&lt;/span&gt;
2690
+ &lt;/div&gt;
2691
+ &lt;/article&gt;
2692
+ &lt;/li&gt;
2693
+ &lt;li data-id=&quot;i9&quot; data-name=&quot;Idea 10&quot;&gt;
2694
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2695
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2696
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i9&quot;&gt;Idea 10&lt;/a&gt;
2697
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#9 · Section&lt;/span&gt;
2698
+ &lt;/div&gt;
2699
+ &lt;/article&gt;
2700
+ &lt;/li&gt;
2701
+ &lt;li data-id=&quot;i10&quot; data-name=&quot;Idea 11&quot;&gt;
2702
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2703
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2704
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i10&quot;&gt;Idea 11&lt;/a&gt;
2705
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#10 · Section&lt;/span&gt;
2706
+ &lt;/div&gt;
2707
+ &lt;/article&gt;
2708
+ &lt;/li&gt;
2709
+ &lt;li data-id=&quot;i11&quot; data-name=&quot;Idea 12&quot;&gt;
2710
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2711
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2712
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#i11&quot;&gt;Idea 12&lt;/a&gt;
2713
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#11 · Section&lt;/span&gt;
2714
+ &lt;/div&gt;
2715
+ &lt;/article&gt;
2716
+ &lt;/li&gt;
2717
+ &lt;/ol&gt;
2718
+ &lt;div class=&quot;ui-more ui-board__next&quot;&gt;
2719
+ &lt;a class=&quot;ui-btn ui-btn--sm&quot; href=&quot;#collections&quot;&gt;Show 24 more&lt;/a&gt;
2720
+ &lt;/div&gt;
2721
+ &lt;/section&gt;
2722
+ &lt;section class=&quot;ui-board__col&quot; data-col=&quot;partial&quot; aria-labelledby=&quot;catalog-paged-partial&quot;&gt;
2723
+ &lt;header class=&quot;ui-board__head&quot;&gt;
2724
+ &lt;span class=&quot;ui-board__dot ui-board__dot--warning&quot; aria-hidden=&quot;true&quot;&gt;
2725
+ &lt;/span&gt;
2726
+ &lt;span class=&quot;ui-board__name&quot; id=&quot;catalog-paged-partial&quot;&gt;Needs more&lt;/span&gt;
2727
+ &lt;span class=&quot;ui-board__count&quot;&gt;9&lt;/span&gt;
2728
+ &lt;/header&gt;
2729
+ &lt;ol class=&quot;ui-board__list&quot;&gt;
2730
+ &lt;li data-id=&quot;p0&quot; data-name=&quot;Idea 100&quot;&gt;
2731
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2732
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2733
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#p0&quot;&gt;Idea 100&lt;/a&gt;
2734
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#0 · Section&lt;/span&gt;
2735
+ &lt;/div&gt;
2736
+ &lt;/article&gt;
2737
+ &lt;/li&gt;
2738
+ &lt;li data-id=&quot;p1&quot; data-name=&quot;Idea 101&quot;&gt;
2739
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2740
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2741
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#p1&quot;&gt;Idea 101&lt;/a&gt;
2742
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#1 · Section&lt;/span&gt;
2743
+ &lt;/div&gt;
2744
+ &lt;/article&gt;
2745
+ &lt;/li&gt;
2746
+ &lt;li data-id=&quot;p2&quot; data-name=&quot;Idea 102&quot;&gt;
2747
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2748
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2749
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#p2&quot;&gt;Idea 102&lt;/a&gt;
2750
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#2 · Section&lt;/span&gt;
2751
+ &lt;/div&gt;
2752
+ &lt;/article&gt;
2753
+ &lt;/li&gt;
2754
+ &lt;li data-id=&quot;p3&quot; data-name=&quot;Idea 103&quot;&gt;
2755
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2756
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2757
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#p3&quot;&gt;Idea 103&lt;/a&gt;
2758
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#3 · Section&lt;/span&gt;
2759
+ &lt;/div&gt;
2760
+ &lt;/article&gt;
2761
+ &lt;/li&gt;
2762
+ &lt;li data-id=&quot;p4&quot; data-name=&quot;Idea 104&quot;&gt;
2763
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2764
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2765
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#p4&quot;&gt;Idea 104&lt;/a&gt;
2766
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#4 · Section&lt;/span&gt;
2767
+ &lt;/div&gt;
2768
+ &lt;/article&gt;
2769
+ &lt;/li&gt;
2770
+ &lt;li data-id=&quot;p5&quot; data-name=&quot;Idea 105&quot;&gt;
2771
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2772
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2773
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#p5&quot;&gt;Idea 105&lt;/a&gt;
2774
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#5 · Section&lt;/span&gt;
2775
+ &lt;/div&gt;
2776
+ &lt;/article&gt;
2777
+ &lt;/li&gt;
2778
+ &lt;li data-id=&quot;p6&quot; data-name=&quot;Idea 106&quot;&gt;
2779
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2780
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2781
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#p6&quot;&gt;Idea 106&lt;/a&gt;
2782
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#6 · Section&lt;/span&gt;
2783
+ &lt;/div&gt;
2784
+ &lt;/article&gt;
2785
+ &lt;/li&gt;
2786
+ &lt;li data-id=&quot;p7&quot; data-name=&quot;Idea 107&quot;&gt;
2787
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2788
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2789
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#p7&quot;&gt;Idea 107&lt;/a&gt;
2790
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#7 · Section&lt;/span&gt;
2791
+ &lt;/div&gt;
2792
+ &lt;/article&gt;
2793
+ &lt;/li&gt;
2794
+ &lt;li data-id=&quot;p8&quot; data-name=&quot;Idea 108&quot;&gt;
2795
+ &lt;article class=&quot;ui-card ui-card--media&quot;&gt;
2796
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2797
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#p8&quot;&gt;Idea 108&lt;/a&gt;
2798
+ &lt;span class=&quot;ui-card__meta&quot;&gt;#8 · Section&lt;/span&gt;
2799
+ &lt;/div&gt;
2800
+ &lt;/article&gt;
2801
+ &lt;/li&gt;
2802
+ &lt;/ol&gt;
2803
+ &lt;/section&gt;
2804
+ &lt;/div&gt;
2805
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>5 · <code>MediaCard ratio="1/1"</code> (0.18.0): ảnh vuông (moodboard, ảnh sản phẩm). Ba tỉ lệ thôi: 16:10 (mặc định), 4:3, 1:1</figcaption><div class="cat-live"><div class="ui-cardgrid" data-min="200" role="list" aria-label="Moodboard"><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m0" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(0%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(0%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(0%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m0">Warm neutrals</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m1" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(61%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(61%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(61%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m1">Night market</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m2" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(122%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(122%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(122%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m2">Studio flat lay</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m3" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(183%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(183%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(183%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m3">Ceramics</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m4" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(244%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(244%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(244%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m4">Linen</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article><article class="ui-card ui-card--media" data-ratio="1/1" role="listitem"><a class="ui-card__media" href="#m5" tabindex="-1" aria-hidden="true"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(305%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(305%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(305%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E"/></a><div class="ui-card__body"><a class="ui-card__link" href="#m5">Citrus</a><span class="ui-card__meta">Moodboard · 3 refs</span></div></article></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-cardgrid&quot; data-min=&quot;200&quot; role=&quot;list&quot; aria-label=&quot;Moodboard&quot;&gt;
2806
+ &lt;article class=&quot;ui-card ui-card--media&quot; data-ratio=&quot;1/1&quot; role=&quot;listitem&quot;&gt;
2807
+ &lt;a class=&quot;ui-card__media&quot; href=&quot;#m0&quot; tabindex=&quot;-1&quot; aria-hidden=&quot;true&quot;&gt;
2808
+ &lt;img alt=&quot;&quot; src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(0%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(0%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(0%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E&quot;/&gt;
2809
+ &lt;/a&gt;
2810
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2811
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#m0&quot;&gt;Warm neutrals&lt;/a&gt;
2812
+ &lt;span class=&quot;ui-card__meta&quot;&gt;Moodboard · 3 refs&lt;/span&gt;
2813
+ &lt;/div&gt;
2814
+ &lt;/article&gt;
2815
+ &lt;article class=&quot;ui-card ui-card--media&quot; data-ratio=&quot;1/1&quot; role=&quot;listitem&quot;&gt;
2816
+ &lt;a class=&quot;ui-card__media&quot; href=&quot;#m1&quot; tabindex=&quot;-1&quot; aria-hidden=&quot;true&quot;&gt;
2817
+ &lt;img alt=&quot;&quot; src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(61%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(61%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(61%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E&quot;/&gt;
2818
+ &lt;/a&gt;
2819
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2820
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#m1&quot;&gt;Night market&lt;/a&gt;
2821
+ &lt;span class=&quot;ui-card__meta&quot;&gt;Moodboard · 3 refs&lt;/span&gt;
2822
+ &lt;/div&gt;
2823
+ &lt;/article&gt;
2824
+ &lt;article class=&quot;ui-card ui-card--media&quot; data-ratio=&quot;1/1&quot; role=&quot;listitem&quot;&gt;
2825
+ &lt;a class=&quot;ui-card__media&quot; href=&quot;#m2&quot; tabindex=&quot;-1&quot; aria-hidden=&quot;true&quot;&gt;
2826
+ &lt;img alt=&quot;&quot; src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(122%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(122%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(122%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E&quot;/&gt;
2827
+ &lt;/a&gt;
2828
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2829
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#m2&quot;&gt;Studio flat lay&lt;/a&gt;
2830
+ &lt;span class=&quot;ui-card__meta&quot;&gt;Moodboard · 3 refs&lt;/span&gt;
2831
+ &lt;/div&gt;
2832
+ &lt;/article&gt;
2833
+ &lt;article class=&quot;ui-card ui-card--media&quot; data-ratio=&quot;1/1&quot; role=&quot;listitem&quot;&gt;
2834
+ &lt;a class=&quot;ui-card__media&quot; href=&quot;#m3&quot; tabindex=&quot;-1&quot; aria-hidden=&quot;true&quot;&gt;
2835
+ &lt;img alt=&quot;&quot; src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(183%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(183%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(183%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E&quot;/&gt;
2836
+ &lt;/a&gt;
2837
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2838
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#m3&quot;&gt;Ceramics&lt;/a&gt;
2839
+ &lt;span class=&quot;ui-card__meta&quot;&gt;Moodboard · 3 refs&lt;/span&gt;
2840
+ &lt;/div&gt;
2841
+ &lt;/article&gt;
2842
+ &lt;article class=&quot;ui-card ui-card--media&quot; data-ratio=&quot;1/1&quot; role=&quot;listitem&quot;&gt;
2843
+ &lt;a class=&quot;ui-card__media&quot; href=&quot;#m4&quot; tabindex=&quot;-1&quot; aria-hidden=&quot;true&quot;&gt;
2844
+ &lt;img alt=&quot;&quot; src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(244%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(244%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(244%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E&quot;/&gt;
2845
+ &lt;/a&gt;
2846
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2847
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#m4&quot;&gt;Linen&lt;/a&gt;
2848
+ &lt;span class=&quot;ui-card__meta&quot;&gt;Moodboard · 3 refs&lt;/span&gt;
2849
+ &lt;/div&gt;
2850
+ &lt;/article&gt;
2851
+ &lt;article class=&quot;ui-card ui-card--media&quot; data-ratio=&quot;1/1&quot; role=&quot;listitem&quot;&gt;
2852
+ &lt;a class=&quot;ui-card__media&quot; href=&quot;#m5&quot; tabindex=&quot;-1&quot; aria-hidden=&quot;true&quot;&gt;
2853
+ &lt;img alt=&quot;&quot; src=&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20100%22%3E%3Crect%20width%3D%22160%22%20height%3D%22100%22%20fill%3D%22hsl(305%2030%25%2088%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%2280%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22hsl(305%2025%25%2070%25)%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2236%22%20width%3D%22128%22%20height%3D%2246%22%20rx%3D%226%22%20fill%3D%22hsl(305%2025%25%2078%25)%22%2F%3E%3C%2Fsvg%3E&quot;/&gt;
2854
+ &lt;/a&gt;
2855
+ &lt;div class=&quot;ui-card__body&quot;&gt;
2856
+ &lt;a class=&quot;ui-card__link&quot; href=&quot;#m5&quot;&gt;Citrus&lt;/a&gt;
2857
+ &lt;span class=&quot;ui-card__meta&quot;&gt;Moodboard · 3 refs&lt;/span&gt;
2858
+ &lt;/div&gt;
2859
+ &lt;/article&gt;
2860
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>2 · Menu ⋯ của hàng nổi trên khung bảng (0.18.0): mở ⋯ ở hàng CUỐI, menu hiện đủ (top layer, <code>popover</code>), sát đáy màn thì lật lên; cuộn trang hoặc đổi cỡ cửa sổ thì đóng</figcaption><div class="cat-live"><div class="ui-index"><div class="ui-index__sortbar" role="group" aria-label="Sort"><span aria-hidden="true">Sort</span><a class="ui-chip" href="#collections" aria-current="true">Supplier ↑</a><a class="ui-chip" href="#collections">Score</a></div><div class="ui-bulkbar" hidden><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label><span class="ui-bulkbar__count" data-gb-count="{n} selected" aria-live="polite">0 selected</span><span class="ui-bulkbar__actions"><button type="button" class="ui-btn ui-btn--sm">Add to outreach</button><button type="button" class="ui-btn ui-btn--sm ui-btn--critical">Archive</button></span></div><div class="ui-table-wrap"><table class="ui-table ui-table--index" data-gb-sort="client"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th class="ui-table__check" scope="col"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select-all aria-label="Select all"></label></th><th class="ui-table__primary" scope="col" aria-sort="ascending"><button type="button" class="ui-table__sort">Supplier</button></th><th scope="col">Location</th><th scope="col">Verdict</th><th scope="col" class="is-num" aria-sort="none"><button type="button" class="ui-table__sort">Score</button></th><th scope="col">Ads</th><th class="ui-table__actions" scope="col"><span class="ui-sr-only">Actions</span></th></tr></thead><tbody><tr data-href="#c1"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c1" aria-label="Select Guangzhou Yanmei Cosmetics"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c1" title="Guangzhou Yanmei Cosmetics">Guangzhou Yanmei Cosmetics</a><span class="ui-sub">OEM · Skincare</span></td><td data-label="In">Guangzhou</td><td><span class="ui-tag ui-tag--success">Likely factory</span></td><td class="is-num" data-label="Score" data-sort-value="86">86</td><td data-condensed="hide">TikTok</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Guangzhou Yanmei Cosmetics"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr><tr data-href="#c2"><td class="ui-table__check"><label class="ui-table__checkbox"><input type="checkbox" data-gb-select value="c2" aria-label="Select Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"></label></td><td class="ui-table__primary"><a class="ui-table__title" href="#c2" title="Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)">Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)</a><span class="ui-sub">ODM · Haircare</span></td><td data-label="In">Shantou</td><td><span class="ui-tag ui-tag--warning">Maybe</span></td><td class="is-num" data-label="Score" data-sort-value="64">64</td><td data-condensed="hide">Meta</td><td class="ui-table__actions"><span class="ui-row-actions"><button type="button" class="ui-btn ui-btn--sm">Contact</button><details class="ui-menu ui-menu--end"><summary class="ui-btn ui-btn--icon" aria-label="More actions for Shantou Lianfeng Biotech Co., Ltd. (formerly Lianfeng Daily Chemical Factory)"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="5" cy="10" r="1.5"/><circle cx="10" cy="10" r="1.5"/><circle cx="15" cy="10" r="1.5"/></svg></summary><div class="ui-menu__list gemboss-popover-surface"><button type="button" class="ui-menu__item">Copy link</button><button type="button" class="ui-menu__item">Archive</button></div></details></span></td></tr></tbody></table></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-index&quot;&gt;
2861
+ &lt;div class=&quot;ui-index__sortbar&quot; role=&quot;group&quot; aria-label=&quot;Sort&quot;&gt;
2862
+ &lt;span aria-hidden=&quot;true&quot;&gt;Sort&lt;/span&gt;
2863
+ &lt;a class=&quot;ui-chip&quot; href=&quot;#collections&quot; aria-current=&quot;true&quot;&gt;Supplier ↑&lt;/a&gt;
2864
+ &lt;a class=&quot;ui-chip&quot; href=&quot;#collections&quot;&gt;Score&lt;/a&gt;
2865
+ &lt;/div&gt;
2866
+ &lt;div class=&quot;ui-bulkbar&quot; hidden&gt;
2867
+ &lt;label class=&quot;ui-table__checkbox&quot;&gt;
2868
+ &lt;input type=&quot;checkbox&quot; data-gb-select-all aria-label=&quot;Select all&quot;&gt;
2869
+ &lt;/label&gt;
2870
+ &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;
2871
+ &lt;span class=&quot;ui-bulkbar__actions&quot;&gt;
2872
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Add to outreach&lt;/button&gt;
2873
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm ui-btn--critical&quot;&gt;Archive&lt;/button&gt;
2874
+ &lt;/span&gt;
2875
+ &lt;/div&gt;
2876
+ &lt;div class=&quot;ui-table-wrap&quot;&gt;
2877
+ &lt;table class=&quot;ui-table ui-table--index&quot; data-gb-sort=&quot;client&quot;&gt;
2878
+ &lt;caption class=&quot;ui-sr-only&quot;&gt;Suppliers&lt;/caption&gt;
2879
+ &lt;thead&gt;
2880
+ &lt;tr&gt;
2881
+ &lt;th class=&quot;ui-table__check&quot; scope=&quot;col&quot;&gt;
2882
+ &lt;label class=&quot;ui-table__checkbox&quot;&gt;
2883
+ &lt;input type=&quot;checkbox&quot; data-gb-select-all aria-label=&quot;Select all&quot;&gt;
2884
+ &lt;/label&gt;
2885
+ &lt;/th&gt;
2886
+ &lt;th class=&quot;ui-table__primary&quot; scope=&quot;col&quot; aria-sort=&quot;ascending&quot;&gt;
2887
+ &lt;button type=&quot;button&quot; class=&quot;ui-table__sort&quot;&gt;Supplier&lt;/button&gt;
2888
+ &lt;/th&gt;
2889
+ &lt;th scope=&quot;col&quot;&gt;Location&lt;/th&gt;
2890
+ &lt;th scope=&quot;col&quot;&gt;Verdict&lt;/th&gt;
2891
+ &lt;th scope=&quot;col&quot; class=&quot;is-num&quot; aria-sort=&quot;none&quot;&gt;
2892
+ &lt;button type=&quot;button&quot; class=&quot;ui-table__sort&quot;&gt;Score&lt;/button&gt;
2893
+ &lt;/th&gt;
2894
+ &lt;th scope=&quot;col&quot;&gt;Ads&lt;/th&gt;
2895
+ &lt;th class=&quot;ui-table__actions&quot; scope=&quot;col&quot;&gt;
2896
+ &lt;span class=&quot;ui-sr-only&quot;&gt;Actions&lt;/span&gt;
2897
+ &lt;/th&gt;
2898
+ &lt;/tr&gt;
2899
+ &lt;/thead&gt;
2900
+ &lt;tbody&gt;
2901
+ &lt;tr data-href=&quot;#c1&quot;&gt;
2902
+ &lt;td class=&quot;ui-table__check&quot;&gt;
2903
+ &lt;label class=&quot;ui-table__checkbox&quot;&gt;
2904
+ &lt;input type=&quot;checkbox&quot; data-gb-select value=&quot;c1&quot; aria-label=&quot;Select Guangzhou Yanmei Cosmetics&quot;&gt;
2905
+ &lt;/label&gt;
2906
+ &lt;/td&gt;
2907
+ &lt;td class=&quot;ui-table__primary&quot;&gt;
2908
+ &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;
2909
+ &lt;span class=&quot;ui-sub&quot;&gt;OEM · Skincare&lt;/span&gt;
2910
+ &lt;/td&gt;
2911
+ &lt;td data-label=&quot;In&quot;&gt;Guangzhou&lt;/td&gt;
2912
+ &lt;td&gt;
2913
+ &lt;span class=&quot;ui-tag ui-tag--success&quot;&gt;Likely factory&lt;/span&gt;
2914
+ &lt;/td&gt;
2915
+ &lt;td class=&quot;is-num&quot; data-label=&quot;Score&quot; data-sort-value=&quot;86&quot;&gt;86&lt;/td&gt;
2916
+ &lt;td data-condensed=&quot;hide&quot;&gt;TikTok&lt;/td&gt;
2917
+ &lt;td class=&quot;ui-table__actions&quot;&gt;
2918
+ &lt;span class=&quot;ui-row-actions&quot;&gt;
2919
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Contact&lt;/button&gt;
2920
+ &lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;
2921
+ &lt;summary class=&quot;ui-btn ui-btn--icon&quot; aria-label=&quot;More actions for Guangzhou Yanmei Cosmetics&quot;&gt;
2922
+ &lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
2923
+ &lt;circle cx=&quot;5&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;
2924
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;
2925
+ &lt;circle cx=&quot;15&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;
2926
+ &lt;/svg&gt;
2927
+ &lt;/summary&gt;
2928
+ &lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;
2929
+ &lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Copy link&lt;/button&gt;
2930
+ &lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Archive&lt;/button&gt;
2931
+ &lt;/div&gt;
2932
+ &lt;/details&gt;
2933
+ &lt;/span&gt;
2934
+ &lt;/td&gt;
2935
+ &lt;/tr&gt;
2936
+ &lt;tr data-href=&quot;#c2&quot;&gt;
2937
+ &lt;td class=&quot;ui-table__check&quot;&gt;
2938
+ &lt;label class=&quot;ui-table__checkbox&quot;&gt;
2939
+ &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;
2940
+ &lt;/label&gt;
2941
+ &lt;/td&gt;
2942
+ &lt;td class=&quot;ui-table__primary&quot;&gt;
2943
+ &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;
2944
+ &lt;span class=&quot;ui-sub&quot;&gt;ODM · Haircare&lt;/span&gt;
2945
+ &lt;/td&gt;
2946
+ &lt;td data-label=&quot;In&quot;&gt;Shantou&lt;/td&gt;
2947
+ &lt;td&gt;
2948
+ &lt;span class=&quot;ui-tag ui-tag--warning&quot;&gt;Maybe&lt;/span&gt;
2949
+ &lt;/td&gt;
2950
+ &lt;td class=&quot;is-num&quot; data-label=&quot;Score&quot; data-sort-value=&quot;64&quot;&gt;64&lt;/td&gt;
2951
+ &lt;td data-condensed=&quot;hide&quot;&gt;Meta&lt;/td&gt;
2952
+ &lt;td class=&quot;ui-table__actions&quot;&gt;
2953
+ &lt;span class=&quot;ui-row-actions&quot;&gt;
2954
+ &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--sm&quot;&gt;Contact&lt;/button&gt;
2955
+ &lt;details class=&quot;ui-menu ui-menu--end&quot;&gt;
2956
+ &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;
2957
+ &lt;svg viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
2958
+ &lt;circle cx=&quot;5&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;
2959
+ &lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;
2960
+ &lt;circle cx=&quot;15&quot; cy=&quot;10&quot; r=&quot;1.5&quot;/&gt;
2961
+ &lt;/svg&gt;
2962
+ &lt;/summary&gt;
2963
+ &lt;div class=&quot;ui-menu__list gemboss-popover-surface&quot;&gt;
2964
+ &lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Copy link&lt;/button&gt;
2965
+ &lt;button type=&quot;button&quot; class=&quot;ui-menu__item&quot;&gt;Archive&lt;/button&gt;
2966
+ &lt;/div&gt;
2967
+ &lt;/details&gt;
2968
+ &lt;/span&gt;
2969
+ &lt;/td&gt;
2970
+ &lt;/tr&gt;
2971
+ &lt;/tbody&gt;
2972
+ &lt;/table&gt;
2973
+ &lt;/div&gt;
2190
2974
  &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Trạng thái · lọc không ra: thanh lọc + header giữ nguyên, <code>ui-empty--no-match</code> + Clear filters</figcaption><div class="cat-live"><div class="ui-toolbar"><label class="gemboss-field gemboss-field--group" style="flex:1 1 220px"><input class="gemboss-field__bare" value="serum" aria-label="Search"></label><div class="ui-chips"><button type="button" class="ui-chip" aria-pressed="true">Likely factory <span class="ui-chip__x" aria-hidden="true">✕</span></button><button type="button" class="ui-chip">Has WhatsApp</button></div><span class="ui-coll-count">0 of 4,558</span></div><div class="ui-table-wrap"><table class="ui-table"><caption class="ui-sr-only">Suppliers</caption><thead><tr><th scope="col" aria-sort="none"><a class="ui-table__sort" href="#collections">Source</a></th><th scope="col" class="is-num" aria-sort="none"><a class="ui-table__sort" href="#collections">Visits</a></th><th scope="col" class="is-num">Orders</th><th scope="col" class="is-num">Conversion</th><th scope="col" class="is-num">Revenue</th></tr></thead></table><div class="ui-empty ui-empty--no-match"><p class="ui-empty__title">No suppliers match these filters</p><p class="ui-empty__body">Try fewer filters or another word.</p><button type="button" class="ui-btn">Clear filters</button></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-toolbar&quot;&gt;
2191
2975
  &lt;label class=&quot;gemboss-field gemboss-field--group&quot; style=&quot;flex:1 1 220px&quot;&gt;
2192
2976
  &lt;input class=&quot;gemboss-field__bare&quot; value=&quot;serum&quot; aria-label=&quot;Search&quot;&gt;
@@ -2761,7 +3545,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2761
3545
  &lt;button type=&quot;button&quot; class=&quot;ui-btn ui-btn--primary&quot;&gt;Xoá&lt;/button&gt;
2762
3546
  &lt;/div&gt;
2763
3547
  &lt;/div&gt;</code></pre></details></figure></section>
2764
- <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;/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;: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;: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;
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;/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;: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;: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;
2765
3549
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
2766
3550
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
2767
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;:R0:&quot;&gt;
@@ -2893,7 +3677,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
2893
3677
  &lt;/div&gt;
2894
3678
  &lt;/main&gt;
2895
3679
  &lt;/div&gt;</code></pre></details></figure></section>
2896
- <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;/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;: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;: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;
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;/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;: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;: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;
2897
3681
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
2898
3682
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
2899
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;:R0:&quot;&gt;
@@ -3013,7 +3797,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3013
3797
  &lt;/span&gt;
3014
3798
  &lt;/div&gt;
3015
3799
  &lt;/div&gt;</code></pre></details></figure></section>
3016
- <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;/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;: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;: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;
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;/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;: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;: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;
3017
3801
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3018
3802
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3019
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;:R0:&quot;&gt;
@@ -3107,7 +3891,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3107
3891
  &lt;/div&gt;
3108
3892
  &lt;/div&gt;
3109
3893
  &lt;/main&gt;
3110
- &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;/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;: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;: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;
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;/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;: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;: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;
3111
3895
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3112
3896
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3113
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;:R0:&quot;&gt;
@@ -3204,7 +3988,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3204
3988
  &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;
3205
3989
  &lt;div class=&quot;ui-card&quot;&gt;Một mục trong feed, cột 720px.&lt;/div&gt;
3206
3990
  &lt;/div&gt;</code></pre></details></figure></section>
3207
- <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;/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;: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;: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;
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;/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;: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;: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;
3208
3992
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3209
3993
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3210
3994
  &lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;
@@ -3360,7 +4144,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3360
4144
  &lt;/section&gt;
3361
4145
  &lt;/div&gt;
3362
4146
  &lt;/div&gt;
3363
- &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;/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;: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;: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;
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;/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;: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;: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;
3364
4148
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
3365
4149
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
3366
4150
  &lt;a class=&quot;gb-brand&quot; href=&quot;/&quot; aria-label=&quot;GemFeedback home&quot;&gt;
@@ -3620,7 +4404,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3620
4404
  &lt;/a&gt;
3621
4405
  &lt;/li&gt;
3622
4406
  &lt;/ol&gt;</code></pre></details></figure></section>
3623
- <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;/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;
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;/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;
3624
4408
  &lt;div class=&quot;gb-auth-split&quot;&gt;
3625
4409
  &lt;div class=&quot;gb-auth-stage&quot;&gt;
3626
4410
  &lt;div class=&quot;gb-auth-card&quot;&gt;
@@ -3718,7 +4502,195 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3718
4502
  &lt;button type=&quot;submit&quot; aria-label=&quot;Gửi&quot;&gt;↑&lt;/button&gt;
3719
4503
  &lt;/form&gt;
3720
4504
  &lt;/div&gt;</code></pre></details></figure></section>
3721
- <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">27/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;
4505
+ <section id="reactions"><h2>Reactions</h2><p>Một bộ emoji và một kiểu chip cho cả fleet: chat đội GemCare, request và bình luận GemFeedback. Chip ghi TÊN người thả ("👍 Linh, Quan +1"), của mình có viền + nền; mỗi target 44px nhưng viên thuốc nhìn thấy 26px. Bảng chọn nằm trong luồng dưới hàng chip: dùng nhiều nhất, rồi các nhóm, tìm theo chữ, mũi tên đi trong lưới. Dữ liệu (<code>REACTION_GROUPS</code>, <code>isReactionEmoji</code>, <code>toggleReaction</code>) ở <code>@gemboss/ui/reactions-data</code> cho server.</p><figure class="cat-demo"><figcaption>Reactions: chip đã thả + Add reaction</figcaption><div class="cat-live"><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Minh Anh, Phi" aria-label="🚀, Minh Anh, Phi. Add yours"><span class="ui-reaction__emoji">🚀</span><span class="ui-reaction__names">Minh Anh, Phi</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the comment from Linh" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-reactions&quot;&gt;
4506
+ &lt;div class=&quot;ui-reactions__row&quot;&gt;
4507
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction is-mine&quot; aria-pressed=&quot;true&quot; title=&quot;Linh, Quan, An&quot; aria-label=&quot;👍, Linh, Quan, An. Remove yours&quot;&gt;
4508
+ &lt;span class=&quot;ui-reaction__emoji&quot;&gt;👍&lt;/span&gt;
4509
+ &lt;span class=&quot;ui-reaction__names&quot;&gt;Linh, Quan +1&lt;/span&gt;
4510
+ &lt;/button&gt;
4511
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Bo&quot; aria-label=&quot;🎉, Bo. Add yours&quot;&gt;
4512
+ &lt;span class=&quot;ui-reaction__emoji&quot;&gt;🎉&lt;/span&gt;
4513
+ &lt;span class=&quot;ui-reaction__names&quot;&gt;Bo&lt;/span&gt;
4514
+ &lt;/button&gt;
4515
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction&quot; aria-pressed=&quot;false&quot; title=&quot;Minh Anh, Phi&quot; aria-label=&quot;🚀, Minh Anh, Phi. Add yours&quot;&gt;
4516
+ &lt;span class=&quot;ui-reaction__emoji&quot;&gt;🚀&lt;/span&gt;
4517
+ &lt;span class=&quot;ui-reaction__names&quot;&gt;Minh Anh, Phi&lt;/span&gt;
4518
+ &lt;/button&gt;
4519
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-add&quot; title=&quot;Add reaction&quot; aria-label=&quot;Add a reaction to the comment from Linh&quot; aria-expanded=&quot;false&quot;&gt;
4520
+ &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;
4521
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
4522
+ &lt;path d=&quot;M16.5 10a6.5 6.5 0 1 1-6.5-6.5&quot;&gt;
4523
+ &lt;/path&gt;
4524
+ &lt;path d=&quot;M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2&quot;&gt;
4525
+ &lt;/path&gt;
4526
+ &lt;path d=&quot;M7.8 8.2h.01M12.2 8.2h.01&quot;&gt;
4527
+ &lt;/path&gt;
4528
+ &lt;path d=&quot;M15 2.5v4M13 4.5h4&quot;&gt;
4529
+ &lt;/path&gt;
4530
+ &lt;/g&gt;
4531
+ &lt;/svg&gt;
4532
+ &lt;/button&gt;
4533
+ &lt;/div&gt;
4534
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>ReactionPicker: bảng chọn</figcaption><div class="cat-live"><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction"><input type="search" class="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji" autoComplete="off" value=""/><div class="ui-reaction-picker__body"><p class="ui-reaction-picker__head">Frequently used</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button></div><p class="ui-reaction-picker__head">Smileys</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😀 grin smile happy" aria-pressed="false">😀</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😃 smile happy" aria-pressed="false">😃</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😄 smile laugh happy" aria-pressed="false">😄</button><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😁 grin beam" aria-pressed="false">😁</button><button type="button" class="ui-reaction-picker__btn" title="laugh" aria-label="Add 😆 laugh squint" aria-pressed="false">😆</button><button type="button" class="ui-reaction-picker__btn" title="sweat" aria-label="Add 😅 sweat smile relief" aria-pressed="false">😅</button><button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button><button type="button" class="ui-reaction-picker__btn" title="rofl" aria-label="Add 🤣 rofl rolling laugh" aria-pressed="false">🤣</button><button type="button" class="ui-reaction-picker__btn" title="blush" aria-label="Add 😊 blush smile" aria-pressed="false">😊</button><button type="button" class="ui-reaction-picker__btn" title="innocent" aria-label="Add 😇 innocent halo" aria-pressed="false">😇</button><button type="button" class="ui-reaction-picker__btn" title="slight" aria-label="Add 🙂 slight smile ok" aria-pressed="false">🙂</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😉 wink" aria-pressed="false">😉</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 😍 heart eyes love" aria-pressed="false">😍</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🥰 love hearts" aria-pressed="false">🥰</button><button type="button" class="ui-reaction-picker__btn" title="kiss" aria-label="Add 😘 kiss" aria-pressed="false">😘</button><button type="button" class="ui-reaction-picker__btn" title="yum" aria-label="Add 😋 yum tasty" aria-pressed="false">😋</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😜 wink tongue" aria-pressed="false">😜</button><button type="button" class="ui-reaction-picker__btn" title="zany" aria-label="Add 🤪 zany crazy" aria-pressed="false">🤪</button><button type="button" class="ui-reaction-picker__btn" title="hug" aria-label="Add 🤗 hug" aria-pressed="false">🤗</button><button type="button" class="ui-reaction-picker__btn" title="oops" aria-label="Add 🤭 oops giggle" aria-pressed="false">🤭</button><button type="button" class="ui-reaction-picker__btn" title="think" aria-label="Add 🤔 think hmm" aria-pressed="false">🤔</button><button type="button" class="ui-reaction-picker__btn" title="raised" aria-label="Add 🤨 raised eyebrow doubt" aria-pressed="false">🤨</button><button type="button" class="ui-reaction-picker__btn" title="neutral" aria-label="Add 😐 neutral" aria-pressed="false">😐</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add 😶 no words" aria-pressed="false">😶</button><button type="button" class="ui-reaction-picker__btn" title="eye" aria-label="Add 🙄 eye roll" aria-pressed="false">🙄</button><button type="button" class="ui-reaction-picker__btn" title="smirk" aria-label="Add 😏 smirk" aria-pressed="false">😏</button><button type="button" class="ui-reaction-picker__btn" title="grimace" aria-label="Add 😬 grimace awkward" aria-pressed="false">😬</button><button type="button" class="ui-reaction-picker__btn" title="relieved" aria-label="Add 😌 relieved" aria-pressed="false">😌</button><button type="button" class="ui-reaction-picker__btn" title="sleep" aria-label="Add 😴 sleep tired" aria-pressed="false">😴</button><button type="button" class="ui-reaction-picker__btn" title="mask" aria-label="Add 😷 mask sick" aria-pressed="false">😷</button><button type="button" class="ui-reaction-picker__btn" title="mind" aria-label="Add 🤯 mind blown" aria-pressed="false">🤯</button><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🥳 party celebrate" aria-pressed="false">🥳</button><button type="button" class="ui-reaction-picker__btn" title="cool" aria-label="Add 😎 cool sunglasses" aria-pressed="false">😎</button><button type="button" class="ui-reaction-picker__btn" title="nerd" aria-label="Add 🤓 nerd" aria-pressed="false">🤓</button><button type="button" class="ui-reaction-picker__btn" title="confused" aria-label="Add 😕 confused" aria-pressed="false">😕</button><button type="button" class="ui-reaction-picker__btn" title="worried" aria-label="Add 😟 worried" aria-pressed="false">😟</button><button type="button" class="ui-reaction-picker__btn" title="wow" aria-label="Add 😮 wow surprised" aria-pressed="false">😮</button><button type="button" class="ui-reaction-picker__btn" title="astonished" aria-label="Add 😲 astonished" aria-pressed="false">😲</button><button type="button" class="ui-reaction-picker__btn" title="flushed" aria-label="Add 😳 flushed embarrassed" aria-pressed="false">😳</button><button type="button" class="ui-reaction-picker__btn" title="pleading" aria-label="Add 🥺 pleading please" aria-pressed="false">🥺</button><button type="button" class="ui-reaction-picker__btn" title="cry" aria-label="Add 😢 cry sad" aria-pressed="false">😢</button><button type="button" class="ui-reaction-picker__btn" title="sob" aria-label="Add 😭 sob crying" aria-pressed="false">😭</button><button type="button" class="ui-reaction-picker__btn" title="scream" aria-label="Add 😱 scream shock" aria-pressed="false">😱</button><button type="button" class="ui-reaction-picker__btn" title="huff" aria-label="Add 😤 huff frustrated" aria-pressed="false">😤</button><button type="button" class="ui-reaction-picker__btn" title="angry" aria-label="Add 😡 angry mad" aria-pressed="false">😡</button><button type="button" class="ui-reaction-picker__btn" title="swear" aria-label="Add 🤬 swear" aria-pressed="false">🤬</button><button type="button" class="ui-reaction-picker__btn" title="dead" aria-label="Add 💀 dead skull" aria-pressed="false">💀</button><button type="button" class="ui-reaction-picker__btn" title="melting" aria-label="Add 🫠 melting" aria-pressed="false">🫠</button><button type="button" class="ui-reaction-picker__btn" title="salute" aria-label="Add 🫡 salute" aria-pressed="false">🫡</button></div><p class="ui-reaction-picker__head">Hands</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="dislike" aria-label="Add 👎 dislike thumbs down no" aria-pressed="false">👎</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 👌 ok perfect" aria-pressed="false">👌</button><button type="button" class="ui-reaction-picker__btn" title="peace" aria-label="Add ✌️ peace victory" aria-pressed="false">✌️</button><button type="button" class="ui-reaction-picker__btn" title="fingers" aria-label="Add 🤞 fingers crossed luck" aria-pressed="false">🤞</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🤟 love you" aria-pressed="false">🤟</button><button type="button" class="ui-reaction-picker__btn" title="rock" aria-label="Add 🤘 rock" aria-pressed="false">🤘</button><button type="button" class="ui-reaction-picker__btn" title="clap" aria-label="Add 👏 clap applause" aria-pressed="false">👏</button><button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button><button type="button" class="ui-reaction-picker__btn" title="open" aria-label="Add 👐 open hands" aria-pressed="false">👐</button><button type="button" class="ui-reaction-picker__btn" title="handshake" aria-label="Add 🤝 handshake deal" aria-pressed="false">🤝</button><button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button><button type="button" class="ui-reaction-picker__btn" title="strong" aria-label="Add 💪 strong muscle" aria-pressed="false">💪</button><button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 🫶 heart hands" aria-pressed="false">🫶</button><button type="button" class="ui-reaction-picker__btn" title="writing" aria-label="Add ✍️ writing" aria-pressed="false">✍️</button><button type="button" class="ui-reaction-picker__btn" title="wave" aria-label="Add 👋 wave hi bye" aria-pressed="false">👋</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add ☝️ point up" aria-pressed="false">☝️</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👇 point down" aria-pressed="false">👇</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👉 point right" aria-pressed="false">👉</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👈 point left" aria-pressed="false">👈</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 🤙 call me" aria-pressed="false">🤙</button><button type="button" class="ui-reaction-picker__btn" title="stop" aria-label="Add 🖐️ stop hand" aria-pressed="false">🖐️</button><button type="button" class="ui-reaction-picker__btn" title="pinched" aria-label="Add 🤌 pinched" aria-pressed="false">🤌</button></div><p class="ui-reaction-picker__head">Marks</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button><button type="button" class="ui-reaction-picker__btn" title="orange" aria-label="Add 🧡 orange heart" aria-pressed="false">🧡</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 💛 yellow heart" aria-pressed="false">💛</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 💚 green heart" aria-pressed="false">💚</button><button type="button" class="ui-reaction-picker__btn" title="blue" aria-label="Add 💙 blue heart" aria-pressed="false">💙</button><button type="button" class="ui-reaction-picker__btn" title="purple" aria-label="Add 💜 purple heart" aria-pressed="false">💜</button><button type="button" class="ui-reaction-picker__btn" title="black" aria-label="Add 🖤 black heart" aria-pressed="false">🖤</button><button type="button" class="ui-reaction-picker__btn" title="hundred" aria-label="Add 💯 hundred perfect" aria-pressed="false">💯</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button><button type="button" class="ui-reaction-picker__btn" title="checked" aria-label="Add ☑️ checked box" aria-pressed="false">☑️</button><button type="button" class="ui-reaction-picker__btn" title="check" aria-label="Add ✔️ check mark" aria-pressed="false">✔️</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add ❌ no cross wrong" aria-pressed="false">❌</button><button type="button" class="ui-reaction-picker__btn" title="important" aria-label="Add ❗ important exclamation" aria-pressed="false">❗</button><button type="button" class="ui-reaction-picker__btn" title="question" aria-label="Add ❓ question" aria-pressed="false">❓</button><button type="button" class="ui-reaction-picker__btn" title="warning" aria-label="Add ⚠️ warning" aria-pressed="false">⚠️</button><button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button><button type="button" class="ui-reaction-picker__btn" title="star" aria-label="Add ⭐ star" aria-pressed="false">⭐</button><button type="button" class="ui-reaction-picker__btn" title="sparkles" aria-label="Add ✨ sparkles new" aria-pressed="false">✨</button><button type="button" class="ui-reaction-picker__btn" title="idea" aria-label="Add 💡 idea" aria-pressed="false">💡</button><button type="button" class="ui-reaction-picker__btn" title="pin" aria-label="Add 📌 pin" aria-pressed="false">📌</button><button type="button" class="ui-reaction-picker__btn" title="rocket" aria-label="Add 🚀 rocket ship launch" aria-pressed="false">🚀</button><button type="button" class="ui-reaction-picker__btn" title="target" aria-label="Add 🎯 target goal" aria-pressed="false">🎯</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 🆗 ok button" aria-pressed="false">🆗</button><button type="button" class="ui-reaction-picker__btn" title="new" aria-label="Add 🆕 new" aria-pressed="false">🆕</button><button type="button" class="ui-reaction-picker__btn" title="red" aria-label="Add 🔴 red circle urgent" aria-pressed="false">🔴</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 🟢 green circle" aria-pressed="false">🟢</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 🟡 yellow circle" aria-pressed="false">🟡</button><button type="button" class="ui-reaction-picker__btn" title="plus" aria-label="Add ➕ plus one add" aria-pressed="false">➕</button></div><p class="ui-reaction-picker__head">Work</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button><button type="button" class="ui-reaction-picker__btn" title="confetti" aria-label="Add 🎊 confetti" aria-pressed="false">🎊</button><button type="button" class="ui-reaction-picker__btn" title="trophy" aria-label="Add 🏆 trophy win" aria-pressed="false">🏆</button><button type="button" class="ui-reaction-picker__btn" title="gold" aria-label="Add 🥇 gold medal first" aria-pressed="false">🥇</button><button type="button" class="ui-reaction-picker__btn" title="gift" aria-label="Add 🎁 gift" aria-pressed="false">🎁</button><button type="button" class="ui-reaction-picker__btn" title="coffee" aria-label="Add ☕ coffee" aria-pressed="false">☕</button><button type="button" class="ui-reaction-picker__btn" title="cheers" aria-label="Add 🍻 cheers beer" aria-pressed="false">🍻</button><button type="button" class="ui-reaction-picker__btn" title="pizza" aria-label="Add 🍕 pizza" aria-pressed="false">🍕</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📈 chart up growth" aria-pressed="false">📈</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📉 chart down" aria-pressed="false">📉</button><button type="button" class="ui-reaction-picker__btn" title="money" aria-label="Add 💰 money" aria-pressed="false">💰</button><button type="button" class="ui-reaction-picker__btn" title="cart" aria-label="Add 🛒 cart shop" aria-pressed="false">🛒</button><button type="button" class="ui-reaction-picker__btn" title="package" aria-label="Add 📦 package order shipping" aria-pressed="false">📦</button><button type="button" class="ui-reaction-picker__btn" title="receipt" aria-label="Add 🧾 receipt invoice" aria-pressed="false">🧾</button><button type="button" class="ui-reaction-picker__btn" title="note" aria-label="Add 📝 note memo" aria-pressed="false">📝</button><button type="button" class="ui-reaction-picker__btn" title="calendar" aria-label="Add 📅 calendar date" aria-pressed="false">📅</button><button type="button" class="ui-reaction-picker__btn" title="alarm" aria-label="Add ⏰ alarm time" aria-pressed="false">⏰</button><button type="button" class="ui-reaction-picker__btn" title="waiting" aria-label="Add ⏳ waiting hourglass" aria-pressed="false">⏳</button><button type="button" class="ui-reaction-picker__btn" title="fix" aria-label="Add 🔧 fix wrench" aria-pressed="false">🔧</button><button type="button" class="ui-reaction-picker__btn" title="bug" aria-label="Add 🐛 bug" aria-pressed="false">🐛</button><button type="button" class="ui-reaction-picker__btn" title="test" aria-label="Add 🧪 test" aria-pressed="false">🧪</button><button type="button" class="ui-reaction-picker__btn" title="search" aria-label="Add 🔍 search look" aria-pressed="false">🔍</button><button type="button" class="ui-reaction-picker__btn" title="comment" aria-label="Add 💬 comment chat" aria-pressed="false">💬</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 📞 call phone" aria-pressed="false">📞</button><button type="button" class="ui-reaction-picker__btn" title="email" aria-label="Add 📧 email" aria-pressed="false">📧</button><button type="button" class="ui-reaction-picker__btn" title="lock" aria-label="Add 🔒 lock private" aria-pressed="false">🔒</button><button type="button" class="ui-reaction-picker__btn" title="link" aria-label="Add 🔗 link" aria-pressed="false">🔗</button><button type="button" class="ui-reaction-picker__btn" title="image" aria-label="Add 🖼️ image picture" aria-pressed="false">🖼️</button><button type="button" class="ui-reaction-picker__btn" title="laptop" aria-label="Add 💻 laptop computer" aria-pressed="false">💻</button><button type="button" class="ui-reaction-picker__btn" title="phone" aria-label="Add 📱 phone mobile" aria-pressed="false">📱</button><button type="button" class="ui-reaction-picker__btn" title="see" aria-label="Add 🙈 see no evil oops" aria-pressed="false">🙈</button><button type="button" class="ui-reaction-picker__btn" title="hear" aria-label="Add 🙉 hear no evil" aria-pressed="false">🙉</button><button type="button" class="ui-reaction-picker__btn" title="robot" aria-label="Add 🤖 robot bot ai" aria-pressed="false">🤖</button><button type="button" class="ui-reaction-picker__btn" title="brain" aria-label="Add 🧠 brain" aria-pressed="false">🧠</button><button type="button" class="ui-reaction-picker__btn" title="crown" aria-label="Add 👑 crown vip" aria-pressed="false">👑</button><button type="button" class="ui-reaction-picker__btn" title="gem" aria-label="Add 💎 gem diamond" aria-pressed="false">💎</button></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;ui-reaction-picker&quot; role=&quot;group&quot; aria-label=&quot;Pick a reaction&quot;&gt;
4535
+ &lt;input type=&quot;search&quot; class=&quot;gemboss-field ui-reaction-picker__search&quot; placeholder=&quot;Search emoji&quot; aria-label=&quot;Search emoji&quot; autoComplete=&quot;off&quot; value=&quot;&quot;/&gt;
4536
+ &lt;div class=&quot;ui-reaction-picker__body&quot;&gt;
4537
+ &lt;p class=&quot;ui-reaction-picker__head&quot;&gt;Frequently used&lt;/p&gt;
4538
+ &lt;div class=&quot;ui-reaction-picker__grid&quot;&gt;
4539
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;like&quot; aria-label=&quot;Remove 👍 like thumbs up yes ok&quot; aria-pressed=&quot;true&quot;&gt;👍&lt;/button&gt;
4540
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;done&quot; aria-label=&quot;Add ✅ done check yes&quot; aria-pressed=&quot;false&quot;&gt;✅&lt;/button&gt;
4541
+ &lt;/div&gt;
4542
+ &lt;p class=&quot;ui-reaction-picker__head&quot;&gt;Smileys&lt;/p&gt;
4543
+ &lt;div class=&quot;ui-reaction-picker__grid&quot;&gt;
4544
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;grin&quot; aria-label=&quot;Add 😀 grin smile happy&quot; aria-pressed=&quot;false&quot;&gt;😀&lt;/button&gt;
4545
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;smile&quot; aria-label=&quot;Add 😃 smile happy&quot; aria-pressed=&quot;false&quot;&gt;😃&lt;/button&gt;
4546
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;smile&quot; aria-label=&quot;Add 😄 smile laugh happy&quot; aria-pressed=&quot;false&quot;&gt;😄&lt;/button&gt;
4547
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;grin&quot; aria-label=&quot;Add 😁 grin beam&quot; aria-pressed=&quot;false&quot;&gt;😁&lt;/button&gt;
4548
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;laugh&quot; aria-label=&quot;Add 😆 laugh squint&quot; aria-pressed=&quot;false&quot;&gt;😆&lt;/button&gt;
4549
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;sweat&quot; aria-label=&quot;Add 😅 sweat smile relief&quot; aria-pressed=&quot;false&quot;&gt;😅&lt;/button&gt;
4550
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;joy&quot; aria-label=&quot;Add 😂 joy tears laugh lol&quot; aria-pressed=&quot;false&quot;&gt;😂&lt;/button&gt;
4551
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;rofl&quot; aria-label=&quot;Add 🤣 rofl rolling laugh&quot; aria-pressed=&quot;false&quot;&gt;🤣&lt;/button&gt;
4552
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;blush&quot; aria-label=&quot;Add 😊 blush smile&quot; aria-pressed=&quot;false&quot;&gt;😊&lt;/button&gt;
4553
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;innocent&quot; aria-label=&quot;Add 😇 innocent halo&quot; aria-pressed=&quot;false&quot;&gt;😇&lt;/button&gt;
4554
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;slight&quot; aria-label=&quot;Add 🙂 slight smile ok&quot; aria-pressed=&quot;false&quot;&gt;🙂&lt;/button&gt;
4555
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;wink&quot; aria-label=&quot;Add 😉 wink&quot; aria-pressed=&quot;false&quot;&gt;😉&lt;/button&gt;
4556
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;heart&quot; aria-label=&quot;Add 😍 heart eyes love&quot; aria-pressed=&quot;false&quot;&gt;😍&lt;/button&gt;
4557
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;love&quot; aria-label=&quot;Add 🥰 love hearts&quot; aria-pressed=&quot;false&quot;&gt;🥰&lt;/button&gt;
4558
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;kiss&quot; aria-label=&quot;Add 😘 kiss&quot; aria-pressed=&quot;false&quot;&gt;😘&lt;/button&gt;
4559
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;yum&quot; aria-label=&quot;Add 😋 yum tasty&quot; aria-pressed=&quot;false&quot;&gt;😋&lt;/button&gt;
4560
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;wink&quot; aria-label=&quot;Add 😜 wink tongue&quot; aria-pressed=&quot;false&quot;&gt;😜&lt;/button&gt;
4561
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;zany&quot; aria-label=&quot;Add 🤪 zany crazy&quot; aria-pressed=&quot;false&quot;&gt;🤪&lt;/button&gt;
4562
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;hug&quot; aria-label=&quot;Add 🤗 hug&quot; aria-pressed=&quot;false&quot;&gt;🤗&lt;/button&gt;
4563
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;oops&quot; aria-label=&quot;Add 🤭 oops giggle&quot; aria-pressed=&quot;false&quot;&gt;🤭&lt;/button&gt;
4564
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;think&quot; aria-label=&quot;Add 🤔 think hmm&quot; aria-pressed=&quot;false&quot;&gt;🤔&lt;/button&gt;
4565
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;raised&quot; aria-label=&quot;Add 🤨 raised eyebrow doubt&quot; aria-pressed=&quot;false&quot;&gt;🤨&lt;/button&gt;
4566
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;neutral&quot; aria-label=&quot;Add 😐 neutral&quot; aria-pressed=&quot;false&quot;&gt;😐&lt;/button&gt;
4567
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;no&quot; aria-label=&quot;Add 😶 no words&quot; aria-pressed=&quot;false&quot;&gt;😶&lt;/button&gt;
4568
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;eye&quot; aria-label=&quot;Add 🙄 eye roll&quot; aria-pressed=&quot;false&quot;&gt;🙄&lt;/button&gt;
4569
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;smirk&quot; aria-label=&quot;Add 😏 smirk&quot; aria-pressed=&quot;false&quot;&gt;😏&lt;/button&gt;
4570
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;grimace&quot; aria-label=&quot;Add 😬 grimace awkward&quot; aria-pressed=&quot;false&quot;&gt;😬&lt;/button&gt;
4571
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;relieved&quot; aria-label=&quot;Add 😌 relieved&quot; aria-pressed=&quot;false&quot;&gt;😌&lt;/button&gt;
4572
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;sleep&quot; aria-label=&quot;Add 😴 sleep tired&quot; aria-pressed=&quot;false&quot;&gt;😴&lt;/button&gt;
4573
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;mask&quot; aria-label=&quot;Add 😷 mask sick&quot; aria-pressed=&quot;false&quot;&gt;😷&lt;/button&gt;
4574
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;mind&quot; aria-label=&quot;Add 🤯 mind blown&quot; aria-pressed=&quot;false&quot;&gt;🤯&lt;/button&gt;
4575
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;party&quot; aria-label=&quot;Add 🥳 party celebrate&quot; aria-pressed=&quot;false&quot;&gt;🥳&lt;/button&gt;
4576
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;cool&quot; aria-label=&quot;Add 😎 cool sunglasses&quot; aria-pressed=&quot;false&quot;&gt;😎&lt;/button&gt;
4577
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;nerd&quot; aria-label=&quot;Add 🤓 nerd&quot; aria-pressed=&quot;false&quot;&gt;🤓&lt;/button&gt;
4578
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;confused&quot; aria-label=&quot;Add 😕 confused&quot; aria-pressed=&quot;false&quot;&gt;😕&lt;/button&gt;
4579
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;worried&quot; aria-label=&quot;Add 😟 worried&quot; aria-pressed=&quot;false&quot;&gt;😟&lt;/button&gt;
4580
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;wow&quot; aria-label=&quot;Add 😮 wow surprised&quot; aria-pressed=&quot;false&quot;&gt;😮&lt;/button&gt;
4581
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;astonished&quot; aria-label=&quot;Add 😲 astonished&quot; aria-pressed=&quot;false&quot;&gt;😲&lt;/button&gt;
4582
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;flushed&quot; aria-label=&quot;Add 😳 flushed embarrassed&quot; aria-pressed=&quot;false&quot;&gt;😳&lt;/button&gt;
4583
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;pleading&quot; aria-label=&quot;Add 🥺 pleading please&quot; aria-pressed=&quot;false&quot;&gt;🥺&lt;/button&gt;
4584
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;cry&quot; aria-label=&quot;Add 😢 cry sad&quot; aria-pressed=&quot;false&quot;&gt;😢&lt;/button&gt;
4585
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;sob&quot; aria-label=&quot;Add 😭 sob crying&quot; aria-pressed=&quot;false&quot;&gt;😭&lt;/button&gt;
4586
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;scream&quot; aria-label=&quot;Add 😱 scream shock&quot; aria-pressed=&quot;false&quot;&gt;😱&lt;/button&gt;
4587
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;huff&quot; aria-label=&quot;Add 😤 huff frustrated&quot; aria-pressed=&quot;false&quot;&gt;😤&lt;/button&gt;
4588
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;angry&quot; aria-label=&quot;Add 😡 angry mad&quot; aria-pressed=&quot;false&quot;&gt;😡&lt;/button&gt;
4589
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;swear&quot; aria-label=&quot;Add 🤬 swear&quot; aria-pressed=&quot;false&quot;&gt;🤬&lt;/button&gt;
4590
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;dead&quot; aria-label=&quot;Add 💀 dead skull&quot; aria-pressed=&quot;false&quot;&gt;💀&lt;/button&gt;
4591
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;melting&quot; aria-label=&quot;Add 🫠 melting&quot; aria-pressed=&quot;false&quot;&gt;🫠&lt;/button&gt;
4592
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;salute&quot; aria-label=&quot;Add 🫡 salute&quot; aria-pressed=&quot;false&quot;&gt;🫡&lt;/button&gt;
4593
+ &lt;/div&gt;
4594
+ &lt;p class=&quot;ui-reaction-picker__head&quot;&gt;Hands&lt;/p&gt;
4595
+ &lt;div class=&quot;ui-reaction-picker__grid&quot;&gt;
4596
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;like&quot; aria-label=&quot;Remove 👍 like thumbs up yes ok&quot; aria-pressed=&quot;true&quot;&gt;👍&lt;/button&gt;
4597
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;dislike&quot; aria-label=&quot;Add 👎 dislike thumbs down no&quot; aria-pressed=&quot;false&quot;&gt;👎&lt;/button&gt;
4598
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;ok&quot; aria-label=&quot;Add 👌 ok perfect&quot; aria-pressed=&quot;false&quot;&gt;👌&lt;/button&gt;
4599
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;peace&quot; aria-label=&quot;Add ✌️ peace victory&quot; aria-pressed=&quot;false&quot;&gt;✌️&lt;/button&gt;
4600
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;fingers&quot; aria-label=&quot;Add 🤞 fingers crossed luck&quot; aria-pressed=&quot;false&quot;&gt;🤞&lt;/button&gt;
4601
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;love&quot; aria-label=&quot;Add 🤟 love you&quot; aria-pressed=&quot;false&quot;&gt;🤟&lt;/button&gt;
4602
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;rock&quot; aria-label=&quot;Add 🤘 rock&quot; aria-pressed=&quot;false&quot;&gt;🤘&lt;/button&gt;
4603
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;clap&quot; aria-label=&quot;Add 👏 clap applause&quot; aria-pressed=&quot;false&quot;&gt;👏&lt;/button&gt;
4604
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;raise&quot; aria-label=&quot;Add 🙌 raise hands hooray&quot; aria-pressed=&quot;false&quot;&gt;🙌&lt;/button&gt;
4605
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;open&quot; aria-label=&quot;Add 👐 open hands&quot; aria-pressed=&quot;false&quot;&gt;👐&lt;/button&gt;
4606
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;handshake&quot; aria-label=&quot;Add 🤝 handshake deal&quot; aria-pressed=&quot;false&quot;&gt;🤝&lt;/button&gt;
4607
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;thanks&quot; aria-label=&quot;Add 🙏 thanks please pray&quot; aria-pressed=&quot;false&quot;&gt;🙏&lt;/button&gt;
4608
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;strong&quot; aria-label=&quot;Add 💪 strong muscle&quot; aria-pressed=&quot;false&quot;&gt;💪&lt;/button&gt;
4609
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;eyes&quot; aria-label=&quot;Add 👀 eyes looking&quot; aria-pressed=&quot;false&quot;&gt;👀&lt;/button&gt;
4610
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;heart&quot; aria-label=&quot;Add 🫶 heart hands&quot; aria-pressed=&quot;false&quot;&gt;🫶&lt;/button&gt;
4611
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;writing&quot; aria-label=&quot;Add ✍️ writing&quot; aria-pressed=&quot;false&quot;&gt;✍️&lt;/button&gt;
4612
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;wave&quot; aria-label=&quot;Add 👋 wave hi bye&quot; aria-pressed=&quot;false&quot;&gt;👋&lt;/button&gt;
4613
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;point&quot; aria-label=&quot;Add ☝️ point up&quot; aria-pressed=&quot;false&quot;&gt;☝️&lt;/button&gt;
4614
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;point&quot; aria-label=&quot;Add 👇 point down&quot; aria-pressed=&quot;false&quot;&gt;👇&lt;/button&gt;
4615
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;point&quot; aria-label=&quot;Add 👉 point right&quot; aria-pressed=&quot;false&quot;&gt;👉&lt;/button&gt;
4616
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;point&quot; aria-label=&quot;Add 👈 point left&quot; aria-pressed=&quot;false&quot;&gt;👈&lt;/button&gt;
4617
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;call&quot; aria-label=&quot;Add 🤙 call me&quot; aria-pressed=&quot;false&quot;&gt;🤙&lt;/button&gt;
4618
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;stop&quot; aria-label=&quot;Add 🖐️ stop hand&quot; aria-pressed=&quot;false&quot;&gt;🖐️&lt;/button&gt;
4619
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;pinched&quot; aria-label=&quot;Add 🤌 pinched&quot; aria-pressed=&quot;false&quot;&gt;🤌&lt;/button&gt;
4620
+ &lt;/div&gt;
4621
+ &lt;p class=&quot;ui-reaction-picker__head&quot;&gt;Marks&lt;/p&gt;
4622
+ &lt;div class=&quot;ui-reaction-picker__grid&quot;&gt;
4623
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;heart&quot; aria-label=&quot;Add ❤️ heart love red&quot; aria-pressed=&quot;false&quot;&gt;❤️&lt;/button&gt;
4624
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;orange&quot; aria-label=&quot;Add 🧡 orange heart&quot; aria-pressed=&quot;false&quot;&gt;🧡&lt;/button&gt;
4625
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;yellow&quot; aria-label=&quot;Add 💛 yellow heart&quot; aria-pressed=&quot;false&quot;&gt;💛&lt;/button&gt;
4626
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;green&quot; aria-label=&quot;Add 💚 green heart&quot; aria-pressed=&quot;false&quot;&gt;💚&lt;/button&gt;
4627
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;blue&quot; aria-label=&quot;Add 💙 blue heart&quot; aria-pressed=&quot;false&quot;&gt;💙&lt;/button&gt;
4628
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;purple&quot; aria-label=&quot;Add 💜 purple heart&quot; aria-pressed=&quot;false&quot;&gt;💜&lt;/button&gt;
4629
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;black&quot; aria-label=&quot;Add 🖤 black heart&quot; aria-pressed=&quot;false&quot;&gt;🖤&lt;/button&gt;
4630
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;hundred&quot; aria-label=&quot;Add 💯 hundred perfect&quot; aria-pressed=&quot;false&quot;&gt;💯&lt;/button&gt;
4631
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;done&quot; aria-label=&quot;Add ✅ done check yes&quot; aria-pressed=&quot;false&quot;&gt;✅&lt;/button&gt;
4632
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;checked&quot; aria-label=&quot;Add ☑️ checked box&quot; aria-pressed=&quot;false&quot;&gt;☑️&lt;/button&gt;
4633
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;check&quot; aria-label=&quot;Add ✔️ check mark&quot; aria-pressed=&quot;false&quot;&gt;✔️&lt;/button&gt;
4634
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;no&quot; aria-label=&quot;Add ❌ no cross wrong&quot; aria-pressed=&quot;false&quot;&gt;❌&lt;/button&gt;
4635
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;important&quot; aria-label=&quot;Add ❗ important exclamation&quot; aria-pressed=&quot;false&quot;&gt;❗&lt;/button&gt;
4636
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;question&quot; aria-label=&quot;Add ❓ question&quot; aria-pressed=&quot;false&quot;&gt;❓&lt;/button&gt;
4637
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;warning&quot; aria-label=&quot;Add ⚠️ warning&quot; aria-pressed=&quot;false&quot;&gt;⚠️&lt;/button&gt;
4638
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;fire&quot; aria-label=&quot;Add 🔥 fire hot lit&quot; aria-pressed=&quot;false&quot;&gt;🔥&lt;/button&gt;
4639
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;star&quot; aria-label=&quot;Add ⭐ star&quot; aria-pressed=&quot;false&quot;&gt;⭐&lt;/button&gt;
4640
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;sparkles&quot; aria-label=&quot;Add ✨ sparkles new&quot; aria-pressed=&quot;false&quot;&gt;✨&lt;/button&gt;
4641
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;idea&quot; aria-label=&quot;Add 💡 idea&quot; aria-pressed=&quot;false&quot;&gt;💡&lt;/button&gt;
4642
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;pin&quot; aria-label=&quot;Add 📌 pin&quot; aria-pressed=&quot;false&quot;&gt;📌&lt;/button&gt;
4643
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;rocket&quot; aria-label=&quot;Add 🚀 rocket ship launch&quot; aria-pressed=&quot;false&quot;&gt;🚀&lt;/button&gt;
4644
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;target&quot; aria-label=&quot;Add 🎯 target goal&quot; aria-pressed=&quot;false&quot;&gt;🎯&lt;/button&gt;
4645
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;ok&quot; aria-label=&quot;Add 🆗 ok button&quot; aria-pressed=&quot;false&quot;&gt;🆗&lt;/button&gt;
4646
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;new&quot; aria-label=&quot;Add 🆕 new&quot; aria-pressed=&quot;false&quot;&gt;🆕&lt;/button&gt;
4647
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;red&quot; aria-label=&quot;Add 🔴 red circle urgent&quot; aria-pressed=&quot;false&quot;&gt;🔴&lt;/button&gt;
4648
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;green&quot; aria-label=&quot;Add 🟢 green circle&quot; aria-pressed=&quot;false&quot;&gt;🟢&lt;/button&gt;
4649
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;yellow&quot; aria-label=&quot;Add 🟡 yellow circle&quot; aria-pressed=&quot;false&quot;&gt;🟡&lt;/button&gt;
4650
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;plus&quot; aria-label=&quot;Add ➕ plus one add&quot; aria-pressed=&quot;false&quot;&gt;➕&lt;/button&gt;
4651
+ &lt;/div&gt;
4652
+ &lt;p class=&quot;ui-reaction-picker__head&quot;&gt;Work&lt;/p&gt;
4653
+ &lt;div class=&quot;ui-reaction-picker__grid&quot;&gt;
4654
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;party&quot; aria-label=&quot;Add 🎉 party tada celebrate&quot; aria-pressed=&quot;false&quot;&gt;🎉&lt;/button&gt;
4655
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;confetti&quot; aria-label=&quot;Add 🎊 confetti&quot; aria-pressed=&quot;false&quot;&gt;🎊&lt;/button&gt;
4656
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;trophy&quot; aria-label=&quot;Add 🏆 trophy win&quot; aria-pressed=&quot;false&quot;&gt;🏆&lt;/button&gt;
4657
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;gold&quot; aria-label=&quot;Add 🥇 gold medal first&quot; aria-pressed=&quot;false&quot;&gt;🥇&lt;/button&gt;
4658
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;gift&quot; aria-label=&quot;Add 🎁 gift&quot; aria-pressed=&quot;false&quot;&gt;🎁&lt;/button&gt;
4659
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;coffee&quot; aria-label=&quot;Add ☕ coffee&quot; aria-pressed=&quot;false&quot;&gt;☕&lt;/button&gt;
4660
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;cheers&quot; aria-label=&quot;Add 🍻 cheers beer&quot; aria-pressed=&quot;false&quot;&gt;🍻&lt;/button&gt;
4661
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;pizza&quot; aria-label=&quot;Add 🍕 pizza&quot; aria-pressed=&quot;false&quot;&gt;🍕&lt;/button&gt;
4662
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;chart&quot; aria-label=&quot;Add 📈 chart up growth&quot; aria-pressed=&quot;false&quot;&gt;📈&lt;/button&gt;
4663
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;chart&quot; aria-label=&quot;Add 📉 chart down&quot; aria-pressed=&quot;false&quot;&gt;📉&lt;/button&gt;
4664
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;money&quot; aria-label=&quot;Add 💰 money&quot; aria-pressed=&quot;false&quot;&gt;💰&lt;/button&gt;
4665
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;cart&quot; aria-label=&quot;Add 🛒 cart shop&quot; aria-pressed=&quot;false&quot;&gt;🛒&lt;/button&gt;
4666
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;package&quot; aria-label=&quot;Add 📦 package order shipping&quot; aria-pressed=&quot;false&quot;&gt;📦&lt;/button&gt;
4667
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;receipt&quot; aria-label=&quot;Add 🧾 receipt invoice&quot; aria-pressed=&quot;false&quot;&gt;🧾&lt;/button&gt;
4668
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;note&quot; aria-label=&quot;Add 📝 note memo&quot; aria-pressed=&quot;false&quot;&gt;📝&lt;/button&gt;
4669
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;calendar&quot; aria-label=&quot;Add 📅 calendar date&quot; aria-pressed=&quot;false&quot;&gt;📅&lt;/button&gt;
4670
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;alarm&quot; aria-label=&quot;Add ⏰ alarm time&quot; aria-pressed=&quot;false&quot;&gt;⏰&lt;/button&gt;
4671
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;waiting&quot; aria-label=&quot;Add ⏳ waiting hourglass&quot; aria-pressed=&quot;false&quot;&gt;⏳&lt;/button&gt;
4672
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;fix&quot; aria-label=&quot;Add 🔧 fix wrench&quot; aria-pressed=&quot;false&quot;&gt;🔧&lt;/button&gt;
4673
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;bug&quot; aria-label=&quot;Add 🐛 bug&quot; aria-pressed=&quot;false&quot;&gt;🐛&lt;/button&gt;
4674
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;test&quot; aria-label=&quot;Add 🧪 test&quot; aria-pressed=&quot;false&quot;&gt;🧪&lt;/button&gt;
4675
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;search&quot; aria-label=&quot;Add 🔍 search look&quot; aria-pressed=&quot;false&quot;&gt;🔍&lt;/button&gt;
4676
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;comment&quot; aria-label=&quot;Add 💬 comment chat&quot; aria-pressed=&quot;false&quot;&gt;💬&lt;/button&gt;
4677
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;call&quot; aria-label=&quot;Add 📞 call phone&quot; aria-pressed=&quot;false&quot;&gt;📞&lt;/button&gt;
4678
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;email&quot; aria-label=&quot;Add 📧 email&quot; aria-pressed=&quot;false&quot;&gt;📧&lt;/button&gt;
4679
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;lock&quot; aria-label=&quot;Add 🔒 lock private&quot; aria-pressed=&quot;false&quot;&gt;🔒&lt;/button&gt;
4680
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;link&quot; aria-label=&quot;Add 🔗 link&quot; aria-pressed=&quot;false&quot;&gt;🔗&lt;/button&gt;
4681
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;image&quot; aria-label=&quot;Add 🖼️ image picture&quot; aria-pressed=&quot;false&quot;&gt;🖼️&lt;/button&gt;
4682
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;laptop&quot; aria-label=&quot;Add 💻 laptop computer&quot; aria-pressed=&quot;false&quot;&gt;💻&lt;/button&gt;
4683
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;phone&quot; aria-label=&quot;Add 📱 phone mobile&quot; aria-pressed=&quot;false&quot;&gt;📱&lt;/button&gt;
4684
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;see&quot; aria-label=&quot;Add 🙈 see no evil oops&quot; aria-pressed=&quot;false&quot;&gt;🙈&lt;/button&gt;
4685
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;hear&quot; aria-label=&quot;Add 🙉 hear no evil&quot; aria-pressed=&quot;false&quot;&gt;🙉&lt;/button&gt;
4686
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;robot&quot; aria-label=&quot;Add 🤖 robot bot ai&quot; aria-pressed=&quot;false&quot;&gt;🤖&lt;/button&gt;
4687
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;brain&quot; aria-label=&quot;Add 🧠 brain&quot; aria-pressed=&quot;false&quot;&gt;🧠&lt;/button&gt;
4688
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;crown&quot; aria-label=&quot;Add 👑 crown vip&quot; aria-pressed=&quot;false&quot;&gt;👑&lt;/button&gt;
4689
+ &lt;button type=&quot;button&quot; class=&quot;ui-reaction-picker__btn&quot; title=&quot;gem&quot; aria-label=&quot;Add 💎 gem diamond&quot; aria-pressed=&quot;false&quot;&gt;💎&lt;/button&gt;
4690
+ &lt;/div&gt;
4691
+ &lt;/div&gt;
4692
+ &lt;/div&gt;</code></pre></details></figure></section>
4693
+ <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">28/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;
3722
4694
  &lt;aside class=&quot;gemboss-assistant-rail&quot;&gt;
3723
4695
  &lt;div class=&quot;gemboss-assistant-rail-top&quot;&gt;
3724
4696
  &lt;button type=&quot;button&quot; class=&quot;gemboss-assistant-newchat&quot; title=&quot;Phiên mới&quot;&gt;
@@ -3767,7 +4739,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3767
4739
  &lt;/svg&gt;
3768
4740
  &lt;span class=&quot;gemboss-assistant-thread-title&quot;&gt;So sánh advertorial với listicle&lt;/span&gt;
3769
4741
  &lt;/span&gt;
3770
- &lt;span class=&quot;gemboss-assistant-thread-meta&quot;&gt;27/8/2026&lt;/span&gt;
4742
+ &lt;span class=&quot;gemboss-assistant-thread-meta&quot;&gt;28/8/2026&lt;/span&gt;
3771
4743
  &lt;/button&gt;
3772
4744
  &lt;div class=&quot;gemboss-assistant-thread-actions&quot;&gt;
3773
4745
  &lt;button type=&quot;button&quot; class=&quot;gemboss-assistant-thread-act&quot; aria-label=&quot;Options&quot;&gt;
@@ -3838,7 +4810,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3838
4810
  &lt;/div&gt;
3839
4811
  &lt;/aside&gt;
3840
4812
  &lt;/div&gt;</code></pre></details></figure></section>
3841
- <section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 43 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code>&lt;g&gt;</code>, không trên <code>&lt;svg&gt;</code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
4813
+ <section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 44 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code>&lt;g&gt;</code>, không trên <code>&lt;svg&gt;</code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="reaction"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg><code>reaction</code></div><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
3842
4814
  &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
3843
4815
  &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;
3844
4816
  &lt;/rect&gt;
@@ -3848,6 +4820,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
3848
4820
  &lt;/rect&gt;
3849
4821
  &lt;/g&gt;
3850
4822
  &lt;/svg&gt;</code></pre></details></figure></section>
4823
+ <section id="editor"><h2>Editor</h2><p>Khung editor (<code>EditorFrame</code> + <code>EditorTopbar</code>, <code>@gemboss/ui/editor</code>; HTML thuần: <code>editor.css</code> + <code>editor-plain.js</code>) nằm ở trang riêng, chạy thật: <a href="editor.html">catalog/editor.html</a>.</p></section>
3851
4824
  </main></div><script src="../src/kit-plain.js"></script><script>gembossUI.initMenus();
3852
4825
  document.addEventListener("click", function (e) {
3853
4826
  var b = e.target.closest("[data-cat-js]"); if (!b) return;