<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thống nhất icon và cách thể hiện - Web khách</title>
<style>
:root {
--bg:#f4f6f8; --card:#ffffff; --text:#1f2328; --muted:#57606a; --faint:#8c959f;
--border:#d8dee4; --heading:#0b3b6f; --accent:#87CEFA;
--code-bg:#eef1f5; --code-text:#a5316a; --th-bg:#e1f2fc; --th-text:#0b3b6f; --th-border:#b9ddf8; --row-alt:#f8fbfe;
--green:#1a7f37; --green-bg:#e9f7ef;
--orange:#bc4c00; --orange-bg:#fff1e5;
--red:#cf222e; --red-bg:#ffebe9;
--grey:#6e7781; --grey-bg:#eff2f5;
--blue:#0969da; --blue-bg:#ddf4ff;
--brand:#8250df; --brand-bg:#fbefff;
--shadow:0 1px 2px rgba(27,31,36,.06), 0 4px 14px rgba(27,31,36,.05);
}
@media (prefers-color-scheme: dark) {
:root {
--bg:#0a0d12; --card:#11161d; --text:#e6edf3; --muted:#9198a1; --faint:#6e7681;
--border:#2a313a; --heading:#87CEFA; --accent:#87CEFA;
--code-bg:#1c232c; --code-text:#ff9bce; --th-bg:#0d2847; --th-text:#cfe8fb; --th-border:#1f4a73; --row-alt:#141a21;
--green:#3fb950; --green-bg:#0f2a1a;
--orange:#f0883e; --orange-bg:#2d1b0b;
--red:#ff7b72; --red-bg:#3a1417;
--grey:#9198a1; --grey-bg:#1f262e;
--blue:#58a6ff; --blue-bg:#0c2541;
--brand:#bc8cff; --brand-bg:#271a3d;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
}
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text);
font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
font-size:16px; line-height:1.6; }
.wrap { max-width:1080px; margin:0 auto; padding:2rem 1rem 4rem; }
a { color:inherit; }
.hero { background:var(--card); border:1px solid var(--border); border-top:4px solid var(--accent); border-radius:14px;
padding:1.5rem 1.6rem 1.2rem; box-shadow:var(--shadow); margin-bottom:1rem; }
.eyebrow { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--heading); margin-bottom:.4rem; }
.hero h1 { font-size:1.6rem; line-height:1.25; margin:0 0 .8rem; color:var(--heading); font-weight:800; }
.meta { display:flex; flex-direction:column; gap:.45rem; border-top:1px solid var(--border); padding-top:.8rem; font-size:.9rem; }
.meta .k { display:inline-block; min-width:5.5rem; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); }
.meta ul { margin:.2rem 0 0; }
nav.toc { position:sticky; top:0; z-index:5; background:var(--bg); padding:.5rem 0; margin-bottom:.8rem;
display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
nav.toc a { text-decoration:none; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:.25rem .7rem; font-size:.82rem; }
nav.toc a:hover { border-color:var(--accent); }
section.block { background:var(--card); border:1px solid var(--border); border-radius:14px;
padding:1.3rem 1.5rem 1.4rem; box-shadow:var(--shadow); margin-bottom:1.2rem; scroll-margin-top:3.5rem; }
h2 { font-size:1.3rem; font-weight:800; color:var(--heading); margin:0 0 .8rem; }
h3 { font-size:1.06rem; font-weight:800; color:var(--heading); margin:1.4rem 0 .5rem; scroll-margin-top:3.5rem; }
h3:first-of-type { margin-top:.3rem; }
ul, ol { padding-left:1.25rem; margin:.3rem 0; }
li { margin:.2rem 0; }
p { margin:.5rem 0; }
code { font-family:"Cascadia Code",Consolas,ui-monospace,monospace; font-size:.84em;
background:var(--code-bg); color:var(--code-text); padding:.06em .36em; border-radius:5px; }
.table-scroll { overflow-x:auto; margin:.4rem 0 .6rem; }
table { border-collapse:collapse; width:100%; font-size:.88rem; }
th,td { border:1px solid var(--border); padding:.42rem .65rem; text-align:left; vertical-align:top; }
thead th { background:var(--th-bg); color:var(--th-text); font-weight:800; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; border-color:var(--th-border); }
tbody tr:nth-child(even) { background:var(--row-alt); }
td.off { color:var(--orange); }
td.ok { color:var(--green); }
/* bảng màu */
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.55rem; margin:.5rem 0; }
.sw { display:flex; gap:.6rem; align-items:flex-start; border:1px solid var(--border); border-radius:10px; padding:.55rem .7rem; font-size:.9rem; }
.sw i { flex-shrink:0; width:1.1rem; height:1.1rem; border-radius:50%; margin-top:.2rem; background:var(--c); box-shadow:0 0 0 3px var(--cb); }
.sw b { display:block; color:var(--c); }
.c-green { --c:var(--green); --cb:var(--green-bg); }
.c-orange { --c:var(--orange); --cb:var(--orange-bg); }
.c-red { --c:var(--red); --cb:var(--red-bg); }
.c-grey { --c:var(--grey); --cb:var(--grey-bg); }
.c-blue { --c:var(--blue); --cb:var(--blue-bg); }
.c-brand { --c:var(--brand); --cb:var(--brand-bg); }
/* thẻ chuẩn */
.spec { border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:10px; padding:.8rem 1rem; margin:.8rem 0; scroll-margin-top:3.5rem; }
.spec h3 { margin:0 0 .45rem; }
.spec ul { margin:.2rem 0; }
/* mô phỏng ô */
.demo { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; background:var(--row-alt); border:1px dashed var(--border); border-radius:8px; padding:.6rem .75rem; margin:.5rem 0; font-size:.85rem; }
.demo .cap { font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-right:.2rem; }
.chip { display:inline-flex; align-items:center; gap:.3rem; border-radius:999px; padding:.08rem .55rem; font-size:.8rem; font-weight:700; color:var(--c); background:var(--cb); border:1px solid var(--c); }
.chip svg { width:.85rem; height:.85rem; }
.chip .dot { width:.45rem; height:.45rem; border-radius:50%; background:var(--c); }
.ghost { display:inline-flex; border:1px dashed var(--grey); color:var(--grey); border-radius:999px; padding:.05rem .55rem; font-size:.78rem; }
.sync { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; }
.sync .box { display:inline-flex; width:1.6rem; height:1.6rem; border-radius:6px; align-items:center; justify-content:center; background:var(--cb); color:var(--c); }
.sync .box svg { width:.9rem; height:.9rem; }
.sync .t { color:var(--tc, var(--muted)); font-weight:600; }
.name { display:inline-flex; flex-direction:column; line-height:1.2; font-size:.82rem; }
.name b { font-size:.85rem; }
.name span { color:var(--faint); font-size:.75rem; }
.ms { display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--border); background:var(--card); border-radius:999px; padding:.08rem .6rem; font-size:.8rem; }
.ms b { color:var(--blue); }
.ms i { width:1px; height:.9rem; background:var(--border); }
.ms .g::before, .ms .r::before, .ms .o::before, .ms .b::before { content:""; display:inline-block; width:.42rem; height:.42rem; border-radius:50%; margin-right:.2rem; vertical-align:1px; }
.ms .g::before { background:var(--green); } .ms .r::before { background:var(--red); } .ms .o::before { background:var(--orange); } .ms .b::before { background:var(--blue); }
.ic { display:inline-flex; align-items:center; gap:.3rem; color:var(--c); background:var(--cb); border:1px solid var(--cb); border-radius:6px; padding:.05rem .45rem; font-weight:700; font-size:.82rem; }
.ic svg { width:.95rem; height:.95rem; }
.kinds { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.7rem; margin:.6rem 0; }
.kind { border:1px solid var(--border); border-radius:10px; padding:.7rem .9rem; }
.kind h4 { margin:0 0 .15rem; font-size:.95rem; color:var(--heading); }
.kind .who { font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-bottom:.2rem; }
.kind ul { margin:.3rem 0 0; padding-left:1.1rem; font-size:.9rem; }
.bad-demo { text-decoration:line-through; color:var(--faint); }
/* các bước có ô tick */
.pages { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:.7rem; margin:.5rem 0; }
.pg { border:1px solid var(--border); border-radius:10px; padding:.7rem .9rem; }
.pg h4 { margin:0 0 .4rem; font-size:.95rem; color:var(--heading); }
ul.todo { list-style:none; padding:0; margin:0; }
ul.todo li { position:relative; padding-left:1.5rem; font-size:.9rem; margin:.3rem 0; }
ul.todo li::before { content:""; position:absolute; left:0; top:.28rem; width:.9rem; height:.9rem; border:1.5px solid var(--faint); border-radius:3px; }
.note { border-left:3px solid var(--orange); background:var(--orange-bg); border-radius:0 8px 8px 0; padding:.55rem .85rem; margin:.6rem 0; font-size:.92rem; }
.decide { border:1px solid var(--orange); border-radius:10px; padding:.7rem .9rem; margin:.6rem 0; }
.decide b.q { display:block; color:var(--orange); margin-bottom:.2rem; }
@media (max-width:640px) {
.hero, section.block { padding:1.1rem 1rem; }
.hero h1 { font-size:1.35rem; }
}
</style>
</head>
<body>
<div class="wrap">
<header class="hero">
<div class="eyebrow">Tài liệu khác</div>
<h1>Thống nhất icon và cách thể hiện - Web khách</h1>
<div class="meta">
<div><span class="k">Cập nhật</span>2026-10-09</div>
<div><span class="k">Phạm vi</span>các trang danh sách tài sản (VIA, BM, ADS, Page, Pixel, Proxy, Campaign, Quản lý thẻ), các bảng trong trang chi tiết, Dashboard và khu Quản trị. Trang Instagram để riêng, không nằm trong tài liệu này. Đọc mã nguồn web Khách tại commit <code>c36e7de8</code>.</div>
<div><span class="k">Cách dùng</span>
<ul>
<li>Phần 1 và Phần 2 là chuẩn: mỗi thứ chỉ có một cách thể hiện, trang nào cũng làm theo.</li>
<li>Phần 3 là việc phải sửa theo từng trang. Sửa xong thì tick.</li>
<li>Phần 4 là ghi chú cho dev về cách gộp mã.</li>
<li>Phần 5 là các mẫu ô đếm đã thống nhất, phạm vi sửa đợt này và các điểm cần chốt trước khi sửa.</li>
</ul>
</div>
</div>
</header>
<nav class="toc">
<a href="#p1">1. Bộ icon</a>
<a href="#p2">2. Cách thể hiện</a>
<a href="#p3">3. Việc sửa theo trang</a>
<a href="#p4">4. Ghi chú cho dev</a>
<a href="#p5">5. Thống nhất và cần chốt</a>
</nav>
<!-- ================= PHẦN 1 ================= -->
<section class="block" id="p1">
<h2>Phần 1. Bộ icon</h2>
<h3>1.1. Icon đối tượng</h3>
<p>Mỗi đối tượng một icon, dùng giống nhau ở menu, tiêu đề trang, tab và nút.</p>
<div class="table-scroll"><table>
<thead><tr><th>Đối tượng</th><th>Icon</th><th>Tên trong mã</th><th>Đang lệch</th></tr></thead>
<tbody>
<tr><td>VIA</td><td>màn hình cạnh điện thoại</td><td><code>MonitorSmartphone</code></td><td></td></tr>
<tr><td>Instagram</td><td>máy ảnh</td><td><code>Camera</code></td><td></td></tr>
<tr><td>BM</td><td>toà nhà</td><td><code>Building2</code></td><td class="off">có chỗ dùng cặp tài liệu, Dashboard dùng cặp tài liệu</td></tr>
<tr><td>TKQC</td><td>cái loa</td><td><code>Megaphone</code></td><td class="off">có chỗ dùng thẻ tín dụng, cặp tài liệu; cột "TKQC chia sẻ" ở chi tiết BM dùng thẻ tín dụng</td></tr>
<tr><td>Page</td><td>lá cờ</td><td><code>Flag</code></td><td class="off">có chỗ dùng tờ giấy</td></tr>
<tr><td>Pixel</td><td>tâm ngắm</td><td><code>Crosshair</code></td><td class="ok">đã đúng</td></tr>
<tr><td>Campaign</td><td>bia bắn</td><td><code>Target</code></td><td class="ok">đã đúng</td></tr>
<tr><td>Proxy</td><td>quả địa cầu</td><td><code>Globe</code></td><td class="off">4 icon khác nhau</td></tr>
<tr><td>Thẻ thanh toán</td><td>thẻ tín dụng</td><td><code>CreditCard</code></td><td class="off">menu dùng cái ví</td></tr>
<tr><td>Nhóm</td><td>thư mục</td><td><code>Folder</code></td><td class="off">Quản lý ADS dùng thư mục có mũi tên</td></tr>
<tr><td>Nhóm tài sản trong BM</td><td>các lớp chồng nhau</td><td><code>Layers</code></td><td class="ok">đã đúng</td></tr>
<tr><td>Tag</td><td>cái nhãn</td><td><code>Tag</code></td><td></td></tr>
<tr><td>Người dùng trong BM</td><td>hai người</td><td><code>Users</code></td><td></td></tr>
</tbody>
</table></div>
<h3>1.2. Icon hành động</h3>
<div class="table-scroll"><table>
<thead><tr><th>Hành động</th><th>Icon</th><th>Tên trong mã</th></tr></thead>
<tbody>
<tr><td>Thêm</td><td>dấu cộng</td><td><code>Plus</code></td></tr>
<tr><td>Sửa, Đổi tên, Sửa ghi chú</td><td>cây bút</td><td><code>Pencil</code></td></tr>
<tr><td>Xóa</td><td>thùng rác</td><td><code>Trash2</code></td></tr>
<tr><td>Gỡ liên kết</td><td>mắt xích đứt</td><td><code>Unlink</code></td></tr>
<tr><td>Đồng bộ, Tải lại, Thử lại</td><td>hai mũi tên vòng tròn</td><td><code>RefreshCw</code></td></tr>
<tr><td>Khôi phục, Đặt lại</td><td>mũi tên xoay ngược</td><td><code>RotateCcw</code></td></tr>
<tr><td>Xuất, Tải file</td><td>mũi tên tải xuống</td><td><code>Download</code></td></tr>
<tr><td>Sao chép</td><td>hai tờ giấy chồng</td><td><code>Copy</code></td></tr>
<tr><td>Lọc, Tìm kiếm nâng cao</td><td>cái phễu</td><td><code>Filter</code></td></tr>
<tr><td>Xóa bộ lọc, Đóng</td><td>dấu X</td><td><code>X</code></td></tr>
<tr><td>Menu Quản lý hàng loạt</td><td>thanh trượt</td><td><code>Settings2</code></td></tr>
<tr><td>Menu thêm</td><td>ba chấm ngang</td><td><code>MoreHorizontal</code></td></tr>
<tr><td>Mở Chrome của VIA</td><td>logo trình duyệt</td><td><code>Chrome</code></td></tr>
<tr><td>Mở trên Facebook</td><td>mũi tên ra ngoài</td><td><code>ExternalLink</code></td></tr>
<tr><td>Cảnh báo / Lỗi / Thành công</td><td>tam giác / vòng tròn dấu X / vòng tròn dấu tích</td><td><code>AlertTriangle</code> / <code>XCircle</code> / <code>CheckCircle2</code></td></tr>
</tbody>
</table></div>
<h3>1.3. Quy tắc dùng icon</h3>
<ul>
<li>Không dùng ký tự gõ tay hoặc biểu tượng cảm xúc thay icon.</li>
<li>Cùng một vị trí thì icon cùng cỡ: trong ô bảng một cỡ, trên nút một cỡ, ở tiêu đề trang một cỡ.</li>
<li>Icon không tự mang màu trang trí. Màu chỉ dùng để báo tình trạng theo bảng màu ở mục 2.1.</li>
<li>Tiêu đề trang dùng icon của đối tượng trang đó. Hiện mọi trang đều dùng tia sét, kể cả trang không liên quan.</li>
</ul>
</section>
<!-- ================= PHẦN 2 ================= -->
<section class="block" id="p2">
<h2>Phần 2. Cách thể hiện</h2>
<div class="spec" id="s21">
<h3>2.1. Bảng màu tình trạng</h3>
<p>Màu chỉ dùng để báo tình trạng, không dùng để phân biệt loại đối tượng.</p>
<div class="swatches">
<div class="sw c-green"><i></i><div><b>Xanh lá</b>sống, hoạt động, đủ kết nối, sống hết.</div></div>
<div class="sw c-orange"><i></i><div><b>Cam</b>cần chú ý: checkpoint, nợ, sống một phần, dữ liệu đã cũ hơn 24 giờ.</div></div>
<div class="sw c-red"><i></i><div><b>Đỏ</b>chết, vô hiệu, bị khóa, không cái nào sống, không còn cách đồng bộ.</div></div>
<div class="sw c-grey"><i></i><div><b>Xám</b>chưa rõ, chưa có dữ liệu, hết hạn, đang tắt.</div></div>
<div class="sw c-blue"><i></i><div><b>Xanh dương</b>thông tin trung tính không mang tình trạng, ví dụ "Trung gian", "Chia sẻ".</div></div>
<div class="sw c-brand"><i></i><div><b>Màu thương hiệu (tím)</b>chỉ cho nút chính và chữ nhấn ở tiêu đề, không dùng cho dữ liệu.</div></div>
</div>
<div class="note">Hiện tình trạng "Chưa rõ" ở Quản lý BM và Quản lý ADS đang là cam, ở Quản lý VIA là xám. Chuẩn là xám.</div>
</div>
<div class="spec" id="s22">
<h3>2.2. Tiêu đề trang và thanh công cụ</h3>
<ul>
<li>Tiêu đề: icon đối tượng + "Quản lý" + tên đối tượng, viết như ở menu.</li>
<li>Thanh công cụ bên trái, theo thứ tự: chip "Tất cả nhóm", nút Tải lại, ô tìm kiếm, nút Tìm kiếm nâng cao.</li>
<li>Ô tìm kiếm ghi theo một mẫu: "Tìm theo tên hoặc ID {đối tượng}...".</li>
<li>Thanh công cụ bên phải, theo thứ tự: Quản lý hàng loạt, Thùng rác, Xuất, rồi các nút riêng của trang. Nút chính (Thêm...) luôn đứng cuối, tô màu chính.</li>
<li>Trang nào có chia nhóm thì có chip "Tất cả nhóm" và cột Nhóm.</li>
</ul>
</div>
<div class="spec" id="s23">
<h3>2.3. Các cột đầu bảng</h3>
<p>Thứ tự cố định ở mọi bảng danh sách: ô chọn, "#", Trạng thái, Tên, Đồng bộ. Ba cột Ô chọn, "#", Tên luôn ghim bên trái khi cuộn ngang.</p>
<ul>
<li><b>Cột "#":</b> bảng nào cũng có, cùng độ rộng, đánh số nối tiếp qua các trang (trang 2 bắt đầu từ 101 nếu mỗi trang 100 dòng).</li>
<li><b>Cột Trạng thái:</b> nhãn chữ có chấm màu đứng trước, màu theo mục 2.1. Rê chuột hiện giải thích ngắn. Cột sắp xếp được. Nhãn viết tiếng Việt, mỗi trạng thái một tên.</li>
</ul>
<div class="demo"><span class="cap">Trạng thái</span>
<span class="chip c-green"><span class="dot"></span>Hoạt động</span>
<span class="chip c-orange"><span class="dot"></span>Checkpoint 956</span>
<span class="chip c-red"><span class="dot"></span>Vô hiệu hoá</span>
<span class="chip c-grey"><span class="dot"></span>Chưa rõ</span>
</div>
<ul>
<li><b>Cột Tên:</b>
<ul>
<li>Dòng trên là tên, dòng dưới là ID. Rê chuột hiện nút sao chép cho cả hai.</li>
<li>Ô hình ở đầu chỉ dùng khi có ảnh thật (ảnh Page, logo thẻ) hoặc khi là nút có tác dụng (mở Chrome của VIA). Không dùng ô icon trang trí.</li>
<li>Bấm tên luôn mở trang chi tiết trong tab mới. Đối tượng chưa có trang chi tiết (Page, Pixel, Proxy, Thẻ) thì mở hộp chi tiết. Đường dẫn ra Facebook để ở nút riêng có icon "Mở trên Facebook".</li>
</ul>
</li>
</ul>
<div class="demo"><span class="cap">Tên</span>
<span class="name"><b>03-Nlm Bm 10</b><span>630960131380931</span></span>
</div>
</div>
<div class="spec" id="s24">
<h3>2.4. Cột Đồng bộ</h3>
<ul>
<li>Tên cột: "Đồng bộ".</li>
<li>Một ô gồm: icon hai mũi tên vòng tròn trong ô vuông, bên cạnh là thời gian tương đối ("6 giờ trước").</li>
<li>Màu ô icon theo tình trạng kết nối: xanh lá là còn cách đồng bộ, đỏ là không còn cách nào, xám là chưa đồng bộ lần nào. Đang đồng bộ thì icon quay tròn.</li>
<li>Thời gian chuyển cam khi cũ hơn 24 giờ.</li>
<li>Rê chuột hiện giờ chính xác, đồng bộ bằng cách nào (Kết nối nâng cao, VIA...) và nếu đỏ thì thiếu gì.</li>
<li>Bấm icon là đồng bộ ngay, nếu tài khoản có quyền.</li>
<li>Ô trống ghi "Chưa đồng bộ".</li>
<li>Cột kiểm tra proxy không phải cột đồng bộ, đặt tên riêng là "Lần kiểm tra", nhưng thời gian vẫn dùng cùng kiểu tương đối.</li>
</ul>
<div class="demo"><span class="cap">Đồng bộ</span>
<span class="sync c-green"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M8 16H3v5"/></svg></span><span class="t">6 giờ trước</span></span>
<span class="sync c-green" style="--tc:var(--orange)"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M8 16H3v5"/></svg></span><span class="t">4 ngày trước</span></span>
<span class="sync c-red"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M8 16H3v5"/></svg></span><span class="t">1 ngày trước</span></span>
<span class="sync c-grey"><span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M8 16H3v5"/></svg></span><span class="t">Chưa đồng bộ</span></span>
</div>
</div>
<div class="spec" id="s25">
<h3>2.5. Ô đếm tài sản liên quan</h3>
<p>Áp dụng cho mọi ô đếm tài sản liên quan tới dòng đó. Có ba kiểu, chọn theo đối tượng được đếm chứ không theo trang. Cùng một đối tượng thì trang nào cũng dùng một kiểu.</p>
<ul>
<li><b>TKQC: viên ba chấm.</b> Một dòng thường kéo theo hàng chục TKQC và cần thấy cùng lúc ba nhóm tình trạng: sống, die, nợ.</li>
<li><b>VIA, BM: icon kèm "sống/tổng".</b> Mỗi dòng thường chỉ vài cái, câu cần trả lời là còn mấy cái sống.</li>
<li><b>Page: icon kèm tổng, màu xám.</b> Page chưa có tình trạng sống, die để đếm.</li>
<li><b>Pixel: viên hai chấm sở hữu, chia sẻ.</b> Pixel không có sống, die, nhưng cần thấy bao nhiêu cái sở hữu, bao nhiêu cái được chia sẻ.</li>
<li>Số không phải tài sản có tình trạng (đối tác, người được gán, tài sản được cấp) dùng kiểu của Page.</li>
<li>Ô đếm không phải tài sản nhưng có tình trạng riêng (Nhóm QC, Quảng cáo ở Campaign; Hóa đơn ở Quản lý thẻ) dùng viên ba chấm, chấm theo tình trạng riêng của nó.</li>
</ul>
<div class="kinds">
<div class="kind"><div class="who">TKQC</div><h4>Viên ba chấm</h4>
<div class="demo">
<span class="ms"><b>47</b><i></i><span class="g">9</span><span class="r">37</span><span class="o">1</span></span>
<span class="ms"><b>15</b><i></i><span class="g">0</span><span class="r">15</span><span class="o">0</span></span>
<span class="ms"><b>3</b></span>
</div>
<ul>
<li>Một viên gồm tổng số in đậm, vạch ngăn, rồi ba chấm kèm số: xanh lá là sống, đỏ là die, cam là nợ. Lấy cột Ads sở hữu ở Quản lý BM làm mẫu.</li>
<li>Luôn hiện đủ ba chấm, kể cả khi bằng 0, để các dòng thẳng hàng.</li>
<li>Không đặt icon trong viên, vì tên cột đã nói là đối tượng nào.</li>
<li>Chưa có dữ liệu tình trạng thì chỉ hiện tổng, không có chấm.</li>
<li>Rê chuột hiện chú thích, ví dụ "47 TKQC: 9 sống, 37 die, 1 nợ. 40 sở hữu, 7 chia sẻ".</li>
<li>Sắp xếp theo Tổng, Sống, Die, Nợ.</li>
</ul>
</div>
<div class="kind"><div class="who">VIA, BM</div><h4>Icon kèm "sống/tổng"</h4>
<div class="demo">
<span class="ic c-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"/><path d="M10 19v-3.96 3.15"/><path d="M7 19h5"/><rect width="6" height="10" x="16" y="12" rx="2"/></svg>3/3</span>
<span class="ic c-orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>1/2</span>
<span class="ic c-red"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"/><path d="M10 19v-3.96 3.15"/><path d="M7 19h5"/><rect width="6" height="10" x="16" y="12" rx="2"/></svg>0/2</span>
<span class="ic c-grey"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>4</span>
</div>
<ul>
<li>Một chip nền nhạt theo màu tình trạng, trong có icon đối tượng theo Phần 1 và "sống/tổng", ví dụ "2/3". Lấy cột Via, BM ở Quản lý TKQC làm mẫu.</li>
<li>Màu số theo mục 2.1: xanh lá khi sống hết, cam khi sống một phần, đỏ khi không cái nào sống. Icon cùng màu với số.</li>
<li>VIA tính là sống khi đang hoạt động; checkpoint không tính là sống. BM tính là sống khi chưa bị vô hiệu.</li>
<li>Chưa có dữ liệu tình trạng thì chỉ hiện icon kèm tổng, màu xám, không có dấu "/".</li>
<li>Rê chuột hiện chú thích, ví dụ "3 VIA: 2 sống, 1 checkpoint" hoặc "2 BM: 1 sống, 1 die. 1 sở hữu, 1 chia sẻ".</li>
<li>Sắp xếp theo Tổng, Sống.</li>
<li>Cảnh báo kèm theo (ví dụ "BM chỉ còn 1 VIA") là dấu cảnh báo riêng đứng cạnh, không đổi màu số.</li>
</ul>
</div>
<div class="kind"><div class="who">Page</div><h4>Icon kèm tổng</h4>
<div class="demo">
<span class="ic c-grey"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>5</span>
</div>
<ul>
<li>Icon đối tượng theo Phần 1, bên cạnh là tổng số, màu xám.</li>
<li>Rê chuột hiện cách chia nếu có, ví dụ "5 Page: 3 sở hữu, 2 chia sẻ".</li>
<li>Sắp xếp theo Tổng.</li>
<li>Khi Page có dữ liệu tình trạng thì chuyển sang kiểu "sống/tổng".</li>
</ul>
</div>
<div class="kind"><div class="who">Pixel</div><h4>Viên sở hữu, chia sẻ</h4>
<div class="demo">
<span class="ms"><b>5</b><i></i><span class="g">5</span><span class="b">0</span></span>
<span class="ms"><b>3</b><i></i><span class="g">1</span><span class="b">2</span></span>
</div>
<ul>
<li>Một viên gồm tổng số in đậm, vạch ngăn, chấm xanh lá kèm số sở hữu, chấm xanh dương kèm số được chia sẻ. Lấy cột Pixel ở Quản lý BM làm mẫu.</li>
<li>Luôn hiện đủ hai chấm, kể cả khi bằng 0.</li>
<li>Rê chuột hiện chú thích, ví dụ "5 Pixel: 5 sở hữu, 0 chia sẻ".</li>
<li>Sắp xếp theo Tổng, Sở hữu, Chia sẻ.</li>
</ul>
</div>
</div>
<p><b>Quy tắc chung</b></p>
<ul>
<li>Màu và chấm chỉ dùng cho tình trạng, trừ ô Pixel. Cách chia khác (sở hữu, chia sẻ) của các đối tượng còn lại đưa vào phần rê chuột.</li>
<li>Bấm vào luôn mở hộp tài sản liên kết, đúng tab của cột đó.</li>
<li>Sắp xếp bằng menu ở tiêu đề cột, như cột Ads sở hữu ở Quản lý BM.</li>
<li>Ô trống là "—".</li>
<li>Không dùng số trần không icon, viên màu kiểu cũ, hay màu cố định không theo tình trạng.</li>
</ul>
<div class="demo"><span class="cap">Bỏ</span>
<span class="bad-demo">số trần "2"</span>
<span class="bad-demo">viên màu kiểu cũ</span>
<span class="bad-demo">icon màu cố định không theo tình trạng</span>
<span class="bad-demo">ô trống "0" hoặc "-"</span>
</div>
</div>
<div class="spec" id="s26">
<h3>2.6. Ô một tài sản kèm "+N"</h3>
<p>Dùng khi cột chỉ ra tài sản chính và còn tài sản khác, ví dụ cột BM gốc ở Quản lý ADS.</p>
<ul>
<li>Hiện tên tài sản đầu tiên kèm ID, bấm tên mở trang chi tiết.</li>
<li>Còn thêm thì hiện "+N" màu xám. Rê chuột vào "+N" hiện danh sách còn lại, bấm vào mở hộp tài sản liên kết.</li>
</ul>
</div>
<div class="spec" id="s27">
<h3>2.7. Nhóm, Tag, Ghi chú</h3>
<ul>
<li><b>Nhóm:</b> nhãn xám có icon thư mục, ghi tên nhóm. Nhiều nhóm thì hiện nhóm đầu kèm "+N", rê chuột hiện đủ.</li>
<li><b>Tag:</b> tên cột "Tag" ở mọi trang, không ghi "Tags" hay "Thẻ". Ô trống hiện nút mờ "+ Tag".</li>
<li><b>Ghi chú:</b> nhãn cam một dòng, quá dài thì cắt, rê chuột hiện đủ. Ô trống hiện nút mờ "+ Ghi chú". Bấm vào mở ô sửa có icon cây bút.</li>
</ul>
<div class="demo"><span class="cap">Mẫu</span>
<span class="chip c-grey">VIA SEEDING +2</span>
<span class="ghost">+ Tag</span>
<span class="chip c-orange">Đã đổi pass</span>
<span class="ghost">+ Ghi chú</span>
</div>
</div>
<div class="spec" id="s28">
<h3>2.8. Ngày, tiền, ô trống</h3>
<ul>
<li><b>Ngày:</b> dạng <code>dd/mm/yyyy</code>, có giờ thì <code>dd/mm/yyyy HH:mm</code>. Chữ thường, không in đậm. Cột ngày thêm tên "Ngày thêm".</li>
<li><b>Mốc đồng bộ, lần kiểm tra:</b> thời gian tương đối, rê chuột hiện giờ chính xác.</li>
<li><b>Tiền:</b> ký hiệu đứng trước, không cách: <code>$1,234.56</code>. Tiền đồng: <code>1.234.000 ₫</code>. Tên cột tiền viết tiếng Việt ("Chi tiêu", "Ngân sách", "Số dư").</li>
<li><b>Ô trống:</b> luôn là "—", không dùng "0", "-" hay để trắng. Ngoại lệ: ô có nút thêm (Tag, Ghi chú) thì hiện nút.</li>
</ul>
</div>
</section>
<!-- ================= PHẦN 3 ================= -->
<section class="block" id="p3">
<h2>Phần 3. Việc phải sửa theo trang</h2>
<div class="pages">
<div class="pg"><h4>Chung toàn web</h4><ul class="todo">
<li>Tiêu đề trang đổi tia sét thành icon đối tượng của trang.</li>
<li>Thay các icon lệch theo bảng ở Phần 1.</li>
<li>Tình trạng "Chưa rõ" đổi sang xám ở mọi trang.</li>
<li>Ô trống thống nhất "—".</li>
</ul></div>
<div class="pg"><h4>Quản lý VIA</h4><ul class="todo">
<li>Cột BMs đổi sang icon kèm "sống/tổng", cột TKQC đổi sang viên ba chấm. Server cần trả thêm số đang sống; trong lúc chưa có thì hiện icon kèm tổng, màu xám.</li>
<li>Cột Đồng bộ: ô trống ghi "Chưa đồng bộ" thay vì "Chưa"; thêm màu đỏ khi không còn cách đồng bộ.</li>
<li>Cột Nhóm đổi từ chữ xám sang nhãn nhóm.</li>
<li>Cột ngày "Thêm" đổi tên "Ngày thêm", dùng định dạng chung.</li>
<li>Cột "#" đổi về độ rộng chung.</li>
</ul></div>
<div class="pg"><h4>Quản lý BM</h4><ul class="todo">
<li>Cột "TT" chấm đổi sang cột Trạng thái nhãn chữ.</li>
<li>Cột Via đổi sang icon kèm "sống/tổng"; độ khớp admin đưa vào phần rê chuột (xem mục 5.4). Cảnh báo "BM chỉ còn 1 VIA" tách thành dấu cảnh báo riêng.</li>
<li>Cột Ads sở hữu, Ads trung gian, Pixel là mẫu chuẩn, giữ nguyên, chỉ thêm chú thích khi rê chuột.</li>
<li>Cột Đồng bộ đổi icon vương miện / người / dấu X thành ô đồng bộ chuẩn; cách đồng bộ đưa vào rê chuột.</li>
<li>Cột ngày bỏ in đậm.</li>
</ul></div>
<div class="pg"><h4>Quản lý ADS</h4><ul class="todo">
<li>Cột "TT" chấm đổi sang cột Trạng thái nhãn chữ.</li>
<li>Cột Via, BM giữ dạng icon kèm "sống/tổng" nhưng làm đủ theo mục 2.5: màu theo tình trạng, chú thích khi rê chuột, bấm mở hộp tài sản liên kết, cho sắp xếp.</li>
<li>Cột BM gốc: "+N" rê chuột hiện danh sách, bấm mở hộp tài sản liên kết.</li>
<li>Cột Đồng bộ đổi icon mắt xích thành ô đồng bộ chuẩn; danh sách kiểm tra kết nối giữ ở phần rê chuột.</li>
<li>Cột Nhóm đổi icon thư mục có mũi tên thành thư mục, màu xám.</li>
<li>Tên cột "Spend", "TH Remain" đổi sang tiếng Việt; tiền dùng định dạng chung (đang có chỗ ghi "$ 100" có dấu cách).</li>
</ul></div>
<div class="pg"><h4>Quản lý Page</h4><ul class="todo">
<li>Cột "TT" chấm đổi sang cột Trạng thái nhãn chữ; tách hiển thị/ẩn khỏi xác minh (đã có cột Xác minh riêng).</li>
<li>Cột BM bỏ hai chấm sở hữu, chia sẻ (đưa vào rê chuột), đổi sang icon kèm "sống/tổng"; cột VIA dùng icon kèm "sống/tổng"; cột Quảng cáo dùng viên ba chấm.</li>
<li>Bấm tên Page mở hộp chi tiết; Facebook để ở nút riêng.</li>
<li>Cột "Đồng bộ lúc" đổi sang cột Đồng bộ chuẩn với thời gian tương đối.</li>
<li>Cột "Thẻ" đổi tên "Tag".</li>
</ul></div>
<div class="pg"><h4>Quản lý Pixel</h4><ul class="todo">
<li>Cột "TT" chấm đổi sang cột Trạng thái nhãn chữ.</li>
<li>Cột BM bỏ hai chấm sở hữu, chia sẻ (đưa vào rê chuột), đổi sang icon kèm "sống/tổng"; cột VIA dùng icon kèm "sống/tổng"; cột Tài khoản QC dùng viên ba chấm; cột Đối tác, Người được gán dùng icon kèm tổng, màu xám. Giữ chip "Chưa lấy chi tiết" vì đó là trạng thái riêng.</li>
<li>Bấm tên Pixel mở hộp chi tiết Pixel, không nhảy sang BM đầu tiên.</li>
<li>Cột "Đồng bộ lúc" đổi sang cột Đồng bộ chuẩn; cột ngày bỏ in đậm.</li>
<li>Cột "Thẻ" đổi tên "Tag".</li>
</ul></div>
<div class="pg"><h4>Proxy</h4><ul class="todo">
<li>Cột "TT" đổi sang cột Trạng thái nhãn chữ, nhãn tiếng Việt ("Sống", "Đang kiểm tra", "Chết"), có giải thích khi rê chuột.</li>
<li>Cột VIA đổi từ viên ba chấm sang icon kèm "sống/tổng"; số VIA lâu không dùng đưa vào phần rê chuột.</li>
<li>Cột "Lần check" đổi tên "Lần kiểm tra", dùng thời gian tương đối chuẩn có chuyển cam.</li>
<li>Thêm chip "Tất cả nhóm"; nút Tải lại về đúng vị trí; cột "#" đánh số nối tiếp.</li>
<li>Hộp chọn proxy: cột tải đổi từ chữ "{n} VIA" kèm "n DIE" sang icon kèm "sống/tổng".</li>
</ul></div>
<div class="pg"><h4>Quản lý Campaign</h4><ul class="todo">
<li>Cột Trạng thái phân phối dùng nhãn chữ chuẩn, nhãn tiếng Việt (đang ghi "Paused", "With issues").</li>
<li>Tên cột "Budget", "Cost/Result", "Ends", chữ "Ongoing" đổi sang tiếng Việt.</li>
<li>Ô đếm Nhóm QC, Quảng cáo đổi sang viên ba chấm, chấm theo tình trạng phân phối.</li>
<li>Thêm cột "#"; dòng đếm "{n} campaigns" đổi sang tiếng Việt.</li>
</ul></div>
<div class="pg"><h4>Quản lý thẻ</h4><ul class="todo">
<li>Cột BM dùng icon kèm "sống/tổng"; cột Ads, Hóa đơn dùng viên ba chấm; ô trống "—" thay vì "-".</li>
<li>Thanh công cụ về đúng thứ tự chung; nhãn "Column settings" đổi sang tiếng Việt.</li>
<li>Icon thẻ ở menu đổi từ cái ví sang thẻ tín dụng.</li>
<li>Thêm cột "#".</li>
</ul></div>
<div class="pg"><h4>Bảng trong trang chi tiết</h4><ul class="todo">
<li>Chi tiết VIA, bảng BM: cột Via bỏ viên màu kiểu cũ, dùng icon kèm "sống/tổng"; cột TKQC dùng viên ba chấm; cột Admin dùng icon hai người kèm tổng, màu xám; ô trống "—" thay vì "0"; cột "Owned", "Shared" đổi tên "Sở hữu", "Chia sẻ".</li>
<li>Chi tiết VIA, bảng TKQC: cột Via, BM bỏ màu cố định xanh lá / xanh dương, dùng icon kèm "sống/tổng" (xám khi chưa có dữ liệu tình trạng).</li>
<li>Chi tiết BM, tab Đối tác: cột "TKQC chia sẻ" dùng viên ba chấm.</li>
<li>Chi tiết BM, tab Share TKQC: cột Share đổi từ chữ "{n} BM" sang icon kèm "sống/tổng".</li>
</ul></div>
<div class="pg"><h4>Dashboard và Quản trị</h4><ul class="todo">
<li>Dashboard BM: "n VIA", "sống die / tổng" và dãy chấm không có tổng đổi sang ô đếm theo mục 2.5 (VIA, BM dùng icon kèm "sống/tổng", TKQC dùng viên ba chấm); bấm mở hộp tài sản liên kết.</li>
<li>Quản trị / Rủi ro: bảng BM khách và BM chưa sao lưu bỏ dãy chấm tự dựng, dùng ô đếm theo mục 2.5.</li>
<li>Quản trị / Thành viên: cột Tài sản được cấp dùng icon đối tượng kèm số, màu xám (đây là số được cấp, không có tình trạng).</li>
<li>Quản lý Tag: ô "0 tài sản" đổi thành "—".</li>
</ul></div>
</div>
</section>
<!-- ================= PHẦN 4 ================= -->
<section class="block" id="p4">
<h2>Phần 4. Ghi chú cho dev</h2>
<ul>
<li>Hiện có nhiều bản tự chép của cùng một ô trong từng trang: ô đếm (5 bản, 3 kiểu nhìn), ô nhiều số (4 bản và 2 bản viết tay ở trang Rủi ro), ô ngày, ô ghi chú, chip "Tất cả nhóm" (6 bản). Gộp mỗi loại thành một ô dùng chung rồi thay ở mọi trang.</li>
<li>Một số ô dùng chung đã có sẵn nhưng không trang nào dùng: <code>CellCountPill</code>, <code>CellMultiStat</code>, <code>CellSync</code>, <code>CellNote</code>, <code>CellDate</code> trong <code>components/base/cells.tsx</code>, các ô trong <code>components/product/asset</code> và <code>components/product/sync</code>. Các ô này là kiểu cũ, màu viết cứng. Chọn một: nâng cấp chúng theo chuẩn ở đây, hoặc xóa đi để không ai dùng nhầm.</li>
<li>Ô nhiều số ở Quản lý BM (<code>MultiStatCell</code> trong trang BM) là mẫu chuẩn cho viên ba chấm. Kiểu icon kèm "sống/tổng" và icon kèm tổng làm thành một ô dùng chung thứ hai, nhận đối tượng, số sống và tổng; không có số sống thì tự hiện xám.</li>
<li>Tiêu đề trang đang viết cứng icon tia sét trong <code>components/dashboard/header.tsx</code>. Cần cho mỗi trang truyền icon của mình.</li>
</ul>
</section>
<!-- ================= PHẦN 5 ================= -->
<section class="block" id="p5">
<h2>Phần 5. Thống nhất và cần chốt</h2>
<h3 id="s51">5.1. Đã thống nhất: ô đếm VIA, BM, TKQC, Pixel</h3>
<p>Bốn mẫu dưới đây lấy từ các cột đang chạy trên web, là chuẩn cho mọi bảng có số đếm của bốn đối tượng này. Quy tắc chi tiết ở mục 2.5.</p>
<div class="kinds">
<div class="kind"><div class="who">VIA</div>
<div class="demo"><span class="ic c-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"/><path d="M10 19v-3.96 3.15"/><path d="M7 19h5"/><rect width="6" height="10" x="16" y="12" rx="2"/></svg>1/1</span> <span class="ic c-orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"/><path d="M10 19v-3.96 3.15"/><path d="M7 19h5"/><rect width="6" height="10" x="16" y="12" rx="2"/></svg>1/2</span></div>
<p style="margin:.3rem 0 0;font-size:.9rem">Chip nền nhạt, icon kèm "sống/tổng". Xanh lá khi sống hết, cam khi sống một phần, đỏ khi không cái nào sống, xám kèm tổng khi chưa có dữ liệu tình trạng. Mẫu: cột Via ở Quản lý TKQC.</p>
</div>
<div class="kind"><div class="who">BM</div>
<div class="demo"><span class="ic c-red"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>0/2</span> <span class="ic c-grey"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>2</span></div>
<p style="margin:.3rem 0 0;font-size:.9rem">Như VIA, icon toà nhà; BM tính là sống khi chưa bị vô hiệu. Mẫu: cột BM ở Quản lý TKQC.</p>
</div>
<div class="kind"><div class="who">TKQC</div>
<div class="demo"><span class="ms"><b>11</b><i></i><span class="g">3</span><span class="r">6</span><span class="o">2</span></span></div>
<p style="margin:.3rem 0 0;font-size:.9rem">Viên gồm tổng in đậm, vạch ngăn, chấm xanh lá đang hoạt động, chấm đỏ bị vô hiệu, chấm cam nợ. Mẫu: cột Ads sở hữu ở Quản lý BM.</p>
</div>
<div class="kind"><div class="who">Pixel</div>
<div class="demo"><span class="ms"><b>5</b><i></i><span class="g">5</span><span class="b">0</span></span></div>
<p style="margin:.3rem 0 0;font-size:.9rem">Viên gồm tổng in đậm, vạch ngăn, chấm xanh lá sở hữu, chấm xanh dương được chia sẻ. Mẫu: cột Pixel ở Quản lý BM.</p>
</div>
</div>
<p>Ô nào cũng vậy: bấm mở hộp tài sản liên kết đúng tab, rê chuột hiện chú thích, sắp xếp được, ô trống là "—".</p>
<div class="note">Cho dev: mẫu VIA, BM đang là <code>CountPill</code> viết riêng trong trang Quản lý TKQC; mẫu TKQC, Pixel là <code>MultiStatCell</code> viết riêng trong trang Quản lý BM. Tách hai ô này thành ô dùng chung rồi thay ở mọi trang, không chép thêm bản mới.</div>
<h3 id="s52">5.2. Phạm vi sửa đợt này</h3>
<p>Quản lý VIA, Quản lý BM, Quản lý TKQC và trang chi tiết của ba đối tượng này. Mỗi dòng ghi cột, cách hiện tại và đổi sang mẫu nào.</p>
<div class="pages">
<div class="pg"><h4>Quản lý VIA</h4><ul>
<li>Cột BMs: số trần trên nền tím, đổi sang mẫu BM. Server cần trả thêm số BM sống; chưa có thì hiện icon kèm tổng, màu xám.</li>
<li>Cột TKQC: số trần trên nền xanh, đổi sang mẫu TKQC. Server cần trả số theo tình trạng; chưa có thì chỉ hiện tổng.</li>
</ul></div>
<div class="pg"><h4>Quản lý BM</h4><ul>
<li>Cột Via: chip "n/m" không icon, n là số VIA có trong hệ thống, m là số admin của BM (đây là độ khớp admin, không phải sống/tổng). Đổi sang mẫu VIA, độ khớp admin đưa vào phần rê chuột, ví dụ "3 VIA: 2 sống, 1 die. Khớp 3/5 admin". Xem mục 5.4.</li>
<li>Cột Ads sở hữu, Ads trung gian, Pixel: đúng mẫu, giữ nguyên.</li>
</ul></div>
<div class="pg"><h4>Quản lý TKQC</h4><ul>
<li>Cột Via, BM: đúng mẫu, giữ nguyên. Icon VIA xem mục 5.4.</li>
</ul></div>
<div class="pg"><h4>Chi tiết VIA</h4><ul>
<li>Tab BM liên kết, cột Via: viên tự dựng chấm xanh ngọc kèm tổng, đổi sang mẫu VIA.</li>
<li>Tab BM liên kết, cột TKQC: viên tự dựng chấm xanh dương kèm tổng, đổi sang mẫu TKQC.</li>
<li>Tab BM liên kết, cột Admin: viên tím icon người, ô trống ghi "0". Đổi sang icon hai người kèm tổng, màu xám (số người dùng, không có tình trạng); ô trống "—".</li>
<li>Tab BM liên kết, cột "Owned", "Shared": số trần, đổi tên "Sở hữu", "Chia sẻ".</li>
<li>Tab TKQC trực tiếp và TKQC qua BM, cột Via, BM: icon kèm tổng, màu cố định (VIA xanh lá, BM xanh dương), không có số sống. Đổi sang mẫu VIA, mẫu BM.</li>
</ul></div>
<div class="pg"><h4>Chi tiết BM</h4><ul>
<li>Tab TKQC sở hữu, TKQC client: dùng lại bảng TKQC của chi tiết VIA, sửa bảng đó là xong.</li>
<li>Tab Đối tác, cột TKQC chia sẻ: viên xanh icon thẻ tín dụng kèm tổng, đổi sang mẫu TKQC.</li>
<li>Tab Share TKQC, cột Share: chữ "{n} BM", đổi sang mẫu BM.</li>
</ul></div>
<div class="pg"><h4>Chi tiết TKQC</h4><ul>
<li>Tab BM liên kết: dùng lại bảng BM của chi tiết VIA, sửa bảng đó là xong.</li>
</ul></div>
</div>
<p style="color:var(--muted)">Không thuộc phạm vi: số đi kèm nhãn ở thanh bên trái và khối tổng quan của trang chi tiết; tab VIA của chi tiết BM và chi tiết TKQC (dạng thẻ, không phải bảng).</p>
<h3 id="s53">5.3. Các trang khác cũng có ô đếm này</h3>
<p>Sửa sau đợt trên, việc cụ thể đã có trong Phần 3.</p>
<ul>
<li><b>Quản lý Page:</b> BM (viên sở hữu, chia sẻ), VIA (icon kèm tổng, xanh dương), Quảng cáo (icon loa kèm tổng).</li>
<li><b>Quản lý Pixel:</b> BM (viên sở hữu, chia sẻ), VIA (icon kèm tổng, xám), Tài khoản QC (icon loa kèm tổng).</li>
<li><b>Proxy:</b> VIA (viên ba chấm theo hoạt động 7 ngày).</li>
<li><b>Hộp chọn proxy:</b> cột tải ghi "{n} VIA" kèm "n DIE" màu đỏ.</li>
<li><b>Đối soát:</b> Via (icon người kèm sống/tổng, viết tay riêng), BM (icon toà nhà kèm tổng, xanh dương).</li>
<li><b>Quản lý thẻ:</b> BM (icon toà nhà kèm số), Tài khoản QC (icon loa kèm số, xanh lá).</li>
<li><b>Dashboard BM:</b> Owned Ads (dãy chấm không có tổng), Ads ("sống die / tổng"), VIA ("{n} VIA").</li>
<li><b>Quản trị / Rủi ro:</b> BM khách cột "TKQC đang share", BM chưa sao lưu cột "Admin matched", đều là viên viết tay.</li>
<li><b>Quản trị / Thành viên:</b> "{n} VIA", "{n} BM", "{n} Ads" là số được cấp, không có tình trạng.</li>
<li><b>Quản lý Tag:</b> "{n} tài sản".</li>
<li><b>Instagram:</b> BM, TKQC là số trần. Trang này để riêng, chưa đưa vào Phần 3.</li>
</ul>
<p style="color:var(--muted)">Không có ô đếm loại này: Campaign, Trang chủ, Nhóm, API key.</p>
<h3 id="s54">5.4. Cần chốt</h3>
<div class="decide"><b class="q">Cột Trạng thái dùng nhãn chữ hay chấm màu.</b>Đề xuất nhãn chữ vì đọc được ngay, không phải rê chuột, và VIA có nhiều trạng thái (checkpoint kèm mã) không gói được vào một chấm. Đổi lại cột rộng hơn khoảng gấp đôi.</div>
<div class="decide"><b class="q">Icon VIA trong ô đếm.</b>Quản lý TKQC, Đối soát và bảng TKQC trong chi tiết VIA đang dùng hình người; Quản lý Page, Quản lý Pixel và hộp tài sản liên kết dùng màn hình cạnh điện thoại như Phần 1. Đề xuất màn hình cạnh điện thoại, vì hình người đã dùng cho Người dùng trong BM và cột Admin.</div>
<div class="decide"><b class="q">Cột Via ở Quản lý BM đổi nghĩa.</b>Hiện cột này là độ khớp admin (VIA có trong hệ thống trên số admin của BM) và bấm vào mở hộp Khớp admin. Đề xuất đổi sang sống/tổng như mọi nơi, độ khớp admin đưa vào phần rê chuột, hộp Khớp admin mở từ menu của dòng. Đổi lại mất cái nhìn nhanh "BM còn thiếu VIA".</div>
<div class="decide"><b class="q">Chấm xanh lá ở ô Pixel.</b>Ở ô Pixel xanh lá nghĩa là sở hữu, mọi chỗ khác xanh lá là sống. Đề xuất giữ như hiện tại vì Pixel không có sống, die, và chú thích khi rê chuột ghi rõ "sở hữu".</div>
</section>
</div>
</body>
</html>
Số dòng: 601