/*
|--------------------------------------------------------------------------
| TLMS PRODUCTS MOBILE - 3 COLUMNS
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {
    /*
    | Khung danh sách: luôn 3 sản phẩm mỗi hàng
    */
    .catalog-grid,
    .products-grid,
    .product-grid,
    .tlms-product-grid {
        display: grid !important;
        width: 100% !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    /*
    | Thẻ sản phẩm
    */
    .catalog-product-card,
    .catalog-card,
    .product-card,
    .tlms-product-card {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 10px !important;
        box-shadow:
            0 3px 9px rgba(15, 23, 42, .08) !important;
    }

    /*
    | Ảnh sản phẩm
    */
    .catalog-product-image,
    .catalog-product-placeholder,
    .product-image,
    .product-placeholder,
    .tlms-product-image,
    .tlms-product-placeholder {
        display: flex !important;
        width: 100% !important;
        height: 92px !important;
        min-height: 92px !important;
        align-items: center !important;
        justify-content: center !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        font-size: 21px !important;
    }

    img.catalog-product-image,
    img.product-image,
    img.tlms-product-image {
        object-fit: cover !important;
    }

    /*
    | Nội dung trong thẻ
    */
    .catalog-product-body,
    .catalog-card-body,
    .product-body,
    .tlms-product-body {
        display: flex !important;
        min-width: 0 !important;
        height: calc(100% - 92px) !important;
        flex-direction: column !important;
        padding: 6px !important;
    }

    /*
    | Nhãn kho và danh mục
    */
    .catalog-product-type,
    .catalog-product-badge,
    .product-type,
    .product-badge,
    .product-category,
    .tlms-product-type,
    .tlms-product-badge {
        align-self: flex-start !important;
        max-width: 100% !important;
        margin-bottom: 4px !important;
        padding: 2px 4px !important;
        overflow: hidden !important;
        border-radius: 4px !important;
        font-size: 6.5px !important;
        line-height: 1.15 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /*
    | Tên sản phẩm: tối đa hai dòng
    */
    .catalog-product-name,
    .product-name,
    .tlms-product-name {
        display: -webkit-box !important;
        min-height: 25px !important;
        max-height: 25px !important;
        margin: 0 0 4px !important;
        overflow: hidden !important;
        color: #111111 !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    /*
    | Giá bán
    */
    .catalog-product-price,
    .product-price,
    .tlms-product-price {
        margin: 2px 0 3px !important;
        color: #a56f00 !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    /*
    | Bảo hành, tồn kho và thông tin phụ
    */
    .catalog-product-warranty,
    .catalog-product-stock,
    .catalog-product-extra,
    .product-warranty,
    .product-stock,
    .product-extra,
    .tlms-product-warranty,
    .tlms-product-stock,
    .tlms-product-extra {
        margin: 1px 0 !important;
        font-size: 7px !important;
        line-height: 1.2 !important;
    }

    /*
    | Ẩn mô tả dài để thẻ không bị cao và rối
    */
    .catalog-product-description,
    .product-description,
    .tlms-product-description {
        display: none !important;
    }

    /*
    | Đưa nhóm nút xuống cuối thẻ
    */
    .catalog-product-body > a:first-of-type,
    .catalog-card-body > a:first-of-type,
    .product-body > a:first-of-type,
    .tlms-product-body > a:first-of-type {
        margin-top: auto !important;
    }

    /*
    | Nút Xem chi tiết và Bán ngay
    */
    .catalog-product-card a,
    .catalog-card a,
    .product-card a,
    .tlms-product-card a,
    .product-link,
    .tlms-sale-now-button,
    .tlms-quick-sale-v3,
    .tlms-admin-sale-now {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 28px !important;
        margin-top: 4px !important;
        padding: 5px 2px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /*
    | Không cho nội dung làm vỡ cột
    */
    .catalog-product-card *,
    .catalog-card *,
    .product-card *,
    .tlms-product-card * {
        min-width: 0;
        box-sizing: border-box;
    }
}

/*
|--------------------------------------------------------------------------
| Điện thoại nhỏ
|--------------------------------------------------------------------------
*/

@media (max-width: 374px) {
    .catalog-grid,
    .products-grid,
    .product-grid,
    .tlms-product-grid {
        gap: 5px !important;
    }

    .catalog-product-image,
    .catalog-product-placeholder,
    .product-image,
    .product-placeholder,
    .tlms-product-image,
    .tlms-product-placeholder {
        height: 82px !important;
        min-height: 82px !important;
        font-size: 19px !important;
    }

    .catalog-product-body,
    .catalog-card-body,
    .product-body,
    .tlms-product-body {
        height: calc(100% - 82px) !important;
        padding: 5px !important;
    }

    .catalog-product-name,
    .product-name,
    .tlms-product-name {
        min-height: 23px !important;
        max-height: 23px !important;
        font-size: 9.5px !important;
    }

    .catalog-product-price,
    .product-price,
    .tlms-product-price {
        font-size: 11.5px !important;
    }

    .catalog-product-card a,
    .catalog-card a,
    .product-card a,
    .tlms-product-card a,
    .product-link,
    .tlms-sale-now-button,
    .tlms-quick-sale-v3,
    .tlms-admin-sale-now {
        min-height: 26px !important;
        font-size: 7.4px !important;
    }
}