` cũ ở trang chủ không cần dòng này (đã block
sẵn) nhưng khai chung không hại gì. */
display: block; text-decoration: none;
}
@media (max-width: 899px) {
.ten-hieu { font-size: 15px; letter-spacing: .12em; }
}
.nut-fb {
flex: none;
/* Vùng chạm ≥44px (xem giải thích tại `.nut-tim`) - áp cho CẢ dạng
chữ (đây) lẫn dạng icon vuông (`.nut-fb--icon` bên dưới đặt lại
width/height, `min-height` ở đây vẫn giữ nguyên vô hại). */
min-height: 44px;
background: var(--oliu); color: var(--chu-tren-oliu);
border: none; border-radius: var(--bk);
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; font-weight: 700; font-size: var(--f2);
text-transform: uppercase; letter-spacing: .1em;
padding: 8px 12px; display: flex; align-items: center; gap: 8px;
cursor: pointer; text-decoration: none;
}
.nut-fb svg { width: 14px; height: 14px; flex: none; }
/* "Tư vấn sản phẩm" -> "Tư vấn" dưới 600px (việc 4a, 26/08). Đổi bằng
CSS chứ KHÔNG bằng JS: đổi bằng JS thì lúc xoay máy phải nghe sự
kiện resize, mà giữa hai nhịp ấy nút hiện sai chữ. CSS đổi theo
media query là tức thì và không cần một dòng mã nào chạy. */
.fb-chu-gon { display: none; }
@media (max-width: 599px) {
.fb-chu-day { display: none; }
.fb-chu-gon { display: inline; }
}
/* Dưới 420px (24/09, Bruno chốt B): nút tư vấn topbar CHỈ CÒN ICON vuông
44px như `.nut-fb--icon` - nhường chỗ cho tên hiệu hiện ĐỦ ở 390px sau
khi topbar có thêm nút giao diện. Nhãn đọc máy nằm ở `aria-label` của
chính thẻ
(video.html). */
@media (max-width: 439px) {
.nut-fb:not(.nut-fb--icon) { padding: 0; width: 44px; height: 44px; justify-content: center; }
.nut-fb:not(.nut-fb--icon) svg { width: 18px; height: 18px; }
.nut-fb .fb-chu-day, .nut-fb .fb-chu-gon { display: none; }
/* Trang chủ khe hàng 22px: khe giữa tên hiệu và cụm icon thu về 12px
(bằng khe của hai màn kia) - đủ 2px còn thiếu ở 390px. Khe GIỮA các
icon giữ nguyên. */
#man-chu .dau-chu { margin-right: -12px; }
}
/* Dưới 380px (24/09, Bruno chốt): thu KHOẢNG CÁCH CHỮ của tên hiệu để
"SOI TUYET CONTINENTAL" hiện trọn ở 360px trên cả ba topbar - KHÔNG
đổi cỡ chữ/font/bố cục. Đo 360px trang chủ: .12em cắt 22px, .05em vừa
khít 0px, .04em còn dư ~3px phòng font Safari thật rộng hơn Chromium. */
@media (max-width: 379px) {
.ten-hieu { letter-spacing: .04em; }
}
/* `.quay` (nút "Quay lại" history.back) ĐÃ GỠ HẲN 11/09, #10 Việc 1 -
xem `.crumb` phía trên. */
/* ---- tìm kiếm ---- */
/* ⚠ `.o-tim`/`.o-tim-xoa` ĐÃ GỠ (04/09) cùng cái ô chúng tô: trang chủ
bày hai cửa vào tìm kiếm sát nhau, giữ lại nút topbar. Đừng dựng lại
lớp này - hai cửa vào cho cùng một overlay là thứ vừa dọn đi. Cửa
vào theo bề ngang: >760px `.o-tim-desktop`, <=760px `.nut-tim`.
Ô nhập THẬT của máy tìm là `.o-tim-lon` (#tim-nhap) trong overlay,
khai ở phần dưới tệp - KHÔNG liên quan tới `.o-tim` vừa gỡ. */
/* ---- khối / tiêu đề mục ---- */
.khoi { padding: 16px var(--le) 4px; }
.khoi-dau { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.khoi-dau .gach { width: 3px; height: 15px; background: var(--oliu); flex: none; align-self: center; }
.khoi-dau .dem { margin-left: auto; font-size: var(--f1); color: var(--chu-mo); }
/* Tiêu đề mục DÙNG CHUNG (04/09, v2) - vạch olive 3px + chữ IN HOA
giãn .09em, cho MỌI mục: loại/chủ đề (`.khoi-dau h2`) và các
hàng ngang trang chủ/chi tiết (`.hang-dau h2`) - một quy tắc, không
hai bản lệch nhau giữa hai nơi bày tiêu đề mục. 19px dưới 600px
(mốc hẹp GIỮ NGUYÊN 19px - Bruno không cho số mới cho mốc này, chỉ
nêu bậc mặc định 25px, 06/09 "chữ to lên toàn trang"). */
.khoi-dau h2, .hang-dau h2 { font-size: 25px; letter-spacing: .09em; }
@media (max-width: 599px) {
.khoi-dau h2, .hang-dau h2 { font-size: 19px; }
}
/* ---- tầng 1 trang chủ: thẻ LOẠI, v3 (05/09, mockup lưới tự giãn) --
ĐỔI từ hàng CUỘN NGANG (v2, 04/09) sang LƯỚI TỰ GIÃN
(`repeat(auto-fill, minmax(168px,1fr))`) - Bruno duyệt mockup mới:
kéo rộng trình duyệt trước đây vẫn chừa trắng bên phải và phải cuộn
mới thấy hết 9 loại; lưới tự giãn trải hết bề ngang, màn hẹp tự
xuống hàng, không còn cuộn ngang. Thẻ `.the-loai-chu` GIỮ NGUYÊN mọi
bất biến đã chốt (ảnh nền trắng contain, dấu khắc, vạch olive, tên
một dòng...) - CHỈ đổi cách xếp CONTAINER, không đụng bên trong thẻ. */
.hang-loai-cuon {
display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
gap: 14px; padding: 4px var(--le) 8px;
}
@media (max-width: 640px) {
.hang-loai-cuon { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* ===== BẢN B (04/09) - BỎ HẲN KIỂU ĐÈ CHỮ LÊN ẢNH ==================
Hai lô trước phải vá gradient HAI LẦN (đặc .75 -> ba điểm dừng theo
% -> mốc px tuyệt đối) mà vẫn hoặc chữ mờ hoặc ảnh chìm - vì cả hai
lần đều chữa TRIỆU CHỨNG của cùng một quyết định gốc: đặt chữ TRÊN
ảnh thì buộc phải phủ tối, mà phủ tối thì ảnh súng thành mảng xám.
Bruno duyệt mockup mới: TÁCH HẲN hai vùng, ảnh không bị phủ gì.
Hệ quả: `.tlc-phu` (lớp gradient) và hai token `--tlc-toi`/
`--tlc-nhat` ĐÃ GỠ SẠCH - không còn chỗ nào cần chúng. */
.the-loai-chu {
position: relative; overflow: hidden;
aspect-ratio: 4 / 5;
display: flex; flex-direction: column;
background: var(--tam); border: none; border-radius: var(--bk);
/* Viền vẽ bằng `box-shadow: inset` chứ không `border`: `border`
chiếm chỗ trong layout và đẩy hai vùng con lùi vào 1px mỗi cạnh -
vùng ảnh phải chạm đúng mép ngoài thẻ. */
box-shadow: inset 0 0 0 1px var(--vien), var(--bong-the);
text-align: left; color: inherit; font: inherit; cursor: pointer;
padding: 0;
transition: transform .16s, box-shadow .16s;
}
.the-loai-chu:active { box-shadow: inset 0 0 0 1px var(--oliu-dam); }
/* VÙNG ẢNH. TÔN TRỌNG ẢNH GỐC: không gradient, không lớp
phủ, không vân, không blur, không đổi độ sáng. `contain` để ảnh
hiện TRỌN (không cắt) - khác hẳn `cover` của bản đè chữ cũ, vốn
phải cắt để lấp kín khung. Nền sáng nhạt cho hợp ảnh sản phẩm chụp
nền trắng: phần thừa quanh ảnh hoà vào nền ảnh thay vì kẻ một
khung tối quanh nó.
⚠ Tỉ lệ ĐỔI từ CỐ ĐỊNH 58% sang `flex: 1 1 auto` (06/09, Bruno
duyệt "khối chữ bó sát lại, ảnh chiếm phần lớn thẻ") - vùng chữ
`.tlc-chu` nay `flex: 0 0 auto` (hugs đúng nội dung), vùng ảnh
giãn nuốt hết phần còn lại thay vì một tỉ lệ phần trăm cứng. */
.the-loai-chu .tlc-anh-vung {
flex: 1 1 auto;
/* ⚠ `min-height: 0` KHÔNG THỪA dù tỉ lệ nay ĐỘNG chứ không còn CỐ
ĐỊNH - vẫn cần để flex item chịu co dưới kích thước NỘI DUNG.
Flex item mặc định `min-height: auto` tức KHÔNG co xuống dưới
kích thước nội dung; ảnh loại thật (400x300 trở lên) vì thế đẩy
vùng ảnh phình quá `flex-basis` nếu thiếu dòng này. */
min-height: 0;
position: relative;
/* ⚠ TRẮNG TINH, KHÔNG gradient (05/09). Ảnh loại súng là ảnh sản
phẩm chụp nền TRẮNG; nền gradient xám cũ (#eceae4 -> #c9c6bf) là
một sắc trắng KHÁC, nên hai mảng trắng cạnh nhau lộ thành hình
chữ nhật lồng trong hình chữ nhật - Bruno thấy rõ trên ảnh
production thẻ "Súng máy". Cùng màu thì ranh giới biến mất.
Đổi này còn GIẢM một hex (2 đầu gradient -> 1 màu), ratchet hạ
18 -> 17. */
background: #ffffff;
display: flex; align-items: center; justify-content: center;
/* Đệm 14/12 -> 5px: viền trắng thừa quanh ảnh mỏng đi, ảnh to lên.
`contain` GIỮ NGUYÊN - ảnh không được cắt. */
padding: 5px;
}
/* Loại CHƯA có ảnh: gunmetal trơn, khung không vỡ. */
.the-loai-chu--trong .tlc-anh-vung { background: var(--tam-cao); }
.the-loai-chu .tlc-anh {
width: 100%; height: 100%;
object-fit: contain; display: block;
transition: transform .32s;
}
/* DẤU KHẮC số mẫu - thứ DUY NHẤT được chèn lên vùng ảnh.
⚠ MÀU: `--oliu`(#a3b06a) và `--oliu-dam`(#7f8c4d) ĐỀU TRƯỢT ngưỡng
đọc được trên nền sáng này - đo thật 04/09: `--oliu` 1.94:1 ở đỉnh
gradient / 1.37:1 ở đáy, `--oliu-dam` 3.03:1 / 2.14:1, đều dưới
4.5:1. Nên phải có một sắc olive ĐẬM HƠN NỮA, và nó GIỮ NGUYÊN hệ
màu olive (cùng hue 71.1deg, cùng saturation 30.7% với `--oliu`,
chỉ hạ lightness 55.3% -> 24%) chứ không đổi sang màu ngoài bảng.
Đo bản chốt `--oliu-khac` #49502a: 7.08:1 ở đỉnh gradient, 5.00:1
ở đáy - đạt cả hai đầu, còn dư biên. KHÔNG thêm nền đặc sau dấu
khắc (đề bài cấm, và cũng không cần khi chữ đã đủ đậm). */
.the-loai-chu .tlc-khac {
position: absolute; top: 8px; left: 8px;
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 700; font-size: 11.5px; letter-spacing: .16em;
text-transform: uppercase; line-height: 1.25;
color: var(--ta-oliu-khac);
border: 1.5px solid var(--ta-oliu-khac);
border-radius: 3px;
padding: 1px 6px;
transform: rotate(-3deg);
}
/* VÙNG CHỮ, nền ĐẶC nên không cần gradient nào.
⚠ `flex: 0 0 auto` (06/09, trước là `1 1 auto`) - khối chữ nay HUG
đúng nội dung của nó thay vì chia tỉ lệ cố định, bó sát khoảng
thừa trên dưới Bruno chỉ ra trên điện thoại; vùng ảnh
(`.tlc-anh-vung`) giãn nuốt phần còn lại. */
.the-loai-chu .tlc-chu {
flex: 0 0 auto; min-width: 0;
background: var(--tam);
border-top: 2px solid var(--oliu-dam);
display: flex; flex-direction: column; justify-content: center; gap: 3px;
padding: 9px 11px 10px;
}
/* ⚠ KHOÁ MỘT DÒNG. Tên dài nhất ("SÚNG LỤC Ổ QUAY") phải cắt đuôi ba
chấm chứ TUYỆT ĐỐI không xuống dòng - hai dòng thì đáy thẻ trong
cùng một hàng so le, đúng cái bệnh lô đồng cao vừa chữa xong. */
/* Việc 1 (14/09): `.tlc-ten` nay là HÀNG chứa tên Việt (co giãn, cắt
đuôi ba chấm - `.tlc-ten-txt`) + chú thích tiếng Anh ĐỨNG SAU, không
bao giờ co (`.tlc-chu-phu`). Tách hai `` thay vì để cả chuỗi
trong một node để chú thích không bao giờ mất - trước đây "KHOÁ MỘT
DÒNG" cắt cả cụm bằng `text-overflow: ellipsis` trên toàn bộ text,
nay chỉ phần TÊN co lại nhường chỗ. */
.tlc-ten {
display: flex; align-items: baseline; gap: 6px; min-width: 0;
line-height: 1.05;
}
.tlc-ten-txt {
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 600; font-size: 15px; text-transform: uppercase;
letter-spacing: .05em; color: var(--chu);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0; flex: 1 1 auto;
transition: color .16s;
/* ⚠ DẤU CHỒNG TIẾNG VIỆT IN HOA (17/09): "Ắ Ẩ Ẫ Ỗ" cao hơn dòng 1,05
tới ~2,9px, và `overflow: hidden` (để cắt "…") XÉN MẤT phần ấy -
"SÚNG NGẮN KHÁC" hiện "SÚNG NGĂN KHÁC". Nới vùng xén LÊN TRÊN bằng
đệm trên, rồi trả lại đúng bấy nhiêu bằng lề âm - chữ đứng yên.
⚠⚠ NÂNG .25em -> .3em (24/09, lô "don-no-video", đỏ SẴN trên
origin/main) - đo bằng canvas.measureText THẬT ở khổ điện thoại
(font-size 15px): `.25em` = 3,75px đệm, dấu "Ẩ" cần 3,95px ->
THIẾU ĐÚNG 0,2px, xén một sợi tóc không thấy bằng mắt nhưng đo ra.
`.3em` (4,5px) dư 0,55px - đã thử `.27em`/`.28em` đều đủ, chọn
`.3em` để còn biên cho hinting font khác Chromium. Lề âm đi cùng
nên VỊ TRÍ CHỮ không đổi, chỉ đổi bề cao vùng đệm vô hình. */
padding-top: .3em; margin-top: -.3em;
}
/* Chú thích tiếng Anh (vd "PISTOL", "REVOLVER") - Barlow Condensed,
NHỎ HƠN tên chính, olive, hoa toàn bộ, KHÔNG BAO GIỜ xuống dòng.
`--oliu` (không phải `--oliu-khac`) vì nền ở đây là `.tlc-chu`
(gunmetal `--tam`, tối) chứ không phải vùng ảnh sáng - khác bối
cảnh với dấu khắc `.tlc-khac` ngay phía trên. */
.tlc-chu-phu {
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 600; font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--oliu-chu);
white-space: nowrap; flex: 0 0 auto;
}
.tlc-so {
margin-top: 3px; font-size: 12.5px; line-height: 1.2; color: var(--chu-mo);
min-width: 0;
font-variant-numeric: tabular-nums;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Số VIDEO đậm hơn một bậc so với phần còn lại của dòng. */
.tlc-so b { color: var(--chu); font-weight: 600; }
/* Thẻ 0 video vẫn hiện, chỉ mờ đi - Bruno chốt "đang cập nhật" chứ
không ẩn hẳn: chủ đề mới thêm chưa kịp có video gắn vẫn cần một chỗ
đứng để biết nó tồn tại. */
.the-loai-chu--mo { opacity: .55; }
.the-loai-chu--mo .tlc-so { color: var(--chu-mo); }
@media (min-width: 600px) {
.tlc-ten-txt { font-size: 19px; }
}
/* ==================================================================
KHỐI CHỌN DÒNG SÚNG - trang LOẠI (06/09, Việc 1/3, Bruno duyệt
mockup). Thẻ DÒNG dùng LẠI NGUYÊN `.the-loai-chu` (root + `.tlc-anh`/
`.tlc-ten` + hover ở cuối tệp) - CẤM viết khối hover mới. Chỉ ảnh
(contain trắng -> cover + gradient tối, ảnh sản phẩm chụp rời khác
ảnh đại diện thẻ loại) đổi qua modifier `.the-dong`, thêm-vào chứ
KHÔNG sửa một dòng nào của `.the-loai-chu`/`.tlc-*` gốc (trang chủ
vẫn dùng nguyên, CẤM đụng trang chủ). ================================== */
.dong-luoi {
display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
gap: 14px; padding: 4px var(--le) 8px;
}
@media (max-width: 640px) {
.dong-luoi { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
/* Card dòng KHÔNG ép tỉ lệ TOÀN THẺ (`.the-loai-chu` gốc dùng
`aspect-ratio: 4/5`) - ảnh dòng tự có tỉ lệ 4:3 riêng, khối chữ hug
nội dung của nó (`.tlc-chu` vốn đã `flex: 0 0 auto`), tổng chiều cao
là CỘNG của hai phần, không phải một hộp cố định trước rồi chia. */
.the-dong.the-loai-chu { aspect-ratio: unset; }
/* bo-loc-web-phase2-va-giao-dien, Lỗi 1 - VÙNG ẢNH KHOÁ tỉ lệ, KHÔNG
còn `flex: 1 1 auto` (thừa kế từ gốc `.tlc-anh-vung`) hút hết khoảng
trống thừa/thiếu của khối chữ bên dưới. Đo thật trên production
(rifle, 1180px): trước khi vá, `anhCao` dao động 129,9-167,9px (lệch
38px) tuỳ thẻ có "dòng phụ" 2 dòng hay không - đúng vạch ô-liu răng
cưa Bruno chỉ ra. `aspect-ratio` một mình (không `flex:0 0 auto`)
KHÔNG đủ: flex item vẫn `flex-grow` theo tỉ lệ đã khai ở lớp gốc trừ
khi ép lại `flex-shrink`/`flex-grow` về 0 tại đây. */
.the-dong .tlc-anh-vung {
aspect-ratio: 4 / 3;
flex: 0 0 auto;
background: var(--ta-khung); /* KHÔNG ảnh -> gunmetal trơn, cùng cỡ mọi thẻ khác (Việc "Súng trường khác") */
padding: 0; /* cover chạm mép, không viền trắng như .tlc-anh-vung gốc */
}
.the-dong .tlc-anh { object-fit: cover; }
/* KHỐI CHỮ chiều cao CỐ ĐỊNH, đủ chứa tên (1 dòng) + số video (1 dòng)
+ dòng phụ (TỐI ĐA 2 dòng, `-webkit-line-clamp: 2` đã khoá) - đo
thật chiều cao khối chữ khi ĐẦY (dòng phụ 2 dòng) ở cả hai bậc chữ
(15px <600px / 19px ≥600px): 99,97px tại 1180px là số đo thật, chốt
102px để dư biên an toàn (bo tròn phông chữ khác trình duyệt/hệ
điều hành). Thẻ KHÔNG có dòng phụ thì CHỪA CHỖ TRỐNG dưới đáy (đúng
đề bài), không kéo ảnh cao lên bù - `justify-content: flex-start`
neo nội dung lên đỉnh khối thay vì `center` gốc (center sẽ đẩy
khoảng trống chia đều trên/dưới, trông như tên/số bị "trôi" giữa
khối rỗng ở thẻ ít chữ). */
/* ⚠ 17/09: dòng phụ nay nằm CHUNG hàng "N video" (xem `veTheDong`), nên
khung chữ tối đa BA hàng (tên · tên đầy đủ hãng nổi bật · số video) -
đủ cao cho thẻ nhiều hàng nhất, mọi thẻ cùng một chiều cao. */
.the-dong .tlc-chu {
flex: 0 0 auto;
height: 74px;
justify-content: flex-start;
overflow: hidden;
}
@media (min-width: 600px) {
.the-dong .tlc-chu { height: 78px; }
}
/* Lớp phủ tối dần đáy ảnh - CHỈ chèn bằng JS khi CÓ ảnh thật (rơi về
gunmetal trơn thì không có gì để tôn chữ lên, gradient trên nền
trơn chỉ làm tối vô cớ). Đứng SAU ảnh, TRƯỚC dấu khắc "N mẫu". */
.the-dong .tlc-phu-dong {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, var(--khan-toi), transparent 55%);
}
/* Dấu khắc "N mẫu" của dòng cần nền mờ để đọc được TRÊN ẢNH THẬT
(khác thẻ loại: nền luôn trắng nên chữ đậm là đủ) - viền/chữ GIỮ
NGUYÊN token `.tlc-khac` gốc, chỉ thêm nền. */
.the-dong .tlc-khac {
background: var(--khan-toi);
color: var(--ta-oliu-ro);
border-color: color-mix(in srgb, var(--ta-oliu) 70%, var(--ta-nen));
}
/* "DÒNG PHỤ" olive (Việc 3, 14/09) - TỐI ĐA 4 tên mẫu (server đã xếp),
MAX 2 DÒNG rồi cắt đuôi ba chấm (`-webkit-line-clamp`, hỗ trợ mọi
engine trình duyệt hiện đại kể cả không tiền tố `-webkit-` từ lâu -
không cần fallback JS đo chiều cao). */
.tlc-dong-phu { color: var(--oliu-chu); }
/* "★" đỏ - dấu Bruno gắn riêng cho MỘT mẫu, KHÁC nghĩa "nổi bật"
(nổi bật chỉ quyết mẫu có mặt trong danh sách hay không). */
.tlc-sao-do { color: var(--c-sao-do); }
/* "Cũng ở " (Việc 5, 14/09) - gợi ý chéo loại cho thẻ MẪU
trang sniper, màu MỜ (khác `.tlc-dong-phu` olive - đây không phải
thành viên của dòng, chỉ là một ghi chú phụ). */
.tlc-cung-o { color: var(--chu-mo); font-style: italic; }
/* THẺ HÃNG NỔI BẬT (Việc 4, 14/09 - TTI/Novritsch) - viền olive 2px
ĐÈ lên viền `--vien` 1px mặc định của `.the-loai-chu`, tên đổi màu
olive, phụ đề tên đầy đủ nhỏ ngay dưới tên. */
.the-dong-noi-bat.the-loai-chu { box-shadow: inset 0 0 0 2px var(--oliu); }
.the-dong-noi-bat .tlc-ten-txt { color: var(--oliu-chu); }
.tlc-ten-day-du {
margin-top: 1px; font-size: 10.5px; line-height: 13px; color: var(--chu-mo);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Dòng phụ riêng của hãng nổi bật - "cam" (TTI, màu thương hiệu chỉ
định đích danh) hoặc "oliu" (Novritsch, màu chuẩn của trang). */
.tlc-hang-phu { font-weight: 600; }
.dong-strip-hangnb .tlc-hang-phu { font-size: 11.5px; }
.tlc-hang-phu--cam { color: var(--c-tti-cam); }
.tlc-hang-phu--oliu { color: var(--oliu-chu); }
/* Tiêu đề khối "CHỌN DÒNG " - dùng lại NGUYÊN `.khoi-dau`/`.gach`/
`h2` (vạch olive 3px + chữ 25px/19px .09em, một quy tắc cho MỌI tiêu
đề mục của trang này). Chỉ thêm nút "Xem tất cả" dồn phải. */
.dong-khu { padding: 16px var(--le) 4px; }
.dong-xemthem {
margin-left: auto; flex: none;
background: none; border: none; cursor: pointer; font-family: inherit;
color: var(--oliu-sang); font-size: var(--f1);
text-decoration: underline; text-underline-offset: 2px;
}
.dong-xemthem[hidden] { display: none; }
/* ---- DẢI "ĐANG XEM DÒNG" (Việc 3) - thu gọn lưới thành một dải gọn
+ hai hàng chip Mẫu/Hãng khi đã chọn một dòng. ------------------- */
.dong-strip[hidden] { display: none; }
/* Khung lọc DÙNG CHUNG hai cấp trang (18/09, Việc 2 lô dọn trang
khách - quy cách Bruno duyệt): nền riêng, bo 14px, đệm rộng, và
BỎ HẲN viền ô-liu bao ngoài (viền ấy đóng khung một vùng vốn đã
tách khỏi nền bằng chính màu nền, thành ra kẻ hai lần). */
.dong-strip {
margin: 4px var(--le) 12px;
background: var(--bl-khung-nen); box-shadow: var(--bong-the); border: none; border-radius: 14px;
padding: 24px 26px;
}
.dong-strip-hang1 { display: flex; align-items: flex-start; gap: 8px 10px; }
/* Đầu khung lọc GỘP tên dòng (18/09, thiết kế lại) - `.dong-strip-ten`
("GLOCK", 28px) + `.dong-strip-meta` ("N video"...) nay XẾP DỌC
trong một cụm riêng thay vì nằm chung một hàng ngang với nút thu
gọn. Bọc bằng `.dong-strip-headtext` để hai span giữ nguyên id/JS
(không đổi một dòng script nào) mà vẫn xếp được thành cột. */
.dong-strip-headtext {
display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto;
}
.dong-strip-nhan {
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .12em;
color: var(--chu-mo); flex: none;
}
/* ⚠ CỠ CHỮ CO THEO BỀ NGANG (Bruno chốt 19/09: "quá to và rất xấu").
Trước đó ghim CỨNG 40px - mà chú thích ngay trên đây vẫn ghi "28px",
tức con số đã phình lên ở một lô nào đó mà chữ mô tả không đi theo.
40px in hoa Barlow Condensed đứng cạnh dòng meta 14px là lệch bậc
quá xa; tên dài thật ("DMR (BÁN TỰ ĐỘNG)", "AR-15 / M4 CUSTOM CQB")
ăn gần trọn hàng và đẩy "N video · M hãng" ra sát mép.
`clamp()` giữ 28px như thiết kế gốc ở màn rộng và tự co xuống 22px ở
điện thoại - KHÔNG cần thêm một @media mới (thang breakpoint của
trang này đã khai đủ bốn mốc, đẻ thêm mốc là phải khai ngoại lệ). */
.dong-strip-ten {
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 700; font-size: clamp(22px, 4.6vw, 28px);
text-transform: uppercase; color: var(--bl-ten-chu);
line-height: 1.1;
}
/* `.dong-strip-so` (đếm "N video · M mẫu · P hãng" cũ) đổi tên thành
`.dong-strip-meta` (11/09, #12 mục C - dòng số nay đổi theo ngữ cảnh
lọc, không còn cố định ba phần). `.dong-strip-doi`/`.dong-strip-bo`
(nút "Đổi dòng khác"/"Bỏ lọc") ĐÃ GỠ HẲN - đường dẫn (cấp dòng) và
chip "Tất cả" đã thay việc, xem `veStripDong()`. */
.dong-strip-meta { font-size: 14px; color: var(--bl-meta-chu); }
/* Tóm tắt "Đang lọc: ..." khi thu gọn - nay là MỘT SPAN trong hàng
tiêu đề (mục A nhiệm vụ), không còn khối thay thế toàn bộ nội dung
như bản 08/09 cũ. */
.dong-strip-tomtat[hidden] { display: none; }
.dong-strip-tomtat {
margin-left: auto; font-size: var(--f2); font-weight: 600; color: var(--oliu-sang);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Hai hàng chip Mẫu/Hãng - nhãn 62px cố định + băng cuộn ngang (tái
dùng ĐÚNG `.hang-chip`/`.chip` đã có, không dựng khuôn chip thứ hai). */
/* bo-loc-web-phase3 (Việc 1-3) - ba trang chủ đề riêng dùng LẠI class
này TRỰC TIẾP trên một khối cấp trang (`#ds-phukien-chip-khu`/
`#ds-saleoff-chip-khu`/`#ds-thaolap-chip-khu`), ẩn/hiện qua thuộc
tính `hidden` - trước lô này `.dong-strip-chiphang` chỉ từng đứng
BÊN TRONG `#ds-dong-strip-than` (ẩn/hiện qua CHA, không tự mang
`hidden`), nên chưa ai cần tới luật này. `display: flex` của lớp
THẮNG `[hidden]` mặc định trình duyệt (bẫy đã ghi nhiều lần trong
CLAUDE.md) - thiếu dòng dưới thì `show(el,false)` không ẩn được gì,
sabotage/bài canh `TestKhuonChungBonChuDeDon` đã bắt được. */
.dong-strip-chiphang[hidden] { display: none; }
.dong-strip-chiphang { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.dong-strip-chiphang .dong-strip-nhan { width: 62px; font-size: 12px; }
.dong-strip-chiphang .hang-chip { padding-right: 4px; }
/* ⚠ 24/09 (lô "don-no-video") - VÁ LỀ CHO BA KHỐI ĐỨNG LẺ đúng chú
thích trên đầu mục này: trước lô "bo-loc-web-phase3" lớp này CHỈ
từng đứng BÊN TRONG `.dong-strip` (đã có `padding: 24px 26px`, tự lo
lề), nên bản gốc chưa từng cần lề của riêng nó. Ba khối dưới đây là
CON TRỰC TIẾP của ``, không cha nào đệm lề cho
chúng - nhãn "NHÓM"/"SÚNG" và hàng chip nằm ÉP SÁT mép trái màn hình
(đo thật 390px: `x=0`), khác hẳn mọi khối khác trên trang (đều có
`var(--le)`). Bằng chứng: chụp lại trang Phụ kiện TRƯỚC/SAU vá,
xem `tests/test_video_rendering.py::TestBaChuDeDonCoLeTrangHang`. */
#ds-phukien-chip-khu, #ds-saleoff-chip-khu, #ds-thaolap-chip-khu {
margin-left: var(--le); margin-right: var(--le);
}
#ds-dong-strip-than[hidden] { display: none; }
/* bo-loc-web-phase2, Việc 4/5 - phụ đề hãng nổi bật + "cũng nằm ở
" trên strip, ngay dưới hàng tiêu đề. */
.dong-strip-hangnb[hidden], .dong-strip-cheo-loai[hidden] { display: none; }
.dong-strip-hangnb, .dong-strip-cheo-loai {
margin: 6px 0 0; font-size: var(--f1); color: var(--chu-mo);
}
/* ⚠ Ô GÕ TÌM RIÊNG CỦA MỘT HÀNG CHIP: ĐÃ BỎ HẲN (16/09, lô
"trang-khach-cay" Việc 4, Bruno chốt) - `.chip-tim`/`.chip-tim-trong`
không còn nơi nào sinh ra. Ô tìm CHUNG trên đầu trang
(`.o-tim`/`#tim-nhap`) KHÔNG đụng tới - đó vẫn là đường tìm duy nhất.
⚠⚠ LUẬT XẾP DỌC THÌ Ở LẠI, chỉ ĐỔI TÊN `--co-tim` -> `--nhieu-chip`.
Lượt gỡ đầu tiên bỏ luôn cả nó (tưởng là mã chết đi kèm ô tìm) và
đỏ ngay: `.hang-chip` mang `overflow-x: auto` (cuộn ngang, KHÔNG
wrap), nên khi đứng CÙNG HÀNG với nhãn 62px thì từ chip thứ chín trở
đi nằm ngoài vùng nhìn thấy và không bấm được - Playwright báo đúng
triệu chứng "hang-chip intercepts pointer events" ở trang TTI.
Xếp dọc cho hàng nhiều chip là thứ giữ cho dải rộng TRỌN khung. */
.dong-strip-chiphang--nhieu-chip {
flex-direction: column; align-items: flex-start; gap: 4px;
}
.dong-strip-chiphang--nhieu-chip .dong-strip-nhan { width: auto; padding-top: 0; }
/* `flex: 1` gốc của `.hang-chip` là cho HÀNG NGANG (chiếm chỗ CÒN LẠI
cạnh nhãn) - vô nghĩa khi cha đã đổi sang CỘT DỌC (trục flex xoay
90°). Ép `align-self: stretch` để nó rộng ĐỦ CẢ CỘT thay vì chỉ ôm
khít nội dung (`align-items: flex-start` của cha không tự giãn con). */
.dong-strip-chiphang--nhieu-chip .hang-chip {
align-self: stretch; flex: 0 1 auto; width: 100%;
}
/* BỎ tiêu đề tên dòng TRÙNG phía trên khung lọc (18/09, thiết kế lại
khung lọc theo mockup) - đầu khung lọc (`.dong-strip-hang1`) nay tự
mang tên dòng/mẫu + số video, nên `.ds-dau-trang` (h1 `#ds-ten` +
`#ds-phu`) là bản chép thừa CẢ Ở DESKTOP, không chỉ điện thoại. Trước
lô này luật ẩn CHỈ nằm trong `@media (max-width:599px)` (#14, 11/09)
- nay bỏ điều kiện màn hình, nhưng GIỮ đúng bất biến "H1 - ẩn CHỈ khi
có khối lọc thật sự thay thế nó": `:has(#ds-dong-strip:not([hidden]))`
- dòng "1 mẫu·1 hãng·1 hệ" (Lỗi 3a) tự BỎ HẲN `#ds-dong-strip`, nếu
ẩn `.ds-dau-trang` VÔ ĐIỀU KIỆN theo `body.vk-trang-dong` (không kèm
`:has`) thì trang mất sạch tiêu đề - không H1, không khung lọc, không
gì cả. `TestBoLocGiaoDienIpad::test_khoi_loc_rong_thi_bo_han_khung`
canh đúng ca này. `#ds-phu` vốn đã tự ẩn qua `anDongPhuVi()` khi dải
có số riêng; dòng dưới đây chỉ còn cần lo cho `#ds-ten`. */
.ds-dau-trang[hidden],
body.vk-trang-dong:has(#ds-dong-strip:not([hidden])) .ds-dau-trang {
display: none;
}
/* ===================================================================
BA (BỐN) KHỐI Mẫu/Hãng/Hệ/Màu - thiết kế lại (18/09, mockup Bruno
duyệt). `.dong-tang` là lớp THÊM VÀO bên cạnh `.dong-strip-chiphang`
sẵn có trên 4 hàng chip trong `#ds-dong-strip-than` - JS
(`veHangChipLoc`/`hienKhoi`) và các trang khác dùng chung
`.dong-strip-chiphang` (Phụ kiện/Sale off/Tháo lắp/trang Hãng/
`#ds-sniper-strip`) KHÔNG mang lớp này nên không đụng gì tới chúng.
Selector CỐ Ý ghép hai lớp (`.dong-strip-chiphang.dong-tang`,
đặc trưng 0,2,0) để LUÔN thắng `.dong-strip-chiphang` một lớp
(0,1,0) bất kể khối CSS này đặt trước hay sau trong tệp - không dựa
vào thứ tự nguồn.
MÀU: không một hex/rgba mới - ba biến `--tl-*` khai ở khối `:root`
đầu tệp đều suy từ token nền/ô-liu sẵn có qua `color-mix()`; phần
còn lại dùng thẳng `--tam`/`--tam-cao`/`--vien`/`--oliu`/`--chu`/
`--nen`/`--oliu-sang` đã có. Dựng bảng sáng (lô riêng, CHƯA làm) chỉ
cần đổi giá trị NHỮNG TOKEN GỐC đó, không phải sửa CSS dưới đây. */
.dong-strip-chiphang.dong-tang {
display: grid;
grid-template-columns: 84px 1fr;
align-items: stretch;
background: none;
border: none;
border-radius: 0;
/* ⚠ PHẢI trả `margin-top` về 0: lớp gốc `.dong-strip-chiphang` đặt
10px cho kiểu CŨ (các khối bo góc RỜI NHAU). Quy cách 18/09 là các
trục LIỀN nhau, ngăn bằng vạch 1px - để nguyên 10px thì có CẢ khe
hở LẪN vạch, và vạch trông như treo lơ lửng giữa hai khối. */
margin-top: 0;
}
/* Vạch ngăn GIỮA các trục (18/09, quy cách Bruno duyệt) - đặt trên
trục thứ HAI trở đi bằng `+`, nên trục đầu không có vạch thừa ở
đỉnh và trục cuối không có vạch treo ở đáy. Dùng `+` thay vì
`:not(:first-child)` vì các trục bị ẨN bằng cách GỠ KHỎI DOM
(`hienKhoi`), nên "con đầu tiên" đổi theo dữ liệu - `+` luôn đúng
với đúng những trục ĐANG hiện. */
.dong-strip-chiphang.dong-tang + .dong-strip-chiphang.dong-tang {
border-top: 1px solid var(--bl-vach);
}
/* Ô nhãn - đậm hơn thân khối (`--tam`, một bậc TỐI hơn `--tam-cao`),
kẻ dọc ngăn vùng chip. `align-self:stretch` (kế thừa mặc định của
grid) khiến nó cao ĐÚNG BẰNG cột chip dù chip tràn 1 hay 2 hàng;
flex column + `justify-content:center` bên trong tự căn GIỮA cụm
chữ theo chiều cao thật đó - không cần biết trước số hàng chip. */
.dong-tang-nhan {
background: none;
border-right: none;
padding: 14px 10px 14px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* CĂN GIỮA trong cột nhãn - quy cách 18/09 */
text-align: center;
gap: 3px;
min-width: 0;
}
.dong-tang-nhan-chu {
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 700;
font-size: 20px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--bl-nhan-chu);
line-height: 1.1;
}
.dong-tang-nhan-dem {
font-size: 11px;
color: var(--chu-mo);
line-height: 1.25;
}
/* Trống (chưa kịp JS điền, hoặc tầng không có đơn vị) - đừng để một
dòng rỗng chiếm chỗ và lệch canh giữa. */
.dong-tang-nhan-dem:empty { display: none; }
.dong-tang .hang-chip { padding: 14px 0 14px 12px; gap: 8px; }
/* ---- Chip RIÊNG của bốn khối - KHÔNG đụng `.chip` gốc (dùng chung
cho `.dai-loc`/`.loc-panel`/Phụ kiện/Sale off/Tháo lắp/trang Hãng/
`#ds-sniper-strip`, vẫn giữ pill 44px cũ). Geometry áp cho MỌI chip
kể cả `.chip--vet` (0 video) - hình dạng chung, chỉ MÀU mới phân
biệt trạng thái. */
.dong-tang .chip {
height: 44px;
min-height: 44px;
padding: 0 16px;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
transition: background-color .13s, border-color .13s, color .13s;
}
/* Màu MẶC ĐỊNH - tách khỏi geometry ở trên, và CỐ Ý loại CẢ `.chip--vet`
(chip 0 video) LẪN `.chon` (đang chọn) bằng `:not()` thay vì dựa vào
thứ tự nguồn thắng-thua với `.chip.chip--vet`/`.chip.chon` ở nơi
khác trong tệp: đặc trưng (0,4,0) của hai `:not()` LUÔN thắng (0,2,0)
của chúng, không phải chuyện may rủi ai đứng trước ai.
⚠ TRẢ GIÁ lúc dựng: thiếu `:not(.chon)` làm CHÍNH RULE NÀY (0,3,0 lúc
đó) thắng luôn `.chip.chon` gốc (0,2,0) - mọi chip "Tất cả"/đang chọn
bị sơn nhầm màu mặc định thay vì ô-liu, dù DOM đúng đã mang class
`chon`. Bài canh `TestKhungLocBaKhoiThietKeLai::
test_nam_trang_thai_chip_doi_mau_dung_token` bắt được ngay (so màu
thật đọc qua token, không đoán bằng mắt). */
.dong-tang .chip:not(.chip--vet):not(.chon) {
background: var(--bl-chip-nen);
border-color: var(--bl-chip-vien);
color: var(--bl-chip-chu);
}
/* Số đếm TÁCH khỏi tên vào một ô nền riêng BÊN TRONG chip (quy cách
18/09) - không còn là chữ mờ đi cạnh tên. */
.dong-tang .chip .c-dem {
border-radius: 6px;
font-size: 13px;
font-weight: 600;
padding: 2px 8px;
background: var(--bl-dem-nen);
color: var(--bl-dem-chu);
transition: background-color .13s, color .13s;
}
/* Đang chọn - nền kế thừa từ `.chip.chon` gốc (đã đúng "nền ô-liu đặc,
chữ màu nền tối"), chỉ thêm riêng ô số "nền tối 22%" (khác bản gốc
dùng nền tối ĐẶC cho `.dai-loc`/`.loc-panel`). */
.dong-tang .chip.chon {
background: var(--bl-chon-nen);
color: var(--bl-chon-chu);
border-color: transparent;
}
.dong-tang .chip.chon .c-dem {
background: var(--bl-chon-dem-nen);
color: var(--bl-chon-dem-chu);
}
.dong-tang .chip-cham { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) {
.dong-tang .chip:not(.chip--vet):not(:disabled):hover {
background: var(--oliu-nen);
border-color: var(--oliu);
color: var(--chu);
}
.dong-tang .chip:not(.chip--vet):not(:disabled):hover .c-dem {
color: var(--oliu-chu);
}
/* Đang chọn + rê chuột - ô-liu sáng thêm một bậc, báo cho biết bấm
lại là bỏ lọc. Đặc trưng (0,4,0) thắng cặp rule ngay trên. */
.dong-tang .chip.chon:not(.chip--vet):not(:disabled):hover {
background: var(--oliu-sang);
border-color: transparent;
}
}
.dong-tang .chip:focus-visible {
outline: 2px solid var(--oliu);
outline-offset: 2px;
}
/* Chuyển động rút gọn cho hệ điều hành: luật `.dong-tang .chip
{ transition: none }` nằm trong khối `@media (prefers-reduced-motion)`
ở CUỐI tệp, không mở khối riêng ở đây - một khối thứ hai cho cùng
một truy vấn media chỉ làm người đọc phải tìm hai chỗ. (Khối ấy
trước 18/09 còn chứa `.loc-panel`; dải + panel đã xoá hẳn, xem bia
mộ ở cuối tệp.) */
/* ĐIỆN THOẠI (≤599px, ranh giới thiết bị sẵn có của trang - xem "BỐN
MỐC BỀ NGANG" cuối tệp; đề bài ghi 768px nhưng 768 = iPad DỌC, ranh
giới trang này CỐ Ý xếp iPad dọc vào dải "máy tính bảng", không phải
dải điện thoại - dùng số 768 ở đây sẽ đẻ một mốc thứ năm cho riêng
một component, đúng thứ `_NGOAI_LE` của test_chuan_giao_dien_shop.py
sinh ra để chặn). Mỗi khối: nhãn nằm TRÊN, dải chip trượt ngang MỘT
hàng bên dưới (kế thừa `overflow-x:auto` mặc định <600px của chính
`.hang-chip`, không cần khai lại). */
@media (max-width: 599px) {
/* ⚠⚠ ĐỔI BỐ CỤC 18/09 (mockup Bruno duyệt, lô "bộ lọc + rổ vét"
Việc 4): nhãn trục KHÔNG còn nằm TRÊN dải chip và căn giữa nữa -
nó xuống ĐẦU HÀNG BÊN TRÁI, cùng dòng với dải chip.
Giữ nguyên GRID của desktop, chỉ hẹp cột nhãn 84px -> 52px: ba
trục vì thế tự thẳng cột với nhau (cùng một `grid-template-columns`),
không cần một luật canh hàng riêng. Và vì nhãn là MỘT Ô GRID khác
còn `overflow-x: auto` chỉ nằm trên `.hang-chip`, nhãn ĐỨNG YÊN
khi khách vuốt chip - không cần `position: sticky` nào.
Bản cũ dùng `display: block` (nhãn trên, chip dưới) + một vạch
`border-bottom` ngăn nhãn với chip; cả hai đi theo bố cục ấy. */
.dong-strip-chiphang.dong-tang {
grid-template-columns: 52px 1fr;
}
.dong-tang-nhan {
border-right: none;
border-bottom: none;
/* Căn TRÁI, dồn lên đầu cụm chữ - quy cách 18/09 (desktop vẫn căn
giữa, khai ở khối gốc). */
align-items: flex-start;
text-align: left;
padding: 14px 8px 14px 0;
}
.dong-tang-nhan-chu {
font-size: 16px;
letter-spacing: 0.12em;
}
/* Dòng đếm phụ ("13 mẫu") xuống 10px cho vừa cột 52px - cột hẹp hơn
desktop 32px, giữ nguyên cỡ thì nó tràn sang ô chip. */
.dong-tang-nhan-dem { font-size: 10px; }
/* Vệt mờ mép phải - báo còn trượt được. Phai vào ĐÚNG màu thân khối
(`--bl-khung-nen`) nên liền mạch, không viền cứng. `pointer-events:none`
để không nuốt cú chạm vào chip nằm dưới nó.
⚠ VỆT ĐỨNG TRÊN HÀNG (không cuộn), KHÔNG trên `.hang-chip` (10/10, lô
soizz-loc-dai-toi): bản cũ đặt `::after` absolute bên TRONG chính khung
cuộn `.hang-chip` nên vệt TRÔI theo nội dung - cuộn 100px là nó nằm ở
60-67% bề ngang, đè lên chữ chip (Bruno chụp "Hi-Capa" bị che). */
.dong-strip-chiphang.dong-tang { position: relative; }
.dong-strip-chiphang.dong-tang::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0;
width: 28px;
background: linear-gradient(to right, transparent, var(--bl-khung-nen));
pointer-events: none;
}
/* Ô đệm cuối dải = bề ngang vệt: chip CUỐI cuộn được ra khỏi vùng vệt nên
đọc trọn. Dùng phần tử flex (không dùng `padding-right` - WebKit cũ bỏ
qua lề cuối của khung cuộn flex). */
.dong-tang .hang-chip::after {
content: "";
flex: 0 0 28px;
}
.dong-tang .chip {
height: 44px;
min-height: 44px;
font-size: 14px;
}
.dong-tang .chip-cham { width: 10px; height: 10px; }
}
/* ĐÓNG/MỞ dải (08/09, Phase 2 Việc 2; đổi kiểu dáng 11/09, #12 mục A) -
nút TRÒN CHỈ ICON (không chữ), mũi tên xoay theo trạng thái. Không
có `.dong-strip-tomtat` nữa mang tên nút thu gọn bên trong nó - tóm
tắt nay đứng NGAY trong hàng tiêu đề (span ở trên). */
/* Nút thu gọn CHỈ CÓ ICON (18/09, Việc 2 - quy cách Bruno duyệt):
ô VUÔNG bo 10px 44px (đủ vùng chạm), nền/viền riêng, mũi tên ô-liu.
Nhãn chữ nằm ở `aria-label` trong template - bỏ chữ trên mặt nút
chứ không bỏ tên gọi cho trình đọc màn hình. */
.dong-strip-thugon {
flex: none; margin-left: auto;
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
background: var(--bl-nut-nen); border: 1px solid var(--bl-nut-vien);
border-radius: 10px;
color: var(--oliu-chu); cursor: pointer; padding: 0;
transition: border-color .13s, background-color .13s;
}
@media (hover: hover) and (pointer: fine) {
.dong-strip-thugon:hover { border-color: var(--oliu); }
}
.dong-strip-thugon:focus-visible { outline: 2px solid var(--oliu); outline-offset: 2px; }
.dong-strip-thugon svg { width: 20px; height: 20px; transition: transform .15s; }
.dong-strip-thugon--dong svg { transform: rotate(180deg); }
/* ---- TRANG SNIPER - hai khu DMR/Bolt-action (Việc 4), mẫu KHÔNG
dòng - thẻ mẫu dùng chung KHUÔN `.the-dong`, chỉ KHÔNG có dấu khắc
"N mẫu" (mẫu là đơn vị lá, không gom gì bên dưới nó nữa). --------- */
.sniper-khu { padding: 4px 0 0; }
.sniper-khu-tieu { padding: 16px var(--le) 4px; }
.sniper-khu-phu { color: var(--chu-mo); font-size: var(--f1); }
/* Nghĩa tiếng Việt của cơ chế bắn (Việc 5, 14/09) - đứng TRONG `h2` nên
thừa hưởng hoa/giãn chữ của nó, chỉ giảm độ đậm/độ sáng cho phân bậc
rõ với tên cơ chế chính đứng trước. */
/* 24/09: chữ mờ bằng TOKEN chữ phụ thay cho `opacity: .62` - độ mờ nhân
lên màu chữ chính ra 4.3:1 trên nền sáng (trượt 4.5). */
.sniper-khu-nghia { font-weight: 500; color: var(--chu-mo); }
/* ---- tầng 2 trang chủ: chip CHỦ ĐỀ, v2 (04/09) -------------------
Viền trái olive 3px + số đếm, thay `.the-loai` (ảnh) cũ. */
.hang-chip-cuon {
display: flex; flex-wrap: wrap; gap: 8px; padding: 4px var(--le) 8px;
}
/* NÂNG CẤP 04/09 - chip chủ đề trước đây chữ bé + số xám mờ nên chìm
hẳn so với thẻ loại súng ngay trên nó. Nay ngang tầm: tên IN HOA
Barlow Condensed, số nằm trong VIÊN ô-liu đặc thay vì trôi lơ lửng.
⚠ Tên token: đề bài viết `--vd-surface2`/`--vd-line`/`--vd-ink`/
`--vd-olive*` - bộ `--vd-*` KHÔNG tồn tại trong tệp này (đã trả giá
hai lần trước ở `--vd-bg` và `--vd-olive-deep`). Ánh xạ sang token
THẬT: `--tam-cao` (nền nổi hơn `--tam` một bậc), `--vien`, `--chu`,
`--oliu`, `--oliu-dam`, và `--nen` làm chữ trên viên ô-liu. */
.chip-cd {
display: inline-flex; align-items: center; gap: 8px;
background: var(--tam-cao); border: 1px solid var(--vien);
border-left: 3px solid var(--oliu-dam); border-radius: 6px;
padding: 10px 14px; font-family: inherit; cursor: pointer;
transition: border-color .16s, background-color .16s, transform .16s;
}
.chip-cd-ten {
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 600; font-size: 14.5px; text-transform: uppercase;
letter-spacing: .07em; color: var(--chu);
}
@media (min-width: 600px) {
.chip-cd-ten { font-size: 17.5px; }
}
/* Số đếm trong VIÊN ô-liu đặc - chữ dùng `--nen` (nền trang, gần đen)
nên tương phản mạnh trên nền ô-liu sáng. Font THÂN (không Barlow)
theo đúng đề bài: con số cần dễ đọc hơn là cần hẹp. */
.chip-cd-so {
font-size: 12.5px; font-weight: 700;
background: var(--oliu); color: var(--chu-tren-oliu);
border-radius: 999px; padding: 1px 7px;
font-variant-numeric: tabular-nums;
}
/* ⚠ Chip 0 video nay ẨN HẲN ở tầng JS (không dựng phần tử) chứ không
phải làm mờ - `.chip-cd--mo` GIỮ LẠI làm lưới an toàn phòng khi một
đường dựng khác còn gắn lớp này, nhưng đường chính đã không đẻ ra
chip rỗng nữa. Xem `veChipTang2` trong video_public.js. */
.chip-cd--mo { display: none; }
/* ---- nút "xem thêm" cuối mục ---- */
/* `display` của lớp THẮNG luật [hidden] mặc định của trình duyệt -
thiếu dòng dưới đây thì nút ẩn (JS đặt thuộc tính `hidden`) vẫn hiện
nguyên, chỉ mất tác dụng bấm. Bẫy y hệt CLAUDE.md đã ghi cho
`.vp-ke`/`.vp-man-phat` ở bản trang video cũ. */
.nut-xem-them[hidden] { display: none; }
.nut-xem-them {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 4px var(--le) 4px; width: calc(100% - var(--le) * 2);
background: none; border: 1px solid var(--oliu-dam); border-radius: var(--bk);
color: var(--oliu-sang);
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; font-weight: 600; font-size: var(--f2);
text-transform: uppercase; letter-spacing: .12em;
padding: 12px; cursor: pointer;
}
.nut-xem-them svg { width: 13px; height: 13px; stroke: var(--oliu-sang); fill: none; stroke-width: 2.2; }
/* ---- hàng video trang chủ (video mới nhất / xem nhiều / mỗi loại /
đã ghim) - v3 (05/09, mockup lưới tự giãn) ------------------------
ĐỔI từ cuộn ngang (flex + overflow-x, 26/08) sang LƯỚI TỰ GIÃN
(`repeat(auto-fill, minmax(186px,1fr))`), cùng lý do và cùng lô với
`.hang-loai-cuon` ở trên - Bruno duyệt mockup mới. `.cuon-ngang` là
MỘT lớp dùng chung cho CẢ BỐN hàng trang chủ (mới nhất/xem nhiều/
mỗi loại/đã ghim, đều qua `veHangNgang()`), nên cả bốn cùng đổi -
không có cơ chế tách riêng "hai dải" khỏi "mỗi loại" mà không sửa
JS thêm tham số, và đằng nào bài toán "chừa trắng bên phải" cũng
giống hệt nhau ở cả bốn.
⚠ Trang CHI TIẾT (mockup V8) KHÔNG đụng - nó dùng `.lq-luoi`, một
lớp HOÀN TOÀN riêng, không hề gọi `veHangNgang()`/`.cuon-ngang`. */
.cuon-ngang {
display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
/* `align-items: start` (KHÔNG mặc định `stretch` của grid) - giữ
đúng tinh thần `align-items: flex-start` của bản flex cũ: thẻ
ngang/dọc cao khác nhau vài px thì mép TRÊN vẫn khớp, phần chênh
dồn xuống DƯỚI chứ không kéo dãn/đẩy lệch nội dung bên trong. */
align-items: start;
gap: 22px 16px; padding: 4px var(--le) 8px;
}
@media (max-width: 640px) {
.cuon-ngang { grid-template-columns: repeat(3, 1fr); gap: 14px 9px; }
}
/* ================= HAI DẢI VIDEO: TRƯỢT NGANG (06/09) ==============
Bruno duyệt bản giao diện mới - MỌI mục video ("Video mới nhất",
"Video xem nhiều", VÀ CẢ 9 hàng theo LOẠI SÚNG,
`data-kieu="moi-nhat"`/`"xem-nhieu"`/`"loai"`, gắn sẵn từ
`veHangNgang()`) đổi sang MỘT HÀNG cuộn ngang thật (mở rộng 06/09 -
lô đầu chỉ hai hàng cố định). CHỈ hàng ĐÃ GHIM (`data-kieu="da-ghim"`)
còn giữ `.cuon-ngang` lưới tự giãn - KHÔNG đụng. ⚠ ĐỪNG NHẦM với
khối thẻ ẢNH chọn danh mục ở đầu trang (`.hang-loai-cuon`, lớp
HOÀN TOÀN khác, không qua `[data-kieu]`/`veHangNgang()`) - khối đó
vẫn là lưới tự giãn như cũ, không nằm trong phạm vi khối CSS này.
Lý do đổi: lưới nhiều hàng trộn thẻ ngang (rộng gấp 3 thẻ dọc) với
thẻ dọc luôn để lại lỗ trống lớn ở cuối hàng lẻ; một hàng cuộn thì
không bao giờ có lỗ - thẻ nào cũng nối đuôi thẻ kia.
Chọn lọc bằng ATTRIBUTE SELECTOR trên `[data-kieu]` (đã có sẵn từ
26/08, không cần thêm lớp JS) - `.cuon-ngang` gốc vẫn là NỀN TẢNG
dùng chung (align-items, v.v.), khối này chỉ GHI ĐÈ display/scroll
cho đúng các hàng cần đổi. */
.hang-ngang[data-kieu="moi-nhat"] .cuon-ngang,
.hang-ngang[data-kieu="xem-nhieu"] .cuon-ngang,
.hang-ngang[data-kieu="loai"] .cuon-ngang,
.hang-ngang[data-kieu="co-san"] .cuon-ngang,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang {
display: flex; flex-wrap: nowrap; gap: 16px;
overflow-x: auto; overflow-y: hidden;
scroll-behavior: smooth; scroll-snap-type: x proximity;
/* Ẩn thanh cuộn - vuốt tay vẫn hoạt động, chỉ giấu thanh xám xấu. */
scrollbar-width: none; -ms-overflow-style: none;
}
.hang-ngang[data-kieu="moi-nhat"] .cuon-ngang::-webkit-scrollbar,
.hang-ngang[data-kieu="xem-nhieu"] .cuon-ngang::-webkit-scrollbar,
.hang-ngang[data-kieu="loai"] .cuon-ngang::-webkit-scrollbar,
.hang-ngang[data-kieu="co-san"] .cuon-ngang::-webkit-scrollbar,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang::-webkit-scrollbar {
display: none; width: 0; height: 0;
}
/* Thẻ dọc rộng CỐ ĐỊNH 186px (khớp `minmax(186px,...)` của lưới, cùng
một con số cho quen mắt). `.the-cuoi` đi CÙNG bề ngang thẻ dọc - nó
là một ô dọc bình thường trong dải. `flex: 0 0 …` khoá cứng bề
ngang, không co giãn theo khoảng trống còn lại.
⚠ BỀ NGANG THẺ NGANG DÙNG TỈ LỆ CHÍNH XÁC (256/81), KHÔNG PHẢI "3
thẻ dọc + 2 khe hở" (06/09, tự sửa sau khi đo). Đề bài gốc tả công
thức "3× + 2 khe" cho cả hai mốc - ở mốc RỘNG (186px/16px) nó tình
cờ chỉ lệch 1,2px (186×16/9=330,67 so với (186×3+16×2)×9/16=331,88),
nhưng ở mốc HẸP theo vw thì lệch tới 7px giữa 434-640px (đo thật ở
600px: 331 so với 324) - vượt hẳn bất biến "sai số ≤2px" mà chính
đề bài liệt trong mục BÀI CANH. Suy ra công thức đúng từ định nghĩa
"cao bằng nhau": cao_dọc = W_dọc×16/9, cao_ngang = W_ngang×9/16;
cho hai vế bằng nhau ra W_ngang = W_dọc×(16/9)² = W_dọc×256/81 -
ĐÚNG ở MỌI bề ngang màn, không chỉ tình cờ đúng ở một mốc. Ưu tiên
giữ đúng bất biến chiều cao (có bài canh cứng số `TestDongCaoThe
TrongMotHang`) hơn giữ đúng chữ công thức minh hoạ trong đề bài. */
.hang-ngang[data-kieu="moi-nhat"] .cuon-ngang,
.hang-ngang[data-kieu="xem-nhieu"] .cuon-ngang,
.hang-ngang[data-kieu="loai"] .cuon-ngang,
.hang-ngang[data-kieu="co-san"] .cuon-ngang,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang {
--rong-doc-truot: 186px;
}
.hang-ngang[data-kieu="moi-nhat"] .cuon-ngang > .the-nho,
.hang-ngang[data-kieu="xem-nhieu"] .cuon-ngang > .the-nho,
.hang-ngang[data-kieu="loai"] .cuon-ngang > .the-nho,
.hang-ngang[data-kieu="co-san"] .cuon-ngang > .the-nho,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang > .the-nho,
.hang-ngang[data-kieu="moi-nhat"] .cuon-ngang > .the-cuoi,
.hang-ngang[data-kieu="xem-nhieu"] .cuon-ngang > .the-cuoi,
.hang-ngang[data-kieu="loai"] .cuon-ngang > .the-cuoi,
.hang-ngang[data-kieu="co-san"] .cuon-ngang > .the-cuoi,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang > .the-cuoi {
flex: 0 0 var(--rong-doc-truot); width: var(--rong-doc-truot);
scroll-snap-align: start;
}
.hang-ngang[data-kieu="moi-nhat"] .cuon-ngang > .the-nho--ngang,
.hang-ngang[data-kieu="xem-nhieu"] .cuon-ngang > .the-nho--ngang,
.hang-ngang[data-kieu="loai"] .cuon-ngang > .the-nho--ngang,
.hang-ngang[data-kieu="co-san"] .cuon-ngang > .the-nho--ngang,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang > .the-nho--ngang {
flex-basis: calc(var(--rong-doc-truot) * 256 / 81);
width: calc(var(--rong-doc-truot) * 256 / 81);
}
@media (max-width: 640px) {
.hang-ngang[data-kieu="moi-nhat"] .cuon-ngang,
.hang-ngang[data-kieu="xem-nhieu"] .cuon-ngang,
.hang-ngang[data-kieu="loai"] .cuon-ngang,
.hang-ngang[data-kieu="co-san"] .cuon-ngang,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang {
gap: 8px; --rong-doc-truot: 31vw;
}
}
/* ================= KỆ "SẢN PHẨM ĐANG CÓ SẴN / SẮP VỀ" (23/09) ===========
Mockup Bruno duyệt 23/09 (`mockup/mockup-san-pham-co-san-v2.html`): MỌI
thẻ cùng một cỡ 16:9, tên mã ql, mác treo HÀNG SẴN/SẮP VỀ góc phải ảnh,
giá đã che (chữ thường, không đậm) + nút chat cùng hàng. Thẻ dựng ở JS
`veTheKe` - ghi đè bề ngang thẻ dọc/ngang của dải trượt chung phía trên. */
.hang-ngang[data-kieu="co-san"] .cuon-ngang,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang { --rong-ke: 260px; }
.hang-ngang[data-kieu="co-san"] .cuon-ngang > .the-ke,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang > .the-ke {
flex: 0 0 var(--rong-ke); width: var(--rong-ke);
scroll-snap-align: start;
}
@media (max-width: 640px) {
/* Thẻ thứ hai LÓ MÉP ở màn điện thoại = còn vuốt được. */
.hang-ngang[data-kieu="co-san"] .cuon-ngang,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang { --rong-ke: 64vw; }
}
.the-ke {
position: relative; display: flex; flex-direction: column;
background: var(--tam); box-shadow: var(--bong-the); border: 1px solid var(--vien);
border-radius: 12px; overflow: hidden;
}
.ke-khung { position: relative; aspect-ratio: 16 / 9; background: var(--ta-khung); }
.ke-hinh {
position: absolute; inset: 0; display: block; width: 100%;
padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
}
.ke-hinh .hinh { position: absolute; inset: 0; overflow: hidden; }
.ke-hinh img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ghim dời xuống góc TRÁI DƯỚI ảnh - góc phải trên là chỗ của mác treo. */
.the-ke .ghim { top: auto; right: auto; left: 8px; bottom: 8px; }
/* MÁC TREO: đầu nhọn có khoen áp cạnh phải, xoay quanh chính đầu khoen
(`transform-origin` 90%) cho thân mác rủ xuống như đang treo. Màu tô ở
đây bằng token, SVG trong JS chỉ mang hình. */
.ke-mac {
position: absolute; right: 4px; top: 8px; z-index: 2;
display: block; line-height: 0; pointer-events: none;
transform: rotate(-7deg); transform-origin: 90% 50%;
filter: drop-shadow(0 2px 3px var(--bong));
}
.ke-mac svg { display: block; }
.ke-mac .than { fill: var(--c-mac-san); }
.ke-mac .sang { fill: var(--ta-chu); fill-opacity: .14; }
.ke-mac .chi {
fill: none; stroke: var(--ta-chu); stroke-opacity: .55;
stroke-width: .9; stroke-dasharray: 2.2 1.8;
}
.ke-mac .khoen { fill: var(--ta-chu); fill-opacity: .85; }
.ke-mac .lo { fill: var(--ta-nen); }
.ke-mac text {
fill: var(--ta-chu); font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700; font-size: var(--f3); letter-spacing: .06em;
}
.ke-mac--ve .than { fill: var(--D-order); }
.ke-mac--ve .chi { stroke: var(--ta-nen); stroke-opacity: .4; }
.ke-mac--ve text { fill: var(--ta-nen); }
.ke-ten {
display: block; width: 100%; padding: 8px 12px 0; margin: 0;
background: none; border: 0; text-align: left; color: var(--chu); cursor: pointer;
}
.ke-ten-chu {
font-size: var(--f3); font-weight: 600; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: 2.6em;
}
.ke-duoi {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 4px 12px 12px; margin-top: auto;
}
.ke-gia {
min-width: 0; font-size: var(--f3); font-weight: 500;
color: var(--oliu-sang); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ke-gia-phu { margin-left: 8px; font-size: var(--f1); font-weight: 400; color: var(--chu-mo); }
/* Nút chat = CHỈ ICON, không nền không viền tròn (Bruno 27/09: "chỉ icon
không thôi không có nút tròn, icon to một chút cho nổi bật"). Icon 28px,
rồi hạ còn 90% = 25,2px cùng ngày (bản cũ 18px trong vòng tròn 36px). */
.ke-chat {
flex: none; position: relative; width: 32px; height: 32px; padding: 0;
display: grid; place-items: center; cursor: pointer;
background: none; border: 0; color: var(--oliu-sang);
transition: transform .15s ease;
}
/* 44px vùng chạm, bung bằng `::before` (cùng cách `.ghim`/`.the-ma-sua`). */
.ke-chat::before {
content: ""; position: absolute; top: 50%; left: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.ke-chat svg { width: 25.2px; height: 25.2px; transform: translateY(2.3px); }
/* ↑ NGANG HÀNG GIÁ (Bruno 27/09): khung icon đã căn giữa theo hàng, nhưng hai
đuôi bong bóng kéo khung xuống - THÂN bong bóng (y 1→18,55 của viewBox 24)
có tâm cao hơn tâm khung 2,22/24 × 25,2px ≈ 2,3px, trông như nổi cao hơn
chữ giá. Hạ đúng ngần ấy để tâm THÂN trùng tâm chữ giá; đuôi thò xuống dưới. */
.ke-chat:focus-visible { outline: 2px solid var(--oliu-sang); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
.ke-chat:hover { transform: scale(1.12); }
}
.the-ke .the-ma { margin: 0 12px 12px; }
/* Thẻ "Xem tất cả" cuối hai hàng kệ: cao ĐÚNG bằng thẻ kệ. Dáng mặc định của
nó là thẻ dọc 9:16 (331px ở 186px ngang) - đo production 23/09 sau deploy:
thẻ kệ 247px, hàng dư ~85px trống dưới đáy. */
.hang-ngang[data-kieu="co-san"] .cuon-ngang > .the-cuoi,
.hang-ngang[data-kieu="sap-ve"] .cuon-ngang > .the-cuoi {
aspect-ratio: auto; align-self: stretch; border-radius: 12px;
}
/* Màn "Xem tất cả" của hai hàng: MỘT lưới thẻ kệ (`napCoSanDs`). */
.lq-nhom--ke .lq-nhom-dau { display: none; }
.lq-luoi.luoi-ke { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; }
@media (max-width: 640px) {
.lq-luoi.luoi-ke { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* ---- Bọc dải + MŨI TÊN TRƯỢT (Việc 3) ---------------------------
CẤM nút tròn nền đen, CẤM vệt mờ cố định hai mép - mũi tên là SVG
nét mảnh trong suốt, chỉ tối góc đó lúc RÊ CHUỘT vào đúng vùng bấm.
`.dai-truot-boc` chỉ được JS chèn cho hai hàng trượt (xem
`veHangNgang`), không tồn tại ở hàng loại/ghim. */
.dai-truot-boc { position: relative; }
.mui-ten {
position: absolute; top: 0; bottom: 34px; width: 84px;
background: transparent; border: none; padding: 0; margin: 0;
display: flex; align-items: center; justify-content: center;
color: var(--chu); cursor: pointer; z-index: 5;
transition: background .16s;
}
.mui-ten--trai { left: 0; }
.mui-ten--phai { right: 0; }
.mui-ten svg {
width: 35px; height: 35px; opacity: .5;
transition: opacity .16s;
}
@media (hover: hover) and (pointer: fine) {
.mui-ten--trai:hover {
background: linear-gradient(to right, var(--mui-ten-nen), transparent);
}
.mui-ten--phai:hover {
background: linear-gradient(to left, var(--mui-ten-nen), transparent);
}
.mui-ten:hover svg { opacity: 1; }
}
/* Đầu dải: ẩn mũi tên trái. Cuối dải: ẩn mũi tên phải. JS đo
`scrollLeft` rồi gắn/gỡ lớp này (xem `capNhatMuiTen`). */
.mui-ten.an { display: none; }
@media (max-width: 640px) {
/* Vuốt tay như thường, không cần mũi tên ở màn hẹp. */
.mui-ten { display: none; }
}
/* ---- THẺ CLIP HAI HƯỚNG (26/08, thích nghi lưới 05/09) -----------
Kho có HAI loại video, gần 50/50 (đo thật: 1044 dọc / 1111 ngang).
Luật CŨ "cùng chiều cao, khác bề ngang" nay đổi cách đạt tới: trong
lưới, MỌI cột cùng bề ngang (`1fr` chia đều) nên thẻ DỌC tự nhiên
cùng cao (bề ngang x 16/9 qua `aspect-ratio` của `.hinh`) - không
cần biến `--cao-thumb`/`--rong-clip` neo tay nữa, GỠ CẢ HAI (xem
`:root` và bốn mốc bề ngang cuối tệp). Thẻ NGANG chiếm ĐÚNG 3 CỘT
(`grid-column: span 3`) - ba cột cộng hai khe hở, đưa qua tỉ lệ
16:9, ra xấp xỉ đúng chiều cao một thẻ dọc ở bề ngang cột quanh
186-200px (khoảng cột thực tế của lưới `minmax(186px,1fr)`). */
.the-nho {
width: 100%;
transition: transform .16s, box-shadow .16s;
/* Mốc cho `.the-sua`/`.ghim` đặt tuyệt đối (12/09) - hai nút là ANH
EM của `.the-nho-hit`, KHÔNG lồng trong nó (bài học 2534bb4, xem
chú thích đầy đủ ở JS `veTheNho`/`veTheVideo`), nên phải neo vào
thẻ ngoài này - `.hinh` nằm khít mép trên của `.the-nho-hit`
(không padding/border chen giữa) nên vị trí số liệu giữ NGUYÊN,
không cần đổi bất kỳ top/left/right nào. */
position: relative;
}
.the-nho-hit {
display: block; width: 100%;
text-align: left; color: inherit; font: inherit;
background: none; border: none; padding: 0; margin: 0; cursor: pointer;
}
.the-nho--ngang { grid-column: span 3; }
@media (max-width: 640px) {
/* Thẻ ngang trải trọn bề ngang hàng ở mốc điện thoại - 3 cột dọc
hẹp không đủ chỗ chia ba cho một thẻ ngang mà không vỡ tỉ lệ. */
.the-nho--ngang { grid-column: 1 / -1; }
}
.the-nho .hinh {
width: 100%; aspect-ratio: 9 / 16;
border-radius: var(--bk); border: 1px solid var(--vien);
position: relative; overflow: hidden; background: var(--ta-khung);
transition: border-color .16s;
}
.the-nho--ngang .hinh { aspect-ratio: 16 / 9; }
.the-nho .hinh img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Vùng chữ CỐ ĐỊNH chiều cao (2 dòng) để ĐÁY thẻ thẳng hàng - tựa một
dòng và tựa hai dòng mà để tự co thì đáy so le, nhìn như hàng bị lỗi. */
/* ⚠ FONT TIÊU ĐỀ THẺ - GỘP VỀ MỘT KHUÔN VỚI `.the-video .tv` (04/09).
GỐC LỖI của lô trước: Barlow Condensed CHỈ được áp cho `.the-video
.tv` (lưới màn danh sách + tìm kiếm), còn `.the-nho .ten-v` (hàng
cuộn trang chính + hai dải trang chi tiết) KHÔNG hề khai
`font-family` nên thừa kế font THÂN (Inter) của `body`. Không phải
bị lớp khác đè, không phải sai tên lớp, không cần `!important` -
chỉ là áp thiếu MỘT trong HAI thành phần thẻ. Bruno soi production
trang chủ (hàng cuộn) nên thấy đúng chỗ chưa được áp.
Nay hai lớp dùng CÙNG bộ giá trị; sửa một chỗ thì sửa cả hai. */
.the-nho .ten-v {
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 500;
font-size: 19px; line-height: 1.22; letter-spacing: .015em;
color: var(--chu); margin-top: 8px; transition: color .16s;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
/* `min-height` (không phải `height` cố định như bản cũ) - cùng cơ
chế giữ đáy thẻ thẳng hàng mà `.the-video .tv` đang dùng: tựa một
dòng và tựa hai dòng đều chiếm đúng 2.44em. */
min-height: 2.44em;
}
@media (max-width: 640px) {
.the-nho .ten-v { font-size: 16.5px; }
}
/* nhãn lượt xem (góc trái dưới) - chỉ hiện khi có số (mục 5, Việc 2).
⚠ TÁCH KHỎI NHÃN THỜI LƯỢNG, KHÔNG BAO GIỜ CHẠM NHAU (26/08) - xem
giải thích công thức đầy đủ tại chỗ tạo ra hai nhãn này trong
`video_public.js` (`veTheNho`).
⚠ ĐO THẬT TRƯỚC KHI CHỐT SỐ (bẫy tự bắt được lúc dựng): bản đầu chỉ
thêm `max-width: calc(50% - 9px)`, GIỮ NGUYÊN cỡ chữ/đệm cũ (`--f1`,
`padding: 4px 8px`, `gap: 4px`). Hai nhãn HẾT CHẠM NHAU thật, nhưng
đo lại thì khoảng còn cho CHỮ chỉ 13px trong khi "5,5M" cần ~30px -
MỌI số bình thường bị cắt còn "5..". `.textContent` vẫn đúng
("5,5M") nên bài test đầu tiên (đọc `.textContent`) XANH mà không hề
canh cái mắt nhìn thấy - phải đo `scrollWidth` của CHÍNH `.xem-so`
mới bắt được.
Card dọc ở 390px chỉ rộng 108px - không đủ chỗ cho cả hai nhãn ở cỡ
chữ/đệm gốc mà không chạm. Phải THU NHỎ CẢ HAI (đệm, khe hở icon, cỡ
icon, cỡ chữ - xem `--f-nhan-goc`) để nội dung THẬT SỰ vừa, không
chỉ ép một cái trần rồi cắt chữ cho vừa cái trần đó.
Đo lại sau khi thu nhỏ: "5,5M"/"726K"/"367K" tự nhiên rộng 51-53px,
còn dư 8-10px hở với `.dai` mà KHÔNG cần chạm ngưỡng `max-width`. */
.hinh .xem {
position: absolute; left: 4px; bottom: 4px;
max-width: calc(60% - 5px);
background: var(--nhan-nen); border-radius: var(--bk);
font-size: var(--f-nhan-goc); padding: 2px 5px; color: var(--ta-chu);
display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums;
}
.hinh .xem svg { width: 9px; height: 9px; flex: none; fill: none; stroke: var(--ta-chu); stroke-width: 2; }
/* Chữ số MỚI co lại (ellipsis) khi hết chỗ - `min-width: 0` bắt buộc
để flex item chịu co dưới kích thước nội dung tự nhiên của nó.
Đây là LƯỚI AN TOÀN cho dữ liệu bất thường (sổ hỏng ra một con số
khổng lồ), KHÔNG PHẢI cơ chế chính để hai nhãn tách nhau - cơ chế
chính là thu nhỏ đệm/chữ ở trên, để số bình thường không bao giờ
chạm tới ngưỡng này. */
.hinh .xem-so {
min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* ================= HÀNG NGANG TRANG CHỦ (26/08) ==================
Trang chủ nay là một CHỒNG hàng ngang cùng khuôn: "mới nhất",
"xem nhiều", rồi mỗi loại đủ 10 clip một hàng. Tất cả dùng chung
`.hang-ngang` + `.cuon-ngang` + `.the-nho` đã có sẵn - hàng ghim
của lô sau chỉ việc chèn thêm MỘT `.hang-ngang` nữa, không phải
thêm lớp nào. */
.hang-ngang { padding-bottom: 4px; }
/* Vạch ngăn MẢNH giữa hai hàng. Dùng `+` chứ không phải viền dưới
trên từng hàng: hàng cuối không có vạch thừa, và hàng ghim chèn
vào giữa cũng tự có vạch mà không sửa gì. */
.hang-ngang + .hang-ngang { border-top: 1px solid var(--vien); }
.hang-khoi { padding-bottom: 0; }
.hang-dau { gap: 8px; }
/* Ảnh loại 38x29 thay chỗ vạch ô-liu. Hai hàng cố định (mới nhất /
xem nhiều) không có ảnh nên vẫn đeo `.gach` như cũ. */
.hang-dau .hang-anh {
width: 38px; height: 29px; flex: none; align-self: center;
border-radius: var(--bk); border: 1px solid var(--vien);
object-fit: cover; display: block; background: var(--ta-khung);
}
.hang-dau h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hang-dau .hang-phu-en { font-size: var(--f1); color: var(--chu-mo); flex: none; }
/* Số clip dồn phải, màu ô-liu (khác `.khoi-dau .dem` xám của khối cũ).
`font-size` khai THẲNG (không qua `--f1` dùng chung 19 chỗ khác
trong tệp) - 06/09 "chữ to lên toàn trang" chỉ nhắm đúng con số cạnh
tiêu đề mục, đổi `--f1` sẽ kéo theo 18 chỗ khác không được giao. */
.hang-dau .hang-so { margin-left: auto; flex: none; color: var(--so-loai); font-size: 13.5px; }
/* "Xem thêm 22 ›" ở hàng "Sản phẩm đang có sẵn"/"Sắp về" (Bruno duyệt mockup
24/09): CHỮ TRƠN, không viền không bo tròn; SỐ khác màu, lấy đúng màu mác
trên thẻ của hàng ấy (xanh "HÀNG SẴN", vàng "SẮP VỀ") - không đẻ màu mới.
Đệm dọc + lề âm cùng cỡ: vùng chạm cao hơn chữ mà hàng tiêu đề không cao
thêm một điểm ảnh. */
.hang-dau .hang-xem-them {
margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px;
padding: 8px 0; margin-block: -8px;
color: var(--oliu-sang); font-size: 14.5px; font-weight: 600;
white-space: nowrap; text-decoration: none;
}
.hang-dau .hang-xem-so { font-weight: 700; }
/* 24/09: số "Xem thêm" của hàng "có sẵn" dùng màu CÒN HÀNG theo chế độ -
`--c-mac-san` là nền mác đè trên ảnh, làm chữ trên nền sáng chỉ 2.85:1. */
.hang-ngang[data-kieu="co-san"] .hang-xem-so { color: var(--c-con-hang); }
.hang-ngang[data-kieu="sap-ve"] .hang-xem-so { color: var(--c-hang-order); }
.hang-dau .hang-xem-them svg {
width: 15px; height: 15px; flex: none;
fill: none; stroke: currentColor; stroke-width: 2.4;
}
/* ---- THẺ CUỐI "XEM TẤT CẢ" ----
Cố ý KHÁC hẳn thẻ clip: viền đứt ô-liu, không ảnh, mũi tên trong
vòng tròn.
v3 (05/09): trong lưới, thẻ này là MỘT Ô DỌC bình thường (không
span) - bề ngang tự bằng cột lưới như mọi thẻ dọc khác,
`aspect-ratio: 9/16` tự suy chiều cao, không cần neo `--cao-thumb`
(đã gỡ, xem `.cuon-ngang`/`.the-nho` ở trên). */
.the-cuoi {
width: 100%; aspect-ratio: 9 / 16;
/* Hàng lưới không có khái niệm "dãn theo ô cao nhất" như flex, nhưng
giữ `align-self: start` cho chắc nếu sau này có hàng trộn nhiều
hàng lưới (grid-row tự động không đều). */
align-self: start;
border: 1px dashed var(--vien-oliu); border-radius: var(--bk);
background: var(--oliu-nen); color: var(--oliu-sang); text-decoration: none;
display: flex; flex-direction: column; align-items: center; justify-content: center;
/* Đệm NGANG hẹp hơn đệm dọc: khổ mới chỉ 77px, mà con số thật của
hai hàng cố định là "2.155 video" - đo được cần 66px, còn đệm 6px
hai bên chỉ chừa 63px nên nó bị cắt bằng dấu ba chấm. Đo rồi mới
chọn 4px, không gõ bừa. */
gap: 6px; padding: 6px 4px; text-align: center;
}
/* Vòng 40px (06/09, đúng mockup Việc 2) - bình luận CŨ "khổ chỉ 77px
nên phải co 36->28" đã LỖI THỜI: đó là số đo TRƯỚC khi dải video đổi
sang trượt ngang (26/08), lúc `.the-cuoi` còn nằm trong lưới hẹp.
Nay khổ thẻ neo theo `--rong-doc-truot` (186px desktop, 31vw mobile
~121px ở 390px) - dư sức cho vòng 40px, không còn ràng buộc cũ. */
.the-cuoi .tc-vong {
width: 40px; height: 40px; flex: none; border-radius: 50%;
border: 1px solid var(--vien-oliu);
display: flex; align-items: center; justify-content: center;
}
.the-cuoi .tc-vong svg { width: 18px; height: 18px; stroke: var(--oliu-sang); }
.the-cuoi .tc-chu {
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
/* 16.5px/.12em (06/09, "chữ to lên toàn trang" - trước 15px cùng ngày).
Đổi CHUNG cho cả hai dải trượt lẫn hàng loại/ghim (grid): một thẻ
"Xem thêm" dùng chung một kiểu chữ ở mọi nơi nó xuất hiện, chỉ BỀ
NGANG khối bọc là khác theo bố cục (flex hay grid). */
font-weight: 700; font-size: 16.5px;
text-transform: uppercase; letter-spacing: .12em; line-height: 1.1;
}
/* Số video MỘT DÒNG - khổ hẹp mà để nó vỡ đôi thì thẻ cao lên và lại
so le với vùng ảnh. `font-size` khai THẲNG 12.5px (không qua `--f1`
dùng chung 19 chỗ khác) - cùng lý do đã ghi ở `.hang-dau .hang-so`. */
.the-cuoi .tc-so {
font-size: 12.5px; color: var(--chu-mo);
white-space: nowrap; max-width: 100%; overflow: hidden;
text-overflow: ellipsis;
}
/* ================= NÚT GHIM (26/08) ================================
Góc TRÊN-PHẢI ảnh clip đã chừa sẵn từ lô hàng ngang: nhãn thời lượng
ở dưới-phải, nhãn lượt xem ở dưới-trái, không thứ gì chạm vào đây.
MỘT bộ luật cho MỌI nơi có thẻ clip (hàng cuộn ngang, lưới màn danh
sách, dòng kết quả tìm) - `veNutGhim()` bên JS cũng là MỘT hàm. Ba
bản chép ra ba chỗ là ba chỗ lệch nhau, đúng bài học cây chính/cây
phụ ở e3fa724.
⚠ VÙNG CHẠM >= 44px dù ô vẽ chỉ 28px: bung ra bằng `::before` phủ
trong suốt, KHÔNG bằng cách phóng to nút - phóng to là che mất ảnh
clip, mà cái người ta đang xem chính là ảnh ấy. */
.ghim {
position: absolute; top: 6px; right: 6px; z-index: 2;
width: var(--o-ghim); height: var(--o-ghim);
border: none; border-radius: 50%; background: var(--nhan-nen);
color: var(--ta-chu); display: flex; align-items: center; justify-content: center;
padding: 0; cursor: pointer;
transition: background-color .16s;
}
.ghim::before {
content: ""; position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: var(--cham-ghim); height: var(--cham-ghim);
}
/* Chưa ghim: viền trắng RỖNG. Đã ghim: ĐẶC màu ô-liu. Khác nhau ở CẢ
nét lẫn ruột nên phân biệt được kể cả khi nhìn lướt trên nền ảnh. */
.ghim svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.ghim.da-ghim { color: var(--ta-oliu-ro); }
.ghim.da-ghim svg { fill: currentColor; stroke: currentColor; }
.the-video .ghim { top: 10px; right: 10px; }
/* ---- hàng "Đã ghim" ---- */
/* Vạch ngăn: hàng ghim nằm ở khối RIÊNG (`#tc-hang-ghim`) nên luật
`.hang-ngang + .hang-ngang` không với tới nó - tự khai một vạch dưới.
Không sợ chồng đôi: hàng đầu của `#tc-cac-hang` không có anh em
`.hang-ngang` đứng trước nên không ăn `border-top`. */
#tc-hang-ghim > * { border-bottom: 1px solid var(--vien); }
.hang-ghim-trong { padding-bottom: 4px; }
/* Dòng báo thoáng qua. `pointer-events: none` là phần QUAN TRỌNG:
nó nổi ở đáy màn, ngay chỗ ngón cái hay chạm - bắt sự kiện chuột là
nó nuốt mất cú chạm vào thẻ clip bên dưới. */
.bao-thoang {
position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
transform: translateX(-50%); z-index: 60; pointer-events: none;
max-width: calc(100% - 32px);
background: var(--tam-cao); color: var(--chu);
border: 1px solid var(--vien-oliu); border-radius: var(--bk);
padding: 12px 16px; font-size: var(--f1); line-height: 1.4;
box-shadow: 0 4px 16px var(--bong); text-align: center;
}
.bao-thoang[hidden] { display: none; }
.ghim-loi-moi {
color: var(--chu-mo); font-size: var(--f1); line-height: 1.5;
padding: 0 var(--le) 16px;
}
/* ---- V5 (26/08): THẺ SẢN PHẨM ------------------------------------ */
.the-sp {
display: flex;
align-items: center;
gap: 12px;
margin: 12px var(--le) 0;
padding: 10px;
border: 1px solid var(--vien);
border-radius: var(--bk);
background: var(--tam);
box-shadow: var(--bong-the);
}
.the-sp[hidden] { display: none; }
/* DẢI BÁO CHẾ ĐỘ XEM THỬ (04/09). Cố ý CHÓI và nằm trên cùng: mục
đích duy nhất là không ai nhìn nhầm giá/thông số demo thành thật.
Dùng `--c-hang-order` (vàng hổ phách) - đã có sẵn trong bảng, và
vàng cảnh báo là đúng nghĩa ở đây. */
.dai-demo {
position: sticky; top: 0; z-index: 60;
background: var(--c-hang-order); color: var(--chu-tren-oliu);
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 700; font-size: 12.5px; letter-spacing: .14em;
text-transform: uppercase; text-align: center;
padding: 5px 12px;
}
.the-sp-anh {
/* 64px -> 80px (Commit 4) -> 84px (04/09, Bruno chốt theo mockup V8).
Hai lệnh cũ lệch nhau 4px, đã hỏi và Bruno chốt lấy 84 của V8. */
width: 84px; height: 84px; flex: none;
border-radius: var(--bk);
border: 1px solid var(--vien);
object-fit: cover;
background: var(--ta-khung);
}
.the-sp-chu { min-width: 0; flex: 1; }
.the-sp-ten {
color: var(--chu);
font-size: 14px; font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Giá và "Xem thêm" CÙNG MỘT HÀNG, đẩy hai đầu - hai thứ người ta liếc
cùng lúc, "Xem thêm" LUÔN dạt phải dù giá ngắn/dài. */
.the-sp-hang {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 4px;
}
/* Giá LUÔN Ở DẠNG ĐÃ CHE (`the.gia_che` che sẵn ở máy chủ, xem
`_thong_tin_san_pham`/`che_gia()`) - trang khách không bao giờ nhận
số đầy đủ để mà lỡ hiện ra. */
.the-sp-gia {
color: var(--oliu-sang);
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 700;
font-size: 21px;
font-variant-numeric: tabular-nums;
}
/* "Xem thêm" KHÔNG viền, màu ô-liu (khác nút tư vấn ở HÌNH DÁNG - chữ
trần không nền, không phải ở màu). */
.the-sp-xem {
display: inline-flex; align-items: center; gap: 2px;
color: var(--oliu-chu);
text-decoration: none;
font-size: var(--f1);
border: none;
background: none;
padding: 0;
margin-left: auto;
}
.the-sp-xem svg { width: 13px; height: 13px; }
.the-sp-tt {
display: flex; align-items: center; gap: 6px;
margin-top: 6px;
font-size: var(--f1);
}
/* Chấm tròn đầu dòng, màu THEO ĐÚNG màu chữ (currentColor) - đổi màu
trạng thái thì chấm tự đổi theo, không cần khai lại ba lần. */
.the-sp-tt::before {
content: ""; width: 7px; height: 7px; border-radius: 999px;
background: currentColor; flex: none;
}
.the-sp-tt--con_hang { color: var(--c-con-hang); }
.the-sp-tt--hang_order { color: var(--c-hang-order); }
.the-sp-tt--het_hang { color: var(--c-het-hang); }
/* ---- V3 (26/08): nút tư vấn theo NGỮ CẢNH ------------------------
Header màn chi tiết: thu thành ICON VUÔNG ngang cỡ nút tìm kiếm.
Thân trang đã có một nút to full-rộng, để thêm một nút chữ trên
header là hai lời mời giống hệt nhau tranh chỗ của tiêu đề video. */
.nut-fb--icon {
/* VUÔNG thật, không phải "gần vuông": đặt cả `width` lẫn `height`
và bỏ padding dọc thừa. Đo thật lần đầu ra 38x30 - trông như một
nút bị bóp, không như icon cạnh nút tìm.
44px (không phải 38px) - VÙNG CHẠM = chính hộp nút, khớp
`.nut-tim` cạnh nó (xem lý do "đừng dùng lớp phủ" tại đó). */
padding: 0;
width: 44px;
height: 44px;
flex: none;
justify-content: center;
}
.nut-fb--icon svg { width: 18px; height: 18px; }
/* ⚠ KHÔNG khai luật ẩn `.fb-chu-*` ở đây - nút icon KHÔNG CÓ span chữ
nào để mà ẩn (xem `video.html`). Đã thử viết luật ấy: sabotage bỏ nó
đi thì không bài nào đỏ, vì nó chưa từng chạm được vào phần tử nào.
Một dòng CSS không làm gì thì sớm muộn cũng có người sửa nó rồi
tưởng mình vừa đổi cái gì đó. */
/* Nút CHÍNH: nền ô-liu đặc, full rộng, chữ in đậm, icon chat bên trái. */
.nut-tv-chinh {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 12px var(--le) 0;
min-height: 52px;
padding: 12px 16px;
border-radius: var(--bk);
background: var(--oliu);
color: var(--chu-tren-oliu);
text-decoration: none;
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 700;
font-size: var(--f3);
text-transform: uppercase;
letter-spacing: .1em;
}
.nut-tv-chinh svg { width: 18px; height: 18px; flex: none; }
.nut-tv-chinh:active { filter: brightness(1.12); }
.nut-tv-chinh[hidden] { display: none; }
/* NGỪNG BÁN (10/10): icon tư vấn đầu trang chi tiết + nút chat thẻ kệ ẩn được
- `.nut-fb`/`.ke-chat` đặt `display` bằng lớp, thắng `[hidden]` mặc định. */
.nut-fb[hidden], .ke-chat[hidden] { display: none; }
/* ⚠ `.nut-tv-phu` ĐÃ GỠ (V8) cùng phần tử nó tô - xem `video.html`.
Đừng dựng lại: câu ấy giải thích một việc nút đã tự làm, và ở bố cục
hai-ô nó rơi xuống dưới ô phải làm lệch chiều cao hai ô. */
/* ================= V0: TẤM THÔNG SỐ (spec plate) ==================
Kiểu tấm thép khắc quân sự. Dùng CHUNG cho màn chi tiết và màn lưới
- một component, không phải hai bản gần giống nhau.
v2 (04/09, mockup duyệt 03/09): DẢI NGANG MỘT HÀNG thay khối dọc cũ
(tiêu đề kẹp vạch phía trên, các dòng khoá-giá trị xếp chồng phía
dưới). ⚠ `.tam-dau`/`.tam-vach`/`.tam-tieu-de`/`.tam-day` GIỮ NGUYÊN
CSS dù `veTamThongSo` (tấm 1 sản phẩm) không còn dùng - BẢNG SO SÁNH
(`veBangSoSanh`, video >=2 sản phẩm) vẫn dùng nguyên bốn lớp này cho
tiêu đề/chân bảng của NÓ, không đụng tới theo đúng phạm vi lô này.
⚠ Chỉ token "Thép & Ô-liu" của trang này, KHÔNG mượn token ql. */
/* ⚠ XẾP DỌC, không phải hàng ngang (04/09). Bản cũ là flex HÀNG
(`.tts-ten` bên trái | `.tts-cap` bên phải) - hợp với dải ngang 5
cặp. Khi `.tts-cap` đổi thành BẢNG DỌC 10 dòng mà cha vẫn là hàng
thì khối tên chiếm bên trái và bảng bị ép vào một cột hẹp còn lại:
giá trị vỡ chữ giữa từ ("Gree n Gas", "112 mm"). Đo số KHÔNG bắt
được (vẫn đủ 10 dòng), chỉ lộ khi TỰ SOI ẢNH production.
`overflow-x: auto` cũng bỏ - bảng dọc không tràn ngang, giữ lại chỉ
tạo một thanh cuộn ma. */
.tam-ts {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
margin: 16px var(--le) 0;
padding: 14px 16px;
border: 1px solid var(--oliu-dam);
border-radius: var(--bk);
background: var(--tam);
box-shadow: var(--bong-the);
}
/* Bốn đinh tán góc. Bé và mờ - nó là chi tiết chất liệu, không phải
một thứ để nhìn vào. */
.tam-dinh {
position: absolute;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--oliu-dam);
}
.tam-dinh--tl { top: 5px; left: 5px; }
.tam-dinh--tr { top: 5px; right: 5px; }
.tam-dinh--bl { bottom: 5px; left: 5px; }
.tam-dinh--br { bottom: 5px; right: 5px; }
.tam-dau {
position: relative; /* mốc neo cho dấu "Đã kiểm duyệt" - xem `.tts-dau` */
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 12px;
}
/* Hai vạch ngắn kẹp tiêu đề. `flex: 1` để chúng tự dài ra cho cân,
nhưng bó `max-width` để không thành hai đường kẻ dài ngoằng. */
.tam-vach {
flex: 1;
max-width: 28px;
height: 1px;
background: var(--oliu-dam);
}
.tam-tieu-de {
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 700;
font-size: var(--f2);
text-transform: uppercase;
letter-spacing: .22em;
color: var(--oliu-sang);
white-space: nowrap;
}
/* ---- v2: tên mẫu · hãng, GÓC TRÁI dải ngang --------------------- */
/* Khối tên nay nằm TRÊN bảng (không còn cột trái) - bỏ vạch ngăn dọc
và trần bề ngang 108px của bố cục hàng cũ. */
.tts-ten {
position: relative; /* mốc neo cho dấu "Đã kiểm duyệt" - xem `.tts-dau` */
flex: none;
padding-bottom: 8px;
border-bottom: 1px solid var(--vien);
}
/* Chừa chỗ bên phải cho dấu nghiêng, để tên dài không chạy xuống dưới
nó. Dưới 600px dấu ẩn nên không chừa. */
@media (min-width: 600px) {
.tts-ten { padding-right: 112px; }
}
/* TÊN SẢN PHẨM đầu khối thông số - ĐỔI 09/10 (lô chi-tiet-tu-van, Bruno):
chữ thân Inter (không còn Barlow Condensed hẹp), đậm 600, cỡ bậc --f3
(.95rem = 15.2px, bậc gần 15px nhất của thang sáu bậc), màu chữ chính.
Dòng hãng dưới tên (`.tts-ten-hang`) đã bỏ - hãng ở hàng "HÃNG SẢN XUẤT".
Bảng so sánh nhiều mã (`.tam-bang-ten`) đi CÙNG kiểu này. */
.tts-ten-chinh {
font-family: 'Inter', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 600;
font-size: var(--f3);
color: var(--chu);
line-height: 1.3;
overflow-wrap: anywhere;
}
/* ---- v2: 4-5 cặp khoá-giá trị GIỮA dải ngang -------------------- */
/* ⚠ ĐỔI HẲN KIỂU BÀY (04/09, mockup Bruno duyệt): DẢI NGANG -> BẢNG
DỌC. Bản cũ xếp các cặp thành một hàng ngang và vì thế phải chặn ở
5 cặp (dải một hàng không chứa nổi hơn); mockup mới là bảng dọc
khoá-trái / giá-trị-phải, kẻ chấm ngăn dòng, bày ĐỦ 10 trường.
Đổi kiểu bày cũng là thứ làm CỘT PHẢI CAO LÊN - điều kiện để player
sticky có chỗ dính lại (xem bước bố cục). */
/* V8: 10 trường chia HAI CỘT, 5 mỗi bên. `grid-auto-flow: column` +
`grid-template-rows: repeat(5, auto)` cho ra ĐÚNG 5 dòng mỗi cột và
đổ theo CỘT (1-5 bên trái, 6-10 bên phải) - khác hẳn `columns: 2`
của CSS multi-column, thứ cắt theo chiều cao nên hai cột lệch dòng
nhau khi một giá trị vỡ hai dòng.
⚠ Dưới 760px về MỘT cột: hai cột trên màn hẹp thì mỗi ô chỉ còn
~160px và giá trị vỡ chữ giữa từ ("Gree n Gas") - đúng lỗi đã trả
giá khi nhét bảng này vào cột 50/50, chỉ khác nguyên nhân. */
.tts-cap {
flex: 1 1 auto;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(5, auto);
column-gap: 28px;
min-width: 0;
}
@media (max-width: 760px) {
.tts-cap { grid-auto-flow: row; grid-template-rows: none; }
}
.tts-mot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 5px 0;
/* Kẻ CHẤM ngăn dòng - đúng mockup, và nhẹ hơn kẻ liền cho một bảng
10 dòng. Dòng cuối không kẻ. */
border-bottom: 1px dotted var(--vien);
}
.tts-mot:last-child { border-bottom: none; }
/* NHÃN THÔNG SỐ - MỘT kiểu cho MỌI bảng thông số của trang khách (bảng một
sản phẩm `.tts-k` + cột nhãn bảng so sánh `.tam-bang-nhan`). Mockup Bruno
duyệt 09/10 (45WmWkk2f9y8nxtHCrHeCZ): bỏ chữ ĐỨNG HẸP Barlow Condensed,
dùng CHÍNH font thân (Inter tự host, cùng họ với cột giá trị) - in hoa,
đậm vừa, giãn nhẹ, xám phụ. Cỡ `--f1` (.78rem ≈ 12,5px) thay 13px của
mockup: thang chữ trang khách không có 13px và trần cỡ ngoài thang đã đầy
(test_chuan_giao_dien_video) - không đẻ cỡ mới. Màu qua token nên Sáng/Tối
chỉ đổi màu, không đổi dáng. */
.tts-k,
.tam-bang th.tam-bang-nhan {
font-family: inherit;
font-weight: 500;
font-size: var(--f1);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--chu-mo);
}
.tts-k { white-space: nowrap; }
.tts-v {
font-size: var(--f1);
color: var(--chu);
overflow-wrap: anywhere;
text-align: right;
font-weight: 600;
}
.tts-v--dam { font-weight: 700; color: var(--oliu-sang); }
/* ⚠ LUẬT "mobile chỉ 4 cặp" ĐÃ BỎ (04/09): nó sinh ra vì bản cũ bày
NGANG một hàng - hàng ấy tràn ở màn hẹp nên phải cắt bớt. Bảng DỌC
không có vấn đề đó, và cắt mất 6/10 thông số trên điện thoại là
giấu đúng thứ khách đang muốn đọc (phần lớn khách xem bằng điện
thoại). Nay bày đủ 10 dòng ở mọi cỡ màn. */
/* Nguồn của con số - nhỏ và mờ. FPS và joule đến từ hai nguồn khác
nhau và KHÔNG quy đổi được cho nhau; không ghi nguồn thì người đọc
tưởng shop tự đo được cả hai. */
.tam-nguon {
display: block;
margin-left: 0;
font-size: .64rem;
color: var(--chu-mo);
text-transform: uppercase;
letter-spacing: .08em;
}
/* ---- v2: dấu "ĐÃ KIỂM DUYỆT", GÓC PHẢI, NGHIÊNG -3° ------------- */
/* ⚠ DẤU "ĐÃ KIỂM DUYỆT" NẰM Ở MÉP PHẢI HÀNG TÊN (22/09). Trước đó nó
đứng cùng hàng tiêu đề "Thông số kỹ thuật" - hàng ấy đã BỎ (Bruno:
"Người xem họ sẽ tự hiểu thông tin bên dưới là gì"). Neo tuyệt đối
trong `.tts-ten` (đã `position: relative`), tên chừa `padding-right`
để không chạy xuống dưới dấu. */
.tts-dau {
position: absolute;
right: 0;
top: 0;
padding: 4px 10px;
border: 1px solid var(--oliu-dam);
border-radius: 3px;
color: var(--oliu-sang);
font-family: 'Barlow Condensed', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
font-weight: 700;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .1em;
white-space: nowrap;
transform: rotate(-3deg);
}
@media (max-width: 599px) {
/* Dải hẹp: dấu ẩn để dành chỗ cho 4 cặp thông số - "đã kiểm duyệt"
không phải thông tin khách cần đọc lướt bằng ngón tay trên điện
thoại, khác 4 cặp khoá-giá trị. */
.tts-dau { display: none; }
}
.tam-day {
margin-top: 12px;
text-align: center;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--chu-mo);
}
/* BẢNG SO SÁNH nhiều cột (chốt 27/08) - video gắn >=2 sản phẩm. Cùng
khung thép/đinh tán/tiêu đề/footer với tấm 1-cột (`.tam-ts`), chỉ
thân đổi từ flex-dòng sang bảng. `.tam-bang-cuon` cho phép trượt
ngang khi >=3 sản phẩm không đủ chỗ; cột nhãn GHIM TRÁI (sticky) để
luôn biết đang đọc trường nào dù đã cuộn qua cột thứ mấy. */
.tam-bang-cuon { overflow-x: auto; }
.tam-bang { width: 100%; border-collapse: collapse; }
.tam-bang th, .tam-bang td {
padding: 7px 10px 7px 0;
border-bottom: 1px solid var(--vien);
font-size: var(--f1);
text-align: center;
white-space: nowrap;
}
.tam-bang tr:last-child th, .tam-bang tr:last-child td { border-bottom: none; }
.tam-bang th:first-child, .tam-bang td:first-child {
position: sticky; left: 0; z-index: 1;
background: var(--tam);
text-align: left;
font-weight: 400;
color: var(--chu-mo);
white-space: normal;
min-width: 76px;
}
.tam-bang-cot { min-width: 108px; }
.tam-bang-ten {
font-family: 'Inter', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
color: var(--chu);
font-weight: 600;
font-size: var(--f3);
line-height: 1.3;
overflow-wrap: anywhere;
white-space: normal;
}
td.tam-bang-trong { color: var(--chu-mo); }
/* Hàng khác giá trị - tô nhấn NHẸ, đủ để liếc thấy, không loè loẹt. */
.tam-bang-khac td, .tam-bang-khac th.tam-bang-nhan { background: var(--oliu-nen); }
.tam-bang-xem {
color: var(--oliu-sang);
font-size: .72rem;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---- tầng 2: chip (màn danh sách) ---- */
/* NỚI TO + TÁCH SỐ ĐẾM + TĂNG TƯƠNG PHẢN (08/09, Phase 2 Việc 1b/c/d).
Dùng CHUNG cho ba nơi (`.dai-loc`/`.loc-panel`/`.dong-strip` - xem
`veMotChip()` trong video_public.js), một khuôn không ba bản chép -
nới ở đây là nới ĐỦ CẢ BA, đúng tinh thần "một lớp, không ba biến
thể lệch nhau" (bẫy #11 CLAUDE.md).
Nền cũ `var(--tam)` TRÙNG HỆT nền của cả `.dong-strip`/`.loc-panel`
chứa nó -> chip chìm vào khối cha. Nay `var(--tam-cao)` (nổi hơn
một bậc, đã dùng cho `.chip-cd` cùng tệp) + viền `--vien-sang`
(rgba trắng 42%, đã dùng ở dải điều khiển lightbox) thay vì
`--vien` xám tối - viền RÕ trên nền tối thay vì gần như vô hình. */
.dai-chip { padding: 12px var(--le) 4px; }
.chip-cum { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
background: var(--tam-cao); border: 1px solid var(--vien-chip); border-radius: 999px;
padding: 11px 16px; font-size: 14px; font-weight: 500; color: var(--chu);
display: inline-flex; align-items: center; gap: 8px;
min-height: 44px; box-sizing: border-box;
cursor: pointer; font-family: inherit;
}
/* Số đếm trong Ô NỀN RIÊNG bo tròn - tách khỏi tên mẫu/hãng, đúng bẫy
"Glock 17 141" đọc như một dãy số (tên mẫu vốn có sẵn chữ số). Cùng
khuôn `.chip-cd-so` (viên ô-liu đặc) nhưng ĐẢO màu: chip này còn
phải phân biệt được trạng thái chọn/chưa chọn qua chính ô số. */
.chip .c-dem {
font-size: var(--f1); font-weight: 600; color: var(--chu-mo);
background: var(--nen); border-radius: 999px; padding: 2px 8px;
font-variant-numeric: tabular-nums;
}
.chip.chon { background: var(--oliu); border-color: var(--oliu); color: var(--chu-tren-oliu); font-weight: 600; }
.chip.chon .c-dem { background: var(--bl-chon-dem-nen); color: var(--chu-tren-oliu); }
.chip.xem-them { border-style: dashed; color: var(--oliu-sang); background: none; }
/* bo-loc-web-phase2, Việc 3b - chip vét "Hãng khác" - KHÔNG bấm được
(`