/* =========================================================
EVERHARMONY — Design System
Modern white + vivid-orange fashion e-commerce theme
========================================================= */
:root{
/* Brand colors */
--color-primary: #FF6A00;
--color-primary-dark: #E85A00;
--color-primary-light: #FFE8D6;
--color-primary-soft: #FFF4EC;
--color-accent: #FF3D68; /* used sparingly for sale badges */
--color-green: #16A34A;
/* Neutrals */
--color-black: #17140F;
--color-ink: #241F1A;
--color-white: #FFFFFF;
/* v35 (vòng 5) mục "Ngoài ra" #2 — khách yêu cầu màu nền sáng hơn. body đã
là #FFFFFF (trắng tuyệt đối) nên không đổi được thêm; hai màu nền dùng
cho block/thẻ/khu vực phân tách (filters, card-box, usp-strip, thumbnail
placeholder...) hơi ngả be/ấm — nới sáng + bớt ấm để tổng thể trang có
cảm giác thoáng/sáng hơn, không đổi tông chính thương hiệu. */
--color-gray-50: #FCFBFA;
--color-gray-100: #F6F4F1;
--color-gray-200: #E8E4DE;
--color-gray-300: #D8D2C9;
--color-gray-400: #ADA69C;
--color-gray-600: #766F65;
--color-gray-800: #3A3530;
/* Type */
--font-display: 'Unbounded', 'Manrope', sans-serif;
--font-body: 'Manrope', sans-serif;
/* Radii / shadows */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 24px;
--radius-pill: 999px;
--shadow-card: 0 2px 8px rgba(23,20,15,.05), 0 1px 2px rgba(23,20,15,.06);
--shadow-hover: 0 16px 32px rgba(23,20,15,.12);
--container: 1280px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
font-family:var(--font-body);
color:var(--color-ink);
background:var(--color-white);
-webkit-font-smoothing:antialiased;
font-size:15px;
line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select{font-family:inherit;font-size:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:-0.01em;}
/* ── Global layout containers: padding 20px on all sides, never flush to edge ── */
.container,
.main-content,
.page-wrapper,
.profile-container,
.messages-container,
.mail-container{
width:100%;
max-width:var(--container);
margin-left:auto;
margin-right:auto;
padding-left:20px !important;
padding-right:20px !important;
}
/* .container keeps its own max-width override via --container var */
.container{max-width:var(--container);}
/* ── Mobile: enforce minimum 15px side padding at 900px and below ── */
@media (max-width:900px){
.container,
.main-content,
.page-wrapper,
.profile-container,
.messages-container,
.mail-container{
padding-left:15px !important;
padding-right:15px !important;
}
}
/* ── Small mobile (≤480px): same 15px safe margin ── */
@media (max-width:480px){
.container,
.main-content,
.page-wrapper,
.profile-container,
.messages-container,
.mail-container{
padding-left:15px !important;
padding-right:15px !important;
}
}
.section{padding:64px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:32px;flex-wrap:wrap;}
.section-head h2{font-size:32px;}
.section-head p{color:var(--color-gray-600);margin-top:6px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:12px;}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-primary);}
.link-more{font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px;color:var(--color-ink);border-bottom:2px solid var(--color-primary);padding-bottom:2px;white-space:nowrap;}
.link-more:hover{color:var(--color-primary);}
/* Buttons */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:14px 28px;border-radius:var(--radius-pill);
font-weight:700;font-size:14px;letter-spacing:.01em;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
white-space:nowrap;
}
.btn-primary{background:var(--color-primary);color:var(--color-white);}
.btn-primary:hover{background:var(--color-primary-dark);box-shadow:0 8px 20px rgba(255,106,0,.35);}
.btn-dark{background:var(--color-black);color:var(--color-white);}
.btn-dark:hover{background:var(--color-primary);}
.btn-outline{background:transparent;color:var(--color-ink);border:1.5px solid var(--color-gray-300);}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary);}
.btn-ghost-white{background:rgba(255,255,255,.15);color:var(--color-white);border:1.5px solid rgba(255,255,255,.6);backdrop-filter:blur(4px);}
.btn-ghost-white:hover{background:var(--color-white);color:var(--color-primary);}
.btn-sm{padding:10px 18px;font-size:13px;}
.btn-block{width:100%;}
.btn-icon{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--color-gray-100);flex-shrink:0;}
.btn-icon:hover{background:var(--color-primary);color:var(--color-white);}
.btn:disabled, .btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;}
.btn:disabled:hover, .btn[disabled]:hover{box-shadow:none;}
/* =========== TOPBAR =========== */
.topbar{background:var(--color-black);color:var(--color-white);font-size:12.5px;}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:38px;}
.topbar-slides{display:flex;gap:28px;}
.topbar a{opacity:.85;}
.topbar a:hover{opacity:1;color:var(--color-primary);}
.topbar-right{display:flex;gap:20px;opacity:.9}
/* =========== HEADER =========== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-gray-200);}
.header-inner{display:flex;align-items:center;gap:32px;height:84px;}
.logo{flex-shrink:0;}
.logo img{height:28px;width:auto;}
.main-nav{display:flex;gap:30px;flex:1;}
.main-nav a{font-weight:700;font-size:14.5px;position:relative;padding:8px 0;}
.main-nav a.tag-sale{color:var(--color-accent);}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--color-primary);transition:width .2s ease;}
.main-nav a:hover::after,.main-nav a.active::after{width:100%;}
/* [Vá giao diện 30/08/2026] margin-left:auto — trên desktop không đổi gì (vì
.main-nav{flex:1} đã chiếm hết khoảng trống còn lại, header-actions không
còn gì để "auto" thêm), nhưng trên mobile (.main-nav bị display:none ở
@media max-width:900px, mất luôn phần tử flex:1 làm khoảng đệm) đây là
phần tử DUY NHẤT còn lại đẩy khối icon sang sát mép phải — thiếu dòng này,
burger+logo+icon dồn hết bên trái, để hở khoảng trắng lớn bên phải (khách
báo thanh header chỉ chiếm ~65% chiều ngang màn hình thay vì tràn hết). */
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.search-box{display:flex;align-items:center;gap:8px;background:var(--color-gray-100);border-radius:var(--radius-pill);padding:10px 18px;width:230px;transition:width .2s ease;}
.search-box input{background:none;border:none;outline:none;width:100%;font-size:13.5px;}
.search-box:focus-within{width:280px;background:var(--color-white);box-shadow:0 0 0 2px var(--color-primary);}
.icon-btn{position:relative;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--color-ink);}
.icon-btn:hover{background:var(--color-gray-100);}
.icon-btn .count{position:absolute;top:2px;right:2px;background:var(--color-primary);color:#fff;font-size:10px;font-weight:800;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.burger{display:none;}
/* Cowork — header-inner (burger+logo+3 icon-btn) tràn ngang trên mobile: tổng
chiều rộng tối thiểu (22+158+152 + 2×32 gap = 396px) LUÔN lớn hơn vùng nội
dung khả dụng (≤900px, container padding 15px mỗi bên) — flexbox không thể
tự co vì .logo{flex-shrink:0} và mỗi icon-btn là kích thước cố định 44px,
khiến .header-inner (và do đó document.body) rộng hơn viewport dù có
overflow-x:hidden ở html/body (an toàn đó chỉ CHE bớt trên desktop, không
chặn được elastic scroll của Safari iOS — nguồn gốc thật của lỗi "tràn màn
hình" khách báo). Thu hẹp khoảng cách + icon-btn/logo theo 2 mốc để tổng
chiều rộng LUÔN nhỏ hơn vùng nội dung, kể cả màn hình rất nhỏ (320px). */
@media (max-width:900px){
.header-inner{
padding: 14px 16px;
gap: 16px;
}
.header-actions{gap:8px;}
/* Phóng to nút 3 vạch menu (burger) và làm nó to, cân đối, dễ bấm hơn */
.site-header .burger {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
}
.site-header .burger svg {
width: 26px;
height: 26px;
stroke-width: 2.4;
}
/* Phóng to Logo trên di động cho cân đối */
.site-header .logo img {
height: 32px;
width: auto;
}
}
@media (max-width:480px){
.header-inner{gap:8px;padding-left:12px !important;padding-right:12px !important;}
.header-actions{gap:4px;}
.icon-btn{width:36px;height:36px;}
.logo img{height:28px;}
}
/* =========== HERO =========== */
/* v35 (vòng 6) — khách yêu cầu bỏ bo góc nền hero + đổi màu nền trẻ trung hơn,
hợp thời trang hơn (nền cũ be/kem quá trầm cho quần áo thời trang). Đổi
sang gradient cam-hồng rực rỡ hơn hẳn — vẫn dùng ĐÚNG 2 màu thương hiệu
sẵn có (--color-primary cam #FF6A00 và --color-accent hồng #FF3D68, xem
:root phía trên) nên vẫn nhất quán bộ nhận diện, chỉ tăng độ tương phản/
sức sống thay vì thêm màu mới không liên quan. */
/* =========================================================
HERO SLIDER — tràn viền (edge-to-edge), phong cách lifestyle
3 lớp xếp chồng: __media (ảnh/video) < __overlay (phủ tối, cố
định) < __content (chữ + CTA, luôn nổi trên cùng). Xem hướng
dẫn chỉnh sửa ngay trong index.html (comment phía trên section).
========================================================= */
.hero-slider{
position:relative;
width:100vw;margin-left:calc(50% - 50vw); /* thoát khỏi .container để tràn viền toàn màn hình */
height:min(680px, 88vh);min-height:460px;
overflow:hidden;background:var(--color-black);
}
.hero-slider__track{position:relative;width:100%;height:100%;}
.hero-slide{
position:absolute;inset:0;
opacity:0;visibility:hidden;
transition:opacity 1s ease;
}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:2;}
/* v36 — SỬA LỖI ẢNH/VIDEO BỊ MÉO TỶ LỆ khi resize/đổi thiết bị:
nguyên nhân thật là hiệu ứng zoom "Ken Burns" (transform:scale) và
object-fit:cover TRƯỚC ĐÂY nằm CHUNG trên cùng 1 thẻ .
Ở một số engine trình duyệt (đặc biệt Safari/WebKit di động), khi
layout tính lại kích thước phần tử (đổi kích thước cửa sổ, xoay màn
hình, thanh địa chỉ ẩn/hiện...) NGAY GIỮA lúc transform đang chạy,
2 phép tính "vùng cover" và "tỷ lệ scale" có thể chồng chéo nhau 1
khung hình, khiến ảnh trông bị bóp méo/co kéo trong chốc lát — đúng
kiểu lỗi "lúc bình thường, lúc méo" không cố định. Cách sửa chuẩn:
TÁCH hẳn ra 2 lớp riêng — .hero-slide__zoom (chỉ lo transform/scale,
không đụng object-fit) bọc NGOÀI, còn bên trong chỉ lo
đúng 1 việc là object-fit:cover lấp đầy khung của nó. */
.hero-slide__media{position:absolute;inset:0;overflow:hidden;background:var(--color-gray-800);}
.hero-slide__zoom{
position:absolute;inset:0;
transform:scale(1.08);transition:transform 7s cubic-bezier(.25,.1,.25,1);
will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.hero-slide.is-active .hero-slide__zoom{transform:scale(1);} /* hiệu ứng zoom-out chậm khi slide đang hiện */
.hero-slide__media img,
.hero-slide__video{
position:absolute;inset:0;
display:block;width:100%;height:100%;
object-fit:cover;object-position:center;
}
/* Lớp phủ tối — MỘT lớp gradient duy nhất, đậm hẳn ở mép trái (nơi đặt
chữ) rồi nhạt dần sang phải, để mắt không bị phân tán bởi nhiều lớp
chồng nhau — cũng "làm phẳng" bớt chi tiết rối của ảnh nền ngay sau
lưng chữ, giúp khối text đọc như 1 panel rõ ràng thay vì trôi nổi
giữa ảnh. Luôn đảm bảo chữ trắng tương phản tốt bất kể ảnh/video nào. */
.hero-slide__overlay{
position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg, rgba(6,5,4,.82) 0%, rgba(6,5,4,.6) 30%, rgba(6,5,4,.22) 52%, rgba(6,5,4,0) 70%);
}
/* Khối chữ ghim sát lề trái (thẳng hàng với logo ở header) — .container lo
phần căn giữa/khoảng đệm 2 bên trang, .hero-slide__inner nằm LỒNG BÊN
TRONG (không gộp chung 1 thẻ) nên tự áp sát mép trái của .container chứ
không bị canh giữa theo max-width riêng của nó. */
.hero-slide__content{position:absolute;inset:0;z-index:2;display:flex;align-items:center;}
.hero-slide__inner{max-width:520px;color:var(--color-white);}
.hero-slide__inner .eyebrow{color:var(--color-primary);margin-bottom:14px;}
.hero-slide__title{
font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;
font-size:clamp(30px,4.2vw,52px);line-height:1.1;color:var(--color-white);
margin-bottom:16px;
}
.hero-slide__title span{color:var(--color-primary);}
.hero-slide__inner p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.85);max-width:420px;margin-bottom:28px;}
.hero-slide__cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.hero-slide__stats{display:flex;gap:28px;margin-top:26px;text-decoration:none;color:inherit;cursor:pointer;}
.hero-slide__stats div strong{display:block;font-family:var(--font-display);font-size:20px;color:var(--color-white);}
.hero-slide__stats div span{font-size:12px;color:rgba(255,255,255,.68);}
/* Nút CTA nổi bật trên nền ảnh/video — tương phản mạnh, không tiệp màu nền */
.btn-hero-primary{background:var(--color-black);color:var(--color-white);box-shadow:0 10px 26px rgba(0,0,0,.32);}
.btn-hero-primary svg{transition:transform .25s ease;}
.btn-hero-primary:hover{background:var(--color-primary);box-shadow:0 14px 32px rgba(255,106,0,.4);transform:translateY(-2px);}
.btn-hero-primary:hover svg{transform:translateX(4px);}
.btn-hero-primary:active{transform:translateY(0);}
.btn-hero-outline{background:rgba(255,255,255,.1);color:var(--color-white);border:1.5px solid rgba(255,255,255,.7);backdrop-filter:blur(6px);}
.btn-hero-outline:hover{background:var(--color-white);color:var(--color-black);border-color:var(--color-white);transform:translateY(-2px);}
.btn-hero-outline:active{transform:translateY(0);}
/* Mũi tên điều hướng 2 bên */
.hero-slider__arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:48px;height:48px;border-radius:50%;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);
color:var(--color-white);backdrop-filter:blur(8px);
display:flex;align-items:center;justify-content:center;
z-index:5;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s ease;
}
.hero-slider__arrow:hover{background:var(--color-white);color:var(--color-black);border-color:var(--color-white);}
.hero-slider__arrow:active{transform:translateY(-50%) scale(.92);}
.hero-slider__arrow--prev{left:20px;}
.hero-slider__arrow--next{right:20px;}
/* Dấu chấm phân trang */
.hero-slider__dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:9px;z-index:5;}
.hero-slider__dots button{width:8px;height:8px;padding:0;border-radius:50%;background:rgba(255,255,255,.45);transition:all .3s ease;}
.hero-slider__dots button:hover{background:rgba(255,255,255,.75);}
.hero-slider__dots button.is-active{width:26px;border-radius:5px;background:var(--color-white);}
@media (prefers-reduced-motion: reduce){
.hero-slide{transition:opacity .3s ease;}
.hero-slide__zoom{transition:none;transform:none;}
}
/* Placeholder art (used everywhere instead of real photography) */
.ph{
position:relative;overflow:hidden;border-radius:var(--radius-md);
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 55%),
repeating-linear-gradient(135deg, rgba(255,106,0,.10) 0 18px, rgba(255,106,0,0) 18px 36px),
linear-gradient(160deg,#FFE3CC 0%, #FFCBA0 100%);
display:flex;align-items:center;justify-content:center;
}
/* Cowork — khách báo lỗi: khi sản phẩm ĐÃ CÓ ảnh thật, trong lúc ảnh còn
đang tải qua mạng (đặc biệt mạng chậm), nền sọc cam trang trí phía trên
(vốn CHỈ nên dùng cho trường hợp icon minh hoạ khi CHƯA có ảnh thật) vẫn
hiện ra trước, rồi mới bị ảnh thật che lên khi tải xong — tạo hiệu ứng
"chớp" sọc cam → ảnh thật rất lộ liễu, phản cảm. .ph không phân biệt 2
trường hợp (bọc icon minh hoạ) vì dùng CHUNG 1
class ở rất nhiều nơi (thẻ sản phẩm, giỏ hàng, gallery...). Dùng :has() để
ĐÈ về nền xám trung tính (giống nền chờ ảnh đã dùng ở .product-media/
.cat-hero-img) NGAY KHI .ph bọc trực tiếp 1 — bấm vào bất kỳ đâu trong collage đều điều
hướng tới cùng 1 link (đích quản lý được ở admin, mặc định = danh mục
đang xem). Hover phóng to NHẸ từng ảnh (khớp đúng hiệu ứng .cat-tile:hover
.ph đã dùng cho khối "Danh mục" ở index.html — nhất quán toàn site) chứ
không phóng cả khối để tránh đè lên nội dung xung quanh. */
.cat-hero-visual{
/* --cat-hero-cols đặt bằng JS = số ảnh THẬT ĐÃ CÓ (1-4, xem
renderCatalogCategoryHero trong main.js) — dùng custom property thay vì
set thẳng inline style.gridTemplateColumns, để rule cuộn ngang ở mobile
(@media bên dưới) ghi đè được bình thường; inline style luôn thắng mọi
rule trong stylesheet kể cả trong media query, nên set thẳng sẽ VỠ mobile. */
display:grid;grid-template-columns:repeat(var(--cat-hero-cols, 3), 1fr);gap:8px; /* khoảng cách hẹp giữa các ảnh — theo yêu cầu khách */
text-decoration:none;
}
/* Bo góc đồng nhất với ảnh sản phẩm (.product-media dùng border-radius:6px
— xem comment ở đó, khách từng yêu cầu bo góc ít hơn --radius-md/--radius-lg
cho ảnh thời trang dạng lookbook) thay vì để các ảnh vuông thành ghép liền
mạch như trước. overflow-x:hidden vẫn giữ để cắt gọn phần ảnh phóng to khi
hover (transform:scale). */
.cat-hero-img{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:var(--color-gray-100);}
.cat-hero-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.25,.1,.25,1);}
.cat-hero-visual:hover .cat-hero-img img{transform:scale(1.08);}
/* Cowork — Category Banner linh hoạt: admin có thể tải 1 ẢNH NGANG LỚN DUY
NHẤT thay vì 4 ảnh dọc nhỏ. Trước đây MỌI ảnh (kể cả khi chỉ có 1) đều bị
ép vào khung aspect-ratio:3/4 (dọc) — ảnh ngang bị object-fit:cover cắt
xén biến dạng, sai tỉ lệ, trông như lỗi layout. renderCatalogCategoryHero()
trong main.js tự phát hiện "chỉ có đúng 1 ảnh" và gắn 2 class dưới đây:
.cat-hero-img--wide (grid-column:1/-1 — trải dài hết chiều ngang khối bất
kể --cat-hero-cols đang là bao nhiêu, tỉ lệ ngang 21/9 thay vì 3/4, VẪN giữ
overflow-x:hidden + border-radius đồng bộ ở rule .cat-hero-img gốc phía trên
— không viết lại, chỉ ĐÈ aspect-ratio + grid-column) và
.cat-hero-visual--single (tắt hẳn hành vi carousel cuộn ngang ở mobile bên
dưới — 1 ảnh duy nhất không cần cuộn, hiện đúng 1 khối full-width). */
.cat-hero-img--wide{grid-column:1/-1;aspect-ratio:11/4;} /* giảm ~15% chiều cao so với 21/9 trước đây */
/* Cowork v7 — cho phép tải NHIỀU ảnh ngang lớn (không chỉ 1) hiển thị dạng
slide tự động chuyển (crossfade), thay vì bắt buộc chỉ 1 ảnh. main.js
(renderCatalogCategoryHero) tự đo tỉ lệ THẬT từng ảnh (naturalWidth/
naturalHeight) — mọi ảnh đều NGANG (không phải 2-4 ảnh dọc kiểu lookbook
collage cũ, VD danh mục Мужчинам) thì gắn .cat-hero-visual--slide. Đặt
ratio giống hệt .cat-hero-img--wide (không tách riêng theo mobile) để giữ
đúng tỉ lệ ngang gốc ở mọi kích thước màn hình. Các ảnh xếp chồng tuyệt
đối trong khối, crossfade bằng opacity — không dùng nút/nested link vì
.cat-hero-visual vẫn là 1 thẻ DUY NHẤT (không lồng phần tử tương tác
được theo chuẩn HTML). */
.cat-hero-visual--slide{display:block;position:relative;aspect-ratio:11/4;overflow:hidden;grid-template-columns:none;}
.cat-hero-visual--slide .cat-hero-img{position:absolute;inset:0;aspect-ratio:auto;opacity:0;transition:opacity .8s ease;}
.cat-hero-visual--slide .cat-hero-img.is-active{opacity:1;}
@media (max-width: 900px){
.cat-hero{grid-template-columns:1fr;gap:22px;padding:28px 0 36px;}
.cat-hero-text p{max-width:100%;}
/* Collage cuộn ngang trên mobile khi không đủ chỗ hiện đủ ảnh — cùng kỹ
thuật đã dùng cho carousel danh mục ở index.html (78vw/thẻ, snap, ẩn
thanh cuộn). .cat-hero-visual vẫn là 1 thẻ DUY NHẤT bọc quanh — chạm
vuốt để cuộn xem hết các ảnh vẫn hoạt động bình thường (trình duyệt chỉ
tính là "click" khi chạm-nhả không kéo đáng kể, không xung đột với cuộn).
.cat-hero-visual--single (1 ảnh ngang duy nhất, xem trên) TẮT hẳn cơ chế
cuộn ngang này — nguồn gây "tràn màn hình" khi admin lỡ chỉ tải 1 ảnh
(grid-auto-columns:75% + overflow-x:auto vẫn ép ảnh vào 1 thẻ hẹp 75%
thay vì trải hết chiều ngang, đồng thời từng là rủi ro tràn ngang thật
trên Safari iOS — xem giải thích ở .header-inner phía trên). */
.cat-hero-visual{
grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:75%;
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
}
.cat-hero-visual::-webkit-scrollbar{display:none;}
.cat-hero-img{scroll-snap-align:start;}
.cat-hero-visual--single{
display:block;overflow-x:visible;scroll-snap-type:none;
}
.cat-hero-visual--single .cat-hero-img{scroll-snap-align:none;}
/* Không ép riêng tỉ lệ mobile nữa — giữ nguyên tỉ lệ ngang gốc (11/4)
giống desktop theo đúng yêu cầu, tránh bị cắt thành khung vuông/3:4. */
.cat-hero-visual--slide{
display:block;overflow:hidden;scroll-snap-type:none;
}
}
/* =========== PRODUCT TYPE CHIPS =========== */
.chip-row{display:flex;flex-wrap:wrap;gap:12px;}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-pill);background:var(--color-gray-100);font-weight:700;font-size:13.5px;border:1.5px solid transparent;}
.chip:hover, .chip.active{background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary-dark);}
.chip .n{color:var(--color-gray-400);font-weight:600;}
.chip.active .n{color:var(--color-primary);}
/* =========== PRODUCT CARD =========== */
/* v35 (vòng 6) — lỗi khách báo: catalog.html "nhiều lúc vẫn bị tràn màn hình"
trên điện thoại dù đã có lưới an toàn overflow-x:hidden (vòng 5) — an toàn
đó chỉ CHE bớt phần tràn (clip), không giải quyết gốc rễ nên card vẫn bị
cắt/xô lệch. Nguyên nhân thật: grid item mặc định có min-width:auto (co
không nhỏ hơn kích thước NỘI DUNG bên trong) — ở màn 2 cột hẹp (~150px/thẻ
trên điện thoại nhỏ), hàng giá (.product-meta: giá + chấm màu, .price-now/
.price-old đều white-space:nowrap) có thể rộng hơn cột, đẩy cả grid tràn.
Đổi 1fr → minmax(0,1fr) (đúng kỹ thuật đã dùng cho .product-detail/
.gallery-group ở các vòng trước) + min-width:0 trên item để bắt buộc co
đúng theo cột thay vì ép cột giãn theo nội dung. */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;scroll-margin-top:96px;} /* scroll-margin-top: đích đến khi bấm nút "Смотреть товары" ở cat-hero không bị header dính (sticky) che mất */
.product-card{position:relative;min-width:0;}
/* v35 (vòng 5) mục "Ngoài ra" #2 — khách yêu cầu bo góc ảnh sản phẩm ÍT hơn
để nhìn vuông vắn hơn (trước đây dùng --radius-md/--radius-lg giống các
khối UI khác — quá tròn cho ảnh thời trang dạng lookbook). Chỉ đổi các
khung ẢNH sản phẩm cụ thể bên dưới, KHÔNG đổi biến --radius-* dùng chung
toàn site (nút, thẻ, popup vẫn giữ nguyên bo góc như cũ). */
.product-media{display:block;position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/4;margin-bottom:14px;}
.product-media .ph{position:absolute;inset:0;border-radius:0;transition:transform .35s ease;}
.product-card:hover .product-media .ph{transform:scale(1.06);}
.product-badges{position:absolute;top:10px;left:10px;z-index:3;display:flex;flex-direction:column;gap:6px;}
.badge{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-pill);color:#fff;}
.badge.new{background:var(--color-black);}
.badge.sale{background:var(--color-accent);}
.badge.hit{background:var(--color-primary);}
.oos-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.6);}
.oos-overlay span{background:var(--color-black);color:#fff;font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:8px 16px;border-radius:var(--radius-pill);}
.product-media.out-of-stock .ph{filter:grayscale(65%);}
.wishlist-btn{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card);transition:background .15s, color .15s;}
.wishlist-btn:hover{background:var(--color-primary);color:#fff;}
.quick-add{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;opacity:0;transform:translateY(8px);transition:opacity .2s, transform .2s;}
.product-card:hover .quick-add{opacity:1;transform:translateY(0);}
.product-brand{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:4px;}
.product-name{font-weight:700;font-size:14.5px;margin-bottom:6px;overflow-wrap:anywhere;}
/* min-width:0 trên các flex item bên dưới + flex-wrap:wrap trên .product-meta
— cùng nguyên nhân/cách sửa với .product-grid ở trên: mặc định flex item
không co nhỏ hơn nội dung, .price-now/.price-old lại cố định nowrap nên
trên card rất hẹp có thể đẩy tràn hàng — cho phép co + tự xuống dòng
(chấm màu rơi xuống dưới giá) thay vì đẩy tràn ngang. */
.product-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;}
.product-price{display:flex;flex-direction:column;gap:3px;min-width:0;}
/* Cowork — .price-main-row/.product-wholesale-row là flex item CON của
.product-price (flex-direction:column) nên trục CHÉO (chiều rộng) của
chúng mặc định min-width:auto = không co nhỏ hơn nội dung (giá "ОПТ от
X ₽" ở .product-wholesale-row là white-space:nowrap) — .product-price có
min-width:0 KHÔNG tự động truyền xuống 2 con này, cột giá vẫn có thể tràn
ngang trên thẻ hẹp (lưới 2 cột điện thoại) với giá bán buôn dài. */
.price-main-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0;}
.price-now{font-family:var(--font-display);font-weight:700;font-size:16px;white-space:nowrap;}
.price-old{font-size:13px;color:var(--color-gray-400);text-decoration:line-through;white-space:nowrap;}
.product-wholesale-row{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap;}
.swatches{display:flex;gap:5px;flex-shrink:0;}
.swatch{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(0,0,0,.08);}
/* =========== USP STRIP =========== */
.usp-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:var(--color-gray-50);border-radius:var(--radius-lg);padding:36px;}
.usp-item{display:flex;align-items:center;gap:14px;}
.usp-item .ic{width:48px;height:48px;border-radius:50%;background:var(--color-white);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;color:var(--color-primary);flex-shrink:0;}
.usp-item h4{font-size:14px;margin-bottom:2px;}
.usp-item p{font-size:12.5px;color:var(--color-gray-600);}
/* =========== PROMO BANNER =========== (thiết kế lại — thay nền gradient
đen/cam "kỹ thuật" bằng ảnh/minh hoạ thật, theo yêu cầu khách hàng: giữ
.promo-banner làm khung dùng chung (bo góc, overflow hidden), mỗi banner cụ
thể thêm 1 class biến thể riêng để có diện mạo khác nhau mà không đụng
nhau — .promo-banner--family (banner "Комплекты", index.html, ảnh gia đình
lifestyle) và .promo-banner--support (banner "Не нашли нужный размер?",
catalog.html, nền sáng chia đôi + minh hoạ SVG ngành may). Dùng class riêng
.promo-banner.promo-banner--XXX (2 class cộng dồn) để LUÔN thắng specificity
so với rule mobile cũ `.promo-banner{...}` bất kể thứ tự trong file. */
.promo-banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;}
/* --- biến thể 1: ảnh lifestyle gia đình thật (banner "Комплекты для всей
семьи", index.html). Ảnh hiện tại lấy từ Unsplash (giấy phép Unsplash
License — miễn phí dùng thương mại) làm ảnh TẠM THỜI, xem chi tiết + gợi ý
thay ảnh thật của EverHarmony trong tài liệu dự án. Cấu trúc 3 lớp giống
hero-slider trang chủ: .promo-banner__media (ảnh) < .promo-banner__overlay
(gradient tối bên trái để chữ trắng luôn đọc được, bất kể ảnh nào) <
.promo-banner__content (chữ + nút, giữ nguyên bố cục flex cũ). */
.promo-banner.promo-banner--family{min-height:300px;display:flex;align-items:stretch;}
.promo-banner.promo-banner--family .promo-banner__media{position:absolute;inset:0;}
.promo-banner.promo-banner--family .promo-banner__media img{width:100%;height:100%;object-fit:cover;display:block;}
.promo-banner.promo-banner--family .promo-banner__overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(15,11,8,.85) 0%, rgba(15,11,8,.6) 40%, rgba(15,11,8,.18) 72%, rgba(15,11,8,0) 100%);}
.promo-banner.promo-banner--family .promo-banner__content{position:relative;z-index:2;width:100%;padding:56px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;color:#fff;}
.promo-banner.promo-banner--family h2{font-size:34px;}
.promo-banner.promo-banner--family p{color:rgba(255,255,255,.85);margin-top:8px;}
/* --- biến thể 2: banner hỗ trợ đổi/tìm size (catalog.html) — nền be nhạt
sáng (var(--color-primary-soft) — cùng tông với khối newsletter), bố cục
chia 2 (chữ trái/minh hoạ phải) như 1 dịch vụ tư vấn phong cách cá nhân,
KHÔNG còn giống banner báo lỗi hệ thống nền đen nữa. Minh hoạ là SVG tự vẽ
(thước dây + mẫu rập + đường may nét đứt) — không phụ thuộc ảnh ngoài,
luôn hiển thị được, cùng phong cách line-icon đã dùng khắp site. */
.promo-banner.promo-banner--support{background:var(--color-primary-soft);display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:28px;padding:44px 56px;}
.promo-banner.promo-banner--support .promo-banner__text h2{font-size:28px;color:var(--color-black);margin-bottom:10px;}
.promo-banner.promo-banner--support .promo-banner__text p{color:var(--color-gray-600);margin-bottom:22px;max-width:400px;}
.promo-banner.promo-banner--support .promo-banner__illustration{display:flex;align-items:center;justify-content:center;color:var(--color-black);}
.promo-banner.promo-banner--support .promo-banner__illustration svg{width:100%;max-width:220px;height:auto;}
@media (max-width:760px){
.promo-banner.promo-banner--support{grid-template-columns:1fr;text-align:center;padding:32px 24px;}
.promo-banner.promo-banner--support .promo-banner__text p{margin-left:auto;margin-right:auto;}
.promo-banner.promo-banner--support .promo-banner__illustration{order:-1;max-width:170px;margin:0 auto 4px;}
.promo-banner.promo-banner--support .promo-banner__illustration svg{max-width:150px;}
}
@media (max-width:640px){
.promo-banner.promo-banner--family{min-height:280px;}
.promo-banner.promo-banner--family .promo-banner__overlay{background:linear-gradient(180deg, rgba(15,11,8,.25) 0%, rgba(15,11,8,.88) 68%);}
.promo-banner.promo-banner--family .promo-banner__content{padding:26px 22px;flex-direction:column;align-items:flex-start;}
}
/* =========== PROMO SLIDER (product.html — giữa "Похожие товары" và khối
"Скидка 10% на первый заказ") =========== Carousel full-bleed edge-to-edge
(cùng kỹ thuật width:100vw;margin-left:calc(50% - 50vw) đã dùng cho
.hero-slider), chuyển ảnh bằng translateX thật (không phải crossfade) nên
cảm giác "trượt ngang" đúng như 1 slider ảnh, không phải fade từng ảnh —
auto-play + kéo/vuốt (Pointer Events) qua initPromoSlider() cuối main.js.
Tái dùng nguyên .container/.eyebrow/.link-more sẵn có (giống cấu trúc
.hero-slide__content > .container > .hero-slide__inner) để nhất quán căn
lề trái với phần còn lại của trang thay vì tự định nghĩa lại padding. */
.promo-slider{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;background:var(--color-gray-100);margin-top:56px;}
.promo-slider__track{display:flex;width:100%;touch-action:pan-y;user-select:none;transition:transform .55s cubic-bezier(.65,0,.35,1);will-change:transform;}
.promo-slider__slide{position:relative;flex:0 0 100%;width:100%;height:clamp(200px,24vw,340px);display:block;overflow:hidden;}
.promo-slider__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;-webkit-user-drag:none;}
.promo-slider__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, rgba(6,5,4,.82) 0%, rgba(6,5,4,.6) 30%, rgba(6,5,4,.22) 52%, rgba(6,5,4,0) 70%);}
.promo-slider__content{position:absolute;inset:0;z-index:2;display:flex;align-items:center;}
.promo-slider__text{max-width:440px;color:var(--color-white);}
.promo-slider__text h3{font-size:clamp(20px,2.6vw,30px);line-height:1.22;color:var(--color-white);margin-bottom:14px;}
.promo-slider__text .link-more{color:var(--color-white);}
.promo-slider__text .link-more:hover{color:var(--color-primary);}
.promo-slider__arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:var(--color-white);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
display:flex;align-items:center;justify-content:center;z-index:5;cursor:pointer;
transition:background .2s ease,color .2s ease,border-color .2s ease;}
.promo-slider__arrow:hover{background:var(--color-white);color:var(--color-black);border-color:var(--color-white);}
.promo-slider__arrow--prev{left:20px;}
.promo-slider__arrow--next{right:20px;}
.promo-slider__dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:8px;z-index:5;}
.promo-slider__dots button{width:7px;height:7px;padding:0;border-radius:50%;background:rgba(255,255,255,.5);transition:all .3s ease;}
.promo-slider__dots button:hover{background:rgba(255,255,255,.8);}
.promo-slider__dots button.is-active{width:22px;border-radius:4px;background:var(--color-white);}
@media (max-width:900px){
.promo-slider{margin-top:36px;}
.promo-slider__slide{height:clamp(190px,44vw,280px);}
}
@media (max-width:640px){
.promo-slider__overlay{background:linear-gradient(180deg, rgba(6,5,4,.12) 0%, rgba(6,5,4,.82) 74%);}
.promo-slider__content{align-items:flex-end;padding-bottom:22px;}
.promo-slider__text{max-width:100%;}
.promo-slider__text h3{font-size:19px;margin-bottom:12px;}
.promo-slider__arrow{width:36px;height:36px;}
.promo-slider__arrow--prev{left:10px;}
.promo-slider__arrow--next{right:10px;}
}
@media (max-width:560px){
.promo-slider__arrow{display:none;}
.promo-slider__slide{height:clamp(170px,58vw,240px);}
}
@media (prefers-reduced-motion: reduce){
.promo-slider__track{transition:none;}
}
/* --- biến thể "đóng khung" (.promo-banner.promo-slider) — Cowork, yêu cầu 2:
catalog.html nâng cấp khối Promo Banner tĩnh "Значимые подарки для всей
семьи" (trước đây .promo-banner--family, 1 ảnh tĩnh) thành slider CHẠY
ĐƯỢC, dùng LẠI nguyên bộ máy carousel .promo-slider__* đã có sẵn (auto-play
mượt + kéo/vuốt, xem initPromoSlider() đã tổng quát hoá cho NHIỀU instance
trong main.js) thay vì viết lại từ đầu — nhưng banner này vẫn nằm TRONG
.container, bo góc đồng bộ .promo-banner (KHÔNG tràn viền 100vw như bản
full-bleed ở product.html) nên cần override lại 3 thuộc tính full-bleed
gốc. 2 class cộng dồn .promo-banner.promo-slider (độ ưu tiên cao hơn
.promo-slider đứng 1 mình) đảm bảo LUÔN thắng bất kể thứ tự trong file. */
.promo-banner.promo-slider{width:100%;margin-left:0;margin-top:0;border-radius:var(--radius-lg);}
.promo-banner.promo-slider .promo-slider__slide{height:300px;background:var(--color-gray-100);}
@media (max-width:640px){
.promo-banner.promo-slider .promo-slider__slide{height:280px;}
}
/* =========== NEWSLETTER =========== */
.newsletter{position:relative;background:var(--color-primary-soft);border-radius:var(--radius-lg);padding:52px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;}
.newsletter h3{font-size:24px;margin-bottom:6px;}
.newsletter p{color:var(--color-gray-600);}
.newsletter-form{display:flex;gap:10px;}
.newsletter-form input{padding:14px 20px;border-radius:var(--radius-pill);border:1.5px solid var(--color-gray-300);width:280px;background:#fff;}
.newsletter-form input:focus{outline:none;border-color:var(--color-primary);}
/* Ảnh sản phẩm trang trí lấp ló ở góc phải khối newsletter (yêu cầu khách:
"lồng ghép nghệ thuật... partially overlapping" để liên kết thị giác với
sản phẩm vật lý) — position:absolute nên KHÔNG chiếm ô grid, tự do đè lên
góc phải, tràn nhẹ ra ngoài khối bo góc. Ảnh tạm thời từ Unsplash (giấy
phép miễn phí thương mại) — xem ghi chú thay ảnh thật trong tài liệu dự
án. Ẩn hẳn trên mobile/tablet hẹp để không đè lên form đăng ký. */
.newsletter__decor{position:absolute;right:-12px;top:-48px;width:96px;height:96px;border-radius:14px;overflow:hidden;border:5px solid #fff;box-shadow:0 16px 32px -12px rgba(23,20,15,.35);transform:rotate(6deg);pointer-events:none;}
.newsletter__decor img{width:100%;height:100%;object-fit:cover;display:block;}
/* Ẩn ở màn hình vừa/hẹp (kể cả 1 số laptop 13"-14" ~1024-1150px logical) —
ở khoảng rộng này khối .newsletter-form (input+nút) đã chiếm gần hết chiều
ngang cột "auto", ảnh trang trí góc phải sẽ đè lên nút "Подписаться". Chỉ
hiện trên desktop đủ rộng (>1180px) nơi chắc chắn còn khoảng trống bên
phải form để ảnh lấp ló mà không che nội dung — đã kiểm chứng bằng
Playwright ở nhiều breakpoint (900/1024/1150/1280/1440px). */
@media (max-width:1180px){ .newsletter__decor{display:none;} }
/* =========== FOOTER =========== */
.site-footer{background:var(--color-black);color:var(--color-gray-300);padding-top:64px;}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand img{height:24px;margin-bottom:16px;}
.footer-brand p{font-size:13.5px;line-height:1.7;max-width:280px;color:var(--color-gray-400);}
.social-row{display:flex;gap:10px;margin-top:20px;}
.social-row a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;}
.social-row a:hover{background:var(--color-primary);}
.footer-col h5{font-family:var(--font-display);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:#fff;margin-bottom:18px;}
.footer-col li{margin-bottom:12px;font-size:13.5px;}
.footer-col a:hover{color:var(--color-primary);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:24px 0;font-size:12.5px;color:var(--color-gray-400);flex-wrap:wrap;gap:12px;}
.pay-icons{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pay-icons span{background:rgba(255,255,255,.08);padding:6px 10px;border-radius:6px;font-size:11px;font-weight:700;}
/* Logo đối tác vận chuyển/sàn TMĐT (СДЭК/Wildberries) — thêm cạnh logo thanh
toán sẵn có, dùng đúng 2 màu thương hiệu ĐÃ dùng ở nơi khác trong dự án để
nhất quán: xanh CDEK #2E7D32 (khớp .kind-tag.cdek trong modal kho hàng) và
tím Wildberries #CB11AB (khớp .btn-marketplace.wb na product.html). */
.pay-icons__divider{width:1px;align-self:stretch;background:rgba(255,255,255,.14);margin:0 2px;}
.pay-icons__brand{color:var(--brand-color, #fff);}
/* =========== BREADCRUMB =========== */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--color-gray-600);padding:22px 0;flex-wrap:wrap;}
.breadcrumb a:hover{color:var(--color-primary);}
.breadcrumb .sep{color:var(--color-gray-300);}
.breadcrumb .current{color:var(--color-ink);font-weight:700;}
/* =========== PAGE HEADER (catalog) =========== */
.page-head{padding-bottom:28px;}
.page-head h1{font-size:38px;margin-bottom:8px;}
.page-head p{color:var(--color-gray-600);max-width:560px;}
/* =========== СТАТИЧНЫЕ ИНФО/ЮРИДИЧЕСКИЕ СТРАНИЦЫ (доставка, оферта, о нас...) =========== */
.legal-content{max-width:820px;}
.legal-content h2{font-size:19px;margin:34px 0 12px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{margin-bottom:14px;color:var(--color-gray-800);font-size:14.5px;line-height:1.7;}
.legal-content ul,.legal-content ol{margin:0 0 14px 22px;color:var(--color-gray-800);font-size:14.5px;line-height:1.7;}
.legal-content li{margin-bottom:6px;}
.info-box{background:var(--color-gray-50);border-radius:var(--radius-md);padding:18px 22px;font-size:13.5px;color:var(--color-gray-700);margin:22px 0;max-width:480px;}
.legal-content .info-box{margin:22px 0;max-width:none;}
.legal-content .info-box strong{color:var(--color-ink);}
.legal-content table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:13.5px;}
.legal-content th,.legal-content td{border:1px solid var(--color-gray-200);padding:8px 10px;text-align:left;}
.legal-content th{background:var(--color-gray-50);font-weight:700;}
.stats-row{display:flex;gap:40px;flex-wrap:wrap;margin:28px 0 8px;}
.stats-row div{display:flex;flex-direction:column;}
.stats-row strong{font-family:var(--font-display);font-size:30px;}
.stats-row span{color:var(--color-gray-600);font-size:13px;}
/* =========== CATALOG LAYOUT =========== */
.catalog-layout{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:flex-start;}
/* Cowork — mục item 1: item lưới 1fr (cột nội dung: toolbar+product-grid+
pagination) mặc định min-width:auto, tức KHÔNG co nhỏ hơn nội dung min-
content bên trong nó. Trên mobile (≤900px, .catalog-layout đổi thành 1
cột — xem rule bên dưới), .toolbar-right (nhãn "Скрыть «нет в наличии»" +
"Сортировать:" + , không flex-wrap) có min-content khá rộng
(~360px) — ĐÈ RỘNG luôn cả item lưới lẫn TOÀN BỘ nội dung bên trong (kể cả
.product-grid, dù bản thân .product-grid đã minmax(0,1fr) đúng) rộng hơn
màn hình, gây tràn ngang cho TOÀN BỘ danh sách/lưới sản phẩm — không phải
lỗi riêng của category nào, mà mọi trang catalog.html trên điện thoại rất
hẹp (≤340px) hay khi các bộ lọc/toolbar tình cờ dài hơn bình thường. min-
width:0 cho phép item co đúng theo cột thay vì ép cột giãn theo nội dung —
cùng kỹ thuật đã dùng cho .product-grid/.gallery-col trước đó. */
.catalog-layout > *{min-width:0;}
.filters{background:var(--color-gray-50);border-radius:var(--radius-lg);padding:24px;position:sticky;top:104px;}
/* v35 (vòng 6) — .filter-group giờ là , .h4 cũ thay bằng
(cần bỏ marker mặc định của trình duyệt + tự vẽ mũi tên riêng
.filter-group-arrow để đổi hướng khi mở/đóng). :first-of-type/:last-of-type
(thay vì :first-child/:last-child) vì giờ .filters có thêm
.filters-mobile-head đứng trước nhóm lọc đầu tiên (chỉ hiện trên mobile). */
.filter-group{padding:18px 0;border-bottom:1px solid var(--color-gray-200);}
.filter-group:first-of-type{padding-top:0;}
.filter-group:last-of-type{border-bottom:none;}
.filter-group summary{font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-display);list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.filter-group summary::-webkit-details-marker{display:none;}
.filter-group-arrow{flex-shrink:0;color:var(--color-gray-400);transition:transform .2s ease;display:none;}
.filter-group[open] .filter-group-arrow{transform:rotate(180deg);}
.filter-option{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13.5px;cursor:pointer;}
.filter-option input{accent-color:var(--color-primary);width:16px;height:16px;}
.filter-option .n{margin-left:auto;color:var(--color-gray-400);}
.filters-mobile-head, .filters-toggle-btn, .filters-backdrop, .filters-apply-btn{display:none;}
/* Desktop (>900px): mũi tên ẩn (không dùng đến), và ép nội dung LUÔN hiện dù
đang open hay không — giữ hành vi y hệt trước đây (mọi nhóm lọc
luôn mở sẵn, không phải bấm), việc bấm summary trên desktop (nếu có) sẽ
không có tác dụng gì về mặt hiển thị. */
@media (min-width:901px){
.filter-group > *:not(summary){display:block !important;}
}
@media (max-width:900px){
.filter-group-arrow{display:block;}
.filters-toggle-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--color-gray-300);background:#fff;font-weight:700;font-size:13.5px;position:relative;margin-bottom:20px;}
.filters-count-badge{background:var(--color-primary);color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;}
.filters-backdrop{display:block;position:fixed;inset:0;background:rgba(23,20,15,.5);z-index:240;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.filters-backdrop.open{opacity:1;pointer-events:auto;}
.filters{position:fixed;top:0;right:0;bottom:0;width:86%;max-width:360px;background:#fff;z-index:250;padding:20px;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease;box-shadow:-8px 0 24px rgba(0,0,0,.16);border-radius:0;}
.filters.open{transform:translateX(0);}
.filters-mobile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1.5px solid var(--color-gray-200);}
.filters-mobile-head h3{font-family:var(--font-display);font-size:16px;}
.filters-apply-btn{display:block;width:100%;margin-top:18px;position:sticky;bottom:0;}
}
.size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.size-box{border:1.5px solid var(--color-gray-300);border-radius:8px;padding:8px 0;text-align:center;font-size:12.5px;font-weight:700;}
.size-box:hover, .size-box.active{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-dark);}
.size-box.disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through;border-color:var(--color-gray-200);background:none;color:var(--color-gray-400);}
.color-grid{display:flex;flex-wrap:wrap;gap:10px;}
.color-dot{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--color-gray-300);cursor:pointer;}
.color-dot.active{box-shadow:0 0 0 2px var(--color-primary);}
.color-dot.disabled{opacity:.25;cursor:not-allowed;filter:grayscale(60%);}
/* Thumbnail nhỏ đại diện màu (kiểu Wildberries) trên trang chi tiết sản phẩm —
dùng khi màu đó đã có ảnh riêng; chấm tròn phẳng vẫn giữ nguyên ở mọi nơi
khác (card sản phẩm dạng danh sách...) vì không đổi class ở những chỗ đó. */
.color-dot.color-thumb{width:52px;height:52px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1.5px var(--color-gray-300);}
.color-dot.color-thumb.active{box-shadow:0 0 0 2px var(--color-primary);}
.price-range{display:flex;align-items:center;gap:10px;font-size:13px;}
.price-range input[type=range]{flex:1;accent-color:var(--color-primary);}
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;}
.toolbar .result-count{font-size:13.5px;color:var(--color-gray-600);}
/* flex-wrap:wrap — phòng thêm 1 lớp: dù .catalog-layout > * đã có min-width:0
ở trên (fix gốc), .toolbar-right (checkbox "Скрыть..." + "Сортировать:" +
) tự xuống dòng gọn gàng trên màn rất hẹp thay vì bị bóp chữ/tràn. */
.toolbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.sort-select{border:1.5px solid var(--color-gray-300);border-radius:var(--radius-pill);padding:10px 16px;font-size:13px;font-weight:700;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23241F1A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:32px;-webkit-appearance:none;appearance:none;}
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px;}
.pagination a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;}
.pagination a.active{background:var(--color-primary);color:#fff;}
.pagination a:hover:not(.active){background:var(--color-gray-100);}
/* =========== PRODUCT DETAIL =========== */
/* Cowork — tỷ lệ cột desktop 60/40 (ảnh 60% / thông tin mua hàng 40%) —
dùng fr thay vì % cứng để cộng gộp đúng với gap:20px; minmax(0,...) giữ
nguyên nguyên tắc chống blow-out đã áp dụng xuyên suốt khối này (xem chú
thích dài phía trên .gallery-group). Mobile override (max-width:900px bên
dưới) đã tự đổi lại thành 1 cột, không đụng gì ở đây. */
.product-detail{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;align-items:start;}
/* Cowork (vòng 5) — khách báo bản vòng 4 chỉ đúng khi cột ảnh cao hơn (hard-
code sticky cho riêng .pd-info) — SỬA thành đối xứng, tự nhận diện cột nào
NGẮN HƠN ở runtime rồi mới dán sticky cho đúng cột đó, vì tuỳ sản phẩm cột
nào cao hơn cũng có thể xảy ra (VD mô tả giá bán buôn/nhiều kho hàng làm
cột thông tin dài hơn cả ảnh). Cả 2 wrapper .gallery-col/.pd-info-col đều
là item lưới THẬT, GIÃN (align-self:stretch) cao bằng đúng hàng lưới (=
chiều cao cột CAO HƠN trong 2 cột) — tạo "khoảng trống" bên trong cột NGẮN
hơn. Nội dung thật (.gallery-group/.pd-info, cao tự nhiên) nằm bên trong
từng wrapper; class .pd-sticky-col (position:sticky, top:104px khớp offset
.filters đã dùng) được JS gắn ĐỘNG vào ĐÚNG MỘT trong 2 phần tử nội dung —
phần tử nào NGẮN hơn — xem initColumnStickySync() trong main.js (so sánh
chiều cao tự nhiên 2 cột, tự chạy lại khi đổi cỡ cửa sổ/nội dung đổi).
Cột dài hơn không cần sticky vì nó vốn đã chiếm trọn "khoảng trống" (không
dư ra chỗ nào để trôi). Chỉ bật trên desktop; mobile 2 cột xếp chồng dọc
(position:static như cũ, JS cũng tự gỡ class khi xuống mobile). */
@media (min-width:901px){
.gallery-col, .pd-info-col{align-self:stretch;min-width:0;}
/* Cowork (vòng 5, fix) — .gallery-group{position:relative} (dùng cho
thumb-col định vị tuyệt đối) nằm SAU rule này trong file, cùng độ ưu
tiên (1 class) nên nó thắng và ĐÈ MẤT position:sticky khi JS gắn
.pd-sticky-col cho .gallery-group — buộc tăng độ ưu tiên bằng cách
chỉ đích danh từng phần tử (.gallery-group.pd-sticky-col /
.pd-info.pd-sticky-col, 2 class) thay vì để .pd-sticky-col đứng một
mình. .pd-info không có rule position riêng nên vẫn khớp bình thường. */
.gallery-group.pd-sticky-col, .pd-info.pd-sticky-col{position:sticky;top:104px;}
}
/* Ảnh chi tiết sản phẩm (desktop): ảnh chính giữ nguyên kích thước TỰ NHIÊN
của nó (theo aspect-ratio 3/4 + chiều rộng cột) — KHÔNG được phép co giãn
theo nội dung cột thumbnail. Cột thumbnail bên trái định vị TUYỆT ĐỐI bên
trong .gallery-group (top:0;bottom:0) nên chiều cao của nó luôn khớp đúng
bằng chiều cao ảnh chính đã render — nhiều ảnh thì cuộn dọc bên trong đúng
vùng đó (overflow-y:auto), không đụng đến/kéo giãn ảnh chính.
(Trước đây dùng flex + align-items:stretch mặc định — nhưng flexbox tính
chiều cao dòng theo GIÁ TRỊ LỚN NHẤT trong số các "hypothetical cross size"
của MỌI phần tử, kể cả phần tử đã overflow:auto — nên khi thumbnail nhiều
hơn ảnh chính, cả dòng bị kéo cao theo cột thumbnail rồi ảnh chính lại bị
stretch to hơn tỉ lệ 3:4 thật của nó — đúng lỗi trong ảnh loi2.png người
dùng gửi. position:absolute tránh hẳn cơ chế tính chiều cao dòng đó.)
Vòng 10 (theo ảnh mẫu w1.png — kiểu Wildberries): trước đây cột thumbnail
luôn cao bằng đúng ảnh chính, nên khi có 11-12 ảnh, TẤT CẢ đều bị nhồi vừa
trong đúng chiều cao đó — càng nhiều ảnh, mỗi thumbnail càng bị ép nhỏ dần
(không thấy rõ). Từng giới hạn CỨNG chỉ hiện tối đa ~6 thumbnail cùng lúc
bằng max-height:562px cố định — nhiều hơn thì cuộn dọc bên trong.
Vòng 11 (theo ảnh loi4.png): số 562px CỐ ĐỊNH đó lại gây mất cân đối theo
chiều ngược lại — với ảnh chính cao hơn 562px (rất thường gặp vì cột ảnh
khá rộng ở màn hình lớn, mà tỉ lệ 3:4 thì cao > rộng), cột thumbnail dừng
lại ở 562px trong khi ảnh chính còn cao hơn nhiều, để lại khoảng trống dư
nhìn lệch. Đã bỏ hẳn con số cố định — cột thumbnail LUÔN cao đúng bằng ảnh
chính thật (nhờ top:0;bottom:0 lấy chiều cao từ .gallery-group, mà chiều
cao của .gallery-group lại do chính ảnh chính — phần tử duy nhất nằm trong
luồng bình thường — quyết định) nên luôn cân đối ở MỌI kích thước ảnh/màn
hình. Vì mỗi thumbnail vẫn giữ kích thước CỐ ĐỊNH (flex-shrink:0 + width +
aspect-ratio, không phụ thuộc chiều cao cột cha) nên không tái diễn lỗi
"ảnh bị ép quá bé" của vòng 9 — chỉ khi tổng chiều cao thumbnail vượt quá
đúng chiều cao ảnh chính thật (chứ không phải vượt quá 1 con số 562px giả
định) thì phần dư mới cuộn dọc bên trong. Đồng thời đổi tỉ lệ thumbnail từ
vuông (1:1) sang đúng 3:4 (rộng 3 : cao 4) khớp với tỉ lệ ảnh chính — trước
đây vuông trông lệch với ảnh thật.
Vòng 12 A2: thumbnail to hơn (64px → 88px chiều rộng, ~5-6 ảnh vừa khít
chiều cao cột ở màn hình thường thay vì 7-9 ảnh nhỏ như trước) — TỔNG
CHIỀU CAO CỘT không đổi (vẫn = ảnh chính, cơ chế absolute top:0;bottom:0
giữ nguyên). Bỏ thanh cuộn hệ điều hành (kéo bằng chuột) — tách cấu trúc
thành 2 lớp: #thumbCol (khung ngoài, đứng yên, quyết định chiều cao) chứa
#thumbTrack (lớp cuộn dọc thật bên trong, scrollbar ẩn) + 2 nút mũi tên
⌃/⌄ ĐÈ Ở NGOÀI #thumbTrack (không cuộn theo, luôn nằm cố định ở mép trên/
dưới #thumbCol) — bấm mũi tên tự cuộn mượt xuống/lên đúng 1 "trang" ảnh
(xem initThumbNav trong main.js). Nút chỉ hiện khi còn nội dung để cuộn
theo hướng đó (ẩn mũi tên lên khi đã ở đầu, ẩn mũi tên xuống khi đã cuối).
Vòng 13 B1: user làm rõ layout NÀY (cột trái + nút cuộn) chỉ áp dụng cho
MÀN HÌNH RỘNG (desktop) — GIỮ NGUYÊN như hiện tại, không đổi gì ở đây.
Yêu cầu "thumbnail xuống dưới ảnh chính, bỏ thanh cuộn, vuốt trái/phải để
chuyển ảnh" CHỈ áp dụng cho ĐIỆN THOẠI (khung hẹp) — xem override riêng
trong @media (max-width: 900px) bên dưới, initMainImageSwipe trong main.js
cũng chỉ thật sự đổi ảnh khi đang ở khung hẹp đó (kiểm tra lại bằng
matchMedia ngay trong lúc xử lý sự kiện vuốt, không hard-code theo lúc tải
trang — để vẫn đúng khi người dùng xoay ngang/dọc hoặc đổi cỡ cửa sổ). */
.gallery-group{position:relative;padding-left:104px;min-width:0;}
.thumb-col{position:absolute;left:0;top:0;bottom:0;width:88px;min-width:0;}
.thumb-track{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;
overflow-y:auto;overflow-x:hidden;padding:1px;scrollbar-width:none;}
.thumb-track::-webkit-scrollbar{display:none;}
/* Cowork — đổi kiểu nút cuộn ảnh (up/down của cột thumbnail) từ hình chữ
nhật bo góc 8px sang HÌNH TRÒN, nền trắng mờ (semi-transparent) + biểu
tượng mũi tên mờ bên trong — cùng ngôn ngữ thiết kế với .main-img-arrow
(nút prev/next của ảnh chính, xem phía dưới) để 2 cụm điều hướng ảnh trên
trang chi tiết sản phẩm nhất quán với nhau. */
.thumb-nav{position:absolute;left:50%;transform:translateX(-50%);width:34px;height:34px;
display:flex;align-items:center;justify-content:center;border-radius:50%;
border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.72);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
color:rgba(36,31,26,.55);
cursor:pointer;z-index:2;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.12);
transition:background .15s ease,color .15s ease;}
.thumb-nav:hover{color:var(--color-primary);background:rgba(255,255,255,.94);}
.thumb-nav.up{top:6px;}
.thumb-nav.down{bottom:6px;}
.thumb-nav svg{width:15px;height:15px;flex:none;}
.thumb{border-radius:6px;overflow:hidden;aspect-ratio:3/4;cursor:pointer;border:2px solid transparent;flex-shrink:0;width:100%;}
.thumb.active{border-color:var(--color-primary);}
.thumb .ph{position:absolute;}
.main-image{border-radius:8px;overflow:hidden;aspect-ratio:3/4;position:relative;width:100%;touch-action:pan-y;user-select:none;}
.main-image .ph{position:absolute;inset:0;border-radius:0;background:var(--color-gray-100);}
.pd-info .product-brand{font-size:12px;}
.pd-info h1{font-size:30px;margin:6px 0 12px;}
.pd-rating{display:flex;align-items:center;gap:8px;margin-bottom:18px;font-size:13px;color:var(--color-gray-600);}
.stars{color:var(--color-primary);letter-spacing:2px;}
.pd-price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:8px;margin-bottom:24px;}
.pd-price .price-now{font-size:30px;}
.pd-badge-row{display:flex;gap:8px;margin-bottom:20px;}
.pd-block{margin-bottom:24px;}
.pd-block > label{display:block;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;}
.qty-row{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.qty-stepper{display:flex;align-items:center;border:1.5px solid var(--color-gray-300);border-radius:var(--radius-pill);overflow:hidden;}
.qty-stepper button{width:40px;height:44px;font-size:16px;font-weight:700;}
.qty-stepper button:hover{background:var(--color-gray-100);}
.qty-stepper span{width:36px;text-align:center;font-weight:700;}
.pd-actions{display:flex;gap:12px;margin-bottom:28px;}
.pd-usp{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--color-gray-50);border-radius:var(--radius-md);margin-bottom:28px;}
.pd-usp .row{display:flex;align-items:center;gap:12px;font-size:13px;}
.pd-usp .row svg{color:var(--color-primary);flex-shrink:0;}
/* Cowork (vòng 3) — chuẩn Wildberries: bỏ hẳn thanh Tabs ngang cũ dưới ảnh,
thay bằng 1 nút "Описание и характеристики" ngay trong cột phải (.pd-info,
giữa .pd-marketplaces và .pd-usp) mở Off-canvas Drawer trượt từ mép phải —
xem .pd-drawer* bên dưới + initInfoDrawer() trong main.js.
Cowork (vòng 4) — khách báo nút này còn "viền bao quanh" (border của
.btn-outline) là thừa/rác thị giác — bỏ hẳn border + background, chỉ giữ
lại như 1 hàng text+icon phẳng (cùng ngôn ngữ link tối giản), áp dụng cho
CẢ desktop lẫn mobile (không có override riêng nào khác đè lại). */
.pd-info-trigger{width:100%;justify-content:flex-start;gap:10px;margin-top:14px;text-align:left;font-size:13.5px;
background:transparent;border:none;padding:12px 0;color:var(--color-ink);border-radius:0;}
.pd-info-trigger:hover{color:var(--color-primary);background:transparent;}
.pd-info-trigger svg{flex-shrink:0;color:var(--color-primary);}
/* Off-canvas Drawer (Описание/Характеристики/Состав и уход/Доставка и
возврат) — mô phỏng đúng pattern .filters/.filters-backdrop đã có sẵn
trong site (xem catalog.html) nhưng dùng được ở CẢ desktop lẫn mobile
(не chỉ mobile như .filters). Chiều rộng giới hạn max-width để KHÔNG che
khối ảnh sản phẩm bên trái (cột 60%) trên desktop. */
.pd-drawer-overlay{position:fixed;inset:0;background:rgba(23,20,15,.5);z-index:520;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.pd-drawer-overlay.open{opacity:1;pointer-events:auto;}
.pd-drawer{position:fixed;top:0;right:0;bottom:0;width:92%;max-width:460px;background:#fff;z-index:530;
display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
box-shadow:-8px 0 32px rgba(0,0,0,.16);}
.pd-drawer.open{transform:translateX(0);}
.pd-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:1.5px solid var(--color-gray-200);flex-shrink:0;}
.pd-drawer-head h3{font-family:var(--font-display);font-size:17px;}
.pd-drawer-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:26px;scrollbar-width:thin;}
.pd-drawer-section{margin-bottom:34px;}
.pd-drawer-section:last-child{margin-bottom:0;}
.pd-drawer-section h4{font-family:var(--font-display);font-size:14px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:14px;color:var(--color-ink);}
.pd-drawer-section p{color:var(--color-gray-800);font-size:14px;line-height:1.7;}
.pd-drawer-section table{width:100%;border-collapse:collapse;font-size:13.5px;}
/* Cowork (vòng 4) — thanh mua hàng cố định ở ĐÁY drawer (luôn hiện, không
cuộn theo nội dung — cùng kỹ thuật flex-shrink:0 dùng cho .pd-drawer-head)
để khách xem Описание/Характеристики xong có thể thêm vào giỏ ngay mà
không cần đóng popup — bấm sẽ kích hoạt đúng #addToCartBtn có sẵn (dùng
lại toàn bộ logic chọn màu/size/số lượng hiện tại, xem initInfoDrawer
trong main.js). */
.pd-drawer-foot{flex-shrink:0;padding:18px 26px;border-top:1.5px solid var(--color-gray-200);background:#fff;}
@media (max-width:640px){
.pd-drawer{width:100%;max-width:none;}
.pd-drawer-head, .pd-drawer-body{padding:18px 20px;}
.pd-drawer-foot{padding:14px 20px;}
}
/* Khu vực Tương tác Cộng đồng (Отзывы + Вопросы) — full-width ĐÚNG BẰNG tổng
chiều rộng 2 cột 60/40 phía trên (.pd-community nằm trực tiếp trong cùng
.product-detail nên tự động khớp width, không cần
max-width riêng nữa — vòng 4, bỏ giới hạn max-width:850px căn giữa trước
đây). Tab CĂN TRÁI (justify-content:flex-start, không còn center) đúng
tham khảo Wildberries. #tab-reviews GIỮ NGUYÊN id cũ (trước đây là
.tab-panel của Tabs cũ) để mọi liên kết/route sẵn có (#tab-reviews trong
account.html, hash-routing, lightbox root-scope trong main.js) tiếp tục
hoạt động không cần sửa. */
.pd-community{width:100%;margin-top:80px;}
.community-tabs-nav{display:flex;justify-content:flex-start;gap:40px;border-bottom:1.5px solid var(--color-gray-200);margin-bottom:32px;
overflow-x:auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none;}
.community-tabs-nav::-webkit-scrollbar{display:none;width:0;height:0;}
.community-tabs-nav button{padding:16px 0;font-weight:800;font-size:16px;color:var(--color-gray-400);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;white-space:nowrap;flex-shrink:0;font-family:var(--font-display);}
.community-tabs-nav button.active{color:var(--color-ink);border-color:var(--color-primary);}
/* Cowork (vòng 4) — số lượng (đơn vị đếm) chuyển thành CHỮ NHỎ TREO Ở TRÊN,
ngay sau nhãn, không còn đóng ngoặc () — đúng ngôn ngữ Wildberries (ảnh
khách gửi: "Оценки 3 409" / "Вопросы 61", số nhỏ nằm cao hơn baseline).
dùng chung cho MỌI số đếm dạng này trên trang (.count-sup), không riêng gì
Tabs cộng đồng — xem thêm .reviews-seeall-btn bên dưới. */
.count-sup{font-family:var(--font-body);font-weight:700;font-size:11px;vertical-align:super;margin-left:5px;color:var(--color-gray-500);}
.community-tabs-nav button.active .count-sup{color:var(--color-primary-dark);}
.community-tab-panel{display:none;width:100%;text-align:left;color:var(--color-gray-800);font-size:14.5px;line-height:1.7;}
.community-tab-panel.active{display:block;}
.community-tab-panel ul{list-style:disc;padding-left:20px;margin-top:10px;}
.community-tab-panel li{margin-bottom:6px;}
@media (max-width:900px){
.pd-community{margin-top:36px;}
.community-tabs-nav{gap:28px;}
.community-tabs-nav button{font-size:14.5px;}
}
/* Вопросы (Q&A) — client-side (localStorage), không có backend riêng, cùng
nguyên tắc lưu trữ như wishlist/giỏ hàng hiện có trong main.js (xem
initQaSection). Câu trả lời "đại diện thương hiệu" hiển thị khác màu để
phân biệt với câu trả lời từ khách khác — cùng ngôn ngữ .review-seller-reply
đã có ở khối Отзывы. */
.qa-list{display:flex;flex-direction:column;gap:18px;margin-bottom:22px;}
.qa-item{border:1.5px solid var(--color-gray-200);border-radius:var(--radius-md);padding:16px 18px;}
.qa-question{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--color-ink);}
.qa-question .qa-q-badge{flex-shrink:0;font-weight:800;font-size:11px;text-transform:uppercase;color:var(--color-primary);letter-spacing:.03em;padding-top:1px;}
.qa-meta{font-size:11px;color:var(--color-gray-500);margin-top:6px;}
.qa-reply{margin-top:12px;background:var(--color-gray-50);border-radius:10px;padding:11px 13px;display:flex;gap:10px;align-items:flex-start;}
.qa-reply.qa-reply-brand{background:var(--color-primary-soft);}
.qa-reply .qa-r-badge{flex-shrink:0;font-weight:800;font-size:11px;text-transform:uppercase;color:var(--color-gray-600);letter-spacing:.02em;padding-top:1px;}
.qa-reply-brand .qa-r-badge{color:var(--color-primary-dark);}
.qa-reply p{font-size:12.5px;color:var(--color-gray-800);line-height:1.6;}
.qa-empty{color:var(--color-gray-600);font-size:13.5px;padding:12px 0 22px;}
.qa-form-wrap{margin-top:6px;max-width:520px;}
.qa-form-wrap textarea{width:100%;min-height:96px;border:1.5px solid var(--color-gray-300);border-radius:10px;padding:12px 14px;font-size:14px;font-family:inherit;resize:vertical;background:#fff;}
.qa-form-wrap textarea:focus{outline:none;border-color:var(--color-primary);}
/* Cowork (vòng 5, yêu cầu 3) — #qaFormName chỉ hiện khi khách CHƯA đăng nhập. */
.qa-form-wrap input[type="text"]{width:100%;border:1.5px solid var(--color-gray-300);border-radius:10px;padding:11px 14px;font-size:14px;font-family:inherit;background:#fff;margin-bottom:8px;}
.qa-form-wrap input[type="text"]:focus{outline:none;border-color:var(--color-primary);}
.qa-form-actions{display:flex;gap:10px;margin-top:12px;}
/* Nút mũi tên overlay cho MỌI khối cuộn ngang trên desktop (yêu cầu 4, vòng
3): tự động bọc quanh container qua initHScrollArrows() trong main.js —
hình tròn, nền trắng bán trong suốt, cùng ngôn ngữ thiết kế với
.thumb-nav/.main-img-arrow đã có. Chỉ hiện trên desktop — mobile vẫn vuốt
tay như cũ, không cần nút bấm. */
.hscroll-wrap{position:relative;min-width:0;}
.hscroll-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
display:flex;align-items:center;justify-content:center;border-radius:50%;
border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.82);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
color:rgba(36,31,26,.6);cursor:pointer;z-index:3;padding:0;
box-shadow:0 4px 14px rgba(0,0,0,.14);transition:opacity .15s ease,color .15s ease;}
.hscroll-arrow:hover{color:var(--color-primary);background:rgba(255,255,255,.96);}
.hscroll-arrow--prev{left:2px;}
.hscroll-arrow--next{right:2px;}
.hscroll-arrow.hidden{opacity:0;pointer-events:none;}
@media (max-width:900px){
.hscroll-arrow{display:none !important;}
}
/* Cowork — Mô tả (#pdDescription) hỗ trợ RICH CONTENT: admin có thể chèn
HTML (ảnh, tiêu đề phụ, trích dẫn, khối 2 cột...) thay vì chỉ văn bản
thuần — xem admin.js (wireRichTextToolbar) để soạn, main.js render bằng
innerHTML thay vì textContent. Style hoá các thẻ thường gặp cho khớp
design system chung của trang, kể cả khi dùng làm khối preview trong
admin (style.css được admin.html load trước admin.css nên style dùng
chung được luôn ở cả 2 nơi). */
.rich-content p{margin-bottom:14px;}
.rich-content p:last-child{margin-bottom:0;}
.rich-content img{max-width:100%;height:auto;display:block;border-radius:var(--radius-md);margin:22px 0;}
.rich-content figure{margin:22px 0;}
.rich-content figure img{margin:0;}
.rich-content figcaption{font-size:12.5px;color:var(--color-gray-500);text-align:center;margin-top:8px;}
.rich-content h3,.rich-content h4{font-family:var(--font-display);color:var(--color-ink);line-height:1.3;margin:30px 0 12px;}
.rich-content h3{font-size:20px;}
.rich-content h4{font-size:16px;}
.rich-content blockquote{margin:22px 0;padding:2px 0 2px 18px;border-left:3px solid var(--color-primary);color:var(--color-gray-600);font-style:italic;}
.rich-content ul,.rich-content ol{margin:14px 0 14px 20px;}
.rich-content ul{list-style:disc;}
.rich-content ol{list-style:decimal;}
.rich-content li{margin-bottom:6px;}
.rich-content hr{border:none;border-top:1px solid var(--color-gray-200);margin:28px 0;}
/* Khối "2 ảnh cạnh nhau" — nút "2 кол." trong toolbar admin chèn sẵn khung
này kèm 2