/* Layout lưới thông minh */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Card sản phẩm xịn mịn */
.product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .product-card:hover {
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        transform: translateY(-5px);
    }

.product-img-wrapper {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
}

    .product-img-wrapper img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

 /* Tăng chiều cao để tên sản phẩm hiển thị đủ 2 dòng không bị cắt chữ */
.product-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5; /* Khoảng cách giữa 2 dòng */
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ép tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 48px; /* TĂNG THÔNG SỐ NÀY LÊN ĐỂ KHÔNG BỊ CẮT CHỮ */
}

/* Dàn hàng ngang cho các nút Mua / Xem */
.product-actions {
    display: flex;
    justify-content: space-between; /* Đẩy 2 nút ra 2 góc */
    align-items: center;
    gap: 10px;
    margin-top: auto; /* Đẩy cụm nút xuống đáy thẻ */
}

    /* Biến chữ Mua/Xem thành nút bấm đàng hoàng (nếu bạn chưa có class này) */
    .product-actions a {
        display: inline-block;
        padding: 8px 15px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
        flex: 1; /* Cho 2 nút rộng bằng nhau */
    }

        /* Thêm màu cho nút để phân biệt */
        .product-actions a:first-child {
            background: #28a745;
            color: white;
        }
        /* Nút Mua màu xanh */
        .product-actions a:last-child {
            background: #6c757d;
            color: white;
        }
/* Nút Xem màu xám */
/* Thay .product-title bằng tên class tương ứng trong thẻ <h4> hoặc <a> chứa tên SP của bạn */
.product-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
    /* BẮT ĐẦU ĐOẠN CẮT CHỮ TỰ ĐỘNG */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Giới hạn tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Chốt chiều cao cố định để các ô sản phẩm bằng nhau (16px * 1.4 * 2 dòng = ~45px) */
    min-height: 45px;
}

.product-price {
    color: #e74c3c;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 15px;
    text-align: center;
}



.btn-buy-now {
    flex: 3;
    background: #2E7D32;
    color: #fff !important;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
}

.btn-detail {
    flex: 1;
    background: #f1f2f6;
    color: #2f3542 !important;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
}

/* Style cho thanh phân trang */
.pagination-wrapper {
    text-align: center;
    margin-top: 40px;
}

    .pagination-wrapper ul {
        display: inline-flex;
        padding-left: 0;
        list-style: none;
    }

    .pagination-wrapper li {
        margin: 0 5px;
    }

        .pagination-wrapper li a {
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #2E7D32;
        }

        .pagination-wrapper li.active span {
            background: #2E7D32;
            color: #fff;
            padding: 8px 16px;
            border-radius: 4px;
        }
/* =========================================================
   FIX LỖI BỐ CỤC THẺ SẢN PHẨM & NÚT BẤM
   ========================================================= */

/* 1. Ép các thẻ sản phẩm luôn cao bằng nhau */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    /* Thêm shadow và border r bo góc nếu bạn chưa có */
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
}

.product-info {
    display: flex;
    flex-direction: column;
    flex: 1; /* Chiếm hết phần không gian còn dư */
}



.product-price {
    color: #e74c3c;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
}



/* 4. Định dạng chung cho các nút */
.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 4px;
    color: #fff !important; /* Ép màu chữ trắng */
    text-decoration: none !important; /* Bỏ gạch chân */
    transition: 0.2s;
    border: none;
}

    .btn-action:hover {
        opacity: 0.8;
        transform: translateY(-2px); /* Hiệu ứng nảy nhẹ khi rà chuột */
    }

/* 5. Định dạng riêng cho từng nút */
.btn-buy {
    background-color: #28a745;
    flex: 2; /* Cho nút Mua rộng gấp đôi 2 nút kia */
}

    .btn-buy span {
        margin-left: 6px;
        font-weight: bold;
    }

.btn-add {
    background-color: #f39c12;
    flex: 1;
}

.btn-view {
    background-color: #6c757d;
    flex: 1;
}
/* =========================================================
   STYLE CHO THẺ SẢN PHẨM Ở TRANG CHỦ
   ========================================================= */

