/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */
/**

/* Áp dụng cho tất cả các trang trừ trang chi tiết sản phẩm */
body:not(.single-product) form.cart {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: start;
}
@media (max-width: 689.98px) {
    body:not(.single-product) form.cart {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
}

body:not(.single-product) .quantity {
  height: 36px !important;
  width: 90px !important;
  vertical-align: middle;
}

body:not(.single-product) button.button.alt {
  height: 36px;
  vertical-align: middle;
}

/* Áp dụng cho form giỏ hàng trong các phần liên quan */
.related.products form.cart,
.up-sells.products form.cart,
.cross-sells form.cart {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: start;
}

/* Áp dụng cho phần số lượng trong các phần liên quan */
.related.products .quantity,
.up-sells.products .quantity,
.cross-sells .quantity {
  height: 36px !important;
  width: 90px !important;
  vertical-align: middle;
}

/* Áp dụng cho nút trong các phần liên quan */
.related.products button.button.alt,
.up-sells.products button.button.alt,
.cross-sells button.button.alt {
  height: 36px;
  vertical-align: middle;
}

h2.woocommerce-loop-product__title {
    margin-top: 20px !important;
}
.ct-woocommerce-cart-form.ct-cart-auto-update form table tbody td.product-name a {
    font-weight: 700;
    font-size: 16px !important;
    --theme-link-initial-color: var(--theme-text-color);
}

/* Kiểu chính cho icon Zalo */
.zalo-chat-icon {
    position: fixed;
    bottom: 85px;
    right: 20px; /* Hoặc left: 20px nếu muốn bên trái */
    z-index: 9999;
    width: 50px;
    height: 50px;
}

.zalo-chat-icon img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 2px solid #0068FF; /* Viền Zalo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

/* Hiệu ứng gợn sóng */
.zalo-chat-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 104, 255, 0.3); /* Màu Zalo mờ */
    animation: ripple 2s infinite ease-out;
    z-index: 1;
}

.zalo-chat-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 104, 255, 0.2); /* Lớp sóng thứ hai, mờ hơn */
    animation: ripple 2s infinite ease-out 0.5s; /* Trễ 0.5s để tạo tầng sóng */
    z-index: 1;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2.5); /* Kích thước lan tỏa */
        opacity: 0; /* Mờ dần */
    }
}

/* Hiệu ứng khi hover */
.zalo-chat-icon:hover img {
    border-color: #0068ff; /* Đổi màu viền khi hover */
    box-shadow: 0 0 15px #0068ff;
    transform: scale(1.1); /* Phóng to nhẹ */
}

/* Responsive cho tablet */
@media (min-width: 689px) and (max-width: 991px) {
    .zalo-chat-icon {
        width: 45px;
        height: 45px;
        bottom: 65px;
        right: 15px;
    }
}

/* Responsive cho mobile */
@media (max-width: 688px) {
    .zalo-chat-icon {
        width: 40px;
        height: 40px;
        bottom: 65px;
        right: 10px;
    }
}