/* ===================================================== TSV - PRODUCT GALLERY FLATSOME File: features/woocommerce/product-gallery/connectors/flatsome/assets/css/tsv-product-gallery-flatsome.css Phạm vi: - Chỉ trang chi tiết sản phẩm WooCommerce dùng Flatsome. - Mũi tên gallery mobile. - Bo góc ảnh lớn, thumbnail và bố cục thumbnail mobile. ===================================================== */ /* ===================================================== 01. GALLERY ARROWS MOBILE Gallery sản phẩm mobile: chạm vào ảnh mới hiện mũi tên File: features/woocommerce/product-gallery/connectors/flatsome/assets/css/tsv-product-gallery-flatsome.css Mục tiêu: - Mặc định ẩn mũi tên gallery trên mobile - Chạm nhẹ vào vùng gallery thì mũi tên hiện mượt - Chạm ra ngoài gallery thì mũi tên ẩn ngay - Giữ style mũi tên đẹp từ tsv-common.css ===================================================== */ @media only screen and (max-width: 768px) { /* ================================================= 01.1. Gallery arrows hidden state Mặc định ẩn mũi tên gallery sản phẩm ================================================= */ body.single-product .product-gallery .flickity-prev-next-button, body.single-product .product-gallery-slider .flickity-prev-next-button, body.single-product .woocommerce-product-gallery .flickity-prev-next-button, body.single-product .flickity-slider-main .flickity-prev-next-button { display: flex !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.16s ease, visibility 0s linear 0.16s !important; will-change: opacity !important; } /* ================================================= 01.2. Gallery arrows active state Khi JS thêm class thì mũi tên hiện lên ================================================= */ body.single-product.tsv-sp-gallery-arrows-active .product-gallery .flickity-prev-next-button, body.single-product.tsv-sp-gallery-arrows-active .product-gallery-slider .flickity-prev-next-button, body.single-product.tsv-sp-gallery-arrows-active .woocommerce-product-gallery .flickity-prev-next-button, body.single-product.tsv-sp-gallery-arrows-active .flickity-slider-main .flickity-prev-next-button { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transition: opacity 0.16s ease, visibility 0s linear 0s !important; } } /* ===================================================== 02. GALLERY IMAGE RADIUS + MOBILE THUMBNAILS Bo góc ảnh lớn và ổn định thumbnail sản phẩm File: features/woocommerce/product-gallery/connectors/flatsome/assets/css/tsv-product-gallery-flatsome.css Mục tiêu: - Bo góc ảnh lớn desktop/mobile - Bo góc thumbnail desktop bên trái - Giữ thanh trượt thumbnail desktop nguyên bản Flatsome - Thumbnail mobile sát ảnh lớn hơn - Bỏ viền active mobile gây nhúc nhích/lòi góc vuông - Không phá layout gallery Flatsome ===================================================== */ .single-product { --tsv-single-main-radius: 16px; --tsv-single-main-radius-mobile: 12px; --tsv-single-thumb-radius: 10px; --tsv-single-thumb-size-mobile: 58px; } /* ===================================================== 02.1. ẢNH LỚN SẢN PHẨM - DESKTOP ===================================================== */ .single-product .product-gallery .woocommerce-product-gallery__image a, .single-product .product-gallery .woocommerce-product-gallery__image img, .single-product .product-images .woocommerce-product-gallery__image a, .single-product .product-images .woocommerce-product-gallery__image img, .single-product .woocommerce-product-gallery__image a, .single-product .woocommerce-product-gallery__image img { border-radius: var(--tsv-single-main-radius) !important; display: block !important; } .single-product .product-gallery .woocommerce-product-gallery__image img, .single-product .product-images .woocommerce-product-gallery__image img, .single-product .woocommerce-product-gallery__image img { overflow: hidden !important; clip-path: inset(0 round var(--tsv-single-main-radius)) !important; } /* ===================================================== 02.2. THUMBNAIL DESKTOP BÊN TRÁI Chỉ bo ảnh/khung ảnh, không khóa khung cha để tránh mất thanh trượt ===================================================== */ @media only screen and (min-width: 769px) { .single-product .product-thumbnails a, .single-product .product-thumbnails .img, .single-product .product-thumbnails .img-inner, .single-product .product-thumbnails .box-image, .single-product .product-thumbnails img, .single-product .flex-control-thumbs a, .single-product .flex-control-thumbs img { border-radius: var(--tsv-single-thumb-radius) !important; overflow: hidden !important; } .single-product .product-thumbnails a, .single-product .product-thumbnails .img, .single-product .product-thumbnails .img-inner, .single-product .product-thumbnails .box-image, .single-product .flex-control-thumbs a { display: block !important; background: #ffffff !important; line-height: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } .single-product .product-thumbnails img, .single-product .flex-control-thumbs img { display: block !important; width: 100% !important; height: auto !important; object-fit: cover !important; object-position: center center !important; vertical-align: top !important; clip-path: inset(0 round var(--tsv-single-thumb-radius)) !important; } /* Desktop: ảnh đang chọn dùng viền trong, bo theo ảnh, không làm đổi kích thước */ .single-product .product-thumbnails .is-nav-selected a, .single-product .product-thumbnails .is-selected a, .single-product .product-thumbnails .is-nav-selected .img, .single-product .product-thumbnails .is-selected .img, .single-product .product-thumbnails .is-nav-selected .img-inner, .single-product .product-thumbnails .is-selected .img-inner { border: 0 !important; outline: 0 !important; border-radius: var(--tsv-single-thumb-radius) !important; overflow: hidden !important; box-shadow: inset 0 0 0 2px #2a7de1 !important; transform: none !important; transition: none !important; } .single-product .product-thumbnails .is-nav-selected img, .single-product .product-thumbnails .is-selected img { border: 0 !important; outline: 0 !important; border-radius: var(--tsv-single-thumb-radius) !important; clip-path: inset(0 round var(--tsv-single-thumb-radius)) !important; transform: none !important; } } /* ===================================================== 02.3. NÚT ZOOM ẢNH ===================================================== */ .single-product .image-tools .zoom-button, .single-product .image-tools a, .single-product .image-tools .icon-expand { border-radius: 999px !important; overflow: hidden !important; } /* ===================================================== 02.4. GALLERY + THUMBNAIL MOBILE Bỏ viền active để thumbnail không nhúc nhích/lòi góc vuông ===================================================== */ @media only screen and (max-width: 768px) { /* Ảnh lớn mobile */ .single-product .product-gallery .woocommerce-product-gallery__image a, .single-product .product-gallery .woocommerce-product-gallery__image img, .single-product .product-images .woocommerce-product-gallery__image a, .single-product .product-images .woocommerce-product-gallery__image img, .single-product .woocommerce-product-gallery__image a, .single-product .woocommerce-product-gallery__image img { border-radius: var(--tsv-single-main-radius-mobile) !important; display: block !important; } .single-product .product-gallery .woocommerce-product-gallery__image img, .single-product .product-images .woocommerce-product-gallery__image img, .single-product .woocommerce-product-gallery__image img { overflow: hidden !important; clip-path: inset(0 round var(--tsv-single-main-radius-mobile)) !important; } /* Kéo thumbnail sát ảnh lớn hơn */ .single-product .product-gallery-slider, .single-product .woocommerce-product-gallery { margin-bottom: 0 !important; padding-bottom: 0 !important; } .single-product .product-thumbnails { height: 64px !important; min-height: 64px !important; max-height: 64px !important; margin-top: -10px !important; margin-bottom: 8px !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .single-product .product-thumbnails .flickity-viewport { height: 64px !important; min-height: 64px !important; max-height: 64px !important; overflow: hidden !important; box-sizing: border-box !important; } .single-product .product-thumbnails .flickity-slider { display: flex !important; align-items: center !important; height: 64px !important; } /* Từng ô thumbnail mobile */ .single-product .product-thumbnails .col { width: 70px !important; min-width: 70px !important; max-width: 70px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; padding: 3px 6px !important; margin: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; top: auto !important; bottom: auto !important; transform: none !important; transition: none !important; box-shadow: none !important; box-sizing: border-box !important; } /* Khung bọc thumbnail mobile */ .single-product .product-thumbnails .col-inner, .single-product .product-thumbnails a, .single-product .product-thumbnails .img, .single-product .product-thumbnails .img-inner, .single-product .product-thumbnails .box-image { width: var(--tsv-single-thumb-size-mobile) !important; height: var(--tsv-single-thumb-size-mobile) !important; min-height: var(--tsv-single-thumb-size-mobile) !important; max-height: var(--tsv-single-thumb-size-mobile) !important; display: block !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: var(--tsv-single-thumb-radius) !important; overflow: hidden !important; background: #ffffff !important; line-height: 0 !important; box-shadow: none !important; transform: none !important; transition: none !important; box-sizing: border-box !important; clip-path: inset(0 round var(--tsv-single-thumb-radius)) !important; } /* Ảnh thumbnail mobile */ .single-product .product-thumbnails img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; border-radius: var(--tsv-single-thumb-radius) !important; overflow: hidden !important; box-shadow: none !important; transform: none !important; transition: none !important; vertical-align: top !important; clip-path: inset(0 round var(--tsv-single-thumb-radius)) !important; } /* Mobile: bỏ toàn bộ active border/outline/box-shadow để không nhúc nhích */ .single-product .product-thumbnails .is-nav-selected, .single-product .product-thumbnails .is-selected, .single-product .product-thumbnails .is-nav-selected .col-inner, .single-product .product-thumbnails .is-selected .col-inner, .single-product .product-thumbnails .is-nav-selected a, .single-product .product-thumbnails .is-selected a, .single-product .product-thumbnails .is-nav-selected .img, .single-product .product-thumbnails .is-selected .img, .single-product .product-thumbnails .is-nav-selected .img-inner, .single-product .product-thumbnails .is-selected .img-inner, .single-product .product-thumbnails .is-nav-selected .box-image, .single-product .product-thumbnails .is-selected .box-image, .single-product .product-thumbnails .is-nav-selected img, .single-product .product-thumbnails .is-selected img { border: 0 !important; outline: 0 !important; box-shadow: none !important; top: auto !important; bottom: auto !important; transform: none !important; transition: none !important; border-radius: var(--tsv-single-thumb-radius) !important; overflow: hidden !important; clip-path: inset(0 round var(--tsv-single-thumb-radius)) !important; } /* Mobile: dùng opacity để biết ảnh đang chọn, không dùng viền */ .single-product .product-thumbnails .col { opacity: 0.72 !important; } .single-product .product-thumbnails .col.is-nav-selected, .single-product .product-thumbnails .col.is-selected { opacity: 1 !important; } }