/* === WooCommerce Upsell Products Styles === */

/* Slider Container */
.upsell-products-slider {
    margin: 0 -10px; /* Bù trừ khoảng cách padding của cột */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* Hiển thị mượt mà sau khi JS load xong */
.upsell-products-slider.slick-initialized {
    opacity: 1;
    visibility: visible;
}

/* Individual Product Item */
.upsell-products-slider .product {
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    padding: 0 10px; /* Thay thế thuộc tính gap */
    overflow: hidden;
    box-sizing: border-box;
}

/* Product Title */
.upsell-products-slider .woocommerce-loop-product__title {
    font-size: 14px;
    margin: 10px 0 5px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 0;
}

/* Product Price */
.upsell-products-slider .price {
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0;
    color: #000;
}

/* Căn chỉnh ảnh bên trong Flatsome/WooCommerce cho đồng đều */
.upsell-products-slider .product img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Responsive Styling */
@media (max-width: 1024px) {
    .upsell-products-slider .product { font-size: 13px; }
}
@media (max-width: 768px) {
    .upsell-products-slider .product { font-size: 12px; }
}
@media (max-width: 480px) {
    .upsell-products-slider .product { font-size: 12px; }
    .upsell-products-slider .woocommerce-loop-product__title { -webkit-line-clamp: 2; }
}
/* === Tùy chỉnh Mũi tên (Arrows) cho Slider === */

/* Tạo khoảng trống 2 bên để mũi tên không đè lên sản phẩm */
.upsell-products-slider {
    padding: 0 20px; 
    position: relative;
}

/* Nút bấm mũi tên */
.upsell-products-slider .slick-prev,
.upsell-products-slider .slick-next {
    width: 36px;
    height: 36px;
    z-index: 10;
    background: #fff; /* Nền nút màu trắng */
    border-radius: 50%; /* Bo tròn nút */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Tạo bóng đổ nhẹ cho nút nổi lên */
    opacity: 0.5; /* Hơi mờ mờ khi không dùng */
    transition: all 0.3s ease;
}

/* Khi rê chuột vào thì mũi tên rõ lên */
.upsell-products-slider .slick-prev:hover,
.upsell-products-slider .slick-next:hover {
    opacity: 1;
    background: #f1f1f1;
}

/* Vị trí của mũi tên */
.upsell-products-slider .slick-prev { left: -10px; }
.upsell-products-slider .slick-next { right: -10px; }

/* SỬ DỤNG KÝ TỰ UNICODE THAY CHO FONT SLICK ĐỂ KHÔNG BAO GIỜ LỖI */
.upsell-products-slider .slick-prev:before {
    content: '❮'; /* Ký tự mũi tên trái */
    color: #333; /* Màu xám đen */
    font-size: 16px;
    line-height: 36px;
    opacity: 1;
    display: block;
    text-align: center;
}

.upsell-products-slider .slick-next:before {
    content: '❯'; /* Ký tự mũi tên phải */
    color: #333; /* Màu xám đen */
    font-size: 16px;
    line-height: 36px;
    opacity: 1;
    display: block;
    text-align: center;
}

/* Ẩn chữ "Previous" và "Next" mặc định của trình duyệt màn hình (nếu có) */
.upsell-products-slider .slick-prev:hover:before, 
.upsell-products-slider .slick-next:hover:before {
    color: #000;
}