:root {
--ink: #1f2430;
--muted: #5b6472;
--line: #e3e7ee;
--bg: #fbfbfd;
--card: #ffffff;
--accent: #2f6fed;
--accent-soft: #eaf1ff;
--good: #1a8754;
--good-bg: #e9f7ef;
--warn: #b8860b;
--warn-bg: #fdf6e3;
--bad: #c0392b;
--bad-bg: #fdecea;
/* Nang cap nen thuong hieu (28/09/2026, yeu cau chinh sua RIENG phan nen —
xem ghi chu o body/header.top ben duoi). CHI dung trang tri nen, KHONG
dung cho nut/trang thai/logic — --accent (xanh) giu nguyen, khong doi,
de khong lam thay doi bat ky thanh phan chuc nang nao ngoai pham vi. */
--brand-orange: #f2872e;
--brand-red: #e4222a;
/* THIET KE LAI TOAN BO GIAO DIEN (28/09/2026, tham khao go.noti.vn) — them
thang token con thieu (truoc gio KHONG co thang khoang cach/chu/bo goc/
do bong, moi noi tu dinh nghia rieng, ~25+ co chu rai rac khong theo quy
tac nao). CHI la them bien moi + sua 1 bug tham chieu bien khong ton tai
(--border ben duoi) — KHONG doi gia tri --accent/--good/--warn/--bad/
--brand-* da co, tranh doi mau chuc nang ngoai pham vi.
Thang khoang cach 4/8/12/16/20/24/32/40px — dung cho padding/gap/margin
THAY THE dan cac gia tri le (10px,14px,18px,22px...) dang rai rac. */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
/* Thang chu — ty le tham khao go.noti.vn (H1:H2:body ~1.6:1.3:1), gop
~25 co le hien co ve 7 muc. Khong doi font-family (Segoe UI/Helvetica
Neue/Arial/Noto Sans giu nguyen, la stack he thong an toan, khong can
Inter/Google Fonts them thu vien ngoai). */
--fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-base: 0.92rem; --fs-md: 1rem;
--fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.8rem;
/* Thang bo goc — mem/hien dai hon (tham khao go.noti.vn dung 8-12px cho
the noi dung), giu --radius-sm gan voi 8px cu de nut/o nhap khong doi
dot ngot, --radius-lg/-xl danh cho card/banner/popup lon. */
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
/* Thang do bong — nhe hon han box-shadow rai rac hien co (nhieu cho dung
0 20px 60px rgba(0,0,0,.18) qua nang cho 1 the noi dung thuong). */
--shadow-sm: 0 1px 2px rgba(20,20,30,0.06), 0 2px 8px rgba(20,20,30,0.06);
--shadow-md: 0 4px 16px rgba(20,20,30,0.10);
--shadow-lg: 0 12px 32px rgba(20,20,30,0.14);
/* SUA BUG THAT (28/09/2026): .btn-outline (duoi) tham chieu var(--border)
— bien nay CHUA TUNG duoc dinh nghia trong :root nay, trinh duyet fallback
ve mac dinh (thuong la mau den nhat), khong phai mau --line dinh dung.
Dinh nghia lai cho dung y goc, KHONG doi ten .btn-outline/cach dung. */
--border: var(--line);
}
/* Che do toi (lam lai lan 2, 28/09/2026) — chi doi GIA TRI bien mau, khong
doi ten/cach dung bien nao (moi noi trong CSS deu dung var(--...) nen tu
dong an theo). --accent/--good/--warn/--bad duoc lam SANG hon 1 chut de
du tuong phan tren nen toi (WCAG), y nghia mau giu nguyen, khong doi
logic hien thi du lieu. Kich hoat qua data-theme tren (xem
theme-toggle.js), mac dinh light neu chua chon lan nao — KHONG tu bat
theo prefers-color-scheme. Lan nay watermark logo (body::after, .empty/
.loading, .modal-head, .gap-modal-head) DA co background-blend-mode:
multiply san nen se khong con bi hien "khung" trang nhu ban truoc. */
:root[data-theme="dark"] {
--ink: #e7eaf1;
--muted: #9aa4b5;
--line: #2b3142;
--bg: #11141c;
--card: #1a1f2b;
--accent: #5b93f5;
--accent-soft: rgba(91,147,245,.16);
--good: #35c281;
--good-bg: rgba(53,194,129,.14);
--warn: #e0ac1f;
--warn-bg: rgba(224,172,31,.14);
--bad: #ef6f61;
--bad-bg: rgba(239,111,97,.14);
}
:root[data-theme="dark"] .tap-bonus-toggle {
border-color: #6b5220; background: rgba(224,172,31,.14); color: #e0ac1f;
}
* { box-sizing: border-box; }
body {
margin: 0;
/* Doi sang Inter (28/09/2026, yeu cau phong chu giong trang tham khao
go.noti.vn/blog — xac nhan qua CSS that cua trang do, ho dung Inter).
Nap qua Google Fonts o tung trang (xem cac file .html) —
giu nguyen chuoi fallback he thong cu o CUOI de neu font ngoai chua
kip tai/loi mang thi van hien binh thuong, khong vo giao dien. */
font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
/* Nen trang trai nhe theo mau thuong hieu Sonnet (cam->do), sang/thoang
lam chu dao — 2 quang mau rat nhat (dam 7-9%) o goc tren-phai/duoi-trai,
phia sau TOAN BO noi dung. Khong dung background-attachment:fixed (tranh
loi hien thi tren Safari mobile khi cuon) — cuon binh thuong theo trang. */
background-color: var(--bg);
background-image:
radial-gradient(1100px 620px at 90% -12%, rgba(242,135,46,0.10), transparent 60%),
radial-gradient(950px 560px at -10% 106%, rgba(228,34,42,0.08), transparent 62%);
background-repeat: no-repeat, no-repeat;
color: var(--ink);
line-height: 1.5;
position: relative;
}
/* Watermark icon Sonnet rat nhat o goc duoi-phai nen tong (28/09/2026) — dung
DUNG file icon goc cat tu logo that (public/assets/brand/sonnet-icon.png,
KHONG tu ve lai, giu nguyen hinh dang/ty le), tach rieng thanh 1 lop
::after CO opacity RIENG (background-blend-mode khong giam duoc do dam mau,
phai dung opacity that tren 1 phan tu rieng) — 6% de "goi lien tuong", KHONG
noi bat, khong che noi dung (position:fixed, z-index:-1, pointer-events:none). */
body::after {
content: "";
position: fixed; inset: 0; z-index: -1; pointer-events: none;
opacity: 0.06;
background: url("assets/brand/sonnet-logo-full.png") no-repeat bottom 24px right 28px / 220px auto;
/* background-blend-mode:multiply (28/09/2026, anh bao thay "khung" o goc
duoi-phai o che do toi) — file PNG co nen TRANG dac (khong trong suot),
tren nen sang truoc gio khong thay vi trang~trang, nhung tren nen TOI
(dark mode) phan nen trang vuong cua file hien ro thanh 1 khung sang
lac long. Multiply lam trang "bien mat" vao dung mau nen thuc te (sang
hay toi deu dung), chi con lai hinh logo mo, dung y watermark. */
background-blend-mode: multiply;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 20px 80px; }
/* Banner quang cao (20/08/2026) — 4 vi tri: tren dau + cuoi trang (nam
trong .wrap, ngang 1180px) va 2 "skyscraper" doc 2 ben (nam ngoai .wrap,
fixed theo tam man hinh — chi hien khi man hinh du rong >=1550px, tu an
khi hep hon de khong de len noi dung). Anh Trung xac nhan: 4 vi tri, MOI
vi tri 1 anh CO DINH (khong xoay vong), ap dung index.html/koc.html/
admin.html (khong ap dung login.html — layout khac, khong dung .wrap).
Anh se tu thiet ke anh roi bo vao public/ads/ dung ten file duoi day —
slot TU AN (khong hien khung/icon vo trong) neu chua co file (onerror). */
.ad-slot { text-align: center; margin: 0 auto 16px; }
.ad-slot img { display: block; width: 100%; height: auto; border-radius: 10px; margin: 0 auto; }
.ad-top, .ad-bottom { max-width: 1180px; }
.ad-top img, .ad-bottom img { max-width: 100%; }
.ad-top .ad-desktop, .ad-bottom .ad-desktop { aspect-ratio: 1180 / 120; }
.ad-top .ad-mobile, .ad-bottom .ad-mobile { display: none; aspect-ratio: 320 / 100; }
@media (max-width: 639px) {
.ad-top .ad-desktop, .ad-bottom .ad-desktop { display: none; }
.ad-top .ad-mobile, .ad-bottom .ad-mobile { display: block; max-width: 320px; }
}
.ad-skyscraper {
position: fixed; top: 50%; transform: translateY(-50%);
width: 160px; height: 600px; z-index: 5;
}
.ad-skyscraper img { width: 160px; height: 600px; object-fit: cover; border-radius: 10px; }
.ad-skyscraper-left { left: calc(50% - 770px); }
.ad-skyscraper-right { right: calc(50% - 770px); }
@media (max-width: 1549px) { .ad-skyscraper { display: none; } }
header.top {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 28px; border-radius: 14px; margin-bottom: 20px;
/* SUA LAN 2 (28/09/2026, anh bao mau van chua giong): hut PIXEL THAT theo
DUNG TRUC DOC cua logo (7 diem tu tren xuong duoi, khong chi 2 dau-cuoi)
-> #f2762e (tren) -> #ee4b2c (giua) -> #ec1e2a (duoi), huong 180deg (doc
tren-xuong-duoi) THAY VI 135deg cheo — logo goc chuyen mau THANG DUNG,
khong cheo. BO lop den phu truoc do (lam sai mau, day la nguyen nhan
"chua giong") — doi sang dung text-shadow tren chu (h1/.meta ben duoi)
de dam bao doc duoc MA KHONG doi 1 chut nao mau nen. */
background: linear-gradient(180deg, #f2762e 0%, #ee4b2c 50%, #ec1e2a 100%);
color: #fff;
/* position:relative + overflow:hidden de chua 2 lop trang tri ::before/
::after ben duoi (tia sang cheo + watermark icon) go gon trong bo goc
tron cua banner, khong tran ra ngoai. */
position: relative; overflow: hidden;
}
/* Lam GON HAN banner (28/09/2026, lan 2 — anh tiep tuc bao con "khung"
sang la vung sang o goc tren-phai gan nut Dang xuat, chinh la diem loe
sang ::before them lan truoc + watermark ::after). Gio da co logo THAT
(.header-logo, hinh tron trang ro net) o ben trai roi nen KHONG can lop
watermark/loe sang trang tri nao khac tren banner nua — BO han ca 2, chi
con gradient cam-do phang, dung tinh than "gon, sang" toi da. */
header.top > * { position: relative; z-index: 1; }
/* Logo Sonnet THAT (khong phai watermark mo) ben trai tieu de banner
(28/09/2026, anh bao "khong thay logo dau" — watermark mo 12% qua nhat,
khong tinh la "co logo"). Dung LAI dung file sonnet-icon.png da co (nen
trang, khong doi hinh dang/mau), dat trong 1 khung tron trang de tach
biet ro voi nen gradient cam-do, giong kieu "logo badge" pho bien tren
banner mau. object-fit:contain + padding de icon khong bi cat sat mep. */
.header-brand { display: flex; align-items: center; gap: var(--sp-3); }
.header-logo {
width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
background: #fff; padding: 6px; object-fit: contain;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
/* Chu "SONNET GROUP" ben duoi icon (28/09/2026, anh yeu cau them chu ten
cong ty, khong chi icon) — xep DOC voi icon giong dung bo cuc logo goc
(icon tren, chu "SONNET" duoi), tach rieng voi tieu de trang ben canh. */
.header-brand-logo-group { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.header-brand-name {
font-size: .62rem; font-weight: 800; letter-spacing: .05em; color: #fff;
white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
@media (max-width: 480px) {
.header-logo { width: 36px; height: 36px; padding: 5px; }
.header-brand-name { font-size: .56rem; }
}
/* 22/08 (audit UX, P1): ten hien thi/han dung dai co the day nut Dang xuat
ra ngoai tren mobile (header khong wrap). Cho wrap 2 hang, nut Dang xuat
luon o hang dau de luon bam duoc. */
@media (max-width: 480px) {
header.top { flex-wrap: wrap; row-gap: 10px; padding: 16px 18px; }
header.top div[style*="display:flex"] { flex-wrap: wrap; justify-content: flex-end; }
/* 28/09/2026: thu nho + giau bot watermark tren mobile — banner hep lai
(padding 16px 18px) nen watermark 260px se qua lon so voi khong gian,
de de len vung chua nut "Dang xuat" khi header wrap 2 hang. */
header.top::after { width: 130px; height: 130px; top: -22%; right: -8%; opacity: 0.12; }
}
/* Thanh dinh tren mobile (23/08, yeu cau anh Trung) — "Loc uu dai HH"/"SP da
lam co the tang hh"/Bang-Luoi LUON hien khi cuon xuong, khong can cuon
nguoc len toolbar. JS (updateStickyLayout trong categories.js) DI CHUYEN
cac phan tu THAT (khong tao ban sao) vao day nen giu nguyen toan bo hanh
vi/listener cu. Rong tren desktop — khong hien anh huong gi PC. */
@media (max-width: 480px) {
.mobile-pinned-bar {
position: sticky; top: 0; z-index: 15;
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
background: var(--bg); padding: 8px 0; margin: 0 0 4px;
}
.mobile-pinned-bar:empty { display: none; }
/* Trong thanh dinh, .tap-bonus-toggle/.vt-btn giu kieu goc nhung khong can
white-space:normal xuong dong nhu trong toolbar (thanh dinh hep hon,
danh cho nhan NGAN "Loc: co uu dai hoa hong" — nhan dai cua rieng #TAP
van duoc phep xuong dong nhu binh thuong qua rule .tap-bonus-toggle o
tren, khong bi ghi de o day). */
.mobile-pinned-bar .vt-btn { padding: 7px 12px; }
}
/* Dong bang phan tren tren PC (23/08, yeu cau anh Trung) — header + thanh
tab + (JS chuyen them) hang ngay/toolbar cua tab dang mo deu nam trong 1
khung sticky duy nhat, KHONG can tinh offset rieng tung lop. CHI ap dung
tren >480px — duoi do dung co che ghim rieng o tren.
RIENG tieu de cot (thead) KHONG lam sticky duoc voi kien truc hien tai:
".table-scroll" can overflow-x:auto de cuon ngang (bang rong toi 1600px,
khong the bo), nhung dac ta CSS bat buoc overflow-y cung thanh "auto" bat
ke khai bao gi (da do dac xac nhan) — bien no thanh scroll-container doc
NGOAI Y MUON, "cuop" mat noi neo sticky cua thead khoi trang. Day la gioi
han nen tang (khong phai thieu code) — can 1 header rieng dong bo cuon
ngang bang JS moi lam duoc, chua trien khai (xem trao doi voi anh Trung
23/08 — --desktop-thead-top van con o categories.js, chua co CSS dung no,
khong gay loi gi, chi la bien chua dung). */
@media (min-width: 481px) {
.desktop-sticky-wrap {
position: sticky; top: 0; z-index: 25;
background: var(--bg); padding-bottom: 10px; margin-bottom: 4px;
}
.desktop-sticky-wrap .tab-meta-row,
.desktop-sticky-wrap .toolbar,
.desktop-sticky-wrap .seller-toolbar {
margin-top: 10px;
}
}
/* text-shadow (28/09/2026) — giu nguyen mau nen banner DUNG mau logo that
(khong con lop den phu), dam bao chu trang van doc duoc tren vung sang
(dau cam cua gradient) bang bong do o chu thay vi lam toi nen. .meta doi
mau tu #e4ecff (xanh, sot lai tu theme cu) sang trang mo — hop voi nen
cam-do moi, tranh lech tong mau. */
/* Phan cap chu (28/09/2026, yeu cau rieng) — tieu de trang can NOI BAT ro
rang hon nhan phu (.meta) di kem, khong doi chu/y nghia, chi doi
size/weight. Tang tu 1.3rem/mac dinh len 1.5rem/800 de ro rang la tieu
de cao nhat trang; .meta giu nguyen mau/kich thuoc (da la nhan phu dung
dan, khong can doi). */
header.top h1 { margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.01em; text-shadow: 0 1px 4px rgba(0,0,0,0.35); }
header.top .meta { font-size: 0.82rem; color: rgba(255,255,255,0.92); text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
header.top button {
background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4);
border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 0.85rem;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
header.top button:hover { background: rgba(255,255,255,0.28); }
.toolbar {
display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
padding: var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow-sm);
}
.toolbar select, .toolbar input[type="search"] {
padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-base);
}
.tier-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.tier-tag-new { background: var(--good-bg); color: var(--good); }
.tier-tag-addmore { background: var(--accent-soft); color: var(--accent); }
.quiet-toggle {
display: flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--muted);
cursor: pointer; white-space: nowrap;
}
.quiet-toggle input { accent-color: var(--accent); }
tbody tr.regime-quiet { background: #fdf9f2; }
/* Bo loc "uu dai tang hoa hong" (20/08/2026) — truoc la checkbox xam
.quiet-toggle, anh Trung yeu cau lam NOI BAT de KOC thay "hoi" va muon
bam vao, khong con don dieu. Dung tong mau vang/hoa mai gan --warn (da co
san trong theme, hop ngu canh "uu dai/tien thuong" hon xanh --accent) +
icon 💰 + pill bo tron, sang han khi tich (":has" — trinh duyet noi bo
dung Chromium/Edge hien dai, khong can fallback IE). KHONG doi id/JS —
chi doi class + noi dung label, cac listener change() cu van hoat dong
nguyen ven. */
/* [hidden] phai co !important — CSS tac gia (display: inline-flex ben duoi)
LUON thang rule mac dinh [hidden]{display:none} cua trinh duyet du cung do
dac hieu (0,1,0 ca 2), vi rule tac gia luon uu tien hon UA stylesheet. Bug
that 25/08: element.hidden=true khong an duoc .tap-bonus-toggle, so lieu cu
("191...") van hien sau khi bam "Doi kenh" du DOM property da dung true. */
.tap-bonus-toggle[hidden] { display: none !important; }
.tap-bonus-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px 7px 12px; border-radius: 999px; cursor: pointer;
border: 1.5px solid #e8c987; background: #fff8e8; color: #92650a;
font-size: 0.84rem; font-weight: 700; white-space: nowrap;
transition: background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.tap-bonus-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.tap-bonus-toggle .tbt-icon { font-size: 1rem; line-height: 1; }
.tap-bonus-toggle:hover { border-color: #d9a83f; box-shadow: 0 3px 12px rgba(184,134,11,.22); transform: translateY(-1px); }
.tap-bonus-toggle:has(input:checked) {
background: linear-gradient(135deg, #f0a828, #d98c1f); color: #fff; border-color: #d98c1f;
box-shadow: 0 4px 14px rgba(184,134,11,.4);
}
.tap-bonus-toggle:has(input:focus-visible) { outline: 2px solid #d98c1f; outline-offset: 2px; }
/* 22/08 (audit UX, P0): nhan dai (vd #TAP "SP ban da lam co the tang hoa
hong ngay N (...)") lam .tap-bonus-toggle vuot man hinh mobile vi
white-space:nowrap goc dung cho nhan ngan. Duoi 480px cho phep xuong dong,
khong con ep 1 dong — khong dung overflow-x:hidden vi se cat mat count. */
@media (max-width: 480px) {
.tap-bonus-toggle {
white-space: normal; max-width: 100%; overflow-wrap: anywhere;
line-height: 1.3;
}
}
.dropdown { position: relative; }
.dropdown-btn {
padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
font-size: var(--fs-base); cursor: pointer; min-width: 160px; text-align: left;
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
transition: border-color .15s;
}
.dropdown-btn:hover { border-color: var(--accent); }
.dropdown-btn .chevron { color: var(--muted); font-size: 0.75rem; }
.dropdown-panel {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
box-shadow: var(--shadow-md); padding: var(--sp-2); min-width: 260px;
max-height: 320px; overflow-y: auto;
}
.dropdown-panel label {
display: flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-2); border-radius: var(--radius-sm);
font-size: var(--fs-base); cursor: pointer;
}
.dropdown-panel label:hover { background: var(--accent-soft); }
.dropdown-panel input[type="checkbox"] { accent-color: var(--accent); }
.toolbar input[type="search"] { flex: 1; min-width: 180px; }
.toolbar .spacer { flex: 1; }
.btn {
padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--accent);
background: var(--accent); color: #fff; font-size: var(--fs-sm); cursor: pointer; text-decoration: none;
transition: opacity .15s, box-shadow .15s;
}
.btn:hover { opacity: 0.9; box-shadow: var(--shadow-sm); }
.btn-outline {
padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--border);
background: transparent; color: var(--muted); font-size: var(--fs-sm); cursor: pointer;
transition: border-color .15s, color .15s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn[disabled], .btn.disabled {
background: var(--line); border-color: var(--line); color: var(--muted); cursor: not-allowed; pointer-events: none;
}
/* Da thu overflow-y:visible tuong minh de sticky thead hoat dong (23/08)
nhung KHONG AN — dac ta CSS bat buoc UA tu doi "visible" thanh "auto" cho
truc con lai bat cu khi nao 1 truc la auto/scroll/hidden (ap dung ca khi
khai bao overflow-x/overflow-y rieng, khong chi shorthand "overflow") —
da do dac: computed overflow-y luon la "auto" du CSS ghi "visible". Vi
the ".table-scroll" luon la 1 scroll-container ca truc doc, khien
position:sticky tren thead (o trong no) khong bao gio nhan dung "trang"
lam noi neo — day la gioi han that su cua nen tang, khong phai loi code.
Ket luan: sticky tieu de cot (thead) KHONG kha thi voi kien truc cuon
ngang hien tai neu khong lam them 1 header rieng dong bo cuon ngang bang
JS (phuc tap/rui ro hon, chua lam) — xem trao doi voi anh Trung 23/08. */
.table-scroll { overflow-x: auto; border-radius: var(--radius-md); }
table {
/* KHONG doi: width/min-width/table-layout — JS (col-resizer, mobile
name-col width hack) phu thuoc dung cac gia tri nay. */
width: 100%; min-width: 1100px; table-layout: fixed;
/* separate (khong phai collapse) + border-spacing:0 — BAT BUOC de
position:sticky tren th/td hoat dong dung dac ta CSS (xem giai thich
day du o khoi "Dong bang cot #/Anh" duoi day, 28/08/2026 mo rong tu
mobile-only sang MOI kich thuoc man hinh). Khong doi giao dien vi moi
cell chi dung border-bottom (khong co border doc) nen nhin gan nhu
khong khac gi collapse. */
border-collapse: separate; border-spacing: 0;
background: var(--card); border-radius: var(--radius-md);
}
thead th {
position: relative; text-align: left; font-size: var(--fs-xs); text-transform: uppercase;
letter-spacing: 0.04em; color: var(--muted); padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--line); cursor: pointer; white-space: normal;
overflow-wrap: break-word; line-height: 1.3; font-weight: 600;
transition: color .15s;
}
thead th:hover { color: var(--accent); }
thead th.num-col { text-align: center; }
tbody td {
padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); font-size: var(--fs-base);
overflow-wrap: anywhere; word-break: break-word;
}
tbody td.num-col { text-align: center; }
tbody tr:hover { background: var(--accent-soft); cursor: pointer; }
tbody tr:last-child td { border-bottom: none; }
/* Dong bang cot #/Anh khi cuon ngang (28/08/2026, mo rong tu mobile-only
sang MOI kich thuoc man hinh — truoc day chi mobile co (@media
max-width:480px ben duoi) vi doi border-collapse:collapse -> separate
tren desktop can kiem tra ky, gio da xac nhan an toan). "left" khac nhau
theo 2 nhom bang vi do rong cot 1 (#) khac nhau giua index.html (56px)
va koc.html (36px) — PHAI khop dung colgroup that cua tung nhom, sai so
se lam cot 2 (Anh) chong len cot 1 hoac ho 1 khe. */
#productTable th:nth-child(1), #productTable td:nth-child(1),
#sellerTable th:nth-child(1), #sellerTable td:nth-child(1),
#consensusTable th:nth-child(1), #consensusTable td:nth-child(1),
#top100Table th:nth-child(1), #top100Table td:nth-child(1),
#bpTable th:nth-child(1), #bpTable td:nth-child(1),
#tapTable th:nth-child(1), #tapTable td:nth-child(1) {
position: sticky; left: 0; z-index: 3; background: var(--card);
}
#productTable th:nth-child(2), #productTable td:nth-child(2),
#sellerTable th:nth-child(2), #sellerTable td:nth-child(2),
#consensusTable th:nth-child(2), #consensusTable td:nth-child(2),
#top100Table th:nth-child(2), #top100Table td:nth-child(2),
#bpTable th:nth-child(2), #bpTable td:nth-child(2),
#tapTable th:nth-child(2), #tapTable td:nth-child(2) {
position: sticky; left: 56px; z-index: 3; background: var(--card);
box-shadow: 2px 0 4px rgba(0,0,0,.08);
}
#nangCapTable th:nth-child(1), #nangCapTable td:nth-child(1),
#lamThemTable th:nth-child(1), #lamThemTable td:nth-child(1),
#datMoiTable th:nth-child(1), #datMoiTable td:nth-child(1) {
position: sticky; left: 0; z-index: 3; background: var(--card);
}
#nangCapTable th:nth-child(2), #nangCapTable td:nth-child(2),
#lamThemTable th:nth-child(2), #lamThemTable td:nth-child(2),
#datMoiTable th:nth-child(2), #datMoiTable td:nth-child(2) {
position: sticky; left: 36px; z-index: 3; background: var(--card);
box-shadow: 2px 0 4px rgba(0,0,0,.08);
}
#productTable tbody tr:hover td:nth-child(1), #productTable tbody tr:hover td:nth-child(2),
#sellerTable tbody tr:hover td:nth-child(1), #sellerTable tbody tr:hover td:nth-child(2),
#consensusTable tbody tr:hover td:nth-child(1), #consensusTable tbody tr:hover td:nth-child(2),
#top100Table tbody tr:hover td:nth-child(1), #top100Table tbody tr:hover td:nth-child(2),
#bpTable tbody tr:hover td:nth-child(1), #bpTable tbody tr:hover td:nth-child(2),
#tapTable tbody tr:hover td:nth-child(1), #tapTable tbody tr:hover td:nth-child(2),
#nangCapTable tbody tr:hover td:nth-child(1), #nangCapTable tbody tr:hover td:nth-child(2),
#lamThemTable tbody tr:hover td:nth-child(1), #lamThemTable tbody tr:hover td:nth-child(2),
#datMoiTable tbody tr:hover td:nth-child(1), #datMoiTable tbody tr:hover td:nth-child(2) {
background: var(--accent-soft);
}
.col-resizer {
position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize;
user-select: none; touch-action: none;
}
.col-resizer:hover, .col-resizer.resizing { background: var(--accent-soft); }
.score { font-weight: 700; font-size: var(--fs-md); color: var(--accent); white-space: nowrap; }
/* Nhan manh gia tri ngay/khoang thoi gian cua so lieu (vd "Cap nhat: ...",
"Video gan nhat: ...") — dung trong .sub (nhan phu mau nhat) de tach
RO gia tri ngay khoi cac phan con lai (nganh/shop/ma SP) van giu nguyen
muc nhat nhu cu, khong doi chu/gia tri, chi doi trinh bay. */
.date-strong { color: var(--ink); font-weight: 600; }
/* Class dung chung cho 1 so lieu CHINH trong bang du lieu (GMV/diem) — ap
dung co chon loc (khong phai moi cot), giup so quan trong noi bat hon
cac cot phu (so luong video/creator/refund/ctr...) van giu nguyen kieu
binh thuong. */
.metric-strong { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.id-cell { position: relative; }
.tag-stack {
position: absolute; top: 2px; right: 2px; display: flex; flex-direction: column;
align-items: flex-end; gap: 2px; pointer-events: none;
}
.corner-tag {
padding: 1px 6px; border-radius: 4px;
font-size: 0.64rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.level { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; }
.level-cao { background: var(--good-bg); color: var(--good); }
.level-trung { background: var(--warn-bg); color: var(--warn); }
.level-thap { background: var(--bad-bg); color: var(--bad); }
/* 28/09/2026: watermark icon Sonnet rat nhat phia sau thong bao "chua co du
lieu"/"dang tai" — dung chung 1 file voi nen tong, opacity thap nhat trong
4 vi tri (day la trang thai "trong", khong nen noi bat). position:relative
tren chinh .empty/.loading (co the la
hoac
, ca 2 deu hop le lam
containing block) + z-index:-1 tren ::before de dam bao luon nam SAU chu,
khong can sua HTML/JS dang tao ra cac phan tu nay. */
.empty, .loading { text-align: center; padding: var(--sp-8); color: var(--muted); position: relative; font-size: var(--fs-base); }
.empty::before, .loading::before {
content: "";
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 84px; height: 84px; z-index: -1; pointer-events: none;
background: url("assets/brand/sonnet-logo-full.png") no-repeat center / contain;
opacity: 0.05;
background-blend-mode: multiply;
}
/* .loading truoc gio giong het .empty (kho phan biet "dang tai" voi "khong
co du lieu") — them nhap-nhay nhe CHI cho .loading, khong doi text/DOM. */
.loading { animation: sn-pulse 1.4s ease-in-out infinite; }
@keyframes sn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* Login */
.login-box {
max-width: 360px; margin: 90px auto; background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: var(--sp-7); box-shadow: var(--shadow-md);
}
.login-box h1 { font-size: var(--fs-xl); font-weight: 800; margin: 0 0 4px; }
.login-box p.sub { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 20px; }
.login-box label { display: block; font-size: var(--fs-sm); color: var(--muted); margin: 12px 0 4px; }
.login-box input {
width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
font-size: var(--fs-md); background: var(--card); color: var(--ink); transition: border-color .15s ease;
}
.login-box input:focus { border-color: var(--accent); outline: none; }
.login-box button {
width: 100%; margin-top: 20px; padding: 11px; border: none; border-radius: var(--radius-sm);
background: var(--accent); color: #fff; font-size: var(--fs-md); font-weight: 600; cursor: pointer;
transition: opacity .15s ease;
}
.login-box button:hover { opacity: .92; }
.login-box .error { color: var(--bad); font-size: var(--fs-sm); margin-top: 12px; min-height: 1em; }
/* Product detail */
.back-link { display: inline-block; margin-bottom: 14px; color: var(--accent); text-decoration: none; font-size: 0.9rem; }
.product-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
/* Dai mau thuong hieu cam-do o dinh khung chi tiet san pham (28/09/2026,
anh bao trang nay khong co mau logo Sonnet — toan bo con lai (nut chon,
the trang thai tot/xau) la mau CHUC NANG, khong doi duoc). CHI ap dung
cho #card (id RIENG cua trang product.html), KHONG dung .product-card
(class nay con dung cho the san pham trong .card-grid o cac trang khac,
dung selector rieng de tranh anh huong noi khac). */
#card { position: relative; overflow: hidden; }
#card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
background: linear-gradient(90deg, var(--brand-orange), var(--brand-red));
}
.product-card h2 { margin: 0 0 4px; }
.product-card .sub { color: var(--muted); font-size: var(--fs-base); margin-bottom: 20px; }
.chart-wrap { margin-top: 8px; }
.chart-legend { display: flex; gap: 16px; font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }
.chart-legend span.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.cumulative-note {
margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--bg);
border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink); display: grid; gap: 4px;
}
.product-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
/* Trang chi tiet san pham khong co
rieng (ten san pham dong vai tro
tieu de trang) — lam ro rang hon bang size/weight tuong duong h1, khong
doi cau truc HTML. */
.product-head h2 { margin: 0 0 4px; font-size: var(--fs-xl); font-weight: 800; line-height: 1.3; }
.case-toggle-label { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--muted); }
.case-toggle { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.case-btn {
flex: 1; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--card); font-size: var(--fs-base); cursor: pointer; color: var(--ink);
transition: border-color .15s ease, background .15s ease;
}
.case-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
/* Nhan mo ta KHOANG NGAY cua so lieu GMV ben duoi — can du ro de nguoi
dung khong hieu nham "video moi" la trung binh moi luc, khac voi nhan
phu thuan tuy (nguon/thoi diem cap nhat) nen dung mau --ink + weight
600 thay vi --muted nhat nhu truoc. */
.gmv-section-label { margin-top: var(--sp-6); font-size: var(--fs-base); color: var(--ink); font-weight: 600; }
.gmv-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
.gmv-box { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-4); text-align: center; }
.gmv-box-label { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; }
.gmv-box-value { font-size: var(--fs-xl); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.warning-box {
margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--warn-bg);
color: #8a6500; font-size: var(--fs-sm); font-weight: 600; border: 1px solid #f0dca0;
}
.why-box { margin-top: var(--sp-6); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.why-box summary { cursor: pointer; font-weight: 700; font-size: var(--fs-md); margin-bottom: 10px; }
.perf-row { margin: 14px 0; }
.perf-row-top { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 6px; }
.perf-track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.perf-fill { height: 100%; border-radius: 999px; }
.perf-tag { font-size: var(--fs-sm); font-weight: 700; padding: 1px 9px; border-radius: 999px; }
.perf-1 { background: var(--bad-bg); color: var(--bad); }
.perf-2 { background: var(--warn-bg); color: var(--warn); }
.perf-3 { background: var(--accent-soft); color: var(--accent); }
.perf-4 { background: var(--good-bg); color: var(--good); }
.perf-5 { background: #e6f4ff; color: #0b5fa8; }
.perf-fill.perf-1 { background: var(--bad); }
.perf-fill.perf-2 { background: var(--warn); }
.perf-fill.perf-3 { background: var(--accent); }
.perf-fill.perf-4 { background: var(--good); }
.perf-fill.perf-5 { background: #0b5fa8; }
.koc-table-wrap { overflow-x: auto; }
.koc-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: var(--fs-sm); }
.koc-table th, .koc-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; }
.koc-table th { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.video-link-cell { white-space: nowrap; }
.video-link-cell a {
display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: var(--radius-sm);
font-size: var(--fs-xs); font-weight: 600; text-decoration: none; color: var(--accent);
background: var(--accent-soft); transition: background .15s ease, color .15s ease;
}
.video-link-cell a:hover { background: var(--accent); color: #fff; }
/* KOC Pro button — retained for koc.html.
28/09/2026: doi gradient xanh-tim (sot lai tu theme cu) sang cam-do thuong
hieu Sonnet cho dong bo voi banner/nen moi — chi doi mau, khong doi kich
thuoc/chuc nang. */
.btn-koc-pro {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 16px; border-radius: 8px;
background: linear-gradient(135deg, var(--brand-orange), var(--brand-red));
color: #fff; font-size: 0.85rem; font-weight: 600;
text-decoration: none; white-space: nowrap;
box-shadow: 0 2px 8px rgba(228,34,42,.35);
transition: opacity .15s, box-shadow .15s;
}
.btn-koc-pro:hover { opacity: .88; box-shadow: 0 4px 14px rgba(228,34,42,.45); }
/* 22/08 (feedback thuc te tren dien thoai that): cot "Link tang hh" (co
link TAP tang % hoa hong hay khong) la thu 4 sau #/Anh/San pham — tren
mobile phai vuot ngang moi thay, nhieu nguoi khong biet vuot nen bo lo
dung thong tin quan trong nhat. Thu gon 3 cot dau (rank/anh/ten) de cot
Link lot vao vung nhin ~350px KHONG can vuot — ap dung 6 bang co cung
thu tu cot (MCN/Seller/Consensus/Top100/BP/TAP; rieng bang Top Creator
#bc khong co cot Anh/Link nen khong ap). Dung !important vi
la inline, specificity cao hon stylesheet thuong. */
@media (max-width: 480px) {
/* table { min-width:1100px } o duoi la rule TOAN CUC — neu khong bo cho
6 bang nay, ep ca bang rong 1100px du col da rut gon, cot Link van
nam ngoai vung nhin. Bo min-width de table tu nhien = tong do rong
cac
(con nho hon 1100px doan dau nho vua rut gon). */
#productTable, #sellerTable, #consensusTable, #top100Table, #bpTable, #tapTable,
#nangCapTable, #lamThemTable, #datMoiTable {
min-width: 0 !important; width: 100% !important; box-sizing: border-box;
/* border-collapse:collapse (mac dinh cua "table" o tren) LAM VO position:
sticky tren th/td theo dung dac ta CSS (khong phai bug rieng trinh
duyet nao) — can doi sang separate de cot dong bang hoat dong. Border-
spacing:0 + moi cell chi co border-bottom (khong co border doc) nen
nhin gan nhu khong doi so voi collapse. */
border-collapse: separate !important; border-spacing: 0 !important;
/* "table { overflow:hidden }" (bo goc tron) cung pha sticky — no la 1
scroll-container xen giua td va .table-scroll (noi thuc su cuon), nen
trinh duyet tinh sticky so VOI table (dung yen) thay vi so voi wrap
(cuon duoc) => cot chi troi theo noi dung nhu binh thuong. Bo goc tron
da co san o ".table-scroll" (border-radius:12px + overflow-x:auto tu
ke overflow-y:auto ngam dinh) nen bo o day khong mat bo goc tron. */
overflow: visible !important;
}
#productTable th, #productTable td, #sellerTable th, #sellerTable td,
#consensusTable th, #consensusTable td, #top100Table th, #top100Table td,
#bpTable th, #bpTable td, #tapTable th, #tapTable td,
#nangCapTable th, #nangCapTable td, #lamThemTable th, #lamThemTable td,
#datMoiTable th, #datMoiTable td { box-sizing: border-box; }
#productTable colgroup col:nth-child(1),
#sellerTable colgroup col:nth-child(1),
#consensusTable colgroup col:nth-child(1),
#top100Table colgroup col:nth-child(1),
#bpTable colgroup col:nth-child(1),
#tapTable colgroup col:nth-child(1),
#nangCapTable colgroup col:nth-child(1),
#lamThemTable colgroup col:nth-child(1),
#datMoiTable colgroup col:nth-child(1) { width: 26px !important; }
#productTable colgroup col:nth-child(2),
#sellerTable colgroup col:nth-child(2),
#consensusTable colgroup col:nth-child(2),
#top100Table colgroup col:nth-child(2),
#bpTable colgroup col:nth-child(2),
#tapTable colgroup col:nth-child(2),
#nangCapTable colgroup col:nth-child(2),
#lamThemTable colgroup col:nth-child(2),
#datMoiTable colgroup col:nth-child(2) { width: 80px !important; }
/* Sua lan 11 (22/08, anh Trung phat hien): anh 60px + nhan che het day
anh + ten SP 4 dong con thua khoang trong (khoang cach + tag row lam
hang cao hon anh). Cho anh to len 72px, RUT gon ten SP xuong 3 dong
(thay vi co nhoi het chu — chap nhan cat "…", browser tu them khi vuot
line-clamp) de chieu cao hang gan khop hon voi anh to hon. FIXED trong
adjustMobileNameCol() (categories.js) phai khop 80px nay. */
td.img-col .prod-img, td.img-col .img-ph { width: 72px !important; height: 72px !important; }
td.img-col { padding: 4px 4px !important; }
#productTable td:nth-child(3) .sp-name-link,
#sellerTable td:nth-child(3) .sp-name-link,
#consensusTable td:nth-child(3) .sp-name-link,
#top100Table td:nth-child(3) .sp-name-link,
#bpTable td:nth-child(3) .sp-name-link,
#tapTable td:nth-child(3) .sp-name-link,
#nangCapTable td:nth-child(3) .sp-name-link,
#lamThemTable td:nth-child(3) .sp-name-link,
#datMoiTable td:nth-child(3) .sp-name-link {
font-size: .76rem !important; line-height: 1.3 !important;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
/* Sua lan 8 (22/08, anh Trung phat hien): cot rieng "Link tang hh" (52px)
qua hep so voi noi dung that ("8.0% → 10.0%" + icon) — chu vo tung ky
tu tren tung dong, khong doc duoc. An HAN cot nay tren mobile, chuyen
sang nhan de len goc anh (.img-tap-badge, giong the o che do Luoi) —
xem imgCellWithTapBadge() trong categories.js. Khong con can du cho o
cot rieng nua nen tra het ve 0.
Sua lan 12 (23/08): mo rong sang 3 bang trong koc.html (nangCap/lamThem/
datMoi) — dung chung style.css nen bi lo cot Link tang hh tren mobile
khi #sellerTable (cung file) da an cot do, nhung 3 bang nay chua duoc
bu badge tren anh — anh Trung phat hien qua trang /koc. */
#productTable colgroup col:nth-child(4),
#sellerTable colgroup col:nth-child(4),
#consensusTable colgroup col:nth-child(4),
#top100Table colgroup col:nth-child(4),
#bpTable colgroup col:nth-child(4),
#tapTable colgroup col:nth-child(4),
#nangCapTable colgroup col:nth-child(4),
#lamThemTable colgroup col:nth-child(4),
#datMoiTable colgroup col:nth-child(4) { width: 0 !important; }
/* Sua lan 9 (anh Trung phat hien: cot Shop/Nganh sau do bi lech/mat noi
dung — do THAT ra la "display:none" tren 1 cell giua bang lam Chromium
tinh sai chieu rong CAC COT SAU no trong table-layout:fixed (Shop nhan
nham 130px cua chinh no thanh 0, Nganh nhan nham 130px thay vi 150px
— kiem chung qua getBoundingClientRect() tung cot). Doi sang KHONG dung
display:none nua — chi dua vao width:0 cua
(da du de o vien hinh
nhu bien mat) + overflow:hidden/padding:0 tren chinh o do de khong con
tran chu "Link tang hh"/gia tri cell ra ngoai. Cach nay khong dung
display:none nen khong lam lech chi so cot sau. */
#productTable th:nth-child(4), #productTable td:nth-child(4),
#sellerTable th:nth-child(4), #sellerTable td:nth-child(4),
#consensusTable th:nth-child(4), #consensusTable td:nth-child(4),
#top100Table th:nth-child(4), #top100Table td:nth-child(4),
#bpTable th:nth-child(4), #bpTable td:nth-child(4),
#tapTable th:nth-child(4), #tapTable td:nth-child(4),
#nangCapTable th:nth-child(4), #nangCapTable td:nth-child(4),
#lamThemTable th:nth-child(4), #lamThemTable td:nth-child(4),
#datMoiTable th:nth-child(4), #datMoiTable td:nth-child(4) {
padding: 0 !important; border: none !important; overflow: hidden !important;
white-space: nowrap !important;
}
/* Nhan TAP tren goc anh — chi BAT tren mobile (mac dinh AN o desktop,
xem ".img-tap-badge{display:none}" o tren). td.img-col can position:
relative de neo goc nhan tuyet doi dung vi tri tren anh. */
td.img-col { position: relative; }
td.img-col .img-cell-wrap { position: relative; display: block; width: max-content; }
.img-tap-badge {
/* !important bat buoc: co rule ".img-tap-badge{display:none}" khong
@media o duoi file (de AN nhan nay tren desktop) — cung specificity
(1 class) nhung nam SAU trong file nen thang tren tie du o day co
dieu kien @media dung. Da gap dung loi nay 2 lan truoc (tab chip,
table min-width) — dung lap lai lan 3 ma quen !important.
Sua lan 11: truoc day trai het chieu rong anh (left:0;right:0) che
kin ca day anh — doi sang CHI 1 goc (bottom-right, giong dung
.pc-corner-tap ben che do Luoi) de con thay duoc anh that. */
display: block !important; position: absolute; right: 2px; bottom: 2px; z-index: 2;
text-align: center;
}
/* Sua lan 10 (anh Trung phat hien): ep 1 dong + an muc goc + ellipsis lam
mat thong tin "tang tu bao nhieu len bao nhieu %" ("→ 10.0…" bi cat).
Thiet ke GOC (.tap-link o duoi file, dung cho desktop) VA nhan tren anh
che do Luoi (.pc-corner-tap) DEU DA xep 2 dong doc (muc goc nho o tren,
muc moi dam o duoi) chinh de tranh loi nay — copy dung y do do thay vi
ep ngang. Khong con can white-space:nowrap/ellipsis vi moi dong da du
ngan de khong tran. */
.img-tap-badge .tap-link, .img-tap-badge .tap-link-expired {
display: flex; flex-direction: column; align-items: center; gap: 0;
background: rgba(26,135,84,.92); color: #fff; text-decoration: none;
border-radius: 4px; padding: 1px 3px; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.img-tap-badge .tap-link-expired { background: rgba(91,100,114,.85); }
.img-tap-badge .tap-rate-old { display: block; font-size: .48rem; line-height: 1.1; color: rgba(255,255,255,.8); }
.img-tap-badge .tap-rate-new { display: block; font-size: .56rem; font-weight: 800; line-height: 1.15; color: #fff; }
/* San pham — gia tri MAC DINH/du phong khi JS chua chay kip (vd truoc
DOMContentLoaded). Gia tri THAT do dung theo be rong may duoc JS
(adjustMobileNameCol() trong categories.js) gan de tren tung
,
vi CSS calc(100% - Npx) tren
do that ra 0px trong table
nhieu cot table-layout:fixed — khong dung duoc thuan CSS (sua lan 4,
22/08: 375/390/430px kiem chung Link luon ket thuc dung mep, Shop
khong con lo ra o may nao). Sua lan 8: cot 4 da an/tra ve 0 nen gia
tri nay chi can lam fallback tam, JS se tinh lai chinh xac hon. */
#productTable colgroup col:nth-child(3),
#sellerTable colgroup col:nth-child(3),
#consensusTable colgroup col:nth-child(3),
#top100Table colgroup col:nth-child(3),
#bpTable colgroup col:nth-child(3),
#tapTable colgroup col:nth-child(3),
#nangCapTable colgroup col:nth-child(3),
#lamThemTable colgroup col:nth-child(3),
#datMoiTable colgroup col:nth-child(3) { width: 240px !important; }
/* Tieu de cot 1/2/4 qua hep so voi chu ("HANG"/"ANH") nen bi vo tung ky
tu — thu nho chu + bo letter-spacing rieng cho header cac cot nay. */
#productTable thead th:nth-child(1), #productTable thead th:nth-child(2), #productTable thead th:nth-child(4),
#sellerTable thead th:nth-child(1), #sellerTable thead th:nth-child(2), #sellerTable thead th:nth-child(4),
#consensusTable thead th:nth-child(1), #consensusTable thead th:nth-child(2), #consensusTable thead th:nth-child(4),
#top100Table thead th:nth-child(1), #top100Table thead th:nth-child(2), #top100Table thead th:nth-child(4),
#bpTable thead th:nth-child(1), #bpTable thead th:nth-child(2), #bpTable thead th:nth-child(4),
#tapTable thead th:nth-child(1), #tapTable thead th:nth-child(2), #tapTable thead th:nth-child(4),
#nangCapTable thead th:nth-child(1), #nangCapTable thead th:nth-child(2), #nangCapTable thead th:nth-child(4),
#lamThemTable thead th:nth-child(1), #lamThemTable thead th:nth-child(2), #lamThemTable thead th:nth-child(4),
#datMoiTable thead th:nth-child(1), #datMoiTable thead th:nth-child(2), #datMoiTable thead th:nth-child(4) {
font-size: .6rem; letter-spacing: 0; padding: 10px 4px;
}
/* Dong bang cot #/Anh khi vuot ngang (yeu cau anh Trung) — position:sticky
hoat dong ben trong khung .table-scroll (overflow-x:auto) de 2 cot nay
luon nam yen o mep trai du cuon toi dau. left:26px cua cot 2 = dung
bang do rong cot 1 (khop voi colgroup ben tren). Can nen mau (khong
phai trong suot) de chu/anh cac cot sau khong "chay xuyen qua" luc cuon. */
#productTable th:nth-child(1), #productTable td:nth-child(1),
#sellerTable th:nth-child(1), #sellerTable td:nth-child(1),
#consensusTable th:nth-child(1), #consensusTable td:nth-child(1),
#top100Table th:nth-child(1), #top100Table td:nth-child(1),
#bpTable th:nth-child(1), #bpTable td:nth-child(1),
#tapTable th:nth-child(1), #tapTable td:nth-child(1),
#nangCapTable th:nth-child(1), #nangCapTable td:nth-child(1),
#lamThemTable th:nth-child(1), #lamThemTable td:nth-child(1),
#datMoiTable th:nth-child(1), #datMoiTable td:nth-child(1) {
position: sticky; left: 0; z-index: 3; background: var(--card);
}
#productTable th:nth-child(2), #productTable td:nth-child(2),
#sellerTable th:nth-child(2), #sellerTable td:nth-child(2),
#consensusTable th:nth-child(2), #consensusTable td:nth-child(2),
#top100Table th:nth-child(2), #top100Table td:nth-child(2),
#bpTable th:nth-child(2), #bpTable td:nth-child(2),
#tapTable th:nth-child(2), #tapTable td:nth-child(2),
#nangCapTable th:nth-child(2), #nangCapTable td:nth-child(2),
#lamThemTable th:nth-child(2), #lamThemTable td:nth-child(2),
#datMoiTable th:nth-child(2), #datMoiTable td:nth-child(2) {
position: sticky; left: 26px; z-index: 3; background: var(--card);
box-shadow: 2px 0 4px rgba(0,0,0,.08);
}
/* Giu hover highlight dong lan ca 2 cot dong bang, khong de chung "trang
hon" phan con lai cua hang luc ru chuot/cham. */
#productTable tbody tr:hover td:nth-child(1), #productTable tbody tr:hover td:nth-child(2),
#sellerTable tbody tr:hover td:nth-child(1), #sellerTable tbody tr:hover td:nth-child(2),
#consensusTable tbody tr:hover td:nth-child(1), #consensusTable tbody tr:hover td:nth-child(2),
#top100Table tbody tr:hover td:nth-child(1), #top100Table tbody tr:hover td:nth-child(2),
#bpTable tbody tr:hover td:nth-child(1), #bpTable tbody tr:hover td:nth-child(2),
#tapTable tbody tr:hover td:nth-child(1), #tapTable tbody tr:hover td:nth-child(2),
#nangCapTable tbody tr:hover td:nth-child(1), #nangCapTable tbody tr:hover td:nth-child(2),
#lamThemTable tbody tr:hover td:nth-child(1), #lamThemTable tbody tr:hover td:nth-child(2),
#datMoiTable tbody tr:hover td:nth-child(1), #datMoiTable tbody tr:hover td:nth-child(2) {
background: var(--accent-soft);
}
}
/* 22/08 (audit UX, P1): fade + goi y "vuot ngang" cho bang nhieu cot tren
mobile (admin.html/koc.html — xem initScrollFade() trong categories.js). */
.scroll-fade-wrap { position: relative; }
.scroll-fade-wrap::before, .scroll-fade-wrap::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 20px;
pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 2;
}
.scroll-fade-wrap::before { left: 0; background: linear-gradient(to right, var(--card), transparent); }
.scroll-fade-wrap::after { right: 0; background: linear-gradient(to left, var(--card), transparent); }
.scroll-fade-wrap.show-left::before { opacity: 1; }
.scroll-fade-wrap.show-right::after { opacity: 1; }
.scroll-hint {
font-size: .72rem; color: var(--muted); text-align: center; padding: 4px 0 0;
}
/* ── Tab strip ── */
.tab-strip-wrap { position: relative; }
/* 22/08: fade 2 ben bao con tab ngoai man hinh (audit UX) — CSS thuan, JS
chi toggle class .show-left/.show-right theo scrollLeft that (xem app.js
updateTabStripFade()). Dung goc mau nen trang (theo body) chu khong dung
0-opacity, vi text tab chay duoi lop nay. */
.tab-strip-wrap::before, .tab-strip-wrap::after {
content: ""; position: absolute; top: 0; bottom: 2px; width: 24px;
pointer-events: none; opacity: 0; transition: opacity .15s;
z-index: 1;
}
.tab-strip-wrap::before {
left: 0; background: linear-gradient(to right, var(--bg), transparent);
}
.tab-strip-wrap::after {
right: 0; background: linear-gradient(to left, var(--bg), transparent);
}
.tab-strip-wrap.show-left::before { opacity: 1; }
.tab-strip-wrap.show-right::after { opacity: 1; }
.tab-strip {
display: flex; align-items: center; gap: 2px;
border-bottom: 2px solid var(--line); margin-bottom: 16px;
overflow-x: auto; overflow-y: hidden;
}
/* 22/08 (feedback thuc te tren dien thoai that): cuon ngang an mat tab
"Phan tich chuyen sau" — nhieu nguoi khong biet vuot. Duoi 640px cho
XUONG DONG thay vi cuon, hien HET tab cung luc (uu tien de thay hon
gon 1 dong). Fade/scroll khong con tac dung khi da wrap nen tu an. */
@media (max-width: 640px) {
.tab-strip {
flex-wrap: wrap; overflow-x: visible; row-gap: 8px; gap: 8px;
border-bottom: none; /* gach chan kieu "underline tab" khong con hop khi da la chip roi rac */
}
.tab-strip-wrap::before, .tab-strip-wrap::after { display: none; }
/* Feedback thuc te: cac tab wrap nhin nhu CHU thuong, khong tach ro
duoc dau la 1 tab — doi sang kieu "chip" co vien/nen, ro rang la nut
bam duoc, thay cho kieu gach chan (chi hop khi nam tren 1 hang). */
.tab-btn {
border: 1.5px solid var(--line) !important; border-radius: 999px !important;
padding: 8px 14px !important; margin-bottom: 0 !important;
background: var(--card) !important; color: var(--muted) !important;
}
.tab-btn.active {
background: var(--accent) !important; color: #fff !important;
border-color: var(--accent) !important;
}
.tab-btn.tab-creator-btn { background: var(--accent-soft) !important; }
.tab-btn.tab-creator-btn.active { background: var(--accent) !important; }
.tab-sep { display: none; } /* dau gach doc phan tach — thua khi da co vien chip rieng */
}
/* Dai tab dieu huong = "tieu de khu vuc" chinh cua trang (chon Co hoi cao/
Hot MCN/...) — truoc day chu mong/mo (400, --muted) nen nhin khong ro la
1 khu vuc dieu huong quan trong. Tang weight 500 + mau --ink (van chua
phai mau nhan manh, chi la chu thuong ro net) cho tab CHUA chon; tab
DANG chon giu nguyen mau accent + gach chan nhung tang weight 700 de
khoang cach voi tab thuong ro hon. */
.tab-btn {
padding: 10px 18px; border: none; background: none;
font-size: var(--fs-base); font-weight: 500; color: var(--ink); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -2px;
border-radius: 6px 6px 0 0; white-space: nowrap;
transition: color .12s;
}
.tab-btn:hover:not(:disabled) { color: var(--accent); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.tab-btn:disabled { cursor: default; opacity: .5; }
.tab-soon {
font-size: .7rem; background: var(--line); color: var(--muted);
padding: 1px 6px; border-radius: 4px; margin-left: 4px;
}
.tab-sep { flex: 1; }
.tab-creator-btn {
color: var(--accent); font-weight: 500;
background: linear-gradient(135deg, rgba(47,111,237,.06), rgba(124,92,247,.06));
}
.tab-creator-btn.active {
background: linear-gradient(135deg, rgba(47,111,237,.1), rgba(124,92,247,.1));
}
.tab-meta-row {
font-size: 0.82rem; color: var(--muted); margin-bottom: 12px;
}
/* ── Coming soon placeholder ── */
.coming-soon-box {
text-align: center; padding: 80px 20px; color: var(--muted);
}
.coming-soon-box .cs-icon { font-size: 2.5rem; margin-bottom: 16px; }
.coming-soon-box h3 { font-size: 1.1rem; color: var(--ink); margin: 0 0 8px; }
.coming-soon-box p { margin: 0; font-size: 0.9rem; }
/* ── Creator search ── */
.ci-search-wrap {
position: relative; max-width: 560px; margin: 0 auto 16px;
}
/* Nut "Tim" rieng (22/08, phan hoi thuc te): truoc chi bam Enter moi tim
duoc — tren dien thoai it ai nghi den bam Enter (ban phim ao thuong ghi
"Tim kiem"/"Go" nhung nguoi dung hay lang quen), can 1 nut ro rang bam
duoc ca PC lan dien thoai; Enter van hoat dong song song, khong thay the. */
.ci-search-row { display: flex; gap: 8px; }
.ci-search-wrap input {
flex: 1; min-width: 0; padding: 11px 16px; font-size: 1rem;
border: 1px solid var(--line); border-radius: 8px;
background: var(--card); color: var(--ink);
outline: none; box-sizing: border-box;
}
.ci-search-wrap input:focus { border-color: var(--accent); }
.ci-search-btn {
flex-shrink: 0; padding: 11px 18px; font-size: .92rem; font-weight: 600;
border-radius: 8px; border: 1px solid var(--accent); background: var(--accent);
color: #fff; cursor: pointer; white-space: nowrap;
}
.ci-search-btn:hover { opacity: .88; }
.ci-search-btn:active { opacity: .75; }
.ci-drop {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
background: var(--card); border: 1px solid var(--line); border-radius: 8px;
max-height: 260px; overflow-y: auto; display: none;
box-shadow: 0 8px 24px rgba(20,30,60,.12);
}
.ci-drop.ci-drop-open { display: block; }
.ci-drop-item {
padding: 9px 16px; cursor: pointer; font-size: 0.88rem;
border-bottom: 1px solid var(--line);
}
.ci-drop-item:last-child { border-bottom: none; }
.ci-drop-item:hover { background: var(--accent-soft); }
.ci-drop-handle { color: var(--muted); font-size: 0.8rem; }
.ci-drop-empty { padding: 12px 16px; color: var(--muted); font-size: 0.85rem; }
/* ── State hint ── */
.state-hint {
text-align: center; color: var(--muted);
padding: 36px 0; font-size: 0.9rem;
}
.state-hint kbd {
background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
padding: 1px 6px; font-size: 0.82rem; font-family: monospace;
}
/* ── Creator head ── */
.creator-head {
display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
padding: 16px 20px; background: var(--card); border: 1px solid var(--line);
border-radius: 12px;
}
.creator-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--accent); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1.15rem; flex-shrink: 0;
}
/* koc.html khong co
rieng — ten creator dong vai tro tieu de trang,
lam ro rang hon (dong bo voi .product-head h2 ben tren). */
.creator-info h2 { margin: 0; font-size: var(--fs-xl); font-weight: 800; }
.creator-info { min-width: 0; flex: 1; }
.creator-sub { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.btn-change-creator {
margin-left: auto; flex-shrink: 0;
padding: 6px 12px; background: none;
border: 1px solid var(--line); border-radius: 6px;
font-size: 0.82rem; color: var(--muted); cursor: pointer;
white-space: nowrap;
}
.btn-change-creator:hover { border-color: var(--accent); color: var(--accent); }
.handle-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.handle-tab {
background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
padding: 3px 10px; font-size: 0.78rem; color: var(--muted); cursor: pointer;
white-space: nowrap;
}
.handle-tab.active {
background: var(--accent); color: #fff; border-color: var(--accent);
}
/* ── Donut charts ── */
.charts-row {
display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; align-items: flex-start;
}
.chart-box {
flex: 1; min-width: 260px; background: var(--card);
border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px;
}
.chart-label {
font-size: .82rem; color: var(--muted); margin: 0 0 14px;
font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
}
.donut-wrap { display: flex; gap: 16px; align-items: center; }
.donut-legend { flex: 1; min-width: 0; }
.legend-item {
display: flex; align-items: center; gap: 7px;
font-size: 0.79rem; color: var(--ink); margin-bottom: 5px;
}
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-pct {
color: var(--muted); min-width: 32px;
font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0;
}
/* ── Section header ── */
.section-head {
display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
}
.section-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.section-sub { font-size: .8rem; color: var(--muted); font-weight: 400; }
/* ── rec-table (creator tables) ── */
.rec-table {
width: 100%; border-collapse: collapse; background: var(--card);
border-radius: 12px; overflow: hidden;
}
.rec-table thead th {
font-size: 0.74rem !important; text-transform: uppercase;
letter-spacing: .03em; padding: 8px 10px !important;
cursor: default !important; white-space: normal !important;
overflow-wrap: break-word; line-height: 1.3;
border-bottom: 1px solid var(--line); color: var(--muted);
background: var(--bg); text-align: left; font-weight: 500;
}
.rec-table thead th.num { text-align: right; }
.rec-table tbody td {
padding: 8px 10px !important; font-size: 0.82rem !important;
border-bottom: 1px solid var(--line); overflow: hidden;
}
.rec-table tbody td.num { text-align: right; }
.rec-table tbody tr:last-child td { border-bottom: none; }
.rec-table tbody tr:hover td { background: var(--accent-soft); }
.rec-row { cursor: pointer; }
.ci-sp-name { font-size: .84rem; line-height: 1.4; }
.ci-id-link {
color: var(--muted); font-size: 0.74rem;
text-decoration: none; font-variant-numeric: tabular-nums;
display: block;
}
.ci-id-link:hover { color: var(--accent); text-decoration: underline; }
.col-dim { color: var(--muted); }
.cell-muted { color: var(--muted); font-size: .74rem; }
.tap-link {
display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
background: rgba(26,135,84,.12); color: var(--good);
border-radius: 4px; padding: 3px 6px; text-decoration: none;
}
.tap-link:hover { background: rgba(26,135,84,.22); }
.tap-link-expired {
display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
background: rgba(150,150,150,.14); color: var(--muted);
border-radius: 4px; padding: 3px 6px; text-decoration: line-through;
}
/* Dong tren = muc hoa hong GOC (nho, mo) — dong duoi = muc SAU KHI tang kem
mui ten (dam, to hon, noi bat) — tach 2 dong de tranh vo chu giua "%→" khi
cot hep, va lam ro thu tu doc: goc trươc, tang sau. */
.tap-rate-old { font-size: 0.62rem; font-weight: 500; opacity: 0.8; line-height: 1.1; }
.tap-rate-new { font-size: 0.86rem; font-weight: 800; line-height: 1.1; }
.tap-link-expired .tap-rate-old, .tap-link-expired .tap-rate-new { text-decoration: line-through; }
.tap-copied { font-size: 0.78rem; font-weight: 700; color: var(--good); }
.tag-strong {
background: rgba(26,135,84,.12); color: var(--good);
border-radius: var(--radius-sm); padding: 2px 7px; font-size: var(--fs-xs);
display: inline-block; white-space: normal; overflow-wrap: break-word;
}
.tag-partial {
background: rgba(13,110,253,.1); color: #0d6efd;
border-radius: var(--radius-sm); padding: 2px 7px; font-size: var(--fs-xs);
display: inline-block; white-space: normal; overflow-wrap: break-word;
}
.tag-weak {
background: rgba(184,134,11,.1); color: var(--warn);
border-radius: var(--radius-sm); padding: 2px 7px; font-size: var(--fs-xs);
display: inline-block; white-space: normal; overflow-wrap: break-word;
}
/* Trang thai "Nang cap hoa hong" — nguon creator_status (tap-links-db),
3 muc: co the nang cap (uu tien nhat) / chua add link / da toi uu. */
.nc-badge {
display: inline-block; white-space: nowrap;
border-radius: var(--radius-sm); padding: 2px 7px; font-size: var(--fs-xs); font-weight: 600;
}
.nc-badge-up { background: rgba(184,134,11,.12); color: var(--warn); }
.nc-badge-new { background: var(--accent-soft); color: var(--accent); }
.nc-badge-ok { background: rgba(91,100,114,.1); color: var(--muted); font-weight: 500; }
/* 22/08 (feedback thuc te): tai khoan koc/kocfree CHUA duoc gan kenh
(account_koc_scope rong) truoc day chi AN het chip loc, khong noi gi —
de nguoi dung tuong tinh nang khong ton tai. Hien 1 dong bao ro thay
vi im lang. */
.no-channel-msg {
font-size: .8rem; color: var(--muted); background: var(--card);
border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px;
max-width: 100%;
}
/* "SP kenh toi co uu dai hoa hong" — BO LOC tren toolbar bang chinh #TAP
(22/08/2026), tai su dung NGUYEN chip .tap-bonus-toggle da co san o tab
Seller (anh Trung tro dung mau nay) — khong can CSS rieng them. */
/* Bao "dang xem ngay cu" khi chon date-select khac ngay moi nhat (MCN/Seller
lich su, Pha 3) — dung lai token --warn (giong nc-badge-up) vi cung ngu
nghia "can chu y", khac accent chinh cua trang.
:not([hidden]) BAT BUOC — "display" tren class thuong (dac thu 0,1,0) de
thang [hidden] cua UA stylesheet (cung dac thu, nhung CSS tac gia luon
thang UA khi hoa) neu khong scope, lam badge LUON HIEN du JS da set
.hidden=true. */
.history-badge:not([hidden]) {
display: inline-block; margin-left: 6px;
background: var(--warn-bg); color: var(--warn);
border-radius: 4px; padding: 2px 8px; font-size: 0.76rem; font-weight: 600;
}
/* ── Pagination ── */
.pagination {
display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
}
.page-btn {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: 4px 10px; font-size: var(--fs-sm); color: var(--ink); cursor: pointer;
min-width: 32px; text-align: center; transition: border-color .15s ease, color .15s ease;
}
.page-btn:hover:not(:disabled):not(.page-btn-cur) { border-color: var(--accent); color: var(--accent); }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }
.page-btn-cur {
background: var(--accent); border-color: var(--accent);
color: #fff; font-weight: 600;
}
.page-btn-cur:hover { opacity: .88; }
.page-ellipsis { padding: 0 4px; color: var(--muted); font-size: .82rem; align-self: center; }
.page-total { font-size: .78rem; color: var(--muted); margin-left: 6px; align-self: center; }
.ci-state-msg { font-style: italic; }
/* ── Hierarchical category filter ─────────────────────────────────────────── */
.hier-btn {
padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--card); font-size: var(--fs-base); color: var(--ink); cursor: pointer;
display: flex; align-items: center; gap: 4px; white-space: nowrap; text-align: left;
transition: border-color .15s;
}
.hier-btn:hover { border-color: var(--accent); }
.hier-wrap { position: relative; }
.hier-panel {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 300;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
display: none; flex-direction: column; min-width: 400px;
}
/* 22/08 (audit UX, P1): min-width:400px vuot vung noi dung mobile (~350px o
390px man hinh) khien panel bi cat mep phai. Gioi han theo viewport. */
@media (max-width: 480px) {
.hier-panel { min-width: 0; width: min(400px, calc(100vw - 40px)); max-width: calc(100vw - 40px); }
}
.hier-panel.open { display: flex; }
.hf-all-row {
display: flex; align-items: center; gap: 8px; padding: 8px 12px;
border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.hf-all-chk { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.hf-body { display: flex; max-height: 300px; overflow: hidden; }
.hf-l1-col { width: 185px; border-right: 1px solid var(--line); overflow-y: auto; flex-shrink: 0; }
.hf-l2-col { flex: 1; overflow-y: auto; }
.hf-l1-row {
display: flex; align-items: center; gap: 7px; padding: 6px 10px;
cursor: pointer; user-select: none;
}
.hf-l1-row:hover, .hf-l1-row.is-act { background: var(--accent-soft); }
.hf-l2-row {
display: flex; align-items: center; gap: 7px; padding: 5px 12px;
cursor: pointer; user-select: none;
}
.hf-l2-row:hover { background: var(--accent-soft); }
.hf-l1-chk, .hf-l2-chk {
accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; cursor: pointer;
}
.hf-l1-lbl {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem;
}
.hf-l2-lbl { flex: 1; font-size: .79rem; line-height: 1.3; }
.hf-l1-arr { color: var(--muted); font-size: .8rem; flex-shrink: 0; margin-left: auto; pointer-events: none; }
.hf-l2-ph { padding: 20px 12px; color: var(--muted); font-size: .82rem; text-align: center; }
/* ── Seller table (shared index.html + koc.html) ─────────────────────────── */
.seller-toolbar {
display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px;
}
.seller-search {
background: var(--card); border: 1px solid var(--line); border-radius: 8px;
padding: 7px 12px; font-size: .88rem; color: var(--ink); outline: none; flex: 1; min-width: 160px;
}
.seller-search:focus { border-color: var(--accent); }
/* 25/08/2026 — tim kenh cho quan_ly full-access o #TAP (khong quet toan bo
he thong nua, xem tap_my_upgrades.js) */
.tap-fullaccess-wrap[hidden] { display: none !important; }
.tap-fullaccess-wrap { display: flex; align-items: center; gap: 8px; }
.tap-fullaccess-search { position: relative; display: inline-block; min-width: 220px; }
.tap-fullaccess-search-results {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
background: var(--card); border: 1px solid var(--line); border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,.1); max-height: 240px; overflow-y: auto;
}
.tap-fullaccess-search-results button {
display: block; width: 100%; text-align: left; background: none; border: none;
padding: 8px 12px; font-size: .85rem; color: var(--ink); cursor: pointer;
}
.tap-fullaccess-search-results button:hover { background: var(--accent-soft); }
.tap-fullaccess-current { font-size: .85rem; color: var(--muted); }
.link-btn {
background: none; border: none; color: var(--accent); cursor: pointer;
font-size: .85rem; text-decoration: underline; padding: 0 2px;
}
.dalzam-toggle { display: flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.dalzam-toggle button {
background: var(--card); border: none; padding: 6px 12px; font-size: var(--fs-sm);
color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.dalzam-toggle button.active { background: var(--accent); color: #fff; }
.dalzam-toggle button:not(:last-child) { border-right: 1px solid var(--line); }
.lift-warn { color: var(--warn); font-size: .8rem; cursor: help; }
/* ── Consensus tab ──────────────────────────────────────────────────────────── */
.badge-a {
display: inline-block; background: #f59e0b; color: #fff;
font-size: var(--fs-xs); font-weight: 700; padding: 2px 6px; border-radius: var(--radius-sm); white-space: nowrap;
}
.badge-b {
display: inline-block; background: var(--accent); color: #fff;
font-size: var(--fs-xs); font-weight: 600; padding: 2px 6px; border-radius: var(--radius-sm); white-space: nowrap;
}
.src-dot {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
font-size: .68rem; font-weight: 700; color: #fff; margin-left: 3px;
}
.src-mcn { background: #6366f1; }
.src-seller { background: #10b981; }
.src-top100 { background: #f97316; }
.row-grade-a { background: rgba(245,158,11,.07); }
.sort-btn {
background: var(--card); border: 1px solid var(--line); border-radius: 6px;
padding: 3px 10px; font-size: .8rem; color: var(--muted); cursor: pointer;
}
.sort-btn.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* Ảnh sản phẩm — dùng chung 4 tab */
.prod-img {
width: 72px; height: 72px; object-fit: cover; border-radius: 8px;
display: block; background: var(--line);
}
.img-ph {
width: 72px; height: 72px; border-radius: 8px; display: block;
background: var(--line); opacity: .45;
}
td.img-col { padding: 5px 8px; }
/* Nhan TAP de len goc anh trong che do Bang (sua lan 8, 22/08) — CHI hien
tren mobile (trong media query duoi), desktop van dung cot "Link tang hh"
rieng nhu cu vi thua cho, khong can chong nhan len anh. */
.img-tap-badge { display: none; }
th[data-sort-key].sort-asc::after { content: " ▲"; font-size: .6rem; opacity: .7; }
th[data-sort-key].sort-desc::after { content: " ▼"; font-size: .6rem; opacity: .7; }
.src-empty { background: var(--line); color: var(--muted); }
.src-cell { white-space: nowrap; }
.product-link { color: var(--accent); text-decoration: none; font-size: .75rem; }
.product-link:hover { text-decoration: underline; }
.diem-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.diem-link:hover { text-decoration: underline; }
/* ── Chuyen doi Bang/Luoi + the san pham dang luoi anh (19/08/2026, hoc theo
trang thuong mai) — dung chung moi bang co san pham ────────────────────── */
.vt-btn {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: 6px 12px; font-size: var(--fs-sm); color: var(--muted); cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vt-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: none; }
.vt-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.vt-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.vt-btn:not(.active):hover { border-color: var(--accent); color: var(--accent); }
/* :not([hidden]) BAT BUOC (cung ly do nhu .history-badge o tren) — neu
khong, che do Bang van hien luoi ket (skeleton) o duoi cung vi JS set
.hidden=true nhung "display" tren class thuong luon thang [hidden] cua
UA stylesheet khi khong scope (bao loi that 19/08/2026, #bp). */
.card-grid:not([hidden]) {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 4px 0 14px;
}
@media (min-width: 640px) { .card-grid:not([hidden]) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .card-grid:not([hidden]) { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1080px) { .card-grid:not([hidden]) { grid-template-columns: repeat(5, 1fr); } }
.product-card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
box-shadow: var(--shadow-sm);
transition: box-shadow .15s ease, transform .15s ease;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--accent); }
.pc-img-wrap { position: relative; aspect-ratio: 1 / 1; background: var(--line); overflow: hidden; }
/* object-fit/display khai bao THANG tren the img (khong dua vao .prod-img
ke thua) — anh phai phu KIN khung vuong du nguon anh kich thuoc nao. */
.pc-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.pc-img-wrap .img-ph { width: 100%; height: 100%; border-radius: 0; }
.pc-corner {
position: absolute; top: 4px; left: 4px; z-index: 2;
background: rgba(20,30,60,.72); color: #fff; font-size: .68rem; font-weight: 700;
padding: 2px 6px; border-radius: 4px;
}
/* Chip hoa hong TAP dat vao goc anh (19/08, chot voi anh Trung — thay vi
nam duoi than the). 19/08 (lan 2): chip goc phai TREN NEN ANH bi chim mo
vi mau xanh nhat cua .tap-link von thiet ke cho nam TRONG dong bang (nen
trang) — de tren anh phai doi sang NEN DAM + chu trang, dong tuong phan
voi .pc-corner (Hang) thay vi giu nguyen mau nhat cu. */
.pc-corner-tap { position: absolute; top: 4px; right: 4px; z-index: 2; }
.pc-corner-tap .tap-link, .pc-corner-tap .tap-link-expired {
box-shadow: 0 1px 4px rgba(0,0,0,.18); border-radius: 4px; padding: 2px 6px;
}
.pc-corner-tap .tap-link { background: rgba(26,135,84,.92); }
.pc-corner-tap .tap-link-expired { background: rgba(91,100,114,.85); }
.pc-corner-tap .tap-rate-old { color: rgba(255,255,255,.75); }
.pc-corner-tap .tap-rate-new, .pc-corner-tap .tap-copied { color: #fff; }
/* Rating dat vao goc anh (19/08, lan 2) — cung kieu nen dam + chu trang
nhu .pc-corner (Hang) de dong bo, khong con nam rieng trong than the. */
.pc-corner-rating {
position: absolute; bottom: 4px; left: 4px; z-index: 2;
background: rgba(20,30,60,.72); color: #fff; font-size: .68rem; font-weight: 700;
padding: 2px 6px; border-radius: 4px; display: flex; align-items: center; gap: 3px;
}
.pc-corner-rating .star { color: #f5c518; }
.pc-tags { position: absolute; bottom: 6px; left: 6px; right: 6px; z-index: 2; display: flex; flex-wrap: wrap; gap: 3px; }
.pc-tags .tag-strong { background: rgba(26,135,84,.92); color: #fff; }
.pc-body { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pc-name {
font-size: .8rem; line-height: 1.32; min-height: 3.9em; margin: 0; color: var(--ink);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-shop { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-cat { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .pc-extra — thong tin phu (shop/nganh/nguoi dang/luot xem...) gop GON
thanh 1 dong, dat SAU khoi so lieu chinh (.pc-meta-row) thay vi truoc no
nhu cu — dung thu tu "san pham -> so lieu chinh -> thong tin phu" theo
yeu cau phan cap. Khong doi noi dung/gia tri, chi doi vi tri+gop dong. */
.pc-extra { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
/* .pc-cta — nhan "Xem chi tiet" cuoi the, nhac lai hanh dong bam-de-xem
VON DA CO SAN (ca the deu co onclick mo trang chi tiet) — chi la chu
hien thi moi, khong doi hanh vi click. margin-top:auto de luon dinh o
day the du noi dung phia tren dai/ngan khac nhau. */
.pc-cta { margin-top: auto; padding-top: 4px; font-size: .68rem; font-weight: 700; color: var(--accent); text-align: right; }
.pc-id-link { font-size: .68rem; color: var(--accent); text-decoration: none; }
.pc-id-link:hover { text-decoration: underline; }
.pc-id-plain { font-size: .68rem; color: var(--muted); }
/* Sao danh gia gon — thay cho kieu cu "★ 4.8" don le qua to */
.pc-rating-row { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--muted); }
.pc-stars { color: #f5a623; font-weight: 600; }
.pc-stars b { color: var(--ink); font-weight: 600; margin-left: 1px; }
.pc-dot { opacity: .6; }
.pc-meta-row { margin-top: 2px; padding-top: 3px; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.pc-price { font-weight: 700; color: var(--bad); font-size: .9rem; }
/* GMV mo (KHONG noi bat nhu gia that) — dung khi nguon du lieu khong co gia
ban (vd Top SP Bestselling: API xac nhan khong tra ve gia/units_sold),
GMV chi la uoc tinh doanh thu, khong phai gia nguoi mua tra. */
.pc-gmv-dim { font-size: .74rem; color: var(--muted); font-weight: 500; }
.pc-sub { font-size: .72rem; color: var(--muted); }
.pc-linkrow { margin-top: 2px; }
/* Khung xuong luc dang tai (thay chu "Dang tai...") */
.pc-skel-card { cursor: default; }
.pc-skel-card:hover { box-shadow: none; transform: none; border-color: var(--line); }
.pc-skel {
background: linear-gradient(90deg, var(--line) 25%, #eef1f6 37%, var(--line) 63%);
background-size: 400% 100%; animation: pc-shimmer 1.4s ease infinite; border-radius: 5px;
}
.pc-skel-line { height: 11px; margin: 2px 0; }
@keyframes pc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .pc-skel { animation: none; } }
.load-more-wrap:not([hidden]) { display: flex; justify-content: center; margin: 16px 0 6px; }
/* Ten san pham la link ngoai (productNameCell, categories.js) — giu nhin
nhu text thuong, chi gach chan khi hover de goi y co the bam. */
.sp-name-link:hover { text-decoration: underline !important; }
/* Dropdown sap xep rieng cho che do Luoi (19/08/2026) — Luoi khong co dong
tieu de de bam nhu Bang nen can 1 dieu khien thay the, dung LAI dung
sortKey/sortDir + ham render cua bang (xem initGridSort() o categories.js).
Chi hien khi dang o che do Luoi (JS toggle .hidden), an het o che do Bang
de khong trung voi thao tac bam tieu de cot da co san. */
.grid-sort-wrap:not([hidden]) { display: flex; align-items: center; gap: 6px; font-size: .83rem; color: var(--muted); }
.grid-sort-wrap select { max-width: 220px; }
.sort-dir-btn {
background: var(--card); border: 1px solid var(--line); border-radius: 8px;
width: 32px; height: 32px; font-size: .9rem; cursor: pointer; color: var(--ink);
display: flex; align-items: center; justify-content: center;
}
.sort-dir-btn:hover { border-color: var(--accent); color: var(--accent); }
.load-more-btn {
padding: 9px 26px; border-radius: 999px; border: 1px solid var(--accent);
background: var(--accent-soft); color: var(--accent); font-size: .88rem; font-weight: 600; cursor: pointer;
}
.load-more-btn:hover { background: var(--accent); color: #fff; }
.load-more-btn:disabled { opacity: .4; cursor: default; }
.consensus-row:hover td { background: rgba(99,102,241,.06); }
/* Kinh lup "KOC da lam nhung chua gan TAP" o tab #TAP (19/08/2026) — chi
hien cho quan_ly tro len (window.currentCaps.seeCreatorActivity, gan luc
loadProducts() thanh cong o app.js). */
.gap-icon-btn {
background: none; border: 1px solid var(--line); border-radius: 6px;
width: 26px; height: 26px; font-size: .82rem; cursor: pointer; line-height: 1;
display: inline-flex; align-items: center; justify-content: center; margin-left: 4px;
color: var(--muted); flex-shrink: 0;
}
.gap-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* 20/08/2026: opacity .45 khong du toi de che chu so den/trang tuong phan
cao (vd cot GMV) — chu van doc duoc xuyen qua lop phu, nhin nhu modal
"khong che het trang" du z-index/paint order thuc te DA dung (elementFrom
Point xac nhan overlay luon o tren). Tang do dam + them backdrop-filter
blur de che chac chan, khong phu thuoc do tuong phan noi dung ben duoi. */
.gap-modal-overlay {
position: fixed; inset: 0; background: rgba(15,22,45,.72); z-index: 200;
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gap-modal-overlay[hidden] { display: none; }
.gap-modal {
background: var(--card); border-radius: var(--radius-lg); max-width: 520px; width: 100%;
max-height: 82vh; overflow-y: auto; padding: 20px 22px;
box-shadow: var(--shadow-lg);
}
/* Dau popup dong bo voi .modal-head (admin.html) — cung gradient cam-do
nhat + watermark icon. Dung margin am de gradient tran ra sat vien
.gap-modal (thay vi doi lai padding cua toan modal — an toan hon vi
khong dung tram vao khoang cach cac phan tu con ben duoi, JS/markup
giu nguyen khong doi). */
.gap-modal-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3);
margin: -20px -22px 4px; padding: var(--sp-4) 22px var(--sp-3);
border-bottom: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
position: relative; overflow: hidden;
background:
linear-gradient(135deg, rgba(242,135,46,0.14) 0%, rgba(228,34,42,0.08) 100%),
var(--card);
}
.gap-modal-head::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
top: -30%; right: -6%; width: 110px; height: 110px;
background: url("assets/brand/sonnet-logo-full.png") no-repeat center / contain;
opacity: 0.10; background-blend-mode: multiply;
}
.gap-modal-head > * { position: relative; z-index: 1; }
.gap-modal-head h3 { margin: 0; font-size: var(--fs-lg); }
.gap-modal-close {
background: none; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer;
color: var(--muted); padding: 2px 6px; flex-shrink: 0;
}
.gap-modal-close:hover { color: var(--ink); }
.gap-modal .sub { color: var(--muted); font-size: .82rem; margin-bottom: 10px; }
/* Link TAP chung 1 cai/SP (moi nguoi trong danh sach deu gui DUNG link nay —
xem ghi chu nangCapRateCell() o koc.html, khong co link rieng theo creator). */
.gap-link-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 12px;
padding: 8px 10px; background: var(--accent-soft); border-radius: 8px; font-size: .82rem;
}
.gap-link-row:empty { display: none; }
.gap-link-row .gap-link-label { color: var(--muted); flex: 1 1 100%; }
.gap-filter-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; font-size: .82rem; }
.gap-filter-chk { display: flex; align-items: center; gap: 5px; cursor: pointer; color: var(--muted); }
.gap-filter-label { font-weight: 600; }
.gap-filter-new { color: var(--accent); }
.gap-filter-upgrade { color: var(--warn); }
.gap-filter-optimal { color: var(--muted); }
.gap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gap-row {
display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: .86rem;
}
.gap-row-left { display: flex; flex-direction: column; gap: 3px; }
.gap-row-handle { font-weight: 600; color: var(--ink); }
.gap-row-meta { color: var(--muted); font-size: .78rem; text-align: right; white-space: nowrap; }
.gap-row-rate { font-size: .78rem; color: var(--muted); }
.gap-row-rate b { color: var(--ink); }
.gap-empty { text-align: center; color: var(--muted); padding: 24px 0; font-size: .88rem; }
/* "Xem chi tiet creator" o tab #bc (20/08/2026) — goi TikTok Marketplace
Creator Performance theo yeu cau, dung chung shell .gap-modal-overlay/
.gap-modal, chi rong hon (.cd-modal) vi noi dung nhieu section hon. */
.cd-modal { max-width: 640px; }
.cd-icon-btn {
background: none; border: 1px solid var(--line); border-radius: 6px;
width: 26px; height: 26px; font-size: .8rem; cursor: pointer; line-height: 1;
display: inline-flex; align-items: center; justify-content: center; margin-left: 4px;
color: var(--muted); flex-shrink: 0;
}
.cd-icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cd-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.cd-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--line); flex-shrink: 0; }
.cd-head-info { min-width: 0; }
.cd-head-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.cd-head-name a { color: inherit; text-decoration: none; }
.cd-head-name a:hover { text-decoration: underline; }
.cd-head-sub { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.cd-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cd-kpi { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.cd-kpi-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }
.cd-kpi-value { font-size: 1rem; font-weight: 700; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cd-kpi-value small { font-weight: 500; font-size: .72rem; color: var(--muted); }
.cd-section { margin-bottom: 16px; }
.cd-section-title { font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-chip { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 600; }
/* Bieu do tron phan bo (20/08/2026) — thay cho .cd-bar-* cu (chi la thanh %
dang so), dung lai bang mau + cong thuc arc SVG cua drawDonut() trong
koc.html qua donutHtml() o bestselling-creators-tab.js. */
.cd-donut-wrap { display: flex; gap: 14px; align-items: center; }
.cd-donut-legend { flex: 1; min-width: 0; }
.cd-legend-item { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink); margin-bottom: 5px; }
.cd-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cd-legend-pct { font-weight: 700; font-variant-numeric: tabular-nums; width: 34px; flex-shrink: 0; }
.cd-legend-label { flex: 1; min-width: 0; word-break: break-word; line-height: 1.3; color: var(--muted); }
.cd-donut-row { display: flex; gap: 20px; flex-wrap: wrap; }
.cd-donut-col { flex: 1; min-width: 200px; }
.cd-donut-caption { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 6px; }
.cd-loc-list { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
.cd-loc-row { display: flex; justify-content: space-between; color: var(--ink); }
.cd-loc-row span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.cd-bio { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
font-size: .82rem; color: var(--ink); white-space: pre-wrap; line-height: 1.5; }
.cd-bio-note { color: var(--muted); font-size: .74rem; margin-top: 4px; }
.cd-error { text-align: center; padding: 24px 0; }
.cd-error-msg { color: var(--bad); font-size: .88rem; margin-bottom: 10px; }
.cd-retry-btn { background: var(--accent); color: #fff; border: none; border-radius: 8px;
padding: 7px 16px; font-size: .84rem; cursor: pointer; }
.cd-retry-btn:hover { opacity: .9; }
.cd-loading { text-align: center; padding: 30px 0; color: var(--muted); font-size: .88rem; }
/* .panel — mau khung lap lai ~16 lan trong admin.html qua style="" giong
het nhau (background/border/border-radius/padding), gop thanh 1 class
dung chung (28/09/2026, Giai doan C) de giam trung lap — KHONG doi id/
cau truc HTML nao, chi thay the phan style="" lap lai, cac gia tri rieng
(margin-top/margin-bottom/overflow/padding) van giu qua style="" bo sung
o tung the (inline style co do dac hieu cao hon class nen ghi de dung). */
.panel {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 18px 20px;
}
/* Nut chuyen sang/toi (lam lai lan 2, 28/09/2026) — nut tron noi (floating
action button) o goc duoi-phai, dung chung cho ca 7 trang qua
theme-toggle.js (tu tao ra, khong can sua HTML tung trang). */
.theme-toggle-fab {
position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 150;
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
background: var(--card); color: var(--ink); font-size: 1.15rem; line-height: 1;
display: flex; align-items: center; justify-content: center; cursor: pointer;
box-shadow: var(--shadow-md); transition: transform .15s ease, box-shadow .15s ease;
}
.theme-toggle-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
@media (max-width: 480px) {
.theme-toggle-fab { right: var(--sp-3); bottom: var(--sp-3); width: 40px; height: 40px; font-size: 1rem; }
}