bao quanh ảnh nữa — .effects__media/.effects__aux giờ
gắn thẳng lên chính thẻ ![]()
(transform áp trực tiếp lên ảnh, không
qua lớp trung gian nào). .effects__ph (placeholder khi chưa chọn ảnh
chính) vẫn là
nên cần style riêng cho phần khác biệt (aspect-ratio,
viền chấm...), còn phần chung (kích thước, canh giữa) dùng lại đúng
.effects__media vì cả hai đều mang class này. */
.effects__media {
position: relative;
z-index: 2;
width: 100%;
max-width: 340px;
margin-inline: auto;
display: block;
}
img.effects__media { height: auto; object-fit: contain; }
.effects__ph {
aspect-ratio: 3/4;
display: grid;
place-items: center;
border: 1px dashed rgba(15, 76, 58, .2);
border-radius: var(--r-lg);
color: var(--c-moss);
opacity: .4;
}
.effects__aux {
position: absolute;
z-index: 1;
width: 42%;
aspect-ratio: 1/1;
object-fit: cover;
display: block;
border-radius: var(--r-md);
box-shadow: var(--sh-md);
/* Đã bỏ viền trắng + overflow:hidden theo yêu cầu — không còn div bao
ngoài để "cắt" viền bên trong nữa; border-radius áp thẳng lên ảnh vẫn
tự bo góc đúng, không cần overflow:hidden hỗ trợ thêm. */
}
.effects__aux--1 { left: -4%; bottom: 4%; }
.effects__aux--2 { right: -4%; top: 4%; }
.effects__col--text { align-self: center; }
.effects__body {
font-size: var(--fs-base);
line-height: 1.75;
color: var(--c-mute);
margin-bottom: var(--sp-4);
}
.pledge { margin: var(--sp-5) 0; display: grid; gap: var(--sp-2); }
.pledge li { display: flex; align-items: center; gap: var(--sp-3); }
.pledge svg { color: var(--c-forest); flex-shrink: 0; }
/* Newsletter */
.newsletter {
background: var(--c-forest);
color: #fff;
padding-block: var(--sp-8);
margin-top: var(--sp-8);
}
.newsletter__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-7);
align-items: center;
}
.newsletter__title { color: #fff; font-size: var(--fs-xl); font-style: italic; }
.newsletter__inner p { color: rgba(255, 255, 255, .78); margin: 0; }
.newsletter__hint { font-size: var(--fs-sm); opacity: .7; }
.newsletter__form input[type="email"],
.newsletter__form input[type="text"] {
width: 100%; padding: 14px 20px;
border: 1px solid rgba(255, 255, 255, .28);
background: rgba(255, 255, 255, .08);
border-radius: var(--r-pill);
color: #fff;
}
.newsletter__form input::placeholder { color: rgba(255, 255, 255, .55); }
.newsletter__form input[type="submit"] {
background: var(--c-sand); color: var(--c-forest-deep);
border: 0; padding: 14px 30px; border-radius: var(--r-pill);
font-weight: 600; cursor: pointer; margin-top: var(--sp-3);
}
/* Reveal khi cuộn */
[data-reveal] {
opacity: 0;
transform: translateY(22px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
/* ---------------------------- 8. WooCommerce --------------------------- */
.shop-layout {
display: grid;
grid-template-columns: 264px 1fr;
gap: var(--sp-7);
align-items: start;
padding-bottom: var(--sp-8);
}
.shop-layout:not(:has(.sidebar)) { grid-template-columns: 1fr; }
/* Dự phòng cho trình duyệt không hỗ trợ :has() — trang Shop/danh mục
không còn sidebar nữa (xem woocommerce/archive-product.php), content
luôn chiếm trọn chiều rộng. */
.shop-layout--full { grid-template-columns: 1fr; }
.shop-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-4); flex-wrap: wrap;
padding-bottom: var(--sp-4);
margin-bottom: var(--sp-5);
border-bottom: 1px solid var(--c-line);
font-size: var(--fs-sm);
color: var(--c-mute);
}
.woocommerce-result-count { margin: 0; }
.woocommerce-ordering select {
padding: 9px 34px 9px 16px;
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
background: #fff;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7A72' stroke-width='2'%3E%3Cpolyline points='5 9 12 16 19 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
cursor: pointer;
}
.shop-filterbtn { display: none; margin-bottom: var(--sp-4); }
.sidebar { position: sticky; top: calc(var(--header-h) + 16px); }
.sidebar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.sidebar__title { font-size: var(--fs-md); margin: 0; }
.widget { padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--c-line); }
.widget:last-child { border-bottom: 0; }
.widget__title { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: .08em; font-family: var(--f-body); font-weight: 600; }
.widget ul li { padding: 5px 0; font-size: var(--fs-base); }
.widget ul li a:hover { color: var(--c-forest); }
/* Lưới sản phẩm */
.products-grid,
ul.products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5) var(--sp-4);
margin: 0; padding: 0;
}
/* Rule clearfix gốc của WooCommerce (.woocommerce ul.products::before/after
{ content:" "; display:table; }) có specificity CAO HƠN rule "display:none"
thông thường (2 class .woocommerce+.products so với 1 class .products),
nên nếu chỉ viết display:none suông sẽ KHÔNG THẮNG được — pseudo-element
vẫn được tạo ra với content khác rỗng, và vì ul.products là CSS Grid
container, pseudo-element đó bị tính là 1 GRID ITEM THẬT SỰ, chiếm mất ô
đầu tiên trong lưới và đẩy lệch toàn bộ sản phẩm phía sau. Liệt kê đủ 4
biến thể selector WooCommerce dùng (kể cả dạng ".products ul" — cấu trúc
của WooCommerce Blocks/Gutenberg, phòng trường hợp dùng sau này) và ép
!important để thắng tuyệt đối bất kể specificity gốc thay đổi thế nào. */
.woocommerce .products ul::before,
.woocommerce .products ul::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
content: none !important;
display: none !important;
}
/* WooCommerce core CSS áp float:left + width cố định (%) + margin trực
tiếp lên TỪNG li.product khi ul cha có class "columns-X" — khớp đúng với
chính markup theme dùng (class="products columns-4"), gây lệch layout
nếu không reset. Cũng dọn luôn ::before/::after trên từng li (WooCommerce
dùng để clear:left cho item đầu dòng trong bố cục float cũ — không cần
thiết và có thể gây lỗi hiển thị khi layout đã chuyển sang CSS Grid). */
ul.products[class*="columns-"] li.product,
ul.products li.product {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
ul.products li.product::before,
ul.products li.product::after {
content: none !important;
display: none !important;
}
.columns-2, ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.columns-3, ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.columns-5, ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
/* Product slider — component tổng quát, dùng cho bất kỳ khối slider sản phẩm nào */
.pslider__nav { display: flex; gap: var(--sp-2); }
.pslider__arrow {
width: 40px; height: 40px;
display: grid; place-items: center;
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
background: #fff;
color: var(--c-forest-deep);
transition: all .2s var(--ease);
}
.pslider__arrow:hover:not(:disabled) { background: var(--c-forest); border-color: var(--c-forest); color: #fff; }
.pslider__arrow:disabled { opacity: .3; cursor: default; }
.pslider__arrow[data-pslider-prev] svg { transform: rotate(180deg); }
.pslider-wrap { position: relative; }
/* Component tổng quát: mọi
- gắn thêm class .pslider sẽ chuyển từ layout
gốc (grid ở dạng lưới) sang cuộn ngang. Ép display bằng !important vì
selector layout gốc (vd: ul.products, .catgrid) có specificity phần tử+lớp
cao hơn một class đơn — chỉ ép đúng 1 thuộc tính, không ảnh hưởng phần còn lại. */
.pslider {
display: flex !important;
flex-wrap: nowrap;
gap: var(--sp-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
margin: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.pslider::-webkit-scrollbar { display: none; }
/* Cỡ thẻ co giãn liên tục theo tỉ lệ % chiều rộng CHÍNH container slider
(không phải viewport) — nên luôn đúng dù slider nằm cạnh sidebar giới
thiệu (desktop) hay chiếm full-width khi đã xếp chồng (mobile). Số thẻ
hiển thị vì vậy tự nhiên nhiều/ít theo không gian thực tế, không nhảy
cấp đột ngột giữa các breakpoint cố định như trước. */
.pslider > li {
flex: 0 0 clamp(200px, 34%, 380px);
scroll-snap-align: start;
}
.pslider-bar {
position: relative;
height: 3px;
margin-top: var(--sp-4);
background: var(--c-line);
border-radius: var(--r-pill);
overflow: hidden;
}
.pslider-bar__thumb {
position: absolute; top: 0; left: 0; height: 100%;
width: 25%;
background: var(--c-forest);
border-radius: var(--r-pill);
transition: transform .12s linear, width .12s linear;
will-change: transform;
}
/* Không có gì để cuộn thêm -> ẩn điều khiển, tránh gây rối mắt. */
.is-pslider-static .pslider__nav,
.is-pslider-static .pslider-bar { display: none; }
/* Khối "Sản phẩm bán chạy" dạng slider: cột giới thiệu cố định bên trái,
slider chiếm phần còn lại bên phải. */
.productsx {
display: flex;
align-items: flex-start;
gap: var(--sp-8);
}
.productsx__intro {
flex: 0 0 300px;
position: sticky;
top: calc(var(--header-h) + 24px);
}
.productsx__title { margin: 0 0 var(--sp-4); }
.productsx__title-a {
display: block;
font-family: var(--f-display);
font-style: italic;
font-weight: 400;
font-size: var(--fs-lg);
color: var(--c-ink);
line-height: 1.2;
}
.productsx__title-b {
display: block;
font-family: var(--f-body);
font-weight: 800;
font-size: clamp(2rem, 3.4vw, 2.75rem);
letter-spacing: -.01em;
text-transform: uppercase;
color: var(--c-forest-deep);
line-height: 1;
margin-top: 4px;
}
.productsx__desc {
color: var(--c-mute);
font-size: var(--fs-base);
max-width: 32ch;
margin: 0 0 var(--sp-6);
}
.productsx__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
}
.productsx__slider {
flex: 1 1 auto;
min-width: 0;
/* min-width:0 chỉ cho phép CO NHỎ hơn nội dung bên trong (chặn dưới),
nhưng KHÔNG chặn trên — trên mobile, .productsx đổi flex-direction
sang column, và flex item ở trục phụ (width) trong ngữ cảnh này vẫn
có thể bị nội dung bên trong (.pslider, vốn KHÔNG wrap, rộng bằng
tổng toàn bộ sản phẩm cộng lại) kéo rộng ra vượt quá container cha —
đã đo thực tế: không có max-width thì rộng 385px dù cha chỉ 328px,
kéo theo toàn trang bị tràn ngang. max-width:100% chặn đúng chỗ còn
thiếu, slider vẫn overflow-x đúng bên trong nó như bình thường. */
max-width: 100%;
}
.productsx__slider .pslider-wrap { position: relative; }
/* Product card */
.card { position: relative; }
.card__media {
position: relative;
border-radius: var(--r-md);
overflow: hidden;
background: var(--c-sand);
margin-bottom: var(--sp-3);
}
.card__imglink { display: block; position: relative; aspect-ratio: 4/5; }
.card__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: opacity .55s var(--ease), transform .8s var(--ease);
}
.card__img--back { opacity: 0; }
.card:hover .card__img--front { opacity: 0; transform: scale(1.03); }
.card:hover .card__img--back { opacity: 1; transform: scale(1.03); }
/* Nếu không có ảnh gallery thì chỉ zoom nhẹ */
.card:not(:has(.card__img--back)):hover .card__img--front { opacity: 1; transform: scale(1.05); }
.card__badges {
position: absolute; top: 12px; left: 12px;
display: flex; flex-direction: column; gap: 6px;
z-index: 2;
}
.badge {
display: inline-block;
padding: 5px 11px;
font-size: 11px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
border-radius: var(--r-pill);
background: var(--c-forest); color: #fff;
}
.badge--sale { background: var(--c-clay); }
.badge--out { background: var(--c-mute); }
.badge--feat { background: var(--c-forest-deep); }
.card__quick {
position: absolute; left: 12px; right: 12px; bottom: 12px;
z-index: 2;
opacity: 0; transform: translateY(10px);
transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card__quick,
.card:focus-within .card__quick { opacity: 1; transform: none; }
.card__body { display: flex; flex-direction: column; gap: 4px; }
.card__title {
font-family: var(--f-body);
font-size: var(--fs-base);
font-weight: 500;
line-height: 1.45;
margin: 0;
color: var(--c-ink);
}
.card__title a:hover { color: var(--c-forest); }
.card__desc { font-size: var(--fs-sm); color: var(--c-mute); margin: 0; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: 4px; }
.card__price { font-weight: 600; color: var(--c-forest-deep); }
.card__price del { color: var(--c-mute); font-weight: 400; margin-right: 6px; font-size: var(--fs-sm); }
.card__price ins { text-decoration: none; color: var(--c-clay); }
.card__rating { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-sm); color: var(--c-mute); }
.card__rating svg { color: #E0A93B; fill: #E0A93B; }
.stocknote { font-size: var(--fs-xs); color: var(--c-mute); letter-spacing: .03em; }
.stocknote--low { color: var(--c-clay); font-weight: 600; }
.stocknote--out { color: var(--c-mute); }
/* Thẻ sản phẩm kiểu "editorial" — dùng riêng cho slider Sản phẩm bán chạy:
ảnh đặt trên nền màu có khoảng đệm (không tràn viền), nút thêm giỏ dạng
icon vuông nổi ở góc, mô tả ngắn viết hoa thay vì đoạn văn dài. */
.ecard { position: relative; }
.ecard__media {
position: relative;
aspect-ratio: 1 / 1;
background: var(--c-sand);
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-3);
margin-bottom: var(--sp-5);
}
.ecard__imglink { display: block; width: 100%; height: 100%; }
.ecard__img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform .5s var(--ease);
}
.ecard:hover .ecard__img { transform: scale(1.04); }
.ecard__badges {
position: absolute; top: 12px; left: 12px;
display: flex; flex-direction: column; gap: 6px;
z-index: 2;
}
.ecard__addbtn {
position: absolute;
right: 14px;
bottom: 14px;
z-index: 3;
width: 44px; height: 44px;
display: grid; place-items: center;
background: var(--c-cream);
color: var(--c-forest-deep);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
border: 1px solid var(--c-line);
transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.ecard__addbtn:hover { background: var(--c-forest); color: #fff; transform: translateY(-2px); }
.ecard__addbtn.is-loading { opacity: .6; pointer-events: none; }
.ecard__body { padding-top: var(--sp-2); }
.ecard__title {
font-family: var(--f-body);
font-size: var(--fs-base);
font-weight: 500;
margin: 0 0 4px;
line-height: 1.4;
}
.ecard__title a:hover { color: var(--c-forest); }
.ecard__subtitle {
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--c-mute);
margin: 0 0 var(--sp-2);
line-height: 1.5;
}
.ecard__price {
display: block;
font-weight: 600;
color: var(--c-forest-deep);
}
.ecard__price del { color: var(--c-mute); font-weight: 400; margin-right: 6px; font-size: var(--fs-sm); }
.ecard__price ins { text-decoration: none; color: var(--c-clay); }
/* Single product */
.single-product div.product {
position: relative;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: var(--sp-8);
align-items: start;
padding-block: var(--sp-5) var(--sp-8);
}
/* Badge giảm giá (.badge--sale) trên trang sản phẩm đơn: WooCommerce chạy
hook woocommerce_show_product_sale_flash (priority 10) TRƯỚC
woocommerce_show_product_images (priority 20), nên badge là 1
ĐỘC LẬP, đứng làm con trực tiếp của chính div.product (grid 2 cột) —
KHÔNG nằm bên trong khung ảnh. Vì là con trực tiếp của grid container,
nó tự động bị "stretch" lấp đầy nguyên 1 track (hành vi mặc định
justify-items:stretch của CSS Grid), khiến badge to bằng cả nửa trang
thay vì 1 nhãn nhỏ — bất kể CSS gốc đã khai display:inline-block. Đưa
ra khỏi luồng grid bằng position:absolute, định vị theo toạ độ của
chính div.product (đã set position:relative ở trên) — vì ảnh luôn là
item đầu tiên nằm ở góc trên-trái, toạ độ tuyệt đối này rơi đúng lên
góc ảnh mà không cần badge thực sự nằm trong DOM của khung ảnh. */
.single-product div.product > .badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 5;
}
/* WooCommerce core CSS mặc định float:left/float:right + width:48% cho 2
khối này (bố cục 2 cột kiểu cũ) — dù grid container đã tự vô hiệu hoá
float theo spec, phần width:48% đi kèm vẫn có thể ghi đè hành vi
"stretch lấp đầy track" mặc định của grid item, khiến 2 cột co lệch/đè
lên nhau. Ép rõ ràng float:none + width:auto để grid hoàn toàn kiểm
soát layout, không còn phụ thuộc CSS gốc của WooCommerce. */
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
float: none !important;
width: auto !important;
}
.single-product .woocommerce-product-gallery { position: sticky; top: calc(var(--header-h) + 20px); }
.single-product .woocommerce-product-gallery__image img { border-radius: var(--r-md); }
.single-product .flex-control-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); padding: 0; }
.single-product .flex-control-thumbs li { width: 78px; }
.single-product .flex-control-thumbs img { border-radius: var(--r-sm); cursor: pointer; opacity: .6; transition: opacity .2s; }
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; }
.single-product .product_title { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.single-product .price {
font-family: var(--f-display);
font-size: var(--fs-lg);
color: var(--c-forest-deep);
display: block;
margin-bottom: var(--sp-4);
}
.single-product .price del { color: var(--c-mute); font-size: var(--fs-md); margin-right: var(--sp-2); }
.single-product .price ins { text-decoration: none; color: var(--c-clay); }
.woocommerce-product-details__short-description { color: var(--c-mute); margin-bottom: var(--sp-5); }
.single-product form.cart {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
/* Ẩn ô chọn số lượng trên trang sản phẩm đơn — mặc định luôn thêm 1, muốn
nhiều hơn thì chỉnh số lượng ở giỏ hàng (drawer/trang giỏ vẫn còn ô này
bình thường, không bị ảnh hưởng vì chỉ ẩn trong phạm vi form.cart ở đây).
Dùng class ".quantity" chuẩn của WooCommerce (hardcode sẵn trong hàm lõi
woocommerce_quantity_input(), LUÔN có mặt bất kể theme override nào có
được áp dụng hay không) — KHÔNG dùng [data-qty] vì attribute đó chỉ tồn
tại khi đúng file woocommerce/global/quantity-input.php của theme được
WooCommerce sử dụng; nếu vì lý do gì đó không được dùng, selector dựa
vào data-qty sẽ không khớp gì cả và ô số lượng vẫn hiện ra như cũ.
BẮT BUỘC !important: với sản phẩm có biến thể, sau khi chọn đủ tổ hợp
hợp lệ, chính wc-add-to-cart-variation.js của WooCommerce gọi thẳng
jQuery .show() lên .quantity — jQuery ghi đè bằng inline style
"display:block" trực tiếp trên phần tử, mà inline style luôn thắng CSS
ngoài nếu CSS đó không có !important, nên quantity sẽ hiện lại ngay sau
khi chọn xong biến thể nếu thiếu !important ở đây. */
.single-product form.cart .quantity { display: none !important; }
/* Ngoại lệ 1: sản phẩm dạng "grouped" (combo nhiều sản phẩm con) cần ô số
lượng riêng cho từng dòng mới hoạt động đúng — WooCommerce tự thêm class
"grouped_form" lên form cho đúng trường hợp này. */
.single-product form.cart.grouped_form .quantity { display: inline-flex !important; }
/* Ngoại lệ 2: sản phẩm có đặt giá theo số lượng (tiered pricing) — bảng
giá "Mua nhiều giá tốt hơn" ([data-qty-tiers]) chỉ có ý nghĩa nếu khách
thực sự chọn được số lượng ngay tại trang sản phẩm, nên hiện lại ô số
lượng riêng cho đúng trường hợp này (không ảnh hưởng sản phẩm khác). */
.summary:has([data-qty-tiers]) form.cart .quantity { display: inline-flex !important; }
.single-product form.cart .qty { transform: scale(1.12); transform-origin: left center; margin-right: var(--sp-2); }
.single-product form.cart .single_add_to_cart_button {
flex: 1; min-width: 200px;
display: inline-flex; align-items: center; justify-content: center;
padding: 16px 30px;
background: var(--c-forest); color: #fff;
border-radius: var(--r-pill);
font-size: var(--fs-sm); font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
border: 0; cursor: pointer;
transition: all .24s var(--ease);
}
.single-product form.cart .single_add_to_cart_button:hover { background: var(--c-forest-deep); transform: translateY(-1px); box-shadow: var(--sh-md); }
.single-product form.cart .single_add_to_cart_button:disabled,
.single-product form.cart .single_add_to_cart_button.is-loading { opacity: .65; pointer-events: none; transform: none; box-shadow: none; }
.single-product form.cart .variations { width: 100%; }
.single-product form.cart .variations td { padding: 6px 0; }
.single-product form.cart .variations select {
width: 100%; padding: 11px 16px;
border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff;
}
/* Select gốc ẩn trực quan nhưng vẫn trong luồng DOM/form — vẫn là nguồn dữ
liệu thật cho script biến thể của WooCommerce, JS chỉ hiện nút bấm thay
thế bên cạnh (xem main.js). Ẩn kiểu "visually hidden", không display:none,
để không có rủi ro với các đoạn code khác kiểm tra kích thước phần tử. */
.single-product form.cart .variations select.varswatch-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.varswatch { display: flex; flex-wrap: wrap; gap: 8px; }
.varswatch__btn {
padding: 9px 18px;
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
background: #fff;
font-size: var(--fs-sm);
color: var(--c-ink);
cursor: pointer;
transition: all .2s var(--ease);
}
.varswatch__btn:hover:not(.is-disabled) { border-color: var(--c-forest); color: var(--c-forest); }
/* :active — hiệu ứng PHẢN HỒI TỨC THỜI lúc đang giữ chuột/ngón tay nhấn
xuống (như nút vật lý lõm xuống), chỉ tồn tại trong khoảnh khắc bấm rồi
biến mất ngay khi thả ra — bổ sung cho cảm giác bấm rõ ràng hơn. KHÔNG
thể dùng để thay thế .is-active (trạng thái "đang được chọn", do JS
quản lý, tồn tại lâu dài cho tới khi chọn biến thể khác): sau khi thả
chuột, :active tự động biến mất — nếu chỉ dựa vào nó, khách sẽ không có
cách nào biết mình đang chọn màu/size nào khi nhìn lại trang. */
.varswatch__btn:active:not(.is-disabled) { transform: scale(.94); }
.varswatch__btn.is-active {
background: var(--c-forest);
border-color: var(--c-forest);
color: #fff;
font-weight: 600;
}
/* Phải đứng sau và cụ thể hơn rule :hover ở trên — nếu không, con trỏ dừng
ngay trên nút vừa bấm (rất thường gặp) sẽ khiến chữ trùng màu nền và biến
mất, vì :hover:not() có specificity cao hơn .is-active một mình. */
.varswatch__btn.is-active:hover { color: #fff; border-color: var(--c-forest); }
.varswatch__btn.is-disabled {
opacity: .38;
text-decoration: line-through;
cursor: not-allowed;
background: var(--c-sand);
}
/* Ẩn link "Xoá" mặc định của WooCommerce — giờ đã có thể bỏ chọn một
thuộc tính bằng cách bấm lại đúng nút đang active (xem main.js), không
cần link riêng nữa. */
.single-product .reset_variations { display: none; }
.trust { display: grid; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.trust li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-mute); }
.trust svg { color: var(--c-moss); flex-shrink: 0; }
/* Combo sản phẩm — hiện dưới nút mua hàng trên trang chi tiết sản phẩm khi
sản phẩm đang xem nằm trong ít nhất 1 combo. */
.combo-box {
border: 1px solid var(--c-line);
border-radius: var(--r-md);
background: var(--c-cream);
padding: var(--sp-4);
margin-top: var(--sp-4);
}
.combo-box + .combo-box { margin-top: var(--sp-3); }
.combo-box__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.combo-box__title { font-weight: 600; color: var(--c-forest-deep); }
.combo-box__save {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .02em;
color: #fff;
background: var(--c-clay);
padding: 3px 9px;
border-radius: var(--r-pill);
white-space: nowrap;
}
.combo-box__note { font-size: var(--fs-sm); color: var(--c-mute); margin: 0 0 var(--sp-3); }
.combo-box__items { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.combo-box__item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; text-align: center; }
.combo-box__item-media img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: #fff; display: block; }
.combo-box__item-name { font-size: 11px; color: var(--c-mute); line-height: 1.3; }
.combo-box__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.combo-box__price del { color: var(--c-mute); font-size: var(--fs-sm); margin-right: 6px; }
.combo-box__price ins { text-decoration: none; font-weight: 700; font-size: var(--fs-md); color: var(--c-forest-deep); }
.combo-box [data-add-combo] { white-space: nowrap; }
.combo-box [data-add-combo].is-loading { opacity: .6; pointer-events: none; }
/* Bảng giá theo số lượng (mua nhiều giá tốt hơn) — hiện ngay dưới giá
chính trên trang chi tiết sản phẩm. Dòng khớp với số lượng khách đang
nhập được đánh dấu is-active qua JS (xem main.js). */
.qty-tiers { margin: var(--sp-3) 0 var(--sp-4); }
.qty-tiers__label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-forest-deep); margin-bottom: 6px; }
.qty-tiers__table { width: 100%; max-width: 360px; border-collapse: collapse; font-size: var(--fs-sm); }
.qty-tiers__table tr { border-bottom: 1px solid var(--c-line); transition: background .15s var(--ease); }
.qty-tiers__table tr:last-child { border-bottom: 0; }
.qty-tiers__table tr.is-active { background: var(--c-sand); }
.qty-tiers__range, .qty-tiers__price { padding: 6px 4px; }
.qty-tiers__price { text-align: right; font-weight: 600; color: var(--c-forest-deep); }
.qty-tiers__unit { font-weight: 400; color: var(--c-mute); margin-left: 2px; }
.product_meta { font-size: var(--fs-sm); color: var(--c-mute); padding-top: var(--sp-4); }
.product_meta > span { display: block; padding: 3px 0; }
.woocommerce-tabs { grid-column: 1 / -1; padding-top: var(--sp-7); border-top: 1px solid var(--c-line); }
.woocommerce-tabs ul.tabs {
display: flex; gap: var(--sp-2); flex-wrap: wrap;
border-bottom: 1px solid var(--c-line);
margin-bottom: var(--sp-5);
}
.woocommerce-tabs ul.tabs li a {
display: block; padding: var(--sp-3) var(--sp-4);
font-weight: 500; color: var(--c-mute);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--c-forest); border-bottom-color: var(--c-forest); }
/* Chỉ còn duy nhất 1 tab (Đánh giá khách hàng) thì ẩn hẳn thanh điều hướng —
một "công tắc" chỉ có 1 vị trí để bấm là thừa, nội dung hiện thẳng luôn. */
.woocommerce-tabs ul.tabs:has(> li:only-child) { display: none; }
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-Tabs-panel { max-width: 78ch; }
/* min-width:0 + max-width:100% — cùng lý do đã sửa cho .productsx__slider:
.related/.upsells là grid item của .single-product div.product (grid
container), và grid item mặc định min-width:auto (không phải 0), nên
nội dung pslider bên trong (không wrap, rộng theo tổng sản phẩm) có thể
kéo nó tràn rộng hơn cả container cha trên mobile nếu thiếu 2 dòng này. */
.related, .upsells { grid-column: 1 / -1; padding-top: var(--sp-7); min-width: 0; max-width: 100%; }
.upsells > h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-5); }
/* Cart / checkout / account */
.woocommerce-cart .shop-main,
.woocommerce-checkout .shop-main,
.woocommerce-account .shop-main { padding-bottom: var(--sp-8); }
.woocommerce table.shop_table {
width: 100%; border-collapse: collapse;
background: #fff; border-radius: var(--r-md); overflow: hidden;
border: 1px solid var(--c-line);
}
.woocommerce table.shop_table th {
text-align: left; padding: var(--sp-3) var(--sp-4);
font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em;
border-bottom: 1px solid var(--c-line);
background: var(--c-sand);
}
.woocommerce table.shop_table td { padding: var(--sp-4); border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.woocommerce table.shop_table img { width: 68px; border-radius: var(--r-sm); }
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
display: inline-flex; align-items: center; justify-content: center;
padding: 13px 26px;
background: var(--c-forest); color: #fff;
border: 0; border-radius: var(--r-pill);
font-size: var(--fs-sm); font-weight: 600;
letter-spacing: .05em; text-transform: uppercase;
cursor: pointer; transition: all .24s var(--ease);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--c-forest-deep); color: #fff; }
.woocommerce .button.alt { background: var(--c-clay); }
.woocommerce .button.alt:hover { filter: brightness(.92); background: var(--c-clay); }
.woocommerce .cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-billing-fields {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
padding: var(--sp-5);
}
.woocommerce form .form-row { margin-bottom: var(--sp-4); display: block; }
.woocommerce form .form-row label { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: 6px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
width: 100%; padding: 12px 16px;
border: 1px solid var(--c-line); border-radius: var(--r-md);
background: #fff; height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { outline: none; border-color: var(--c-forest); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
padding: var(--sp-4) var(--sp-5);
border-radius: var(--r-md);
border-left: 3px solid var(--c-forest);
background: #fff;
margin-bottom: var(--sp-5);
list-style: none;
}
.woocommerce-error { border-left-color: var(--c-clay); }
.woocommerce-breadcrumb { display: none; }
.woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count { float: none; margin: 0; }
/* ---------------------------- 9. Bài viết ------------------------------ */
.postgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6) var(--sp-5);
padding-bottom: var(--sp-6);
}
.pcard__link { display: block; }
.pcard__media {
display: block;
aspect-ratio: 16/11;
border-radius: var(--r-md);
overflow: hidden;
background: var(--c-sand);
margin-bottom: var(--sp-3);
}
.pcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pcard__link:hover .pcard__img { transform: scale(1.05); }
.pcard__ph { display: grid; place-items: center; height: 100%; color: var(--c-moss); opacity: .35; }
.pcard__body { display: block; }
.pcard__title { font-size: var(--fs-md); margin: 6px 0 var(--sp-2); }
.pcard__excerpt { display: block; color: var(--c-mute); font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.entry__meta {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
font-size: var(--fs-xs);
text-transform: uppercase; letter-spacing: .1em;
color: var(--c-moss);
}
.entry__meta a:hover { color: var(--c-forest); }
.entry__date { color: var(--c-mute); }
.entry__cover { margin: 0 0 var(--sp-6); }
.entry__cover img { width: 100%; border-radius: var(--r-md); }
.entry__cover--wide { margin-inline: 0; }
.entry__content { font-size: var(--fs-md); line-height: 1.78; }
.entry__content h2 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.entry__content h3 { font-size: var(--fs-md); margin-top: var(--sp-5); }
.entry__content ul, .entry__content ol { margin: 0 0 var(--sp-4) var(--sp-5); }
.entry__content li { list-style: disc; padding: 3px 0; }
.entry__content ol li { list-style: decimal; }
.entry__content a { color: var(--c-forest); text-decoration: underline; text-underline-offset: 3px; }
.entry__content blockquote {
margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5);
border-left: 3px solid var(--c-forest);
background: var(--c-sand);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-family: var(--f-display); font-style: italic; font-size: var(--fs-lg);
}
.entry__content img { border-radius: var(--r-md); margin-block: var(--sp-4); }
.entry__content code {
background: var(--c-sand); padding: 2px 6px;
border-radius: var(--r-sm); font-size: .875em;
}
.entry__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-block: var(--sp-5); }
.entry__tags a {
padding: 5px 14px; border: 1px solid var(--c-line);
border-radius: var(--r-pill); font-size: var(--fs-sm);
}
.entry__tags a:hover { background: var(--c-forest); color: #fff; border-color: var(--c-forest); }
.postnav {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
padding-block: var(--sp-6);
border-top: 1px solid var(--c-line);
}
.postnav__link { display: block; padding: var(--sp-4); background: #fff; border-radius: var(--r-md); }
.postnav__link span { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--c-moss); margin-bottom: 4px; }
.postnav__link strong { font-family: var(--f-display); font-weight: 500; }
.postnav__link--next { text-align: right; }
.postnav__link:hover { box-shadow: var(--sh-md); }
.pagination { display: flex; justify-content: center; padding-block: var(--sp-6); }
.pagination ul { display: flex; gap: 6px; align-items: center; }
.pagination a, .pagination span {
display: grid; place-items: center;
min-width: 40px; height: 40px; padding: 0 12px;
border-radius: var(--r-pill);
font-size: var(--fs-sm); font-weight: 500;
}
.pagination a:hover { background: var(--c-sand); }
.pagination .current { background: var(--c-forest); color: #fff; }
.pagination .prev svg { transform: rotate(180deg); }
.comments { padding-block: var(--sp-6); border-top: 1px solid var(--c-line); }
.comments__title { font-size: var(--fs-lg); }
.comments__list li { padding-block: var(--sp-4); border-bottom: 1px solid var(--c-line); }
.comments .comment-form textarea,
.comments .comment-form input[type="text"],
.comments .comment-form input[type="email"],
.comments .comment-form input[type="url"] {
width: 100%; padding: 12px 16px;
border: 1px solid var(--c-line); border-radius: var(--r-md);
background: #fff; margin-top: 4px;
}
.comments .comment-form label { font-size: var(--fs-sm); font-weight: 500; }
.comments .comment-form p { margin-bottom: var(--sp-4); }
.notfound { padding-block: var(--sp-9); text-align: center; max-width: 620px; margin-inline: auto; }
.notfound__title { font-size: var(--fs-2xl); }
.notfound__text { color: var(--c-mute); margin-bottom: var(--sp-5); }
.notfound .searchform { margin: 0 auto var(--sp-5); }
.noresults { text-align: center; padding-block: var(--sp-8); color: var(--c-mute); }
.noresults svg { margin: 0 auto var(--sp-4); color: var(--c-line); }
.noresults__title { color: var(--c-forest-deep); }
.noresults .searchform { margin: var(--sp-5) auto 0; }
/* --------------------- 10. Footer & responsive ------------------------- */
.footer {
background: var(--c-forest-deep);
color: rgba(255, 255, 255, .72);
padding-block: var(--sp-8) var(--sp-5);
margin-top: auto;
}
.footer h3, .footer .brand__name { color: #fff; }
.footer a:hover { color: #fff; }
.footer__top {
display: grid;
grid-template-columns: 1fr 2.2fr;
gap: var(--sp-8);
padding-bottom: var(--sp-7);
border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer__brand .brand__mark { color: var(--c-sand); }
.footer__tagline { margin-top: var(--sp-3); font-size: var(--fs-sm); max-width: 34ch; }
.social__list { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.social__list a {
width: 40px; height: 40px;
display: grid; place-items: center;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: var(--r-pill);
font-size: 0;
}
.social__list a::before {
content: "";
width: 16px; height: 16px;
background: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center/contain no-repeat;
}
.social__list a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
.footer__menus {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--sp-5);
}
.footer__coltitle {
font-family: var(--f-body);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: var(--sp-3);
}
.footer__list li { padding: 5px 0; font-size: var(--fs-base); }
.footer__list--contact a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer__legal { padding-top: var(--sp-5); font-size: var(--fs-sm); }
.footer__company p { margin: 0 0 4px; opacity: .72; }
.footer__companyname { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: 1 !important; }
.footer__note { font-size: var(--fs-xs); opacity: .55 !important; }
.footer__bottom {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--sp-3);
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid rgba(255, 255, 255, .14);
opacity: .7;
}
.footer__bottom p { margin: 0; }
.footer__legallist { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }
.hide-lg, .hide-lg.iconbtn { display: none; }
/* ---------------------------- Responsive ------------------------------- */
@media (max-width: 1100px) {
.header__nav { display: none; }
.header .header__burger { display: inline-flex; }
.header__inner { grid-template-columns: auto 1fr auto; }
.header__brand { justify-self: center; }
.products-grid, ul.products { grid-template-columns: repeat(3, 1fr); }
.productsx__intro { flex-basis: 240px; }
.shop-layout { grid-template-columns: 1fr; }
.shop-filterbtn { display: inline-flex; }
.hide-lg, .hide-lg.iconbtn { display: inline-flex; }
.sidebar {
position: fixed; inset: 0 0 0 auto;
width: min(88vw, 340px);
background: var(--c-cream);
z-index: var(--z-panel);
padding: var(--sp-5);
overflow-y: auto;
transform: translateX(100%);
transition: transform var(--dur) var(--ease);
box-shadow: var(--sh-lg);
}
.sidebar.is-open { transform: translateX(0); }
.single-product div.product { grid-template-columns: 1fr; gap: var(--sp-6); }
.single-product .woocommerce-product-gallery { position: static; }
.philosophy__inner, .newsletter__inner, .footer__top { grid-template-columns: 1fr; gap: var(--sp-6); }
.effects__inner { grid-template-columns: 1fr; text-align: center; gap: var(--sp-5); }
.effects__media img, .effects__ph { max-width: 300px; }
.effects__aux { width: 38%; }
.postgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
:root { --header-h: 62px; }
.hero__inner { flex-direction: column; min-height: 0; }
.hero__media { flex: none; width: 100%; aspect-ratio: 5/4; }
.hero__placeholder { min-height: 0; border-right: 0; border-bottom: 1px dashed rgba(255, 255, 255, .2); }
.hero__textpanel { flex: none; padding: var(--sp-7) var(--sp-5); }
.hero__dots { left: var(--sp-5); }
/* Mũi tên phải nằm giữa phần ẢNH, không phải giữa toàn bộ hero đã xếp chồng
ảnh+panel — ảnh cao 80% chiều rộng (aspect-ratio 5/4) nên tâm là 40vw. */
.hero__arrow { top: 40vw; }
.sechead { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.productsx { flex-direction: column; gap: var(--sp-5); }
.productsx__intro { flex-basis: auto; position: static; width: 100%; }
.productsx__desc { max-width: none; }
.products-grid, ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
.postgrid { grid-template-columns: 1fr; }
.card__quick { opacity: 1; transform: none; left: 8px; right: 8px; bottom: 8px; }
.card__quick .btn { padding: 10px 14px; font-size: 11px; }
.card__media { margin-bottom: var(--sp-2); }
.section { padding-block: var(--sp-7); }
.postnav { grid-template-columns: 1fr; }
.drawer__actions { grid-template-columns: 1fr; }
.woocommerce table.shop_table thead { display: none; }
.woocommerce table.shop_table tr { display: block; border-bottom: 1px solid var(--c-line); }
.woocommerce table.shop_table td { display: flex; justify-content: space-between; border: 0; padding: 8px var(--sp-4); }
}
@media (max-width: 520px) {
.wrap { padding-inline: var(--sp-4); }
.catgrid { grid-template-columns: repeat(2, 1fr); }
.hide-sm, .hide-sm.iconbtn { display: none; }
.marquee__item { font-size: var(--fs-md); }
.drawer__item { grid-template-columns: 64px 1fr auto; }
.footer__bottom { flex-direction: column; align-items: flex-start; }
.hero__arrow { width: 38px; height: 38px; }
.hero__arrow--prev { left: var(--sp-3); }
.hero__arrow--next { right: var(--sp-3); }
.hero__dots { bottom: var(--sp-3); }
.pslider__nav { gap: 6px; }
.pslider__arrow { width: 36px; height: 36px; }
}