/* CSS cho thư viện ảnh sản phẩm */
.product-gallery-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}
.thumbnail-item {
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}
.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumbnail-item:hover {
    border-color: #ddd;
}
.thumbnail-item.active {
    border-color: #d70018; /* Màu đỏ primary */
}

#product-detail-page-container .product-gallery-thumbs {
    height: 70px; /* Try adjusting: 60px slide height + 10px padding-bottom? */
    box-sizing: border-box;
    padding: 5px 0; /* Adjust padding if needed */
    margin-top: 10px;
    overflow: hidden; /* Prevent potential overflow issues */
}

/* THAY THẾ STYLE CŨ BẰNG ĐOẠN NÀY */
#product-detail-page-container .product-gallery-thumbs .swiper-slide {
    width: 60px !important; /* Độ rộng cố định cho mỗi thumbnail */
    height: 60px !important; /* Chiều cao cố định (có thể bằng width để vuông) */
    opacity: 0.6;
    transition: opacity 0.3s, border-color 0.3s; /* Thêm transition cho border */
    cursor: pointer;
    position: relative;
    border: 2px solid transparent; /* Thêm border mặc định */
    border-radius: 0.375rem; /* rounded-md */
    overflow: hidden; /* Đảm bảo ảnh không tràn viền */
}

#product-detail-page-container .product-gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border-color: #3b82f6; /* border-blue-500 */
}

#product-detail-page-container .product-gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh lấp đầy khung */
    /* border-radius: 0.25rem; */ /* Không cần nếu slide đã có border-radius */
}

#product-detail-page-container .summary-collapsed {
    max-height: 110px; /* Adjust height as needed */
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease-out;
}
/* The fade effect at the bottom */
#product-detail-page-container .summary-collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px; /* Height of the fade */
    background: linear-gradient(to top, rgb(248 250 252), rgba(248, 250, 252, 0)); /* Match your bg-gray-50 */
    pointer-events: none;
}

/* Style for the expanded summary state (copied from template.php) */
#product-detail-page-container .summary-expanded {
    max-height: 600px; /* Allow enough height */
    transition: max-height 0.4s ease-in;
}
/* Remove fade when expanded */
#product-detail-page-container .summary-expanded::after {
    display: none;
}

/* Ensure buttons are initially hidden correctly if JS adds/removes 'hidden' */
#summary-show-less-btn.hidden,
#summary-show-more-btn.hidden {
 display: none;
}