/* ============================================================================= CHUẨN HÓA & HIỆU ỨNG ẢNH SẢN PHẨM WOOCOMMERCE Vấn đề cần giải: ảnh do nhiều người upload có tỉ lệ khác nhau (vuông, dọc, ngang), khiến lưới sản phẩm cao thấp lệch nhau và trang trông lộn xộn. Giải pháp: khóa tỉ lệ khung bằng `aspect-ratio` ở lớp bọc, ảnh bên trong dùng `object-fit`. Cách này giữ được ảnh gốc nguyên vẹn (không cắt file), chỉ điều chỉnh cách hiển thị — khác với việc hard-crop khi upload. ========================================================================== */ :root { --archi-ratio-product: 1 / 1; /* ảnh sản phẩm lẻ — vuông, gọn gàng nhất */ --archi-ratio-scene: 4 / 3; /* ảnh phối cảnh combo, dự án */ --archi-ratio-tall: 2 / 3; /* cột danh mục dọc */ --archi-ease: cubic-bezier(.16, 1, .3, 1); } /* ----------------------------------------------------------------------------- KHUNG ẢNH CHUẨN -------------------------------------------------------------------------- */ .archi-thumb { position: relative; display: block; overflow: hidden; background: #F5F6F7; /* nền khi ảnh chưa tải xong — tránh nhấp nháy trắng */ aspect-ratio: var(--archi-ratio-product); } .archi-thumb--scene { aspect-ratio: var(--archi-ratio-scene); } .archi-thumb--tall { aspect-ratio: var(--archi-ratio-tall); } .archi-thumb img, .woocommerce ul.products li.product a img, .woocommerce div.product div.images img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 1.1s var(--archi-ease), filter .5s ease; } /** * Ảnh sản phẩm lẻ (bàn cầu, chậu rửa) nên dùng `contain` chứ không `cover`: * ảnh catalogue thường có nền trắng và khoảng đệm quanh vật thể — `cover` sẽ * cắt mất phần đó, làm sản phẩm bị chạm mép khung, nhìn rất bí. */ .archi-thumb--product img, .woocommerce ul.products li.product a img { object-fit: contain; padding: 6%; } /* ----------------------------------------------------------------------------- HIỆU ỨNG HOVER — nâng nhẹ + phóng ảnh -------------------------------------------------------------------------- */ .archi-card-img, .woocommerce ul.products li.product { transition: transform .45s var(--archi-ease), box-shadow .45s ease; } .archi-card-img:hover, .woocommerce ul.products li.product:hover { transform: translateY(-6px); /* Bóng đổ "luxury": nhiều lớp, lớp gần rất mờ, lớp xa lan rộng. Bóng một lớp luôn trông rẻ tiền vì ánh sáng thật không hoạt động như vậy. */ box-shadow: 0 2px 4px -1px rgba(11, 27, 43, .05), 0 12px 20px -8px rgba(11, 27, 43, .10), 0 32px 48px -20px rgba(11, 27, 43, .16); } .archi-card-img:hover img, .woocommerce ul.products li.product:hover img { transform: scale(1.05); } /* Biến thể phóng mạnh hơn cho ảnh phối cảnh lớn */ .archi-thumb--scene:hover img { transform: scale(1.07); } /* ----------------------------------------------------------------------------- ẢNH THỨ HAI HIỆN KHI HOVER (nếu sản phẩm có gallery) -------------------------------------------------------------------------- */ .archi-thumb__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; } .archi-card-img:hover .archi-thumb__alt { opacity: 1; } /* ----------------------------------------------------------------------------- THƯ VIỆN ẢNH TRANG CHI TIẾT SẢN PHẨM -------------------------------------------------------------------------- */ .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { aspect-ratio: var(--archi-ratio-product); background: #F5F6F7; overflow: hidden; } .woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; list-style: none; margin: 10px 0 0; padding: 0; } .woocommerce div.product div.images .flex-control-thumbs li { margin: 0; } .woocommerce div.product div.images .flex-control-thumbs img { aspect-ratio: 1 / 1; object-fit: contain; padding: 8%; background: #F5F6F7; cursor: pointer; opacity: .55; transition: opacity .3s ease, outline-color .3s ease; outline: 2px solid transparent; outline-offset: -2px; } .woocommerce div.product div.images .flex-control-thumbs img:hover, .woocommerce div.product div.images .flex-control-thumbs .flex-active { opacity: 1; outline-color: #C8A24A; } /* ----------------------------------------------------------------------------- CHỐNG LAYOUT SHIFT (CLS) Ảnh lazy-load chưa tải xong sẽ có chiều cao 0 nếu không khóa tỉ lệ, khiến nội dung bên dưới nhảy lên rồi tụt xuống — đây là nguyên nhân CLS phổ biến nhất trên site nhiều ảnh. `aspect-ratio` ở lớp bọc xử lý triệt để việc này. -------------------------------------------------------------------------- */ img[loading="lazy"] { background: linear-gradient(110deg, #F2F3F4 30%, #E9EAEB 45%, #F2F3F4 60%); background-size: 220% 100%; animation: archi-skeleton 1.6s ease-in-out infinite; } img[loading="lazy"].archi-loaded { background: none; animation: none; } @keyframes archi-skeleton { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } } /* ----------------------------------------------------------------------------- TÔN TRỌNG THIẾT LẬP GIẢM CHUYỂN ĐỘNG -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .archi-thumb img, .archi-card-img, .woocommerce ul.products li.product, .woocommerce ul.products li.product img, .archi-thumb__alt { transition: none !important; animation: none !important; } .archi-card-img:hover, .woocommerce ul.products li.product:hover { transform: none; } .archi-card-img:hover img, .woocommerce ul.products li.product:hover img { transform: none; } img[loading="lazy"] { background: none; animation: none; } } /* ----------------------------------------------------------------------------- MOBILE — bỏ hiệu ứng nâng vì gây giật khi cuộn trên cảm ứng -------------------------------------------------------------------------- */ @media (hover: none) { .archi-card-img:hover, .woocommerce ul.products li.product:hover { transform: none; box-shadow: none; } .archi-card-img:hover img { transform: none; } }