/* ========================================================
   GIAO DIỆN CARD SPA: CỐ ĐỊNH CHUẨN 2 DÒNG CHO CẢ DESKTOP & MOBILE
   ======================================================== */

/* 1. Khung Card Tổng Thể */
.product-small .col-inner {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #eaeaea; /* Viền mờ tinh tế */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: visible !important; /* QUAN TRỌNG: Giữ tag Best Seller lồi ra */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center; /* Căn giữa toàn bộ */
}

/* Hiệu ứng nhô lên khi rà chuột */
.product-small:hover .col-inner {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

/* 2. Bo góc trên cho phần Ảnh */
.product-small .box-image {
    border-radius: 12px 1px 0 0;
    overflow: hidden;
}

/* 3. Khối chữ bên trong (Box Text) */
.product-small .box-text {
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Chiếm hết chiều cao để đẩy giá xuống */
}

/* 4. Khối chứa Mô tả ngắn & Giá (Ghim xuống đáy) */
.product-small .price-wrapper {
    margin-top: auto; /* Tự động đẩy cụm (Mô tả + Giá) xuống thẳng hàng ở đáy */
}


/* ========================================================
   CỐ ĐỊNH CHUẨN 2 DÒNG (TITLE & SHORT DESCRIPTION)
   ======================================================== */

/* TIÊU ĐỀ SẢN PHẨM (TITLE) */
.product-small .product-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    
    /* Thuật toán ÉP CỨNG 2 DÒNG */
    line-height: 1.4em;       /* Chiều cao 1 dòng là 1.4em */
    height: 2.8em;            /* Chiều cao tổng = 1.4 x 2 = ĐÚNG 2 DÒNG */
    
    /* Thuật toán CẮT CHỮ NẾU DÀI HƠN */
    display: -webkit-box;
    -webkit-line-clamp: 2;    /* Tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;         /* Ẩn phần thừa và hiện ... */
    white-space: normal;
}
.product-small .product-title a {
    color: #222222;
}

/* MÔ TẢ NGẮN (SHORT DESCRIPTION) */
.product-small .loop-short-desc {
    font-size: 13px;
    color: #777777;
    margin-bottom: 12px;
    
    /* Thuật toán ÉP CỨNG 2 DÒNG */
    line-height: 1.5em;       /* Chiều cao 1 dòng là 1.5em */
    height: 3.0em;            /* Chiều cao tổng = 1.5 x 2 = ĐÚNG 2 DÒNG */
    
    /* Thuật toán CẮT CHỮ NẾU DÀI HƠN */
    display: -webkit-box;
    -webkit-line-clamp: 2;    /* Tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;         /* Ẩn phần thừa và hiện ... */
    white-space: normal;
}

/* GIÁ TIỀN */
.product-small .price {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
}


/* ========================================================
   TỐI ƯU HIỂN THỊ TRÊN MOBILE
   ======================================================== */
@media (max-width: 767px) {
    .product-small .box-text {
        padding: 15px 10px; /* Nhỏ lại để chữ có không gian thở trên Mobile */
    }
    
    /* Chỉ cần đổi font-size, chiều cao 2 dòng sẽ tự động tính toán lại nhờ đơn vị (em) */
    .product-small .product-title {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .product-small .loop-short-desc {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .product-small .price {
        font-size: 14px;
    }
}