/* ============================================================ TẦNG 4 — TRANG CHI TIẾT MẪU ĐÁ (86 sản phẩm dùng chung) Chỉ phần riêng; thẻ đá, lưới, nút, ảnh... ở components.css. Bố cục theo khảo sát 13/08: kiểu SapienStone, gọn. ============================================================ */ /* ---------- BREADCRUMB ---------- */ .bmh .sp-duong{padding-top:26px;padding-bottom:26px; display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center; font-family:var(--font-head);font-size:11px;font-weight:400; letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .bmh .sp-duong a{color:var(--muted);transition:color var(--t-ui) var(--ease)} .bmh .sp-duong a:hover{color:var(--ink)} .bmh .sp-duong span{opacity:.5} /* ---------- KHOI DAU: ANH LON (52) + COT THONG TIN CAN GIUA (48) ---------- Bo cuc fredsted /product/grigio-bottarga/ (chu site chi dinh 13/08): ten -> nhan phan loai -> mo ta -> nut -> thong so, TAT CA can giua. Dung fr, KHONG dung % (tranh bay tran ngang da gap). */ .bmh .sp-hero{display:grid;grid-template-columns:52fr 48fr; gap:clamp(24px,5vw,80px);align-items:start} .bmh .sp-hero .sp-anh{min-width:0} .bmh .sp-tt{min-width:0;text-align:center;max-width:56ch;margin-left:auto; margin-right:auto; /* fredsted de cot chu bat dau thap hon mep anh mot chut */ padding-top:clamp(12px,4vw,56px)} @media(max-width:900px){ .bmh .sp-hero{grid-template-columns:1fr} .bmh .sp-tt{padding-top:0} } .bmh .sp-tt h1{font-family:var(--font-head);font-size:var(--fs-h1-phu); font-weight:400;letter-spacing:.14em;line-height:var(--lh-head); text-transform:uppercase;color:var(--ink)} /* nhan phan loai nho duoi ten (fredsted: "MARBLE" duoi ten da) */ .bmh .sp-nhan{font-family:var(--font-head);font-size:var(--fs-label); font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)} /* mo ta nam ngay trong cot, can giua nhu fredsted */ .bmh .sp-mota{font-size:var(--fs-caption);line-height:1.9;color:var(--body)} /* hang nut can giua trong cot */ .bmh .sp-nut{justify-content:center} /* ---------- DAI TAB NGANG kieu fredsted ---------- AN TOAN (bay so 5): KHONG co .js -> moi .sp-tab-phan deu hien, xep chong (moi phan co h2 rieng nen doc van mach lac). Co .js -> thanh tab that. */ .bmh .sp-tab-nav{display:flex;flex-wrap:wrap;gap:8px 44px; border-bottom:1px solid var(--hairline)} /* khong JS thi day nhan tab vo dung -> an di, chi hien noi dung */ .bmh .sp-tab-nav{display:none} .js .bmh .sp-tab-nav{display:flex} .bmh .sp-tab-nav button{background:none;border:0;border-radius:0;padding:0 0 14px; cursor:pointer;font-family:var(--font-head);font-size:var(--fs-label); font-weight:400;letter-spacing:.24em;text-transform:uppercase; color:var(--muted);position:relative; transition:color var(--t-ui) var(--ease)} .bmh .sp-tab-nav button::after{content:'';position:absolute;left:0;bottom:-1px; width:100%;height:2px;background:var(--ink);transform:scaleX(0); transform-origin:0 50%;transition:transform var(--t-slow) var(--ease)} .bmh .sp-tab-nav button.mo{color:var(--ink)} .bmh .sp-tab-nav button.mo::after{transform:scaleX(1)} .bmh .sp-tab-nav button:hover{color:var(--ink)} .bmh .sp-tab-phan{padding-top:var(--sp-m)} .bmh .sp-tab-phan h2{font-size:var(--fs-h3);letter-spacing:.2em} /* co JS: chi hien phan dang mo */ .js .bmh .sp-tab-phan{display:none} .js .bmh .sp-tab-phan.mo{display:block} /* gioi han be ngang cho de doc — fredsted cung go noi dung ~60% trai */ .bmh .sp-tab-phan .tskt{max-width:760px} @media(prefers-reduced-motion:reduce){ .bmh .sp-tab-nav button,.bmh .sp-tab-nav button::after{transition:none} } /* ---------- THONG SO: dong ke vach manh, nhan trai gia tri phai ---------- */ .bmh .tskt{text-align:left} .bmh .tskt>div{display:flex;justify-content:space-between;gap:16px; border-top:1px solid var(--hairline);padding-top:12px;padding-bottom:12px} .bmh .tskt>div:last-child{border-bottom:1px solid var(--hairline)} .bmh .tskt .n{font-family:var(--font-head);font-size:11px;font-weight:400; letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:2} .bmh .tskt .v{font-size:var(--fs-caption);color:var(--body);line-height:2; text-align:right} /* ---------- BO TRUOT ANH kieu fredsted mobile ---------- Vuot tay = co che goc (scroll-snap); JS chi them cham + mui ten. Cham la O VUONG nho (he mono, khong bo goc). */ .bmh .sp-slider{position:relative;min-width:0} .bmh .sp-slider-track{display:flex;overflow-x:auto; scroll-snap-type:x mandatory;scroll-behavior:smooth; -webkit-overflow-scrolling:touch;scrollbar-width:none} .bmh .sp-slider-track::-webkit-scrollbar{display:none} .bmh .sp-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start} /* cum dieu khien nam NGAY TREN ANH goc duoi phai — nen bone dam de noi tren moi mau da (khong do tuong phan theo anh) */ .bmh .sp-dieu-khien{display:none} .js .bmh .sp-dieu-khien{display:flex;align-items:center;gap:16px; position:absolute;right:0;bottom:0;z-index:2; background:rgba(243,238,231,.92);padding:12px 16px} .bmh .sp-cham{display:flex;gap:10px;align-items:center} .bmh .sp-cham button{width:7px;height:7px;padding:0;border:0;border-radius:0; background:var(--ink);opacity:.3;cursor:pointer; transition:opacity var(--t-ui) var(--ease)} .bmh .sp-cham button.mo{opacity:1} .bmh .sp-tien{background:none;border:0;border-radius:0;padding:4px 0; color:var(--ink);cursor:pointer;line-height:0} .bmh .sp-tien svg{transition:transform var(--t-slow) var(--ease)} .bmh .sp-tien:hover svg{transform:translateX(6px)} @media(prefers-reduced-motion:reduce){ .bmh .sp-slider-track{scroll-behavior:auto} .bmh .sp-tien svg,.bmh .sp-cham button{transition:none} } /* dong dem mat van duoi bo truot */ .bmh .sp-face-dem{margin-top:12px;font-family:var(--font-head);font-size:11px; font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} /* ---------- KHONG GIAN UNG DUNG: luoi 2 cot ---------- */ .bmh .sp-ung-dung{display:grid;grid-template-columns:1fr 1fr; gap:clamp(14px,2.6vw,48px)} .bmh .sp-ung-dung .img{min-width:0} .bmh .sp-ung-dung .img:last-child:nth-child(odd){grid-column:1/-1} .bmh .sp-ghi-chu{font-size:var(--fs-caption);color:var(--muted)} /* ---------- CHO DEU TREN DIEN THOAI (13/08) ---------- */ @media(max-width:640px){ /* hai nut xep doc, nut khung tran be ngang — deu nhu fredsted */ .bmh .sp-nut{flex-direction:column;align-items:stretch;gap:18px} .bmh .sp-nut .btn--box{justify-content:center} .bmh .sp-nut .btn--bare{align-self:center} /* link showroom: cho xuong dong can giua, mui ten di theo chu */ .bmh .sp-tt .btn--dir{flex-wrap:wrap;justify-content:center;row-gap:8px} /* dai tab: MOT HANG vuot ngang (truoc bi xuong dong -> vach chan lech hang) */ .bmh .sp-tab-nav{flex-wrap:nowrap;overflow-x:auto;gap:28px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .bmh .sp-tab-nav::-webkit-scrollbar{display:none} .bmh .sp-tab-nav button{font-size:11px;letter-spacing:.18em;white-space:nowrap; flex:0 0 auto} } /* ---------- (16/08 sếp) BỘ TRƯỢT MẶT VÂN: hiện NGUYÊN TẤM ---------- Trước: object-fit cover -> tấm 1:2 bị phóng vào khung 4:5, mờ + mất vân. Giờ: contain trên nền trắng — thấy cả tấm đúng như catalogue. */ .bmh .sp-slider .img{background:var(--white)} .bmh .sp-slider .img img{object-fit:contain} /* ---------- (16/08 sếp) TRONG KHÔNG GIAN: CẶP 2 ẢNH THÀNH 1 KHỐI ---------- 2 ảnh cao bằng nhau, khe hở nhỏ 8px — hết nhịp lệch rối; lẻ cuối = 16:9. */ .bmh .sp-doi{display:grid;grid-template-columns:1fr 1fr;gap:8px} .bmh .sp-doi .img{height:clamp(240px,30vw,460px);min-width:0} .js .bmh .sp-doi.rev .img:nth-child(2){transition-delay:.14s} @media(max-width:600px){.bmh .sp-doi{grid-template-columns:1fr;gap:8px} .bmh .sp-doi .img{height:clamp(200px,52vw,300px)}} /* ---------- (17/08 sếp đợt 2) CẶP ẢNH DỌC "Trong không gian" ---------- (vd Pacista ốp thực tế) — khung ĐỨNG cao trọn dáng thay vì khung ngang cắt cụt */ .bmh .sp-doi--doc .img{height:auto;aspect-ratio:3/4;max-height:100vh} /* ảnh lẻ dọc: khung đứng 3:4 rộng 64% giữa trang */ .bmh .sp-le-doc{width:min(64%,560px);margin:0 auto} @media(max-width:600px){.bmh .sp-le-doc{width:100%}} /* ===== KHỐI GIÁ NIÊM YẾT trên trang đá (25/08) ===== Nhãn "giá của hãng, không phải giá bán Bymehome" là BẮT BUỘC — không được rút gọn hay ẩn đi ở bất kỳ khổ màn nào. */ .bmh .sp-gia{ border:1px solid rgba(38,38,38,.2); padding:16px 18px; text-align:left; } .bmh .sp-gia-nhan{ display:block; font:400 10px/1.5 var(--font-head); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .bmh .sp-gia-muc{ list-style:none; padding:0; margin:8px 0 0; } .bmh .sp-gia-muc li{ display:flex; align-items:baseline; gap:10px; padding:4px 0; } /* 26/08 sếp: "chỗ tô đậm đơn giá nhìn bị trội, chưa đồng bộ với web". ⚠️ GỐC RỄ: site chỉ tự host font 300/400/500 — KHÔNG có 700. Khai 700 thì trình duyệt TỰ LÀM ĐẬM (synthetic bold): lấy nét 500 tô dày ra, chữ thành thô và lệch hẳn khỏi phần còn lại của web. Dùng 500 là nét THẬT. Cân lại tỉ lệ: độ dày 11 -> 13px, giá 19 -> 17px (trước là 11/19). */ .bmh .sp-gia-muc i{ font-style:normal; min-width:58px; color:var(--ink); font:400 13px/1.5 var(--font-head); letter-spacing:.08em; } .bmh .sp-gia-muc b{ font-size:17px; font-weight:500; letter-spacing:.01em; } .bmh .sp-gia-khoang{ margin:8px 0 0; font-size:15px; } .bmh .sp-gia-khoang b{ font-size:17px; font-weight:500; letter-spacing:.01em; } .bmh .sp-gia-khoang span{ display:block; color:var(--muted); font-size:13px; margin-top:2px; } .bmh .sp-gia-chu{ margin:10px 0 0; font-size:12.5px; line-height:1.65; color:var(--muted); } .bmh .sp-gia-chu b{ color:var(--ink); } /* link trong ghi chú giá phải nhìn ra được là link (mobile hay bấm nhầm) */ .bmh .sp-gia-chu a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; } /* (04/09 PA4) nut AR — hidden phai thang display cua .btn (ho bay 47) */ .bmh .sp-ar[hidden]{ display:none !important; } .bmh .sp-ar{ position:relative; } .bmh .sp-ar-chu{ font-size:13px; color:var(--muted); margin:6px 0 0; } .bmh .sp-ar-chu[hidden]{ display:none !important; } /* (04/09) modal trinh xem tam da 3D tren may tinh */ .bmh .tam3d-nen{ position:fixed; inset:0; z-index:90; background:rgba(38,38,38,.9); display:flex; align-items:center; justify-content:center; } .bmh .tam3d-hop{ position:relative; text-align:center; } .bmh .tam3d-canvas{ display:block; margin:0 auto; background:transparent; } .bmh .tam3d-dong{ position:absolute; top:-6px; right:0; transform:translateY(-100%); background:none; border:1px solid rgba(243,238,231,.4); color:var(--bone); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:9px 14px; cursor:pointer; border-radius:0; font-weight:500; } .bmh .tam3d-chu{ color:rgba(243,238,231,.75); font-size:13px; margin:10px 0 0; } /* ===== (04/09) CUM "XEM TRUOC MAU NAY" — 2 the cong cu + hang link phu ===== The muon kieu .cn-cc-o trang cong nang (bay 47: khai lai o day). */ .bmh .sp-cc{ text-align:left; } .bmh .sp-cc-luoi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; } .bmh .sp-cc-o{ display:block; position:relative; padding:22px 22px; background:var(--ink); color:var(--bone); text-decoration:none; text-align:left; transition:background .4s cubic-bezier(.22,.61,.36,1); } .bmh .sp-cc-o:hover{ background:#1b1b1b; } .bmh .sp-cc-o b{ display:block; font:400 13px/1.5 var(--font-head); letter-spacing:.14em; text-transform:uppercase; } .bmh .sp-cc-o span{ display:block; margin-top:7px; font-size:13.5px; line-height:1.65; color:rgba(243,238,231,.75); } .bmh .sp-cc-o[hidden]{ display:none !important; } .bmh .sp-lienket{ font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 10px; justify-content:center; align-items:baseline; } .bmh .sp-lienket-nhan{ letter-spacing:.08em; text-transform:uppercase; font-size:11px; } .bmh .sp-lienket a{ color:var(--body); text-decoration:none; border-bottom:1px solid rgba(64,64,64,.35); padding-bottom:1px; transition:border-color .3s; } .bmh .sp-lienket a:hover{ border-color:var(--ink); color:var(--ink); } @media(max-width:767.98px){ .bmh .sp-cc-o{ padding:18px 16px; } } /* 3 the (so le): the cuoi gian het hang duoi cho can doi */ /* dem theo the vi