/* SEO — kiểu dáng phần NỘI DUNG Dashboard SEO (khung + đăng nhập ở index.html).
Thay da 28/08/2026 theo chuẩn "Kho liên kết ĐVP": mượn KHUNG (tỉ lệ · lưới ·
hiệu ứng · kiểu chữ), KHÔNG mượn màu. Bảng màu trước → sau, kèm lý do từng ô:
seo-web/MAU-NHAN-DIEN.md. Bản trước khi sửa: ban-cu-thay-da-2026-08-28/.
Mọi màu ở dưới đi qua BIẾN VAI (--chinh --nhan --dt --h1…) khai ở index.html.
Nhờ vậy tab Sanneng chỉ ghi đè đúng một khối 15 dòng ngay bên dưới, không phải
nhân bản cả tệp CSS cho bộ nhận diện thứ hai. */
/* ── Tab Sanneng: khoác nhận diện SANNENG (Sếp chốt 28/08: carbon + cam #F6AA00,
thay bộ vàng đồng duyệt 13/08). Chữ trên nền sáng vẫn giữ vàng đồng #8a6a00 /
#5b4300 / đỏ gạch #a63a28 vì #F6AA00 trên trắng chỉ đạt 2,0:1 — dưới ngưỡng
4,5:1 của chuẩn. #F6AA00 chỉ làm màu NHẤN trên nền tối và viền/gạch chân. */
body.theme-sanneng{
--chinh:#8a6a00; /* 5,1:1 trên trắng */
--chinh-dam:#5b4300; /* 9,4:1 */
--chinh-nhat:#faf5e6;
--chinh-vien:#eee0b8;
--nhan:#F6AA00;
--nhan-dam:#d99500;
--nhan-chu:#2A231C;
--dt:#a63a28; /* 6,5:1 — chuỗi "đối thủ" */
--h1:#17130F; --h2:#221B14; --h3:#2A231C;
--h-vet:rgba(246,170,0,.26); --h-vet2:rgba(246,170,0,.1);
}
/* ── Khoang tối — chỗ đặt dải thẻ số của đợt đo ──────────────────────────────
Nền tối + thẻ trắng nổi lên là thứ tạo chiều sâu: mắt nhận ra ranh giới nhóm
mà không phải đọc chữ. Thẻ bên trong GIỮ NGUYÊN nền trắng nên màu thương hiệu
(teal / vàng đồng / cam đối thủ) vẫn đủ tương phản như trên nền sáng. */
.khoang{background:
radial-gradient(760px 220px at 12% -10%, var(--h-vet), transparent 68%),
linear-gradient(150deg,var(--h1) 0%,var(--h2) 60%,var(--h3) 100%);
border-radius:var(--r-lg);padding:16px 16px 18px;margin-bottom:16px;
position:relative;overflow:hidden}
.khoang::before{content:"";position:absolute;inset:0;opacity:.42;
background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
background-size:22px 22px;
-webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000,transparent 72%);
mask-image:radial-gradient(120% 90% at 20% 0%,#000,transparent 72%)}
.khoang > *{position:relative;z-index:1}
.khoang h2.nhom{color:#fff;margin-top:0}
.khoang h2.nhom .ic{color:var(--nhan)}
.khoang h2.nhom .sl{background:rgba(255,255,255,.16);color:#fff}
.khoang h2.nhom .ke{background:linear-gradient(90deg,rgba(255,255,255,.22),transparent)}
.khoang .day-the{margin-top:12px;margin-bottom:0}
.khoang .the{border-color:transparent;
box-shadow:0 1px 2px rgba(0,0,0,.16), 0 8px 18px -10px rgba(0,0,0,.5)}
/* ── Tiêu đề nhóm ───────────────────────────────────────────────────────────── */
h2.nhom{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px;
color:var(--chinh-dam);margin:0 0 3px;display:flex;align-items:center;gap:9px}
h2.nhom .ic{width:17px;height:17px;stroke-width:2.1;color:var(--chinh)}
h2.nhom .sl{font-size:11px;font-weight:700;color:var(--chinh-dam);background:var(--chinh-nhat);
border-radius:20px;padding:2px 9px;letter-spacing:0;font-variant-numeric:tabular-nums;
white-space:nowrap}
h2.nhom .ke{flex:1;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--chinh-vien),transparent)}
/* ── Hộp nội dung ───────────────────────────────────────────────────────────── */
.hop{background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-md);
padding:16px;margin-bottom:16px;box-shadow:var(--b1)}
.hop h2{font-size:15px;font-weight:700;color:var(--chinh-dam);letter-spacing:-.2px;
margin-bottom:8px}
.hop h2 .ic{width:17px;height:17px;stroke-width:2.1;color:var(--chinh);
vertical-align:-3px;margin-right:6px;display:inline-block}
.chu-nho{font-size:12.5px;color:var(--muc2);line-height:1.45}
.hop h2 + .chu-nho{margin-bottom:11px}
.nhat{color:var(--muc3)}
.xanh{color:var(--xanh)}
.do{color:var(--do)}
.phai{text-align:right}
/* auto-fit + minmax: 2 cột trên màn rộng, 1 cột khi hẹp — hai hộp luôn BẰNG chiều
cao nhờ align-items mặc định stretch, không so le. */
.hai-cot{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
gap:16px;margin-bottom:16px}
.hai-cot .hop{margin-bottom:0}
/* ⚠ Dải này LUÔN có 3 hộp — [Thắng/Thua HOẶC Mặt tiền] · [Top tăng] · [Top tụt] —
nên chia 2 cột trần trụi thì hộp thứ 3 đứng trơ một mình, chừa nguyên 547px
trắng bên phải. Đo tận nơi 28/08/2026 ở màn 1440: cả hai tab đều dính.
Hai lối thoát, chọn theo hộp đầu NGẮN hay DÀI:
• Tab DVP Market — hộp đầu là bảng "Ai chiếm mặt tiền Google", 5 cột × 15 dòng,
nhét vào 547px thì chính nó phải cuộn ngang (class `cuon-ngang` nói lên điều
đó), lại kéo hộp "Top tăng hạng" bên cạnh cao theo 778px trong khi ruột chỉ
có 283px → thừa ~495px trắng NGAY TRONG thẻ. Cho nó ăn trọn bề ngang: bảng
hết cuộn, và hai hộp tăng/tụt tự ghép thành một hàng cân nhau.
• Tab Sanneng — hộp đầu là bảng Thắng/Thua 4 cột × 3 dòng, bé; kéo rộng 1110px
thì loãng. Để nó ghép với "Top tăng hạng", rồi cho hộp CUỐI ăn trọn hàng.
Nói cách khác: hộp nào rộng thì khai `rong-het`; không khai thì hộp lẻ cuối
hàng tự nở. Thêm/bớt hộp trong `.hai-cot` phải chụp lại Tổng quan CẢ HAI tab. */
.hai-cot > .rong-het{grid-column:1/-1}
.hai-cot:not(:has(.rong-het)) > :last-child:nth-child(odd){grid-column:1/-1}
.nut-p{border:1px solid var(--vien-dam);background:var(--trang);border-radius:var(--r-sm);
padding:8px 13px;font-size:13px;font-weight:600;color:var(--chinh-dam);
display:inline-flex;align-items:center;gap:7px;white-space:nowrap;box-shadow:var(--b1);
transition:background .18s,border-color .18s,transform .18s var(--nhip)}
.nut-p .ic{color:var(--chinh)}
.nut-p:hover{background:var(--chinh-nhat);border-color:var(--chinh-vien);transform:translateY(-1px)}
.nut-p:disabled{opacity:.55;cursor:wait;transform:none}
.nut-xoa,.nut-xoa .ic{color:var(--do)}
.nut-xoa:hover{background:var(--do-nhat);border-color:#f2c9c9}
/* ── Thẻ số ─────────────────────────────────────────────────────────────────
⚠ FLEX chứ KHÔNG phải grid — đây là chỗ đã trả giá 28/08/2026, ghi kỹ kẻo mai
có người "dọn cho thống nhất" rồi đổi ngược về grid.
Bản grid dùng `repeat(auto-fit,minmax(140px,1fr))`. Nó chia cột rất đẹp, nhưng
auto-fit KHÔNG biết kéo hàng CUỐI cho đầy: thừa cột thì bỏ trống. Mà số thẻ ở
đây là 7 (tab Sanneng, có đối thủ) — số nguyên tố, không cột nào chia hết:
7 cột → 7 (đẹp, chỉ đạt được khi màn ≥1200px)
6 cột → 6 + 1 bỏ trống 84%
5 cột → 5 + 2 bỏ trống 61%
4 cột → 4 + 3 bỏ trống 25%
3 cột → 3 + 3 + 1 bỏ trống 68%
2 cột → 2+2+2 + 1 bỏ trống 51%
Quét 11 cỡ màn × 2 tab thì 9 ca lòi ra hàng cuối cụt, nặng nhất 84% — một thẻ
đứng trơ giữa dải trắng. Bản đo cũ chỉ soi 1440 và 390 nên gần như không thấy:
lỗi nằm ở KHÚC GIỮA, nơi số cột đổi. Ép cột cứng cũng không cứu được, vì tab
DVP Market có 6 thẻ — 6 và 7 đòi số cột khác hẳn nhau.
flex-wrap thì mỗi hàng tự kéo giãn cho đủ bề ngang, hàng cuối cũng vậy, nên
KHÔNG bao giờ còn lỗ; số thẻ đổi bao nhiêu cũng tự lo. Đổi lại thẻ ở hàng cuối
rộng hơn thẻ hàng trên — chấp nhận được, vì chiều cao · bo góc · cỡ chữ vẫn
như nhau (đúng luật "thẻ cùng loại cùng cỡ"), mà luật "không để khoảng trống
thừa" thì được giữ trọn.
Chiều cao trong cùng một hàng vẫn bằng nhau nhờ align-items:stretch mặc định —
thứ mà grid-auto-rows:1fr trước đây lo. Bài quét: scripts-test/do-quet-be-ngang.mjs */
.day-the{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:16px}
.the{flex:1 1 140px;min-width:0;
background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-md);
padding:13px 14px;display:flex;flex-direction:column;gap:1px;
border-top:3px solid var(--vien-dam);
transition:transform .2s var(--nhip),box-shadow .2s var(--nhip)}
.the:hover{transform:translateY(-2px);box-shadow:var(--b2)}
.the-nhan{font-size:11px;color:var(--muc2);font-weight:700;text-transform:uppercase;
letter-spacing:.4px;line-height:1.3}
.the-so{font-size:26px;font-weight:800;color:var(--chinh-dam);line-height:1.2;
letter-spacing:-.6px;font-variant-numeric:tabular-nums;margin-top:3px}
.the-phu{font-size:11.5px;color:var(--muc3);line-height:1.3;margin-top:auto;padding-top:3px}
.the-ta{border-top-color:var(--chinh)}
.the-ta .the-so{color:var(--chinh)}
.the-dt{border-top-color:var(--dt)}
.the-dt .the-so{color:var(--dt)}
/* ── Bảng ───────────────────────────────────────────────────────────────────── */
.bang{width:100%;font-size:13.5px}
.bang th{background:var(--chinh-nhat);color:var(--chinh-dam);font-size:11.5px;
text-transform:uppercase;letter-spacing:.4px;padding:9px 10px;text-align:left;
border-bottom:2px solid var(--chinh-vien);white-space:nowrap;font-weight:800;
position:sticky;top:0;z-index:1}
.bang th.phai{text-align:right}
.bang th[data-cot]{cursor:pointer;transition:background .16s}
.bang th[data-cot]:hover{background:var(--chinh-vien)}
.bang td{padding:8px 10px;border-bottom:1px solid var(--vien);vertical-align:middle}
.bang td.phai{font-variant-numeric:tabular-nums}
.bang tbody tr{transition:background .14s}
.bang tbody tr:hover td{background:var(--nen)}
.bang tr.mo td{opacity:.5}
.bang tbody tr:last-child td{border-bottom:none}
.cuon-ngang{overflow-x:auto}
.bang-tk{min-width:1090px} /* 03/09: +110px cho cột "Hạng ngày" — chật thì .cuon-ngang lo */
/* Cột "Hạng ngày" (03/09/2026): ô chọn ngày nằm NGAY TRONG tiêu đề cột — chữ
trên, ô dưới, cùng căn phải với dãy số bên dưới. Bấm ô là chọn ngày, KHÔNG
kích hoạt sắp xếp (giao-dien.js đã né e.target là INPUT). */
.o-ngay-hang input{display:block;margin:4px 0 0 auto;padding:2px 6px;
border:1.5px solid var(--vien);border-radius:6px;background:var(--trang);
font:inherit;font-size:12px;font-weight:600;color:var(--muc2);
text-transform:none;letter-spacing:0;cursor:pointer;outline:none;
transition:border-color .18s}
.o-ngay-hang input:hover{border-color:var(--vien-dam)}
.o-ngay-hang input:focus{border-color:var(--chinh)}
/* Hộp mũi tên bề rộng cố định trong ô "Hạng ngày": số bên trái luôn thẳng mép
phải dù mũi tên là "=", "▲3" hay "▼12" — không thì cột số xô lệch từng hàng. */
.mui-ngay{display:inline-block;min-width:38px;text-align:left;margin-left:7px;font-size:12.5px}
.nhan-nhom{background:var(--chinh-nhat);color:var(--chinh-dam);border-radius:20px;
padding:2px 9px;font-size:11.5px;font-weight:700;white-space:nowrap;
display:inline-block;line-height:1.5}
.nhan-tat{background:var(--do-nhat);color:var(--do);border-radius:6px;padding:1px 7px;
font-size:10.5px;font-weight:700}
/* Chiều "web" 13/08/2026 — bảng mặt tiền + cột "Ai giữ top 1–3" (DVP Market) */
.hang-ta td,.hang-ta:hover td{background:var(--chinh-nhat)}
.nhan-ta{background:var(--chinh);color:#fff;border-radius:6px;padding:1px 7px;
font-size:10.5px;font-weight:700;vertical-align:1px}
.o-giu{max-width:340px}
.o-giu .nhan-nhom{margin:1px 2px 1px 0}
.nhan-giu-ta{background:var(--chinh);color:#fff}
.o-link{white-space:nowrap}
.link-nho{display:inline-flex;align-items:center;background:var(--nen);
border:1px solid var(--vien);border-radius:20px;padding:2px 9px;font-size:11.5px;
font-weight:700;color:var(--chinh-dam);margin-right:4px;transition:background .16s,color .16s}
.link-nho:hover{background:var(--chinh);border-color:var(--chinh);color:#fff}
/* ── Thanh lọc tab từ khoá ──────────────────────────────────────────────────── */
.thanh-loc-tk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.thanh-loc-tk select{padding:9px 11px;border:1.5px solid var(--vien);border-radius:var(--r-sm);
background:var(--trang);font-size:13.5px;font-weight:600;color:var(--muc2);
box-shadow:var(--b1);outline:none;transition:border-color .18s}
.thanh-loc-tk select:hover{border-color:var(--vien-dam)}
.thanh-loc-tk select:focus{border-color:var(--chinh)}
.thanh-loc-tk .chu-nho{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
/* Ghi chú cột "Hạng ngày" (ngày chọn không có đợt đo → nói rõ đang so ngày nào):
chiếm trọn hàng dưới thanh lọc; rỗng thì biến mất, không chừa khoảng trống. */
.ghi-chu-ngay{width:100%;font-size:12px;color:var(--muc3)}
.ghi-chu-ngay:empty{display:none}
/* Ô tìm: kính lúp bên trái, gợi ý phím "/" bên phải — giống mẫu Kho liên kết */
.otim{position:relative;display:flex;align-items:center;flex:1;min-width:220px}
.otim .kinh{position:absolute;left:13px;color:var(--muc3);pointer-events:none;display:flex}
.otim input{width:100%;padding:11px 42px 11px 40px;border:1.5px solid var(--vien);
border-radius:var(--r-sm);font-size:13.5px;font-weight:500;outline:none;
background:var(--trang);color:var(--muc);box-shadow:var(--b1);
transition:border-color .18s var(--nhip),box-shadow .18s var(--nhip)}
.otim input::placeholder{color:var(--muc3);font-weight:400}
.otim input:focus{border-color:var(--chinh);box-shadow:0 0 0 4px var(--chinh-nhat)}
.otim .phim{position:absolute;right:11px;font-size:11px;font-weight:700;color:var(--muc3);
border:1px solid var(--vien-dam);border-bottom-width:2px;border-radius:6px;padding:1px 7px;
background:var(--nen);pointer-events:none}
.otim input:focus ~ .phim{opacity:0}
/* ── Biểu đồ đường ──────────────────────────────────────────────────────────── */
.cham-chu-ta{color:var(--chinh)}
.cham-chu-dt{color:var(--dt)}
.bieu-do{width:100%;height:auto;display:block}
.bd-luoi{stroke:var(--vien);stroke-width:1}
.bd-chu{font-size:10.5px;fill:var(--muc2)}
.bd-duong{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bd-ta{stroke:var(--chinh)}
.bd-dt{stroke:var(--dt)}
.bd-cham-ta{fill:var(--chinh)}
.bd-cham-dt{fill:var(--dt)}
/* ── Sparkline ──────────────────────────────────────────────────────────────── */
.spark{width:120px;height:28px;display:block}
.spark path{fill:none;stroke:var(--chinh);stroke-width:1.8;stroke-linecap:round}
.spark circle{fill:var(--dt)}
/* ── Tab quản lý ────────────────────────────────────────────────────────────── */
#manQuanLy textarea{width:100%;padding:11px 12px;border:1.5px solid var(--vien);
border-radius:var(--r-sm);resize:vertical;margin-bottom:10px;outline:none;
background:var(--trang);font-size:13.5px;transition:border-color .18s}
#manQuanLy textarea:focus{border-color:var(--chinh)}
#manQuanLy code{background:var(--nen);border:1px solid var(--vien);border-radius:5px;
padding:1px 6px;font-size:12px}
.o-cau-hinh{display:flex;gap:11px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.o-cau-hinh label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;
font-weight:700;color:var(--muc2)}
.o-cau-hinh input{padding:9px 11px;border:1.5px solid var(--vien);border-radius:var(--r-sm);
outline:none;background:var(--trang);font-weight:500;transition:border-color .18s}
.o-cau-hinh input:focus{border-color:var(--chinh)}
.o-cau-hinh .chu-nho{padding-bottom:9px}
.dong-ho{margin-top:8px}
.thanh-credit{height:10px;background:var(--vien);border-radius:6px;overflow:hidden;margin-top:7px}
.thanh-credit div{height:100%;border-radius:6px;
background:linear-gradient(90deg,var(--chinh),var(--nhan))}
#bangQL input[type=text],#bangQL input:not([type]),#bangQL select{padding:6px 8px;
border:1px solid var(--vien);border-radius:7px;font-size:12.5px;max-width:150px;
background:var(--trang);outline:none;transition:border-color .18s}
#bangQL input:focus,#bangQL select:focus{border-color:var(--chinh)}
#bangQL input[type=checkbox]{width:17px;height:17px;accent-color:var(--chinh);cursor:pointer}
#bangQL td:nth-last-child(-n+2){white-space:nowrap}
/* ── Điện thoại: cùng ngưỡng 700px với khung ở index.html ───────────────────── */
@media(max-width:700px){
.khoang{padding:14px 13px 16px;border-radius:var(--r-md)}
.hop{padding:13px}
h2.nhom{font-size:11.5px;letter-spacing:.9px}
/* Điện thoại: hạ mức thèm xuống 134px để vừa 2 thẻ một hàng ở màn 390px
(340px lòng − 9px khe = 165px/thẻ). Vẫn là flex nên hàng cuối tự đầy. */
.day-the{gap:9px}
.the{flex-basis:134px}
.the{padding:11px 12px}
.the-so{font-size:22px}
.hai-cot{gap:13px}
.bang{font-size:12.5px}
.bang th,.bang td{padding:7px 8px}
.thanh-loc-tk{gap:8px}
.thanh-loc-tk select{flex:1;min-width:132px}
.thanh-loc-tk .chu-nho{margin-left:0;width:100%}
.otim{min-width:100%}
/* Gợi ý phím "/" chỉ có nghĩa với bàn phím rời — điện thoại thì giấu đi */
.otim .phim{display:none}
.otim input{padding-right:13px}
.o-cau-hinh label{width:100%}
.o-cau-hinh input{width:100%}
/* ── Bảng Quản lý → THẺ ────────────────────────────────────────────────────
Bảng "Danh sách từ khoá" có 7 cột. Nhét vào màn 390px thì `.cuon-ngang` cho
nó cuộn ngang, và hai cột cuối — nút **Bật/Xoá** — nằm ngoài khung nhìn: phải
vuốt mới thấy, nên nhân sự dùng điện thoại tưởng là KHÔNG CÓ nút. Đo 28/08/2026,
ảnh `anh-nghiem-thu\2026-08-28-thay-da\dvpmarket-quanly-390.png`.
Dưới 700px bẻ mỗi hàng thành một THẺ; hàng tiêu đề giấu đi, từng ô tự xưng tên
bằng `content:attr(data-nhan)` (nhãn khai ở giao-dien.js).
⚠ Bẻ bằng CSS THUẦN — DOM vẫn đủ 7 `| ` đúng thứ tự cũ, nên mọi dây nối sự
kiện giữ nguyên, không sửa một dòng JS. Trên 701px bảng vẫn là bảng như cũ.
⚠ `tr` là FLEX WRAP chứ không phải `display:block` + `inline-block`: hai ô nút
là hai ` | ` riêng, xuống dòng trong mã nguồn nên nếu để inline-block thì khoảng
trắng giữa hai thẻ cộng thêm ~4px, `calc(50% - 3px)` tràn hàng và nút Xoá rơi
xuống dòng dưới. `flex:1 1 0` + `gap` chia đôi đúng từng pixel, không phụ thuộc
khoảng trắng trong HTML. */
#bangQL,#bangQL tbody{display:block}
#bangQL thead{display:none}
#bangQL tr{display:flex;flex-wrap:wrap;gap:0 9px;background:var(--trang);
border:1px solid var(--vien);border-radius:var(--r-md);
padding:11px 13px 13px;margin-bottom:9px}
#bangQL tbody tr:last-child{margin-bottom:0}
#bangQL td{flex:0 0 100%;border:none;padding:5px 0;gap:13px;
display:flex;align-items:center;justify-content:space-between;text-align:left}
/* ⚠ Nhãn phải RỘNG CỐ ĐỊNH, không được `flex:0 0 auto`. Để auto thì nhãn co theo
độ dài chữ ("Nhóm" ngắn hơn "Hạng ta"), `space-between` đẩy ô nhập ra mỗi hàng
một chỗ → ô Nhóm và ô CTV lệch lề trái ~18px. Bài kiểm số 1 không bắt được,
chỉ nhìn ảnh cận mới thấy (28/08). 72px đủ chứa nhãn dài nhất "Hạng ta". */
#bangQL td::before{content:attr(data-nhan);flex:0 0 72px;
color:var(--muc2);font-size:12px;font-weight:500}
/* Ô đầu = tên từ khoá, làm tiêu đề thẻ: ăn trọn hàng, gạch dưới ngăn với ruột */
#bangQL td.o-tu{display:block;padding:0 0 9px;margin-bottom:5px;
border-bottom:1px solid var(--vien);font-size:14px}
#bangQL td.o-tu::before{content:none}
/* Hai nút CÙNG một hàng, chia đôi đều nhau — cùng cao, cùng bo góc, cùng cỡ chữ */
#bangQL td.o-nut{flex:1 1 0;min-width:0;padding-top:9px}
#bangQL td.o-nut::before{content:none}
#bangQL td.o-nut .nut-p{width:100%;justify-content:center}
/* Trong thẻ thì ô nhập bám lề phải cho thẳng cột, bỏ trần 150px của bảng */
#bangQL input[type=text],#bangQL input:not([type]),#bangQL select{max-width:none;
flex:1 1 auto;min-width:0}
}
/* ── KHỐI MÀU (03/09/2026) ────────────────────────────────────────────────────
Chuẩn: 00-BO-NAO-CHUNG\PROMPT-KHOI-MAU.md. Mỗi khối khai tại chỗ bộ ba
[--mk đậm · --mk2 đậm hơn · --mkn nhạt] (khai ở giao-dien.js, nơi dựng khối).
Thể hiện NHẸ, đúng mấy điểm: ① viền trái 3px ② tiêu đề đổi màu + chấm tròn
gradient thay icon nét ③ đầu bảng nhuộm nhạt. Điểm ④ (dòng TỔNG) trang này
không có bảng nào tổng cộng nên bỏ. CẤM đổ màu ra nền lớn của khối.
⚠ Màu khối là màu PHÂN LOẠI, cố ý KHÔNG đi qua biến vai (--chinh/--nhan) —
y hệt quyết định đã chốt cho pill ở index.html: "pill giữ màu phân loại ở cả
áo Sanneng". Nếu ăn theo biến vai thì sang tab Sanneng cả 5 khối cùng hoá
vàng đồng, mất sạch tác dụng phân vùng. Hai bộ nhận diện của trang (teal DVP
/ carbon-cam Sanneng) vẫn nằm nguyên ở khung, thẻ số, biểu đồ.
⚠ Khối nào cũng phải đọc rõ trên NỀN TRẮNG của .hop — mọi mã --mk2 dưới đây
lấy từ bảng 16 màu của chuẩn, đều ≥ 4,5:1 trên trắng. */
/* ① Viền trái — .hop vốn có viền 1px quanh, chỉ dày thêm cạnh trái */
.hop.km{border-left:3px solid var(--mk)}
/* ② Tiêu đề + chấm tròn gradient.
.hop h2 KHÔNG phải flex (icon đặt inline, canh bằng vertical-align), nên chip
tròn phải tự canh lại: 12px lõi + 4px đệm = 20px, tụt 3px nữa so với icon 17px
cũ thì tâm chip mới trùng dòng chữ. */
.hop.km h2{color:var(--mk2)}
.hop.km h2 .ic{width:12px;height:12px;stroke-width:2.2;color:#fff;
background:linear-gradient(145deg,var(--mk),var(--mk2));border-radius:50%;
padding:4px;box-sizing:content-box;vertical-align:-6px;margin-right:8px}
/* ③ Đầu bảng nhuộm nhạt */
.hop.km .bang th{background:var(--mkn);color:var(--mk2)}
/* Giữ lại phản hồi bấm-để-sắp-xếp của bảng Từ khoá: nền đã bị nhuộm rồi nên
đổi nền lần nữa gần như không thấy — báo bằng gạch chân dày cho rõ. */
.hop.km .bang th[data-cot]:hover{background:var(--mkn);
box-shadow:inset 0 -2px 0 var(--mk)}
.hop.km .bang tbody tr:hover{background:var(--mkn)}
/* Khoang tối (dải thẻ số đợt đo) — cùng bộ màu nhưng nền GIỮ NGUYÊN tông tối.
Chữ tiêu đề cố ý vẫn trắng: đặt --mk2 đậm lên nền carbon là chữ chìm hẳn. */
.khoang.km{border-left:3px solid var(--mk)}
.khoang.km h2.nhom .ic{width:12px;height:12px;stroke-width:2.2;color:#fff;
background:linear-gradient(145deg,var(--mk),var(--mk2));border-radius:50%;
padding:4px;box-sizing:content-box}
.khoang.km h2.nhom .ke{background:linear-gradient(90deg,var(--mkn),transparent)}
|