/* Toàn bộ màu/viền/bo góc/cỡ chữ đọc qua biến --dlb-* — PHP đẩy giá trị thật vào
inline style ngay trên khối .dlb-item-grid theo cấu hình chọn trong Inspector
Controls (xem includes/modules/dlb-item-grid-di90.php). Giá trị sau dấu phẩy trong
var() chỉ là fallback khi chưa có giá trị nào được set. */
/* "Chiều rộng khối" — checklist bắt buộc cho MỌI block (xem
WP_PLUGIN_DLB::content_width_attrs()) — cùng 1 tên class/biến CSS lặp lại y hệt ở
MỌI file CSS của plugin, không dùng chung 1 file CSS được ("1 module = 1 file"). */
.dlb-width-limited {
max-width: var(--dlb-max-width, 1200px);
margin-left: auto;
margin-right: auto;
}
/* An toan tran ngang tren dien thoai that (lop bao ve chung, them dong loat 2026-08-19) --
xem bai hoc day du o wp_plugin_dlb_lessons ve "layout viewport bi noi rong vinh vien":
tren trinh duyet di dong THAT, bat ky khoi nao co con/chau tran ra ngoai o LAN VE DAU
TIEN (truoc khi bat ky JS/media-query nao kip ap dung) co the khien trinh duyet tu "noi
rong layout viewport" vinh vien cho CA TRANG, khong chi rieng khoi do. Dat max-width:100%
+ overflow-x:hidden tren CHINH phan tu goc cua khoi la lop phong thu re + an toan nhat --
khong doi giao dien binh thuong (khoi da duoc tinh du rong san), chi kich hoat khi co gi
do ben trong thuc su tran ra. */
.dlb-item-grid {
max-width: 100%;
overflow-x: hidden;
}
.dlb-item-grid {
display: grid;
grid-template-columns: repeat(var(--dlb-grid-columns, 4), 1fr);
gap: var(--dlb-grid-gap, 16px);
background: var(--dlb-grid-bg, transparent);
border-radius: var(--dlb-grid-radius, 0px);
}
/* Tablet Breakpoint (<= 1024px) */
@media (max-width: 1024px) {
.dlb-item-grid {
grid-template-columns: repeat(var(--dlb-grid-tablet-columns, 2), 1fr);
gap: var(--dlb-grid-gap-tablet, 12px);
}
.dlb-item-grid__title {
font-size: var(--dlb-title-size-tablet, 14px);
}
}
/* Mobile Breakpoint (<= 782px) */
@media (max-width: 782px) {
.dlb-item-grid {
grid-template-columns: repeat(var(--dlb-grid-mobile-columns, 2), 1fr);
gap: var(--dlb-grid-gap-mobile, 8px);
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.dlb-item-grid__item {
padding: 10px !important;
}
/* CHÚ Ý 2026-09-01: rule "font-size" cho .dlb-item-grid__title vốn đặt ở đây
trước đó là CODE CHẾT — cùng lỗi thứ tự @media vừa phát hiện+sửa ở
dlb-feature-icons-tq58.css (xem README): khối @media này đứng TRƯỚC rule
gốc không điều kiện của .dlb-item-grid__title (dòng ~181), nên luôn bị đè
mất theo đúng quy tắc CSS "cùng specificity, luật đứng sau thắng". Rule
thật sự có tác dụng nằm ở khối @media (max-width:782px) THỨ HAI, cuối file
(đứng sau rule gốc) — xem ở đó. Xoá hẳn rule chết ở đây để khỏi gây nhầm
lẫn sau này (2 nơi cùng đặt font-size, tưởng đang đọc đúng chỗ đang chạy
nhưng thực ra không phải). */
}
.dlb-item-grid--list {
display: flex;
flex-direction: column;
gap: 10px;
}
/* CAU TRUC THAT (sua 2026-08-27, xem bai hoc day du o forMe.md): .dlb-item-grid__item
la DIV ngoai cung (border/nen/hover) - chia 2 con truc tiep:
(1) .dlb-item-grid__media - BOC ANH + nut yeu thich/gio hang, la ANCESTOR
position:relative DUY NHAT ma 2 nut (position:absolute) neo vao - dam bao
top/right/bottom/left cua nut LUON tinh theo dung khung ANH, khong phai
theo toan bo the (bug that da phat hien: chon vi tri "bottom-*" khien nut
de len ten san pham vi truoc day .item la ancestor position:relative DUY
NHAT, bottom:24px do tu day CA THE thay vi day ANH).
(2) .dlb-item-grid__item-link - bao ten/sao/gia (KHONG con bao anh nua).
Van tach .media-link (bao rieng anh) + nut ra khoi nhau (khong long button
trong ) - giu dung ly do cu: HTML khong hop le neu long phan tu tuong tac
trong phan tu tuong tac, lai dung do su kien click. */
.dlb-item-grid__item {
/* box-sizing:border-box BAT BUOC (phat hien 2026-09-01, nguoi dung bao "mobile
dang bi tran vien ben phai" kem anh chup) -- CUNG PATTERN loi da gap 3 LAN
trong plugin nay (.dlb-main-menu__cart-badge, .dlb-main-menu__list, gio them
o day): mac dinh content-box thi "padding:16px" (hoac 10px tren mobile, xem
@media ben tren) + "border-width" bi CONG THEM ra ngoai chieu rong da duoc
CSS Grid cap phat cho tung cot "1fr". */
box-sizing: border-box;
/* min-width:0 BAT BUOC THEM (them box-sizing thoi CHUA DU, tu do that qua
Playwright sau khi da co box-sizing van con tran): mac dinh CSS Grid dat
"min-width:auto" ngam cho MOI grid item -- nghia la item KHONG DUOC PHEP co
nho hon kich thuoc "min-content" cua chinh no (chu/gia/nhan trong the), du
track "1fr" da cap phat it hon. Tren luoi 2 cot mobile, min-content cua the
(ten san pham/gia dai) lon hon phan "1fr" thuc te (188px/187.75px cong don
voi khoang cach 22.1px = 397.85px > 370px chieu rong luoi that) -- CSS Grid
van GIU nguyen kich thuoc do, tran ra ngoai khoi luoi (bi ".dlb-item-grid"
overflow-x:hidden che di khong thay thanh cuon ngang, nhung ANH/NOI DUNG cot
phai van bi CAT XEN THAT, dung nhu anh chup nguoi dung gui). min-width:0 huy
rang buoc ngam do, ep the LUON vua dung "1fr" duoc cap, chu/gia se tu xuong
dong thay vi day rong the ra. */
min-width: 0;
position: relative;
display: flex;
flex-direction: column;
border-style: solid;
border-width: var(--dlb-item-border-thickness, 1px);
border-color: var(--dlb-item-border, #e5e5e5);
border-radius: var(--dlb-item-radius, 10px);
padding: 16px;
background: var(--dlb-item-bg, #fafafa);
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.dlb-item-grid__media {
position: relative;
display: block;
}
.dlb-item-grid__media-link {
display: block;
}
/* .dlb-item-grid__content — thêm 2026-09-01: bọc tiêu đề/hàng đánh giá/giá, LÀ
"con thứ 2" DUY NHẤT của .item (thay cho 1 to như
trước) — để .item vẫn chỉ có đúng 2 con trực tiếp (.media + .content), chế
độ liệt kê (--list, xếp hàng ngang ảnh|nội dung) không bị vỡ dù bên trong
giờ có nhiều phần tử con hơn (2 + 1 hàng rating-row không phải link,
xem lý do ở PHP). Nhận đúng các thuộc tính layout mà .item-link từng có. */
.dlb-item-grid__content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
.dlb-item-grid__item-link {
text-decoration: none;
color: inherit;
}
/* Đẩy giá xuống sát đáy thẻ — trước đặt margin-top:auto thẳng trên .price,
giờ .price nằm trong 1 RIÊNG (chỉ bọc mỗi giá) nên margin-auto phải đặt
trên chính đó (con trực tiếp của .content, nơi thật sự có khoảng trống
dư ra), không phải trên .price (cháu, không tham gia phân bổ flex của
.content). */
.dlb-item-grid__item-link--price {
margin-top: auto;
}
.dlb-item-grid--list .dlb-item-grid__item {
flex-direction: row;
align-items: center;
gap: 12px;
}
/* .media khong con bao ten/gia nua (chi bao anh 64px) - KHONG con can
flex-direction:row/align-items o day (do la layout CU khi .item-link bao
ca anh lan chu) - .dlb-item-grid__product-image o che do list da tu co san
flex-shrink:0 + width:64px rieng nen .media tu vua khit theo anh, khong can
khai bao gi them. */
.dlb-item-grid--list .dlb-item-grid__content {
flex-direction: column;
align-items: flex-start;
flex: 1 1 auto;
}
.dlb-item-grid--list .dlb-item-grid__item-link--price {
margin-top: 0;
}
/* --- Viền đổi màu khi hover — áp dụng cho mọi kiểu hiệu ứng, trừ "Không có". Hover
gắn trên chính .dlb-item-grid__item (div ngoài) để rê chuột vào nút yêu thích/giỏ
hàng (nằm cạnh , cùng trong div này) vẫn giữ hiệu ứng thẻ, không bị tắt. --- */
.dlb-item-grid:not(.dlb-item-grid--hover-none) .dlb-item-grid__item:hover {
border-color: var(--dlb-hover-border, #2563eb);
}
/* --- Hiệu ứng hover: Nâng thẻ lên + đổ bóng --- */
.dlb-item-grid--hover-lift .dlb-item-grid__item:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* --- Hiệu ứng hover: Đổ bóng đậm (không di chuyển) --- */
.dlb-item-grid--hover-shadow .dlb-item-grid__item:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* --- Hiệu ứng hover: Phóng to ảnh nhẹ --- */
.dlb-item-grid--hover-zoom .dlb-item-grid__product-image {
overflow: hidden;
display: block;
}
.dlb-item-grid--hover-zoom .dlb-item-grid__item:hover .dlb-item-grid__product-image img {
transform: scale(1.08);
}
.dlb-item-grid__product-image {
/* Tỉ lệ vuông cố định + cắt phần dư (overflow hidden) → ô ảnh của mọi thẻ luôn
cao bằng nhau bất kể ảnh gốc dọc/ngang/kích thước khác nhau. */
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--dlb-image-radius, 8px);
}
.dlb-item-grid__product-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-style: solid;
border-width: var(--dlb-image-border-thickness, 0px);
border-color: var(--dlb-image-border, #e5e5e5);
border-radius: var(--dlb-image-radius, 8px);
display: block;
transition: transform 0.3s ease;
}
.dlb-item-grid--list .dlb-item-grid__product-image {
aspect-ratio: auto;
overflow: visible;
flex-shrink: 0;
width: 64px;
}
.dlb-item-grid--list .dlb-item-grid__product-image img {
width: 64px;
height: 64px;
object-fit: cover;
}
.dlb-item-grid__title {
font-weight: 600;
margin: 8px 0 4px;
color: var(--dlb-title-color, #006d4c);
font-size: clamp(11px, 4.0vw, var(--dlb-title-size, 15px));
/* Giới hạn đúng --dlb-title-lines dòng — tên dài bị cắt + "…", tên ngắn vẫn
chiếm đủ chỗ nhờ min-height (tính theo line-height × số dòng) → khối tên của
mọi thẻ luôn cao bằng nhau, không phụ thuộc tên sản phẩm dài hay ngắn. */
line-height: 1.35;
min-height: calc(1.35em * var(--dlb-title-lines, 2));
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--dlb-title-lines, 2);
overflow: hidden;
}
.dlb-item-grid--list .dlb-item-grid__title {
margin: 0;
}
/* --- Hàng "sao đánh giá + yêu thích + giỏ hàng" — thêm 2026-09-01 theo yêu cầu
người dùng "giỏ hàng và yêu thích nằm ngang hàng với sao đánh giá" (trước đó
2 nút nổi trên góc ảnh, chỉ hiện khi rê chuột/chạm vào thẻ). Sao đánh giá bên
trái, 2 nút bên phải — tự ẩn nếu cả rating lẫn 2 nút đều tắt (PHP không in ra
.rating-row nào cả trong trường hợp đó, không cần CSS xử lý rỗng). --- */
.dlb-item-grid__rating-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 0 4px;
}
/* --- Sao đánh giá + số lượt đánh giá --- */
.dlb-item-grid__rating {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
min-width: 0;
}
.dlb-item-grid__rating-stars {
position: relative;
display: inline-block;
line-height: 1;
font-size: 13px;
white-space: nowrap;
}
.dlb-item-grid__rating-stars-bg {
color: var(--dlb-star-empty-color, #d1d5db);
letter-spacing: 1px;
}
.dlb-item-grid__rating-stars-fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: var(--dlb-star-color, #f59e0b);
letter-spacing: 1px;
white-space: nowrap;
}
.dlb-item-grid__rating-count {
font-size: 12px;
color: var(--dlb-review-count-color, #6b7280);
}
.dlb-item-grid--list .dlb-item-grid__rating {
margin: 0;
}
.dlb-item-grid__price {
color: var(--dlb-price-color, #006d4c);
font-weight: 700;
font-size: 14px;
margin: 0;
/* Đẩy giá xuống sát đáy thẻ chuyển sang đặt trên .dlb-item-grid__item-link--price
(xem phía trên) — đó mới là con trực tiếp của .content (nơi có khoảng trống dư
ra thật), .price chỉ là cháu nên margin-top:auto ở đây không còn tác dụng. */
padding-top: 6px;
}
.dlb-item-grid--list .dlb-item-grid__price {
padding-top: 0;
}
.dlb-item-grid__price del {
color: #999999;
font-weight: 400;
opacity: 0.8;
margin-right: 6px;
}
.dlb-item-grid__price ins {
text-decoration: none;
}
/* --- Dòng "giá" khi Nguồn dữ liệu = Bài viết: chuyên mục + thời gian đăng thay vì giá --- */
.dlb-item-grid__price--post-meta {
display: flex;
align-items: center;
gap: 8px;
font-weight: 400;
font-size: 12px;
color: #888888;
}
.dlb-item-grid__post-category {
color: var(--dlb-price-color, #006d4c);
font-weight: 600;
text-transform: uppercase;
font-size: 11px;
}
/* --- Nút yêu thích + thêm vào giỏ hàng — nút tròn nổi trên góc ảnh --- */
/* Kích thước 40px + shadow/backdrop-blur + ẩn sẵn (opacity 0) tới khi rê chuột/focus vào
CẢ THẺ mới hiện — đổi 2026-08-30 đối chiếu demo-ui/styles.css (".product-actions"), trước
đó 34px và LUÔN hiện sẵn. Thiết bị chạm không có hover nên tự hiện sẵn (bên dưới, khớp
demo có cùng fallback @media (hover:none)). */
.dlb-item-grid__favorite,
.dlb-item-grid__add-to-cart {
position: absolute;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
z-index: 2;
box-shadow: 0 2px 10px rgba(17, 17, 17, 0.16);
backdrop-filter: blur(4px);
opacity: 0;
transform: translateY(8px);
transition: transform 0.16s ease, opacity 0.2s ease, background 0.16s ease, color 0.16s ease;
}
.dlb-item-grid__item:hover .dlb-item-grid__favorite,
.dlb-item-grid__item:hover .dlb-item-grid__add-to-cart,
.dlb-item-grid__item:focus-within .dlb-item-grid__favorite,
.dlb-item-grid__item:focus-within .dlb-item-grid__add-to-cart {
opacity: 1;
transform: translateY(0);
}
@media (hover: none) {
.dlb-item-grid__favorite,
.dlb-item-grid__add-to-cart {
opacity: 1;
transform: translateY(0);
}
}
.dlb-item-grid__favorite svg,
.dlb-item-grid__add-to-cart svg {
width: 16px;
height: 16px;
pointer-events: none;
}
.dlb-item-grid__favorite {
background: var(--dlb-favorite-bg-color, #ffffff);
color: var(--dlb-favorite-color, #006d4c);
}
.dlb-item-grid__favorite.is-active {
color: var(--dlb-favorite-active-color, #ef4444);
background: #ffffff;
}
.dlb-item-grid__favorite.is-active svg {
fill: currentColor;
}
.dlb-item-grid__favorite:hover {
transform: scale(1.06);
background: var(--dlb-action-hover-bg, #006d4c);
color: #ffffff;
}
.dlb-item-grid__item:hover .dlb-item-grid__favorite:hover,
.dlb-item-grid__item:focus-within .dlb-item-grid__favorite:hover {
transform: scale(1.06) translateY(0); /* giữ đúng vị trí đã hiện, không cộng dồn dịch chuyển của rule opacity ở trên */
}
/* Đã yêu thích rồi mà còn rê chuột vào: nền đỏ (nhấn mạnh "bấm để bỏ thích"), không phải
xanh lá — khớp đúng ưu tiên CSS trong demo-ui (".product-act[aria-pressed]:hover"). */
.dlb-item-grid__favorite.is-active:hover {
background: var(--dlb-favorite-active-color, #ef4444);
color: #ffffff;
}
.dlb-item-grid__add-to-cart {
background: var(--dlb-cart-bg-color, #ffffff);
color: var(--dlb-cart-icon-color, #006d4c);
}
/* --- Vị trí nút — chọn qua Inspector Controls (panel "Yêu thích & Giỏ hàng"). "auto"
trên trục không dùng để nút không bị kéo dãn/lệch khi chỉ set top hoặc chỉ set left. --- */
.dlb-item-grid__favorite--top-left,
.dlb-item-grid__add-to-cart--top-left {
top: 24px;
left: 24px;
right: auto;
bottom: auto;
}
.dlb-item-grid__favorite--top-right,
.dlb-item-grid__add-to-cart--top-right {
top: 24px;
right: 24px;
left: auto;
bottom: auto;
}
.dlb-item-grid__favorite--bottom-left,
.dlb-item-grid__add-to-cart--bottom-left {
bottom: 24px;
left: 24px;
right: auto;
top: auto;
}
.dlb-item-grid__favorite--bottom-right,
.dlb-item-grid__add-to-cart--bottom-right {
bottom: 24px;
right: 24px;
left: auto;
top: auto;
}
/* Khi yêu thích và giỏ hàng CÙNG 1 góc — đẩy nút giỏ hàng (luôn render sau, xem PHP)
ra xa thêm 1 khoảng để 2 nút không đè lên nhau. */
.dlb-item-grid__add-to-cart--stacked.dlb-item-grid__add-to-cart--top-left,
.dlb-item-grid__add-to-cart--stacked.dlb-item-grid__add-to-cart--top-right {
top: 66px;
}
.dlb-item-grid__add-to-cart--stacked.dlb-item-grid__add-to-cart--bottom-left,
.dlb-item-grid__add-to-cart--stacked.dlb-item-grid__add-to-cart--bottom-right {
bottom: 66px;
}
.dlb-item-grid__add-to-cart:hover {
transform: scale(1.06);
background: var(--dlb-action-hover-bg, #006d4c);
color: #ffffff;
}
.dlb-item-grid__add-to-cart.is-loading {
cursor: wait;
}
.dlb-item-grid__add-to-cart.is-loading svg {
animation: dlb-item-grid-spin 0.7s linear infinite;
}
.dlb-item-grid__add-to-cart.is-added {
background: #16a34a;
color: #ffffff;
}
@keyframes dlb-item-grid-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.dlb-item-grid--list .dlb-item-grid__favorite,
.dlb-item-grid--list .dlb-item-grid__add-to-cart {
position: static;
width: 30px;
height: 30px;
flex-shrink: 0;
}
/* --- Biến thể "--inline" — thêm 2026-09-01, nút yêu thích/giỏ hàng nằm CÙNG
HÀNG với sao đánh giá thay vì nổi trên góc ảnh (theo yêu cầu người dùng, xem
PHP — nút giờ render trong .dlb-item-grid__rating-row, không còn trong
.media, nên không còn className "--top-left/--top-right/..." nào cả). Viết
selector GHÉP 2 class (.favorite.favorite--inline) để chắc chắn specificity
cao hơn rule gốc 1-class phía trên BẤT KỂ thứ tự trong file — bài học rút ra
2026-09-01 từ lỗi thứ tự @media ở dlb-feature-icons-tq58/dlb-item-grid-di90
(xem README), không muốn lặp lại kiểu lỗi "tưởng đã ghi đè nhưng thực ra
chưa" một lần nữa. Bỏ hẳn hiệu ứng "ẩn sẵn, chỉ hiện khi rê chuột" (không hợp
lý cho nút nằm thường trong luồng, không phải nổi trên ảnh) — luôn hiện. */
.dlb-item-grid__favorite.dlb-item-grid__favorite--inline,
.dlb-item-grid__add-to-cart.dlb-item-grid__add-to-cart--inline {
position: static;
opacity: 1;
transform: none;
/* To lên ~1.3 lần (28px->36px, 28*1.3=36.4) theo yêu cầu người dùng "icon thích và
giỏ hàng to ra khoảng 1.3 lần nữa" (2026-09-02). */
width: 36px;
height: 36px;
box-shadow: none;
backdrop-filter: none;
flex-shrink: 0;
}
.dlb-item-grid__favorite.dlb-item-grid__favorite--inline svg,
.dlb-item-grid__add-to-cart.dlb-item-grid__add-to-cart--inline svg {
/* Cùng tỉ lệ ~1.3 lần với khung nút ở trên (14px->18px, 14*1.3=18.2). */
width: 18px;
height: 18px;
}
.dlb-item-grid__item:hover .dlb-item-grid__favorite.dlb-item-grid__favorite--inline,
.dlb-item-grid__item:hover .dlb-item-grid__add-to-cart.dlb-item-grid__add-to-cart--inline,
.dlb-item-grid__item:focus-within .dlb-item-grid__favorite.dlb-item-grid__favorite--inline,
.dlb-item-grid__item:focus-within .dlb-item-grid__add-to-cart.dlb-item-grid__add-to-cart--inline {
transform: none;
}
/* --- To thêm + xích lại gần nhau CHỈ trên máy tính (thêm 2026-09-03) — theo người
dùng gửi ảnh trang chủ "2 icon thích và giỏ hàng to hơn 1,3 lần và gần nhau hơn".
Đối xứng đúng breakpoint mobile "@media(max-width:782px)" đã có sẵn phía dưới, KHÔNG
đụng cỡ 28px/13px của di động. Nối tiếp đợt to 1.3 lần TRƯỚC (28px→36px, 2026-09-02,
khi đó áp DÙNG CHUNG mọi màn hình) — lần này to thêm 1.3 lần NỮA nhưng CHỈ ở đây
(36×1.3=46.8≈47px, 18×1.3=23.4≈23px), không cộng dồn vào rule mobile phía dưới. */
@media (min-width: 783px) {
.dlb-item-grid__favorite.dlb-item-grid__favorite--inline,
.dlb-item-grid__add-to-cart.dlb-item-grid__add-to-cart--inline {
width: 47px;
height: 47px;
}
.dlb-item-grid__favorite.dlb-item-grid__favorite--inline svg,
.dlb-item-grid__add-to-cart.dlb-item-grid__add-to-cart--inline svg {
width: 23px;
height: 23px;
}
/* "Gần nhau hơn": hàng cha ".rating-row" có 3 phần tử (sao đánh giá/yêu thích/giỏ
hàng) dùng "justify-content:space-between" nên khoảng trống thừa bị CHIA ĐỀU ra 2
khe hở — khe giữa yêu thích/giỏ hàng bị kéo giãn y hệt khe giữa rating/yêu thích
(đo thực tế ~33px dù "gap" khai chỉ 8px), không phải do đặt gap sai. Kỹ thuật
chuẩn của flexbox: "margin-left:auto" trên đúng phần tử đứng NGAY SAU rating (nút
yêu thích) sẽ hút HẾT khoảng trống thừa về phía nó, khiến 2 nút phía sau (yêu
thích + giỏ hàng) dồn sát mép phải và chỉ còn cách nhau đúng bằng "gap:8px" gốc
của hàng cha — không cần viết gap riêng, cũng không ảnh hưởng vị trí rating. */
.dlb-item-grid__favorite.dlb-item-grid__favorite--inline {
margin-left: auto;
}
}
.dlb-item-grid__notice {
color: #666666;
font-style: italic;
}
@media (max-width: 782px) {
.dlb-item-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Margin/padding do nguoi dung tu chon qua panel "Kich thuoc" chuan cua WordPress (o
nut "Xem tat ca" vi tri "below-*", style="" nam tren .dlb-item-grid-wrap NGOAI
CUNG, khong phai .dlb-item-grid ben trong -- xem ghi chu trong PHP) cong don voi
margin cua CAC KHOI KHAC quanh no tao khoang trang lon tren di dong, dung mau loi
da vao voi dlb-banner-ke72/dlb-divider-heading-zv15 (2026-08-19). !important vi
dang ganh dua voi style="" inline WordPress. */
.dlb-item-grid-wrap,
.dlb-item-grid {
margin-top: 8px !important;
margin-bottom: 8px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.dlb-item-grid__favorite,
.dlb-item-grid__add-to-cart {
width: 28px;
height: 28px;
}
.dlb-item-grid__favorite svg,
.dlb-item-grid__add-to-cart svg {
width: 13px;
height: 13px;
}
/* Thu nho ca the san pham 15% tren di dong, theo yeu cau nguoi dung 2026-08-19 -- anh
san pham dung aspect-ratio (tu co theo be rong cot) nen khong can chinh rieng, chi
thu dem/khoang cach/chu. calc() bao duoc ca clamp() lam gia tri dau vao. */
.dlb-item-grid {
gap: calc(var(--dlb-grid-gap, 16px) * 0.85);
}
.dlb-item-grid__item {
padding: calc(16px * 0.85);
}
/* Sửa 2026-09-01 theo yêu cầu người dùng "chữ nhỏ lại giống danh mục sản
phẩm" (gửi ảnh so sánh) — trước đó ra 12.75px (15px gốc × 0.85), lớn hơn
rõ rệt nhãn "Danh Mục Sản Phẩm" bên cạnh (.dlb-category-circles__label,
11px). Đặt thẳng 11px cho khớp, bỏ công thức clamp()×0.85 cũ (khó đoán
trước ra bao nhiêu, tuỳ --dlb-title-size mỗi nơi cấu hình khác nhau). */
.dlb-item-grid__title {
font-size: 11px;
}
.dlb-item-grid__rating-stars {
font-size: calc(13px * 0.85);
}
.dlb-item-grid__rating-count {
font-size: calc(12px * 0.85);
}
.dlb-item-grid__price {
font-size: calc(14px * 0.85);
}
.dlb-item-grid__price--post-meta {
font-size: calc(12px * 0.85);
}
.dlb-item-grid__post-category {
font-size: calc(11px * 0.85);
}
/* Nut "Xem tat ca" nho hon 30% tren di dong, theo yeu cau nguoi dung 2026-08-19 -- tinh
truc tiep tren padding/gap CUOI CUNG (khong tu gan lai chinh bien --dlb-ig-va-*, vi
1 khai bao custom property tu tham chieu chinh no trong cung 1 rule la VONG LAP -
CSS coi la gia tri khong hop le va bo qua ca khai bao, khong ghi de duoc gi ca).
!important vi dang ganh dua CUNG do dac hieu (1 class) voi 2 rule --button/--outline
dung sau trong file (thang theo thu tu neu khong co !important). */
.dlb-item-grid__view-all {
font-size: clamp(10px, 2.8vw, calc(var(--dlb-ig-va-font-size, 15px) * 0.7)) !important;
}
.dlb-item-grid__view-all--button,
.dlb-item-grid__view-all--outline {
padding: calc(var(--dlb-ig-va-padding-v, 12px) * 0.7) calc(var(--dlb-ig-va-padding-h, 28px) * 0.7) !important;
}
.dlb-item-grid__view-all {
gap: calc(var(--dlb-ig-va-gap, 8px) * 0.7) !important;
}
}
/* --- Nút "Xem tất cả" (chuyển từ dlb-divider-heading-zv15 sang đây, 2026-08-16) ---
Vị trí "below-*": .dlb-item-grid-wrap thay .dlb-item-grid làm phần tử NGOÀI CÙNG
mang align/spacing khi bật tính năng này (xem PHP/JS) — .dlb-item-grid bên trong chỉ
còn class riêng. Vị trí "grid-item": không có wrap, nút chỉ là 1 ô thêm vào lưới. */
.dlb-item-grid-wrap {
display: flex;
flex-direction: column;
}
.dlb-item-grid__view-all-row {
display: flex;
margin-top: 20px;
}
.dlb-item-grid-wrap--left .dlb-item-grid__view-all-row {
justify-content: flex-start;
}
.dlb-item-grid-wrap--center .dlb-item-grid__view-all-row {
justify-content: center;
}
.dlb-item-grid-wrap--right .dlb-item-grid__view-all-row {
justify-content: flex-end;
}
/* Vị trí "grid-item" — nút là 1 ô trong chính lưới, canh giữa nội dung trong ô (khác
.dlb-item-grid__item thường canh trái theo flex-column mặc định). */
.dlb-item-grid__view-all-cell {
align-items: center;
justify-content: center;
text-align: center;
}
.dlb-item-grid__view-all {
/* border-box — nút có padding+border thật; "full-width" (width:100%) cộng thêm
đệm+viền ra ngoài 100% đó nếu KHÔNG có border-box (bài học đã gặp ở
dlb-divider-heading-zv15, xem wp_plugin_dlb_lessons). */
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--dlb-ig-va-gap, 8px);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
font-size: clamp(11px, 4.0vw, var(--dlb-ig-va-font-size, 15px));
font-family: var(--dlb-ig-va-font-family, inherit);
font-weight: var(--dlb-ig-va-font-weight, 600);
letter-spacing: var(--dlb-ig-va-letter-spacing, 0px);
box-shadow: var(--dlb-ig-va-shadow, none);
transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease,
color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.dlb-item-grid__view-all--uppercase {
text-transform: uppercase;
}
/* "full-width" chỉ có ý nghĩa trong ".dlb-item-grid__view-all-row" (bố cục "below-*") —
width:100% (không phải flex-grow, xem bài học tương tự ở dlb-divider-heading-zv15). */
.dlb-item-grid__view-all--full-width {
width: 100%;
}
.dlb-item-grid__view-all--button {
color: var(--dlb-ig-va-text, #ffffff);
background: var(--dlb-ig-va-bg, #111111);
padding: var(--dlb-ig-va-padding-v, 12px) var(--dlb-ig-va-padding-h, 28px);
border-radius: var(--dlb-ig-va-radius, 8px);
}
.dlb-item-grid__view-all--outline {
color: var(--dlb-ig-va-text, #111111);
background: transparent;
/* Tên "-border-tint"/"-border-thickness" (không phải "-border-color"/"-border-width")
— né rule toàn cục của WP core tự thêm border-style:solid/viền đen khi 2 chuỗi con
đó xuất hiện trong style="" (xem wp_plugin_dlb_lessons). */
border: var(--dlb-ig-va-border-thickness, 2px) solid var(--dlb-ig-va-border-tint, #111111);
padding: var(--dlb-ig-va-padding-v, 12px) var(--dlb-ig-va-padding-h, 28px);
border-radius: var(--dlb-ig-va-radius, 8px);
}
.dlb-item-grid__view-all--text {
color: var(--dlb-ig-va-text, #111111);
}
/* --- "Các tính chất khi Hover" — đè TRỰC TIẾP màu lúc rê chuột, độc lập với "Hiệu ứng
Animation" ở dưới (2 hệ thống khác nhau: animation lo CHUYỂN ĐỘNG qua transform/filter/
opacity, đây lo MÀU SẮC qua color/background-color/border-color — không giẫm lên nhau,
dùng CÙNG LÚC được). Mỗi class chỉ có mặt khi thật sự đặt giá trị khác mặc định. --- */
.dlb-item-grid__view-all--hover-custom-color:hover {
color: var(--dlb-ig-va-hover-text);
}
.dlb-item-grid__view-all--hover-custom-bg:hover {
background-color: var(--dlb-ig-va-hover-bg);
}
.dlb-item-grid__view-all--hover-custom-border:hover {
border-color: var(--dlb-ig-va-hover-border-tint);
}
.dlb-item-grid__view-all-arrow {
display: inline-flex;
transition: transform 0.2s ease;
}
.dlb-item-grid__view-all-arrow svg {
width: 16px;
height: 16px;
}
/* --- Hiệu ứng Animation — 8 kiểu riêng biệt. Class "--anim-{kiểu}" LUÔN có mặt (kể cả
"none" — không có rule nào khớp thì không animation gì, đúng nghĩa); "--anim-always"
CHỈ thêm khi "Thời điểm chạy" = "Liên tục" — thiếu class đó thì animation chỉ chạy
lúc :hover (mặc định). --- */
.dlb-item-grid__view-all--anim-pulse:hover,
.dlb-item-grid__view-all--anim-pulse.dlb-item-grid__view-all--anim-always {
animation: dlb-ig-va-pulse 1.1s ease infinite;
}
@keyframes dlb-ig-va-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.dlb-item-grid__view-all--anim-shine {
position: relative;
overflow: hidden;
}
.dlb-item-grid__view-all--anim-shine::after {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
transform: skewX(-20deg);
pointer-events: none;
}
.dlb-item-grid__view-all--anim-shine:hover::after {
animation: dlb-ig-va-shine 0.9s ease;
}
.dlb-item-grid__view-all--anim-shine.dlb-item-grid__view-all--anim-always::after {
animation: dlb-ig-va-shine 2.2s ease infinite;
}
@keyframes dlb-ig-va-shine {
from { left: -75%; }
to { left: 125%; }
}
.dlb-item-grid__view-all--anim-bounce:hover,
.dlb-item-grid__view-all--anim-bounce.dlb-item-grid__view-all--anim-always {
animation: dlb-ig-va-bounce 0.6s ease infinite;
}
@keyframes dlb-ig-va-bounce {
0%, 100% { transform: translateY(0); }
30% { transform: translateY(-6px); }
60% { transform: translateY(1px); }
}
.dlb-item-grid__view-all--anim-shake:hover,
.dlb-item-grid__view-all--anim-shake.dlb-item-grid__view-all--anim-always {
animation: dlb-ig-va-shake 0.5s ease infinite;
}
@keyframes dlb-ig-va-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(3px); }
}
.dlb-item-grid__view-all--anim-shimmer:hover,
.dlb-item-grid__view-all--anim-shimmer.dlb-item-grid__view-all--anim-always {
animation: dlb-ig-va-shimmer 1.3s ease infinite;
}
@keyframes dlb-ig-va-shimmer {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.3); }
}
/* "glow" tự thay THẲNG box-shadow tĩnh (--dlb-ig-va-shadow) bằng bóng phát sáng lúc
chạy animation — KHÔNG cộng chung 2 box-shadow (nếu --dlb-ig-va-shadow đang là chuỗi
"none" thì "none, 0 0 4px ..." là giá trị KHÔNG HỢP LỆ, cả khai báo bị trình duyệt bỏ
qua — box-shadow không cho trộn từ khoá "none" với danh sách bóng khác). Dùng màu
xanh trung tính cố định thay vì lấy theo màu nút — tránh phải tính lại độ trong suốt
từ 1 màu hex bất kỳ (cần color-mix(), rủi ro tương thích trình duyệt cũ). */
.dlb-item-grid__view-all--anim-glow:hover,
.dlb-item-grid__view-all--anim-glow.dlb-item-grid__view-all--anim-always {
animation: dlb-ig-va-glow 1.4s ease infinite;
}
@keyframes dlb-ig-va-glow {
0%, 100% { box-shadow: 0 0 4px rgba(37, 99, 235, 0.45); }
50% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.85); }
}
.dlb-item-grid__view-all--anim-grow:hover,
.dlb-item-grid__view-all--anim-grow.dlb-item-grid__view-all--anim-always {
transform: scale(1.08);
}
/* ==========================================================================
Gutenberg Inspector Accordion & Bold Heading Styling
========================================================================== */
.components-panel__body.dlb-panel-bold .components-panel__body-title,
.components-panel__body.dlb-panel-bold .components-panel__body-title button,
.components-panel__body.dlb-panel-bold .components-panel__body-toggle {
font-weight: 700 !important;
font-size: 13.5px !important;
letter-spacing: 0.2px;
color: #1e1e1e !important;
transition: all 0.2s ease;
}
.components-panel__body.dlb-panel-bold.is-opened .components-panel__body-title button,
.components-panel__body.dlb-panel-bold.is-opened .components-panel__body-toggle {
color: #2271b1 !important;
background: #f0f6fc !important;
border-left: 3.5px solid #2271b1 !important;
padding-left: 12px !important;
}
.components-panel__body.dlb-panel-bold .components-panel__body-title button:hover,
.components-panel__body.dlb-panel-bold .components-panel__body-toggle:hover {
background: #f6f7f7 !important;
}