/*
 * LƯỚI SẢN PHẨM TRANG CHỦ (4x4 CÓ THANH CUỘN NỘI BỘ - "THANH KÉO TRONG THANH KÉO")
 *
 * - Hiển thị chuẩn 4 cột trên giao diện máy tính (4x4), tránh hình ảnh bị kéo giãn quá to khi có ít sản phẩm.
 * - Giới hạn chiều cao tối đa tương ứng với 4 hàng sản phẩm (16 sản phẩm hiển thị cùng lúc).
 * - Nếu danh mục có nhiều hơn 16 sản phẩm, xuất hiện thanh kéo dọc bên trong khung (thanh kéo trong thanh kéo)
 *   giúp xem tiếp các hàng dưới mà không làm trang chủ bị dài thượt.
 */

/* ==========================================================================
 * THANH XANH ĐẦU TRANG (breadcrumb) TRÊN ĐIỆN THOẠI
 *
 * Trên màn hình nhỏ, thanh này chiếm gần nửa màn hình vì:
 *   - tiêu đề "Sản phẩm" để cỡ 30px
 *   - đường dẫn viết HOA toàn bộ, tên sản phẩm dài nên xuống 3 dòng
 * Thu gọn lại để khách thấy ngay sản phẩm mà không phải cuộn.
 * ========================================================================== */
@media (max-width: 767px) {
    .box-breadcrumb {
        padding: 10px 0 !important;
    }
    .box-breadcrumb .block-title h3 {
        font-size: 19px !important;
        line-height: 24px !important;
        padding-top: 0 !important;
    }
    .box-breadcrumb .breadcrumb {
        text-align: left !important;
        text-transform: none !important;   /* bỏ viết hoa cho đỡ chiếm chỗ */
        padding: 4px 0 0 !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }
    .box-breadcrumb .breadcrumb > li > a,
    .box-breadcrumb .breadcrumb > li {
        font-size: 12px !important;
    }
    /*
     * Ẩn mục cuối - chính là tên sản phẩm đang xem, thường rất dài.
     * Tên này đã hiện ngay bên dưới dưới dạng tiêu đề chính nên không cần lặp lại.
     */
    .box-breadcrumb .breadcrumb > li.active {
        display: none !important;
    }
}

/* Hàng danh mục con nằm ngang dưới tiêu đề, thay cho cột trái cũ */
.hang-muc-con {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}
.hang-muc-con a {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid rgba(128, 128, 128, .35);
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.hang-muc-con a:hover {
    background: rgba(128, 128, 128, .15);
    text-decoration: none;
}
[data-theme="dark"] .hang-muc-con a { border-color: rgba(255, 255, 255, .22); }

.rows-catelogies-product {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Chuẩn 4 cột cố định cho máy tính */
    gap: 20px;
    margin: 0 !important;   /* bỏ margin âm vốn dành cho slick */
    max-height: 1480px;     /* Giới hạn chiều cao tối đa 4 hàng (4x4 = 16 sản phẩm) */
    overflow-y: auto;       /* Thanh cuộn dọc nội bộ (thanh kéo trong thanh kéo) */
    padding-right: 6px;     /* Nhường khoảng trống cho thanh cuộn */
}

/* Tùy chỉnh thanh kéo cuộn nội bộ cho đẹp mắt, mượt mà */
.rows-catelogies-product::-webkit-scrollbar {
    width: 8px;
}
.rows-catelogies-product::-webkit-scrollbar-track {
    background: rgba(128, 128, 128, 0.15);
    border-radius: 4px;
}
.rows-catelogies-product::-webkit-scrollbar-thumb {
    background: #4a9eff;
    border-radius: 4px;
}
.rows-catelogies-product::-webkit-scrollbar-thumb:hover {
    background: #2b84f0;
}

/* Mỗi sản phẩm nằm trong 1 thẻ div trống bọc ngoài */
.rows-catelogies-product > div {
    padding: 0 !important;
    min-width: 0;           /* cho phép chữ dài xuống dòng, không đẩy vỡ cột */
}

.rows-catelogies-product .product-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Khống chế khung hình ảnh của tất cả thẻ sản phẩm (.product-item) để hình ảnh KHÔNG BAO GIỜ bị kéo giãn lên quá to */
.product-item .block-images,
.rows-catelogies-product .product-item .block-images {
    position: relative !important;
    height: 185px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.product-item .block-images img,
.rows-catelogies-product .product-item .block-images img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Tên sản phẩm dài thì xuống dòng, giới hạn 3 dòng cho đều nhau */
.rows-catelogies-product .product-item .block-content h3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Máy tính bảng: 3 cột */
@media (max-width: 991px) {
    .rows-catelogies-product {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        max-height: 1300px;
    }
}

/* Điện thoại: 2 cột cho dễ bấm */
@media (max-width: 575px) {
    .rows-catelogies-product {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-height: 1100px;
    }
    .rows-catelogies-product .product-item .block-content h3 {
        font-size: 14px;
        line-height: 1.4;
    }
    .product-item .block-images,
    .rows-catelogies-product .product-item .block-images {
        height: 150px !important;
    }
}

/*
 * Phòng khi slick vẫn chạy ở đâu đó (bộ nhớ đệm JS cũ chẳng hạn):
 * ép các lớp của slick trở về dạng khối bình thường để không vỡ lưới.
 */
/*
 * QUAN TRỌNG: khi slick còn chạy, nó bọc sản phẩm vào 2 lớp trung gian:
 *     .rows-catelogies-product > .slick-list > .slick-track > .slick-slide
 * Lúc đó lưới chỉ nhìn thấy DUY NHẤT 1 ô con (.slick-list) nên ra 1 cột.
 *
 * Dùng display:contents để 2 lớp trung gian "tàng hình" về mặt bố cục,
 * các .slick-slide trở thành ô con trực tiếp của lưới -> lại đủ 4 cột.
 */
.rows-catelogies-product .slick-list,
.rows-catelogies-product .slick-track {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
}
.rows-catelogies-product .slick-slide {
    float: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Slick nhân bản slide để chạy vòng lặp vô tận - ẩn bản sao đi cho khỏi trùng */
.rows-catelogies-product .slick-slide.slick-cloned { display: none !important; }

/* ---------- KHỐI CHI TIẾT SẢN PHẨM: KHỐNG CHẾ HÌNH ẢNH CHÍNH KHÔNG BỊ KÉO LÊN QUÁ TO ---------- */
.single-detail-product .detail-product--slider-producted .slider-producted {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-height: 380px !important;
    overflow: hidden !important;
    background: #fff;
    border-radius: 6px;
}

[data-theme="dark"] .single-detail-product .detail-product--slider-producted .slider-producted {
    background: var(--nen-2);
}

.single-detail-product .detail-product--slider-producted .slider-producted img {
    max-height: 360px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* ---------- KHỐI SẢN PHẨM LIÊN QUAN TRONG TRANG CHI TIẾT ---------- */
.box-product-related .row {
    max-height: 850px;
    overflow-y: auto;
    margin-right: 0;
    margin-left: 0;
}
.box-product-related .row::-webkit-scrollbar {
    width: 8px;
}
.box-product-related .row::-webkit-scrollbar-track {
    background: rgba(128, 128, 128, 0.15);
    border-radius: 4px;
}
.box-product-related .row::-webkit-scrollbar-thumb {
    background: #4a9eff;
    border-radius: 4px;
}