/* Xử lý tên sản phẩm: Tự động cắt 2 dòng có dấu 3 chấm */
.product-title {
    font-size: 16px;
    margin: 15px 0 10px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 45px; /* Giữ khung đủ cao cho 2 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ép hiển thị tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    color: #333;
}
/*========================================================================================================================*/
/* Container chứa nút */
.product-actions-group {
    display: flex;
    gap: 8px;
    margin-top: auto; /* Đẩy cụm nút xuống đáy thẻ card */
    align-items: stretch;
}

/* Nút bấm chung */
.btn-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important; /* Chiều cao cố định */
    border-radius: 5px !important;
    text-decoration: none !important;
    color: #fff !important;
    border: none !important;
    padding: 0 10px !important;
}

    /* Ép chữ MUA nằm giữa, không rớt dòng, không mất nét */
    .btn-action span {
        font-size: 13px !important;
        font-weight: bold !important;
        margin-left: 5px !important;
        line-height: 1 !important; /* Reset line-height */
        display: inline-block !important;
    }

/* Màu sắc */
.buy-now {
    background-color: #28a745 !important;
    flex: 2;
}

.detail {
    background-color: #6c757d !important;
    flex: 1;
}

/* Tên sản phẩm cắt 2 dòng */
.product-title {
    font-size: 15px;
    font-weight: 600;
    min-height: 42px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 10px 0;
}
.product-img-wrapper {
    position: relative;
}
/* Cần dòng này để định vị nhãn */

.badge-new {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 20px;
    z-index: 2;
    text-transform: uppercase;
}
/*TÔI ƯU CHO ĐT*/
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* 1 hàng 2 cột trên điện thoại */
        gap: 10px;
        padding: 10px;
    }

    .product-card {
        padding: 10px;
    }

    .btn-action span {
        display: none;
    }
    /* Trên mobile chỉ hiện icon cho đỡ chật */

    .product-img-wrapper {
        height: 140px;
    }
}
/*PHÂN TRANG */
/* ==========================================================
   CSS ĐỊNH DẠNG THANH PHÂN TRANG (PAGEDLIST) CHO ĐẸP VÀ THẲNG HÀNG NGANG
   ========================================================== */
.MenuTrang {
    display: flex;
    justify-content: center; /* Đưa thanh phân trang ra căn giữa màn hình */
    margin-top: 30px;
    margin-bottom: 20px;
}

    .MenuTrang ul {
        display: flex !important; /* Ép buộc các thẻ li phải xếp theo hàng ngang */
        list-style-type: none; /* Xóa bỏ dấu chấm tròn đầu dòng của danh sách */
        padding: 0;
        margin: 0;
        gap: 8px; /* Tạo khoảng cách vừa phải giữa các ô số trang */
    }

    .MenuTrang li {
        display: inline-block;
    }

        .MenuTrang li a, .MenuTrang li span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            padding: 0 10px;
            border: 1px solid #e2e8f0;
            border-radius: 6px; /* Bo góc nhẹ cho giống các nút bấm hiện đại */
            color: #475569;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
            background-color: #ffffff;
        }

            /* Hiệu ứng khi rê chuột vào các ô số trang */
            .MenuTrang li a:hover {
                background-color: var(--primary-color, #28a745); /* Đổi sang màu xanh lá thương hiệu */
                color: white !important;
                border-color: var(--primary-color, #28a745);
            }

        /* Định dạng riêng cho ô số trang đang được chọn (Trang hiện tại) */
        .MenuTrang li.active span, .MenuTrang li.active a {
            background-color: var(--primary-color, #28a745) !important;
            color: white !important;
            border-color: var(--primary-color, #28a745) !important;
            cursor: default;
        }

        /* Định dạng cho các nút tiến, lùi bị ẩn */
        .MenuTrang li.disabled span {
            color: #cbd5e1;
            background-color: #f8fafc;
            border-color: #e2e8f0;
            cursor: not-allowed;
        }