/*!
Theme Name: Blocksy
Theme URI: https://creativethemes.com/blocksy/
Author: CreativeThemes
Author URI: https://creativethemes.com
Description: Blocksy is a fast, modern WordPress theme with advanced WooCommerce support and full compatibility with the block editor.
Version: 2.1.42
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Copyright: (c) 2019 CreativeThemes.
Requires at least: 6.5
Requires PHP: 7.0
Tested up to: 7.0
Text Domain: blocksy
Blocksy Minimum Companion Version: 2.1.36-dev1
Tags: accessibility-ready, blog, block-patterns, e-commerce, wide-blocks, block-styles, grid-layout, one-column, two-columns, three-columns, four-columns, right-sidebar, left-sidebar, translation-ready, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments
*/


/* === Hover đổi ảnh thẻ sản phẩm (ảnh chính ↔ ảnh phụ) — chuẩn gu Andras ===
   Áp dụng đồng bộ cho MỌI khu hiển thị product card (đều render qua Views/Shared/_ProductCard.cshtml).
   - Desktop (thiết bị có hover): 2 ảnh xếp chồng; hover thì ảnh chính mờ đi, ảnh phụ hiện mượt kèm zoom nhẹ.
   - Mobile/cảm ứng: ẩn HẲN ảnh phụ (display:none) ⇒ IntersectionObserver không tải ảnh phụ về,
     chỉ còn ảnh chính, tối ưu tốc độ tải trang & dung lượng mạng.
   Selector cố tình cao specificity (kèm .ct-media-container / img) để thắng main.min.css dù nạp sau. */

/* Mặc định (thiết bị không hover được): không render ảnh phụ ⇒ không tải về. */
[data-hover="swap"] .ct-media-container img.ct-swap {
    display: none;
}

@media (hover: hover) {
    /* Ảnh phụ chồng khít lên ảnh chính, ẩn sẵn (opacity 0). */
    [data-hover="swap"] .ct-media-container img.ct-swap {
        display: block;
        position: absolute;
        inset: 0;
        opacity: 0;
    }
    /* Transition mượt cho cả hai ảnh: opacity + transform 0.5s, không giật khựng. */
    [data-hover="swap"] .ct-media-container img.ct-swap,
    [data-hover="swap"] .ct-media-container img.ct-swap + img {
        transition: opacity .5s ease, transform .5s ease;
        will-change: opacity, transform;
    }
    /* Hover bất kỳ vị trí nào trên thẻ: hiện ảnh phụ kèm phóng to nhẹ (scale 1.05), ẩn ảnh chính. */
    [data-hover="swap"] .ct-media-container.has-hover-effect:hover img.ct-swap {
        opacity: 1;
        transform: scale(1.05);
    }
    [data-hover="swap"] .ct-media-container.has-hover-effect:hover img.ct-swap + img {
        opacity: 0;
    }
}

/* === Khối "SẢN PHẨM BẠN VỪA XEM" (recently-viewed.js render từ localStorage) ===
   Dùng ĐÚNG khung "Các lựa chọn nổi bật": heading .title-all + carousel .dienngo-product-carousel > .products.columns-4
   → kế thừa 100% style/lưới của theme (gồm cả responsive), chỉ cần khoảng cách ngoài cho container. */
.oe-recently-viewed { margin: 3rem 0 1rem; }