/**
 * BCE Product Showcase - Product Rank Badge Styles v1.0
 * Dành riêng cho việc định dạng huy hiệu xếp hạng trên ảnh sản phẩm.
 */

.bce-product-rank-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px; /* Tăng chiều rộng để chứa được vát góc */
    height: 32px;
    background-color: #1c1c1c; /* Màu đen */
    color: #ffffff;
    z-index: 4; /* Nổi lên trên cả ảnh và thẻ tags */
    
    /* Căn chỉnh số vào giữa */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Font chữ */
    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    /* Hiệu ứng vát góc bằng clip-path */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15% 50%);
    
    /* Giúp chữ không bị dính vào cạnh */
    padding-left: 5px;
    box-sizing: border-box;

    /* Hiệu ứng mượt mà */
    transition: background-color 0.3s ease;
}

.bce-product-rank-badge:hover {
    background-color: #c00; /* Đổi màu đỏ khi hover */
}