/** * TSV - PRODUCT OVERLAY UI * File: inc/overlay-ui/assets/css/tsv-product-overlay-ui.css * * Dùng tại trang chi tiết sản phẩm: * - Mũi tên gallery sản phẩm chính. * - Preview ảnh của popup mua hàng mobile. * - PhotoSwipe của WooCommerce / Flatsome. * * Phần giao diện chỉ dành cho gallery/lightbox SEO đã được tách sang: * inc/seo-content/assets/css/tsv-seo-overlay-ui.css */ /* ===================================================== 01. BIẾN RIÊNG CHO OVERLAY SẢN PHẨM ===================================================== */ :root { /* Gallery sản phẩm chính. */ --tsv-main-gallery-control-size: var(--tsv-desktop-arrow-control-size); --tsv-main-gallery-icon-size: var(--tsv-desktop-arrow-icon-size); --tsv-main-gallery-edge: 2px; /* Preview ảnh trong popup mua hàng. */ --tsv-buy-preview-control-size: var(--tsv-desktop-arrow-control-size); --tsv-buy-preview-icon-size: var(--tsv-desktop-arrow-icon-size); --tsv-buy-preview-close-size: var(--tsv-desktop-action-control-size); /* PhotoSwipe của WooCommerce / Flatsome. */ --tsv-pswp-top-control-size: var(--tsv-desktop-action-control-size); --tsv-pswp-arrow-size: var(--tsv-desktop-arrow-control-size); --tsv-pswp-arrow-icon-size: var(--tsv-desktop-arrow-icon-size); --tsv-pswp-control-gap: 5px; --tsv-pswp-edge: 6px; } /* ===================================================== 02. NỀN PHỦ CỦA OVERLAY SẢN PHẨM ===================================================== */ /* * Popup mua hàng: * Dùng nền nhẹ để vẫn nhận biết được trang phía sau. */ .tsv-buy-popup-overlay { background-color: var(--tsv-overlay-backdrop-soft) !important; } /* * Tất cả popup xem ảnh: * - Lightbox ảnh trang chủ. * - Lightbox ảnh trong nội dung SEO. * - Preview ảnh popup mua hàng. * - PhotoSwipe của gallery sản phẩm. * * Cùng dùng màu và độ tối chuẩn của trang chủ. */ :is( .tsv-buy-image-preview, .tsv-seo-lightbox, .pswp__bg ) { background-color: var(--tsv-overlay-backdrop-strong) !important; } /* * PhotoSwipe vốn có opacity riêng. * Đặt bằng 1 để không pha độ tối thêm lần thứ hai. */ .pswp__bg { opacity: 1 !important; } /* ===================================================== 03. RESET NÚT OVERLAY DÙNG CHUNG ===================================================== */ :is( .tsv-buy-popup-close, .tsv-buy-image-preview-close, .tsv-buy-image-preview-nav, .tsv-seo-gallery__nav, .tsv-seo-lightbox__close, .tsv-seo-lightbox__nav ) { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: var(--tsv-overlay-control-color) !important; background-color: var(--tsv-overlay-control-bg) !important; border: 1px solid var(--tsv-overlay-control-border) !important; border-radius: var(--tsv-overlay-radius) !important; box-shadow: var(--tsv-overlay-shadow) !important; font-family: Arial, sans-serif !important; font-weight: 400 !important; line-height: 1 !important; text-align: center !important; text-transform: none !important; box-sizing: border-box !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; transition: none !important; animation: none !important; filter: none !important; will-change: auto !important; } :is( .tsv-buy-image-preview-close, .tsv-buy-image-preview-nav, .tsv-seo-gallery__nav, .tsv-seo-lightbox__close, .tsv-seo-lightbox__nav ):is( :hover, :focus, :focus-visible, :active ) { color: #ffffff !important; background-color: var(--tsv-overlay-control-bg) !important; border-color: var(--tsv-overlay-control-border) !important; box-shadow: var(--tsv-overlay-shadow) !important; } /* ===================================================== 04. NÚT ĐÓNG POPUP MUA HÀNG NỀN TRẮNG ===================================================== */ .tsv-buy-popup-close { color: var(--tsv-overlay-light-color) !important; background-color: var(--tsv-overlay-light-bg) !important; border-color: var(--tsv-overlay-light-border) !important; box-shadow: 0 2px 7px rgba(8, 43, 99, 0.08) !important; } .tsv-buy-popup-close:is( :hover, :focus, :focus-visible, :active ) { color: #082b63 !important; background-color: var(--tsv-overlay-light-bg-hover) !important; border-color: var(--tsv-overlay-light-border) !important; box-shadow: 0 2px 7px rgba(8, 43, 99, 0.08) !important; } /* ===================================================== 05. GALLERY SẢN PHẨM CHÍNH — FLICKITY ===================================================== */ body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery, .flickity-slider-main ) .flickity-prev-next-button { position: absolute !important; top: 50% !important; z-index: 20 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: var(--tsv-main-gallery-control-size) !important; min-width: var(--tsv-main-gallery-control-size) !important; max-width: var(--tsv-main-gallery-control-size) !important; height: var(--tsv-main-gallery-control-size) !important; min-height: var(--tsv-main-gallery-control-size) !important; max-height: var(--tsv-main-gallery-control-size) !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background-color: var(--tsv-overlay-control-bg) !important; border: 1px solid var(--tsv-overlay-control-border) !important; border-radius: 4px !important; box-shadow: var(--tsv-overlay-shadow) !important; box-sizing: border-box !important; transform: translateY(-50%) !important; transform-origin: 50% 50% !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; transition: none !important; animation: none !important; filter: none !important; } body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery, .flickity-slider-main ) .flickity-prev-next-button.previous { left: var(--tsv-main-gallery-edge) !important; right: auto !important; } body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery, .flickity-slider-main ) .flickity-prev-next-button.next { right: var(--tsv-main-gallery-edge) !important; left: auto !important; } body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery, .flickity-slider-main ) .flickity-prev-next-button svg { width: var(--tsv-main-gallery-icon-size) !important; height: var(--tsv-main-gallery-icon-size) !important; transform: none !important; transition: none !important; } body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery, .flickity-slider-main ) .flickity-prev-next-button .arrow { fill: #ffffff !important; } body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery, .flickity-slider-main ) .flickity-prev-next-button:is( :hover, :focus, :focus-visible, :active ) { top: 50% !important; background-color: var(--tsv-overlay-control-bg) !important; border-color: var(--tsv-overlay-control-border) !important; box-shadow: var(--tsv-overlay-shadow) !important; transform: translateY(-50%) !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; } /* Desktop: rê vào gallery mới hiện, không fade, không nhúc nhích. */ @media (hover: hover) and (pointer: fine) { body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery ) .flickity-prev-next-button { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery ):hover .flickity-prev-next-button, body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery ) .flickity-prev-next-button:focus-visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* ===================================================== 06. MŨI TÊN GALLERY / LIGHTBOX SEO ===================================================== */ /* ===================================================== 07. GALLERY SEO — HIỆN / ẨN ỔN ĐỊNH ===================================================== */ /* Desktop: rê vào ảnh mới hiện. */ /* Mobile: JavaScript thêm class khi chạm ảnh. */ /* ===================================================== 08. LIGHTBOX SEO ===================================================== */ /* Desktop: rê vào ảnh hoặc nút mới hiện. */ /* Mobile: JavaScript thêm class khi chạm ảnh. */ /* ===================================================== 09. NÚT ĐÓNG LIGHTBOX DESKTOP Dùng chung: - Kích thước nút: 28 × 28px - Kích thước icon X: 11 × 11px - Màu nền, viền, bo góc và bóng đổ ===================================================== */ :is( .tsv-seo-lightbox__close, .tsv-buy-image-preview .tsv-buy-image-preview-close ) { width: var(--tsv-desktop-action-control-size) !important; min-width: var(--tsv-desktop-action-control-size) !important; max-width: var(--tsv-desktop-action-control-size) !important; height: var(--tsv-desktop-action-control-size) !important; min-height: var(--tsv-desktop-action-control-size) !important; max-height: var(--tsv-desktop-action-control-size) !important; margin: 0 !important; padding: 0 !important; color: var(--tsv-overlay-control-color) !important; background-color: var(--tsv-overlay-control-bg) !important; border: 1px solid var(--tsv-overlay-control-border) !important; border-radius: var(--tsv-overlay-radius) !important; box-shadow: var(--tsv-overlay-shadow) !important; box-sizing: border-box !important; overflow: hidden !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; transform: none !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; transition: none !important; animation: none !important; filter: none !important; } :is( .tsv-seo-lightbox__close, .tsv-buy-image-preview .tsv-buy-image-preview-close ):is( :hover, :focus, :focus-visible, :active ) { color: var(--tsv-overlay-control-color) !important; background-color: var(--tsv-overlay-control-bg) !important; border-color: var(--tsv-overlay-control-border) !important; border-radius: var(--tsv-overlay-radius) !important; box-shadow: var(--tsv-overlay-shadow) !important; outline: 0 !important; outline-offset: 0 !important; transform: none !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; } /* Icon X dùng chung */ :is( .tsv-seo-lightbox__close, .tsv-buy-image-preview .tsv-buy-image-preview-close )::before, :is( .tsv-seo-lightbox__close, .tsv-buy-image-preview .tsv-buy-image-preview-close )::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: var(--tsv-desktop-close-icon-size) !important; height: 1.4px !important; margin: 0 !important; padding: 0 !important; background-color: var(--tsv-overlay-control-color) !important; background-image: none !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; transform-origin: 50% 50% !important; pointer-events: none !important; } :is( .tsv-seo-lightbox__close, .tsv-buy-image-preview .tsv-buy-image-preview-close )::before { transform: translate(-50%, -50%) rotate(45deg) !important; } :is( .tsv-seo-lightbox__close, .tsv-buy-image-preview .tsv-buy-image-preview-close )::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* Nút đóng Lightbox SEO */ /* Nút đóng preview ảnh popup mua hàng */ .tsv-buy-image-preview .tsv-buy-image-preview-close { top: 6px !important; right: 6px !important; } /* Bộ đếm Lightbox SEO */ /* ===================================================== 10. PREVIEW ẢNH POPUP MUA HÀNG ===================================================== */ .tsv-buy-image-preview .tsv-buy-image-preview-nav { position: fixed !important; top: var( --tsv-buy-preview-arrow-top, 50% ) !important; z-index: 100006 !important; width: var(--tsv-buy-preview-control-size) !important; min-width: var(--tsv-buy-preview-control-size) !important; max-width: var(--tsv-buy-preview-control-size) !important; height: var(--tsv-buy-preview-control-size) !important; min-height: var(--tsv-buy-preview-control-size) !important; max-height: var(--tsv-buy-preview-control-size) !important; font-size: 0 !important; line-height: 0 !important; background-color: var(--tsv-overlay-control-bg) !important; border-color: var(--tsv-overlay-control-border) !important; border-radius: var(--tsv-overlay-radius) !important; box-shadow: var(--tsv-overlay-shadow) !important; transform: translateY(-50%) !important; transform-origin: 50% 50% !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; transition: none !important; animation: none !important; filter: none !important; } .tsv-buy-image-preview .tsv-buy-image-preview-prev { left: var( --tsv-buy-preview-prev-left, 3px ) !important; right: auto !important; } .tsv-buy-image-preview .tsv-buy-image-preview-next { right: var( --tsv-buy-preview-next-right, 3px ) !important; left: auto !important; } .tsv-buy-image-preview .tsv-buy-image-preview-nav:is( :hover, :focus, :focus-visible, :active ) { background-color: var(--tsv-overlay-control-bg) !important; border-color: var(--tsv-overlay-control-border) !important; box-shadow: var(--tsv-overlay-shadow) !important; transform: translateY(-50%) !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; } .tsv-buy-image-preview .tsv-buy-image-preview-nav::before { content: "" !important; display: block !important; width: var(--tsv-buy-preview-icon-size) !important; height: var(--tsv-buy-preview-icon-size) !important; border-top: 1.35px solid var(--tsv-overlay-control-color) !important; border-right: 1.35px solid var(--tsv-overlay-control-color) !important; box-sizing: border-box !important; pointer-events: none !important; } .tsv-buy-image-preview .tsv-buy-image-preview-prev::before { margin-left: 1px !important; transform: rotate(-135deg) !important; } .tsv-buy-image-preview .tsv-buy-image-preview-next::before { margin-right: 1px !important; transform: rotate(45deg) !important; } /* Desktop: rê vào vùng ảnh mới hiện mũi tên */ @media (hover: hover) and (pointer: fine) { .tsv-buy-image-preview .tsv-buy-image-preview-nav { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .tsv-buy-image-preview:has( .tsv-buy-image-preview-stage:hover, .tsv-buy-image-preview-nav:hover ) .tsv-buy-image-preview-nav, .tsv-buy-image-preview .tsv-buy-image-preview-nav:focus-visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* Mobile: JavaScript điều khiển trạng thái hiện/ẩn */ @media (hover: none), (pointer: coarse), (max-width: 768px) { .tsv-buy-image-preview .tsv-buy-image-preview-nav { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .tsv-buy-image-preview.is-controls-visible .tsv-buy-image-preview-nav { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* ===================================================== 11. PHOTOSWIPE — CỤM NÚT GÓC PHẢI ===================================================== */ .pswp__top-bar { background-color: transparent !important; } .pswp__ui--idle .pswp__top-bar { opacity: 1 !important; } button.pswp__button--close, button.pswp__button--fs, button.pswp__button--zoom { position: absolute !important; top: var(--tsv-pswp-edge) !important; left: auto !important; z-index: 1000002 !important; float: none !important; width: var(--tsv-pswp-top-control-size) !important; min-width: var(--tsv-pswp-top-control-size) !important; max-width: var(--tsv-pswp-top-control-size) !important; height: var(--tsv-pswp-top-control-size) !important; min-height: var(--tsv-pswp-top-control-size) !important; max-height: var(--tsv-pswp-top-control-size) !important; margin: 0 !important; padding: 0 !important; color: var(--tsv-overlay-control-color) !important; background-color: var(--tsv-overlay-control-bg) !important; background-image: none !important; border: 1px solid var(--tsv-overlay-control-border) !important; border-radius: var(--tsv-overlay-radius) !important; box-shadow: var(--tsv-overlay-shadow) !important; box-sizing: border-box !important; overflow: hidden !important; cursor: pointer !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; opacity: 1 !important; transform: none !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; transition: none !important; animation: none !important; filter: none !important; } button.pswp__button--close { display: block !important; right: var(--tsv-pswp-edge) !important; } .pswp--supports-fs button.pswp__button--fs { display: block !important; } .pswp--zoom-allowed button.pswp__button--zoom { display: block !important; } button.pswp__button--fs { right: calc( var(--tsv-pswp-edge) + var(--tsv-pswp-top-control-size) + var(--tsv-pswp-control-gap) ) !important; } button.pswp__button--zoom { right: calc( var(--tsv-pswp-edge) + ( var(--tsv-pswp-top-control-size) + var(--tsv-pswp-control-gap) ) * 2 ) !important; } button.pswp__button--close::before, button.pswp__button--close::after, button.pswp__button--fs::before, button.pswp__button--fs::after, button.pswp__button--zoom::before, button.pswp__button--zoom::after { position: absolute !important; margin: 0 !important; padding: 0 !important; background-image: none !important; box-sizing: border-box !important; pointer-events: none !important; } /* Icon đóng */ button.pswp__button--close::before, button.pswp__button--close::after { content: "" !important; top: 50% !important; left: 50% !important; width: var(--tsv-desktop-close-icon-size) !important; height: 1.4px !important; background-color: var(--tsv-overlay-control-color) !important; border: 0 !important; border-radius: 999px !important; } button.pswp__button--close::before { transform: translate(-50%, -50%) rotate(45deg) !important; } button.pswp__button--close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* Icon toàn màn hình */ button.pswp__button--fs::before { content: "" !important; top: 50% !important; left: 50% !important; width: 13px !important; height: 13px !important; transform: translate(-50%, -50%) !important; background: linear-gradient( #ffffff, #ffffff ) left top / 5px 1.5px no-repeat, linear-gradient( #ffffff, #ffffff ) left top / 1.5px 5px no-repeat, linear-gradient( #ffffff, #ffffff ) right top / 5px 1.5px no-repeat, linear-gradient( #ffffff, #ffffff ) right top / 1.5px 5px no-repeat, linear-gradient( #ffffff, #ffffff ) left bottom / 5px 1.5px no-repeat, linear-gradient( #ffffff, #ffffff ) left bottom / 1.5px 5px no-repeat, linear-gradient( #ffffff, #ffffff ) right bottom / 5px 1.5px no-repeat, linear-gradient( #ffffff, #ffffff ) right bottom / 1.5px 5px no-repeat !important; border: 0 !important; } button.pswp__button--fs::after { content: none !important; display: none !important; } /* Icon zoom */ button.pswp__button--zoom::before { content: "" !important; top: 6px !important; left: 6px !important; width: 11px !important; height: 11px !important; background-color: transparent !important; border: 1.5px solid var(--tsv-overlay-control-color) !important; border-radius: 50% !important; } button.pswp__button--zoom::after { content: "" !important; top: 16px !important; left: 16px !important; width: 6px !important; height: 1.5px !important; background-color: var(--tsv-overlay-control-color) !important; border: 0 !important; border-radius: 999px !important; transform: rotate(45deg) !important; transform-origin: left center !important; } button.pswp__button--close:is( :hover, :focus, :focus-visible, :active ), button.pswp__button--fs:is( :hover, :focus, :focus-visible, :active ), button.pswp__button--zoom:is( :hover, :focus, :focus-visible, :active ) { background-color: var(--tsv-overlay-control-bg) !important; border-color: var(--tsv-overlay-control-border) !important; box-shadow: var(--tsv-overlay-shadow) !important; transform: none !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; } button.pswp__button--close:is( :focus, :focus-visible ) { outline: 0 !important; outline-offset: 0 !important; } /* ===================================================== 12. PHOTOSWIPE — MŨI TÊN ĐIỀU HƯỚNG ===================================================== */ button.pswp__button--arrow--left, button.pswp__button--arrow--right { position: absolute !important; top: 50% !important; z-index: 1000001 !important; display: block !important; width: var(--tsv-pswp-arrow-size) !important; min-width: var(--tsv-pswp-arrow-size) !important; max-width: var(--tsv-pswp-arrow-size) !important; height: var(--tsv-pswp-arrow-size) !important; min-height: var(--tsv-pswp-arrow-size) !important; max-height: var(--tsv-pswp-arrow-size) !important; margin: 0 !important; padding: 0 !important; color: var(--tsv-overlay-control-color) !important; background-color: var(--tsv-overlay-control-bg) !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: var(--tsv-pswp-arrow-icon-size) var(--tsv-pswp-arrow-icon-size) !important; border: 1px solid var(--tsv-overlay-control-border) !important; border-radius: var(--tsv-overlay-radius) !important; box-shadow: var(--tsv-overlay-shadow) !important; box-sizing: border-box !important; overflow: hidden !important; cursor: pointer !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(-50%) !important; transform-origin: 50% 50% !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; transition: none !important; animation: none !important; filter: none !important; } /* Mũi tên trái */ button.pswp__button--arrow--left { left: 8px !important; right: auto !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18L9 12L15 6' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* Mũi tên phải */ button.pswp__button--arrow--right { right: 8px !important; left: auto !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6L15 12L9 18' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* Xóa icon mặc định của PhotoSwipe */ button.pswp__button--arrow--left::before, button.pswp__button--arrow--left::after, button.pswp__button--arrow--right::before, button.pswp__button--arrow--right::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; } /* Giữ nguyên khi hover, focus và bấm */ button.pswp__button--arrow--left:is( :hover, :focus, :focus-visible, :active ), button.pswp__button--arrow--right:is( :hover, :focus, :focus-visible, :active ) { top: 50% !important; background-color: var(--tsv-overlay-control-bg) !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: var(--tsv-pswp-arrow-icon-size) var(--tsv-pswp-arrow-icon-size) !important; border-color: var(--tsv-overlay-control-border) !important; box-shadow: var(--tsv-overlay-shadow) !important; transform: translateY(-50%) !important; translate: none !important; scale: 1 !important; rotate: 0deg !important; outline: 0 !important; outline-offset: 0 !important; } /* Giữ đúng icon trái khi thay đổi trạng thái */ button.pswp__button--arrow--left:is( :hover, :focus, :focus-visible, :active ) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18L9 12L15 6' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* Giữ đúng icon phải khi thay đổi trạng thái */ button.pswp__button--arrow--right:is( :hover, :focus, :focus-visible, :active ) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6L15 12L9 18' fill='none' stroke='%23ffffff' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ===================================================== 13. HỆ THỐNG ĐIỀU KHIỂN MOBILE / TABLET Mũi tên điều hướng: - Nút: 23 × 23px - Icon: 7 × 7px Nút chức năng góc trên: - Nút: 24 × 24px - Icon đóng: 10 × 10px Áp dụng: - Gallery sản phẩm chính - Gallery và lightbox SEO - Preview ảnh popup mua hàng - PhotoSwipe - Các nút đóng có cùng chức năng ===================================================== */ @media only screen and (max-width: 768px) { :root { /* --------------------------------------------- Kích thước mũi tên dùng chung --------------------------------------------- */ --tsv-mobile-arrow-control-size: 23px; --tsv-mobile-arrow-icon-size: 7px; /* --------------------------------------------- Nút chức năng góc trên dùng chung --------------------------------------------- */ --tsv-mobile-action-control-size: 24px; --tsv-mobile-close-icon-size: 10px; /* * Chỉ dùng vùng chạm 44px cho các nút X đứng riêng. * Không áp dụng cho cụm PhotoSwipe vì các nút nằm sát nhau. */ --tsv-mobile-isolated-hit-size: 44px; --tsv-mobile-action-bg: rgba(8, 43, 99, 0.9); --tsv-mobile-action-border: rgba(255, 255, 255, 0.38); --tsv-mobile-action-shadow: 0 2px 7px rgba(0, 0, 0, 0.28); /* --------------------------------------------- Gallery sản phẩm chính --------------------------------------------- */ --tsv-main-gallery-control-size: var(--tsv-mobile-arrow-control-size); --tsv-main-gallery-icon-size: var(--tsv-mobile-arrow-icon-size); --tsv-main-gallery-edge: 1px; /* --------------------------------------------- Gallery và lightbox SEO --------------------------------------------- */ --tsv-seo-control-size: var(--tsv-mobile-arrow-control-size); --tsv-seo-icon-size: var(--tsv-mobile-arrow-icon-size); --tsv-seo-control-edge: 1px; /* --------------------------------------------- Preview ảnh popup mua hàng --------------------------------------------- */ --tsv-buy-preview-control-size: var(--tsv-mobile-arrow-control-size); --tsv-buy-preview-icon-size: var(--tsv-mobile-arrow-icon-size); --tsv-buy-preview-close-size: var(--tsv-mobile-action-control-size); /* --------------------------------------------- PhotoSwipe --------------------------------------------- */ --tsv-pswp-arrow-size: var(--tsv-mobile-arrow-control-size); --tsv-pswp-arrow-icon-size: var(--tsv-mobile-arrow-icon-size); --tsv-pswp-top-control-size: var(--tsv-mobile-action-control-size); --tsv-pswp-control-gap: 3px; --tsv-pswp-edge: 4px; } /* ================================================= 13.1. PHOTOSWIPE — MŨI TÊN MOBILE ================================================= */ button.pswp__button--arrow--left, button.pswp__button--arrow--right { width: var(--tsv-pswp-arrow-size) !important; min-width: var(--tsv-pswp-arrow-size) !important; max-width: var(--tsv-pswp-arrow-size) !important; height: var(--tsv-pswp-arrow-size) !important; min-height: var(--tsv-pswp-arrow-size) !important; max-height: var(--tsv-pswp-arrow-size) !important; background-position: 50% 50% !important; background-size: var(--tsv-pswp-arrow-icon-size) var(--tsv-pswp-arrow-icon-size) !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } button.pswp__button--arrow--left { left: 8px !important; right: auto !important; } button.pswp__button--arrow--right { right: 8px !important; left: auto !important; } /* Mặc định ẩn mũi tên PhotoSwipe */ html body.single-product .pswp.pswp--open:not(.tsv-pswp-arrows-active) .pswp__ui button.pswp__button--arrow--left, html body.single-product .pswp.pswp--open:not(.tsv-pswp-arrows-active) .pswp__ui button.pswp__button--arrow--right { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* JavaScript thêm class khi người dùng thao tác */ html body.single-product .pswp.pswp--open.tsv-pswp-arrows-active .pswp__ui button.pswp__button--arrow--left, html body.single-product .pswp.pswp--open.tsv-pswp-arrows-active .pswp__ui button.pswp__button--arrow--right { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Giữ nguyên kích thước icon khi bấm */ button.pswp__button--arrow--left:is( :hover, :focus, :focus-visible, :active ), button.pswp__button--arrow--right:is( :hover, :focus, :focus-visible, :active ) { background-position: 50% 50% !important; background-size: var(--tsv-pswp-arrow-icon-size) var(--tsv-pswp-arrow-icon-size) !important; } /* ================================================= 13.2. TỐI ƯU CẢM ỨNG CHO MỌI MŨI TÊN ================================================= */ body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery, .flickity-slider-main ) .flickity-prev-next-button, .tsv-seo-gallery__nav, .tsv-seo-lightbox__nav, .tsv-buy-image-preview-nav, button.pswp__button--arrow--left, button.pswp__button--arrow--right { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } /* ================================================= 13.3. NÚT CHỨC NĂNG PHOTOSWIPE GÓC TRÊN ================================================= */ button.pswp__button--close, button.pswp__button--fs, button.pswp__button--zoom { background-color: var(--tsv-mobile-action-bg) !important; border-color: var(--tsv-mobile-action-border) !important; border-radius: 5px !important; box-shadow: var(--tsv-mobile-action-shadow) !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } button.pswp__button--close:is( :hover, :focus, :focus-visible, :active ), button.pswp__button--fs:is( :hover, :focus, :focus-visible, :active ), button.pswp__button--zoom:is( :hover, :focus, :focus-visible, :active ) { background-color: var(--tsv-mobile-action-bg) !important; border-color: var(--tsv-mobile-action-border) !important; box-shadow: var(--tsv-mobile-action-shadow) !important; } /* ================================================= 13.4. ĐỒNG NHẤT TẤT CẢ NÚT ĐÓNG X Dùng selector đủ mạnh để không bị CSS cũ ghi đè. ================================================= */ :is( .tsv-buy-popup-close, .tsv-buy-image-preview .tsv-buy-image-preview-close, .tsv-seo-lightbox__close, button.pswp__button--close ) { width: var(--tsv-mobile-action-control-size) !important; min-width: var(--tsv-mobile-action-control-size) !important; max-width: var(--tsv-mobile-action-control-size) !important; height: var(--tsv-mobile-action-control-size) !important; min-height: var(--tsv-mobile-action-control-size) !important; max-height: var(--tsv-mobile-action-control-size) !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background-color: var(--tsv-mobile-action-bg) !important; background-image: none !important; border: 1px solid var(--tsv-mobile-action-border) !important; border-radius: 5px !important; box-shadow: var(--tsv-mobile-action-shadow) !important; box-sizing: border-box !important; overflow: visible !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; transition: none !important; animation: none !important; filter: none !important; } :is( .tsv-buy-popup-close, .tsv-buy-image-preview .tsv-buy-image-preview-close, .tsv-seo-lightbox__close, button.pswp__button--close ):is( :hover, :focus, :focus-visible, :active ) { color: #ffffff !important; background-color: var(--tsv-mobile-action-bg) !important; border-color: var(--tsv-mobile-action-border) !important; border-radius: 5px !important; box-shadow: var(--tsv-mobile-action-shadow) !important; outline: 0 !important; outline-offset: 0 !important; } /* Icon X trắng dùng chung */ :is( .tsv-buy-popup-close, .tsv-buy-image-preview .tsv-buy-image-preview-close, .tsv-seo-lightbox__close, button.pswp__button--close )::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; z-index: 2 !important; display: block !important; width: var(--tsv-mobile-close-icon-size) !important; height: var(--tsv-mobile-close-icon-size) !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: 100% 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: translate(-50%, -50%) !important; transform-origin: 50% 50% !important; pointer-events: none !important; } /* PhotoSwipe không dùng ::before làm vùng chạm mở rộng */ button.pswp__button--close::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; pointer-events: none !important; } /* ================================================= 13.5. VÙNG CHẠM 44PX CHO NÚT X ĐỨNG RIÊNG Nút nhìn vẫn giữ kích thước 23px/24px. Vùng ngón tay có thể bấm được mở rộng thành 44px. ================================================= */ :is( .tsv-buy-popup-close, .tsv-buy-image-preview .tsv-buy-image-preview-close, .tsv-seo-lightbox__close )::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; z-index: 1 !important; display: block !important; width: var(--tsv-mobile-isolated-hit-size) !important; height: var(--tsv-mobile-isolated-hit-size) !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; transform: translate(-50%, -50%) !important; transform-origin: 50% 50% !important; pointer-events: auto !important; } /* ================================================= 13.6. VỊ TRÍ NÚT ĐÓNG CÁC LIGHTBOX ================================================= */ .tsv-buy-image-preview .tsv-buy-image-preview-close { top: 5px !important; right: 5px !important; } /* ================================================= 13.7. LIGHTBOX SEO MOBILE ================================================= */ } /* ===================================================== 14. MOBILE NHỎ Mũi tên: - Nút: 22 × 22px - Icon: 6 × 6px Nút chức năng: - Nút: 23 × 23px - Icon đóng: 9 × 9px ===================================================== */ @media only screen and (max-width: 390px) { :root { --tsv-mobile-arrow-control-size: 22px; --tsv-mobile-arrow-icon-size: 6px; --tsv-mobile-action-control-size: 23px; --tsv-mobile-close-icon-size: 9px; } /* PhotoSwipe sát mép hơn trên màn hình nhỏ */ button.pswp__button--arrow--left { left: 7px !important; } button.pswp__button--arrow--right { right: 7px !important; } /* Giữ vị trí nút đóng ổn định */ .tsv-seo-lightbox__close, .tsv-buy-image-preview .tsv-buy-image-preview-close { top: 5px !important; right: 5px !important; } } /* ===================================================== 15. FOCUS BẰNG BÀN PHÍM ===================================================== */ :is( .tsv-buy-popup-close, .tsv-buy-image-preview-nav, .tsv-seo-gallery__nav, .tsv-seo-lightbox__nav, .pswp__button--fs, .pswp__button--zoom, .pswp__button--arrow--left, .pswp__button--arrow--right ):focus-visible, body.single-product :is( .product-gallery, .product-gallery-slider, .woocommerce-product-gallery, .flickity-slider-main ) .flickity-prev-next-button:focus-visible { outline: 2px solid rgba(30, 123, 232, 0.5) !important; outline-offset: 2px !important; } /* Nút đóng chỉ dùng một lớp viền. */ :is( .tsv-seo-lightbox__close, .tsv-buy-image-preview-close, .pswp__button--close ):focus-visible { outline: 0 !important; outline-offset: 0 !important; }