@gemboss/ui 0.8.0 → 0.10.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.
@@ -10,7 +10,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
10
10
  .cat-demo{margin:0 0 16px;background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:12px;overflow:hidden}
11
11
  .cat-demo figcaption{padding:10px 16px;font-size:13px;font-weight:600;border-bottom:1px solid var(--gemboss-divider)}
12
12
  .cat-demo figcaption span{font-weight:400;color:var(--gemboss-text-muted)}
13
- .cat-live{padding:20px 16px}.cat-screen iframe{display:block;width:100%;border:0}
13
+ .cat-live{padding:20px 16px}.cat-screen iframe{display:block;width:100%;border:0}.cat-wide{overflow-x:auto}
14
14
  .cat-code summary{padding:10px 16px;font-size:13px;cursor:pointer;color:var(--gemboss-text-muted);border-top:1px solid var(--gemboss-divider);min-height:24px}
15
15
  .cat-code pre{margin:0;padding:12px 16px;overflow:auto;background:#0f1012;color:#e8e8e6;font-size:12px;line-height:1.5}
16
16
  .cat-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.cat-stack{display:grid;gap:10px;max-width:420px}
@@ -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="#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="#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.8.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>680adcf8cd14</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="#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.10.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>527a9099c443</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 32px dưới chuột (bằng ô nhập và ô chọn), 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;
@@ -752,6 +752,317 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
752
752
  &lt;/div&gt;
753
753
  &lt;/main&gt;
754
754
  &lt;/div&gt;</code></pre></details></figure></section>
755
+ <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;/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;
756
+ &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
757
+ &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
758
+ &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;
759
+ &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
760
+ &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;
761
+ &lt;/path&gt;
762
+ &lt;/svg&gt;
763
+ &lt;/button&gt;
764
+ &lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;
765
+ &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;
766
+ &lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;
767
+ &lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;
768
+ &lt;/polygon&gt;
769
+ &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;
770
+ &lt;/path&gt;
771
+ &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;
772
+ &lt;/path&gt;
773
+ &lt;/g&gt;
774
+ &lt;/svg&gt;
775
+ &lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;
776
+ &lt;/a&gt;
777
+ &lt;/div&gt;
778
+ &lt;div class=&quot;gemboss-topbar-center&quot;&gt;
779
+ &lt;/div&gt;
780
+ &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
781
+ &lt;/div&gt;
782
+ &lt;/header&gt;
783
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:R0:&quot;&gt;
784
+ &lt;div class=&quot;gnav-scroll&quot;&gt;
785
+ &lt;div class=&quot;gnav-group&quot;&gt;
786
+ &lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;
787
+ &lt;span class=&quot;gnav-ico&quot;&gt;
788
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
789
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
790
+ &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;
791
+ &lt;/rect&gt;
792
+ &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;
793
+ &lt;/rect&gt;
794
+ &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;
795
+ &lt;/rect&gt;
796
+ &lt;/g&gt;
797
+ &lt;/svg&gt;
798
+ &lt;/span&gt;
799
+ &lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;
800
+ &lt;/a&gt;
801
+ &lt;/div&gt;
802
+ &lt;div class=&quot;gnav-group&quot;&gt;
803
+ &lt;a class=&quot;gnav-item&quot; aria-busy=&quot;true&quot; href=&quot;#&quot;&gt;
804
+ &lt;span class=&quot;gnav-ico&quot;&gt;
805
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
806
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
807
+ &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;
808
+ &lt;/rect&gt;
809
+ &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;
810
+ &lt;/rect&gt;
811
+ &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;
812
+ &lt;/rect&gt;
813
+ &lt;/g&gt;
814
+ &lt;/svg&gt;
815
+ &lt;/span&gt;
816
+ &lt;span class=&quot;gnav-label&quot;&gt;Ghép trang (đang mở)&lt;/span&gt;
817
+ &lt;/a&gt;
818
+ &lt;/div&gt;
819
+ &lt;div class=&quot;gnav-group active has-active-child&quot;&gt;
820
+ &lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;
821
+ &lt;span class=&quot;gnav-ico&quot;&gt;
822
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
823
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
824
+ &lt;path d=&quot;M3 16.5h14&quot;&gt;
825
+ &lt;/path&gt;
826
+ &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;
827
+ &lt;/rect&gt;
828
+ &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;
829
+ &lt;/rect&gt;
830
+ &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;
831
+ &lt;/rect&gt;
832
+ &lt;/g&gt;
833
+ &lt;/svg&gt;
834
+ &lt;/span&gt;
835
+ &lt;span class=&quot;gnav-label&quot;&gt;Báo cáo&lt;/span&gt;
836
+ &lt;/a&gt;
837
+ &lt;ul class=&quot;gnav-sub&quot;&gt;
838
+ &lt;li&gt;
839
+ &lt;a class=&quot;gnav-subitem active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Tổng quan&lt;/a&gt;
840
+ &lt;/li&gt;
841
+ &lt;li&gt;
842
+ &lt;a class=&quot;gnav-subitem&quot; aria-busy=&quot;true&quot; href=&quot;#&quot;&gt;Theo kênh (đang mở)&lt;/a&gt;
843
+ &lt;/li&gt;
844
+ &lt;/ul&gt;
845
+ &lt;/div&gt;
846
+ &lt;/div&gt;
847
+ &lt;/nav&gt;
848
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;
849
+ &lt;/button&gt;
850
+ &lt;main class=&quot;gemboss-platform-main&quot;&gt;
851
+ &lt;div style=&quot;padding:24px&quot;&gt;
852
+ &lt;h1 style=&quot;margin:0&quot;&gt;Tổng quan&lt;/h1&gt;
853
+ &lt;/div&gt;
854
+ &lt;/main&gt;
855
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Link trong trang đang mở (<code>data-gb-pending</code>) <span>PendingLink hoặc kit-plain.js chèn spinner vào trong link</span></figcaption><div class="cat-live"><div class="cat-row"><a href="#" data-gb-pending="inline" aria-busy="true">Bài 412: Hero split<span class="gb-pending-mark" role="status"><span class="ui-sr-only">Loading</span></span></a></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;cat-row&quot;&gt;
856
+ &lt;a href=&quot;#&quot; data-gb-pending=&quot;inline&quot; aria-busy=&quot;true&quot;&gt;Bài 412: Hero split&lt;span class=&quot;gb-pending-mark&quot; role=&quot;status&quot;&gt;
857
+ &lt;span class=&quot;ui-sr-only&quot;&gt;Loading&lt;/span&gt;
858
+ &lt;/span&gt;
859
+ &lt;/a&gt;
860
+ &lt;/div&gt;</code></pre></details></figure><figure class="cat-demo"><figcaption>Ranh giới tải của một nhóm route (<code>RouteHolding</code> trong <code>loading.jsx</code>) <span>BẮT BUỘC khi dùng NavLink: không có nó thì tải trước không lấy được gì</span></figcaption><div class="cat-live"><div class="gb-route-holding" role="status" aria-busy="true"><span class="ui-sr-only">Loading</span><div class="ui-skeleton" aria-hidden="true"><span class="ui-skeleton__line gb-route-holding__title"></span><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span><span class="ui-skeleton__line"></span></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gb-route-holding&quot; role=&quot;status&quot; aria-busy=&quot;true&quot;&gt;
861
+ &lt;span class=&quot;ui-sr-only&quot;&gt;Loading&lt;/span&gt;
862
+ &lt;div class=&quot;ui-skeleton&quot; aria-hidden=&quot;true&quot;&gt;
863
+ &lt;span class=&quot;ui-skeleton__line gb-route-holding__title&quot;&gt;
864
+ &lt;/span&gt;
865
+ &lt;span class=&quot;ui-skeleton__line&quot;&gt;
866
+ &lt;/span&gt;
867
+ &lt;span class=&quot;ui-skeleton__line&quot;&gt;
868
+ &lt;/span&gt;
869
+ &lt;span class=&quot;ui-skeleton__line&quot;&gt;
870
+ &lt;/span&gt;
871
+ &lt;span class=&quot;ui-skeleton__line&quot;&gt;
872
+ &lt;/span&gt;
873
+ &lt;/div&gt;
874
+ &lt;/div&gt;</code></pre></details></figure></section>
875
+ <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;/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;
876
+ &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
877
+ &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
878
+ &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;
879
+ &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
880
+ &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;
881
+ &lt;/path&gt;
882
+ &lt;/svg&gt;
883
+ &lt;/button&gt;
884
+ &lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;
885
+ &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;
886
+ &lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;
887
+ &lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;
888
+ &lt;/polygon&gt;
889
+ &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;
890
+ &lt;/path&gt;
891
+ &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;
892
+ &lt;/path&gt;
893
+ &lt;/g&gt;
894
+ &lt;/svg&gt;
895
+ &lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;
896
+ &lt;/a&gt;
897
+ &lt;/div&gt;
898
+ &lt;div class=&quot;gemboss-topbar-center&quot;&gt;
899
+ &lt;/div&gt;
900
+ &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
901
+ &lt;/div&gt;
902
+ &lt;/header&gt;
903
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:R0:&quot;&gt;
904
+ &lt;div class=&quot;gnav-scroll&quot;&gt;
905
+ &lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;
906
+ &lt;div class=&quot;gnav-group active&quot;&gt;
907
+ &lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;
908
+ &lt;span class=&quot;gnav-ico&quot;&gt;
909
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
910
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
911
+ &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;
912
+ &lt;/rect&gt;
913
+ &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;
914
+ &lt;/rect&gt;
915
+ &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;
916
+ &lt;/rect&gt;
917
+ &lt;/g&gt;
918
+ &lt;/svg&gt;
919
+ &lt;/span&gt;
920
+ &lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;
921
+ &lt;/a&gt;
922
+ &lt;/div&gt;
923
+ &lt;div class=&quot;gnav-group&quot;&gt;
924
+ &lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;
925
+ &lt;span class=&quot;gnav-ico&quot;&gt;
926
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
927
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
928
+ &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;
929
+ &lt;/rect&gt;
930
+ &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;
931
+ &lt;/rect&gt;
932
+ &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;
933
+ &lt;/rect&gt;
934
+ &lt;/g&gt;
935
+ &lt;/svg&gt;
936
+ &lt;/span&gt;
937
+ &lt;span class=&quot;gnav-label&quot;&gt;Ghép trang&lt;/span&gt;
938
+ &lt;/a&gt;
939
+ &lt;/div&gt;
940
+ &lt;div class=&quot;gnav-group&quot;&gt;
941
+ &lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;
942
+ &lt;span class=&quot;gnav-ico&quot;&gt;
943
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
944
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
945
+ &lt;path d=&quot;M10 3.2 17.3 16H2.7z&quot;&gt;
946
+ &lt;/path&gt;
947
+ &lt;path d=&quot;M10 8.2v3.6M10 13.9v.1&quot;&gt;
948
+ &lt;/path&gt;
949
+ &lt;/g&gt;
950
+ &lt;/svg&gt;
951
+ &lt;/span&gt;
952
+ &lt;span class=&quot;gnav-label&quot;&gt;Framework thiếu&lt;/span&gt;
953
+ &lt;span class=&quot;gnav-count&quot; aria-label=&quot;3 mục đang mở&quot;&gt;3&lt;/span&gt;
954
+ &lt;/a&gt;
955
+ &lt;/div&gt;
956
+ &lt;/div&gt;
957
+ &lt;/nav&gt;
958
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;
959
+ &lt;/button&gt;
960
+ &lt;main class=&quot;gemboss-platform-main&quot;&gt;
961
+ &lt;div class=&quot;ui-page&quot;&gt;
962
+ &lt;h1 style=&quot;margin:0 0 16px&quot;&gt;Board&lt;/h1&gt;
963
+ &lt;div class=&quot;ui-card&quot;&gt;
964
+ &lt;div class=&quot;ui-card__title&quot;&gt;#412 Hero split&lt;/div&gt;
965
+ &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;
966
+ &lt;/div&gt;
967
+ &lt;/div&gt;
968
+ &lt;/main&gt;
969
+ &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;/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;
970
+ &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
971
+ &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
972
+ &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;
973
+ &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; aria-hidden=&quot;true&quot;&gt;
974
+ &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;
975
+ &lt;/path&gt;
976
+ &lt;/svg&gt;
977
+ &lt;/button&gt;
978
+ &lt;a class=&quot;gb-brand&quot; href=&quot;#&quot; aria-label=&quot;GemFactory home&quot;&gt;
979
+ &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;
980
+ &lt;g transform=&quot;translate(0,0.8) scale(0.31)&quot;&gt;
981
+ &lt;polygon points=&quot;26,14 74,14 66,50 34,50&quot; fill=&quot;#5661F5&quot; fill-opacity=&quot;0.92&quot;&gt;
982
+ &lt;/polygon&gt;
983
+ &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;
984
+ &lt;/path&gt;
985
+ &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;
986
+ &lt;/path&gt;
987
+ &lt;/g&gt;
988
+ &lt;/svg&gt;
989
+ &lt;span class=&quot;gb-brand-name&quot;&gt;GemFactory&lt;/span&gt;
990
+ &lt;/a&gt;
991
+ &lt;/div&gt;
992
+ &lt;div class=&quot;gemboss-topbar-center&quot;&gt;
993
+ &lt;/div&gt;
994
+ &lt;div class=&quot;gemboss-topbar-end&quot;&gt;
995
+ &lt;/div&gt;
996
+ &lt;/header&gt;
997
+ &lt;nav class=&quot;icon-nav&quot; aria-label=&quot;Main navigation&quot; id=&quot;:R0:&quot;&gt;
998
+ &lt;div class=&quot;gnav-scroll&quot;&gt;
999
+ &lt;div class=&quot;gnav-heading&quot;&gt;Kho&lt;/div&gt;
1000
+ &lt;div class=&quot;gnav-group active&quot;&gt;
1001
+ &lt;a class=&quot;gnav-item active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;
1002
+ &lt;span class=&quot;gnav-ico&quot;&gt;
1003
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
1004
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
1005
+ &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;
1006
+ &lt;/rect&gt;
1007
+ &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;
1008
+ &lt;/rect&gt;
1009
+ &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;
1010
+ &lt;/rect&gt;
1011
+ &lt;/g&gt;
1012
+ &lt;/svg&gt;
1013
+ &lt;/span&gt;
1014
+ &lt;span class=&quot;gnav-label&quot;&gt;Board&lt;/span&gt;
1015
+ &lt;/a&gt;
1016
+ &lt;/div&gt;
1017
+ &lt;div class=&quot;gnav-group&quot;&gt;
1018
+ &lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;
1019
+ &lt;span class=&quot;gnav-ico&quot;&gt;
1020
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
1021
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
1022
+ &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;
1023
+ &lt;/rect&gt;
1024
+ &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;
1025
+ &lt;/rect&gt;
1026
+ &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;
1027
+ &lt;/rect&gt;
1028
+ &lt;/g&gt;
1029
+ &lt;/svg&gt;
1030
+ &lt;/span&gt;
1031
+ &lt;span class=&quot;gnav-label&quot;&gt;Ghép trang&lt;/span&gt;
1032
+ &lt;/a&gt;
1033
+ &lt;/div&gt;
1034
+ &lt;div class=&quot;gnav-group&quot;&gt;
1035
+ &lt;a class=&quot;gnav-item&quot; href=&quot;#&quot;&gt;
1036
+ &lt;span class=&quot;gnav-ico&quot;&gt;
1037
+ &lt;svg viewBox=&quot;0 0 20 20&quot; width=&quot;20&quot; height=&quot;20&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;&gt;
1038
+ &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
1039
+ &lt;path d=&quot;M10 3.2 17.3 16H2.7z&quot;&gt;
1040
+ &lt;/path&gt;
1041
+ &lt;path d=&quot;M10 8.2v3.6M10 13.9v.1&quot;&gt;
1042
+ &lt;/path&gt;
1043
+ &lt;/g&gt;
1044
+ &lt;/svg&gt;
1045
+ &lt;/span&gt;
1046
+ &lt;span class=&quot;gnav-label&quot;&gt;Framework thiếu&lt;/span&gt;
1047
+ &lt;span class=&quot;gnav-count&quot; aria-label=&quot;3 mục đang mở&quot;&gt;3&lt;/span&gt;
1048
+ &lt;/a&gt;
1049
+ &lt;/div&gt;
1050
+ &lt;/div&gt;
1051
+ &lt;/nav&gt;
1052
+ &lt;button type=&quot;button&quot; class=&quot;gemboss-mobile-nav-backdrop&quot; aria-label=&quot;Close menu&quot; tabindex=&quot;-1&quot;&gt;
1053
+ &lt;/button&gt;
1054
+ &lt;main class=&quot;gemboss-platform-main&quot;&gt;
1055
+ &lt;div class=&quot;ui-page ui-page--form&quot;&gt;
1056
+ &lt;h1 style=&quot;margin:0 0 16px&quot;&gt;Settings&lt;/h1&gt;
1057
+ &lt;div class=&quot;ui-card&quot; style=&quot;display:grid;gap:6px&quot;&gt;
1058
+ &lt;label for=&quot;cat-pw-name&quot;&gt;Tên hiển thị&lt;/label&gt;
1059
+ &lt;input id=&quot;cat-pw-name&quot; class=&quot;gemboss-field&quot; value=&quot;Minh Anh&quot;&gt;
1060
+ &lt;/div&gt;
1061
+ &lt;/div&gt;
1062
+ &lt;/main&gt;
1063
+ &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;
1064
+ &lt;div class=&quot;ui-card&quot;&gt;Một mục trong feed, cột 720px.&lt;/div&gt;
1065
+ &lt;/div&gt;</code></pre></details></figure></section>
755
1066
  <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;/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;
756
1067
  &lt;header class=&quot;gemboss-platform-topbar&quot;&gt;
757
1068
  &lt;div class=&quot;gemboss-topbar-start&quot;&gt;
@@ -1266,7 +1577,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1266
1577
  &lt;button type=&quot;submit&quot; aria-label=&quot;Gửi&quot;&gt;↑&lt;/button&gt;
1267
1578
  &lt;/form&gt;
1268
1579
  &lt;/div&gt;</code></pre></details></figure></section>
1269
- <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">25/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;
1580
+ <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">26/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;
1270
1581
  &lt;aside class=&quot;gemboss-assistant-rail&quot;&gt;
1271
1582
  &lt;div class=&quot;gemboss-assistant-rail-top&quot;&gt;
1272
1583
  &lt;button type=&quot;button&quot; class=&quot;gemboss-assistant-newchat&quot; title=&quot;Phiên mới&quot;&gt;
@@ -1315,7 +1626,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
1315
1626
  &lt;/svg&gt;
1316
1627
  &lt;span class=&quot;gemboss-assistant-thread-title&quot;&gt;So sánh advertorial với listicle&lt;/span&gt;
1317
1628
  &lt;/span&gt;
1318
- &lt;span class=&quot;gemboss-assistant-thread-meta&quot;&gt;25/8/2026&lt;/span&gt;
1629
+ &lt;span class=&quot;gemboss-assistant-thread-meta&quot;&gt;26/8/2026&lt;/span&gt;
1319
1630
  &lt;/button&gt;
1320
1631
  &lt;div class=&quot;gemboss-assistant-thread-actions&quot;&gt;
1321
1632
  &lt;button type=&quot;button&quot; class=&quot;gemboss-assistant-thread-act&quot; aria-label=&quot;Options&quot;&gt;