@font-face {
    font-family: "QXJpbWFNYWRcmFpLUJvbGQudHRm";
    src: url("/Contents_QROrderFnB/assets/fonts/arimamadurai-black-20250204082918-eqmq0.ttf") format("truetype");
}

.section_Category_SanPham {
    padding: 1px;
    background: #e6d3bf; /* màu viền */
    align-items: center;
    justify-content: center;
    -webkit-mask: radial-gradient(20px at 0 0, transparent 98%, black 100%) top left, radial-gradient(20px at 100% 0, transparent 98%, black 100%) top right, radial-gradient(20px at 100% 100%, transparent 98%, black 100%) bottom right, radial-gradient(20px at 0 100%, transparent 98%, black 100%) bottom left;
    -webkit-mask-size: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top left, top right, bottom right, bottom left;
    mask: radial-gradient(20px at 0 0, transparent 98%, black 100%) top left, radial-gradient(20px at 100% 0, transparent 98%, black 100%) top right, radial-gradient(20px at 100% 100%, transparent 98%, black 100%) bottom right, radial-gradient(20px at 0 100%, transparent 98%, black 100%) bottom left;
    display: inline-block;
    mask-size: 50% 50%;
    mask-repeat: no-repeat;
    mask-position: top left, top right, bottom right, bottom left;
}

    .section_Category_SanPham .section_Category_DuocLieu_Img {
        display: block;
        object-fit: cover;
        /* thêm lớp tối dần từ trên xuống */
        -webkit-mask-image: linear-gradient(to bottom, #FFF, rgba(98,53,36,0.9));
        -webkit-mask-composite: destination-in;
        mask-image: linear-gradient(to bottom, #FFF, rgba(98,53,36,0.9));
        mask-composite: intersect;
        padding: 1px;
        -webkit-mask: radial-gradient(20px at 0 0, transparent 98%, black 100%) top left, radial-gradient(20px at 100% 0, transparent 98%, black 100%) top right, radial-gradient(20px at 100% 100%, transparent 98%, black 100%) bottom right, radial-gradient(20px at 0 100%, transparent 98%, black 100%) bottom left;
        -webkit-mask-size: 50% 50%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: top left, top right, bottom right, bottom left;
        mask: radial-gradient(20px at 0 0, transparent 98%, black 100%) top left, radial-gradient(20px at 100% 0, transparent 98%, black 100%) top right, radial-gradient(20px at 100% 100%, transparent 98%, black 100%) bottom right, radial-gradient(20px at 0 100%, transparent 98%, black 100%) bottom left;
        /*display: inline-block;*/
        mask-size: 50% 50%;
        mask-repeat: no-repeat;
        mask-position: top left, top right, bottom right, bottom left;
    }

.section_Category_DuocLieu {
    padding: 1px;
    background: #542215; /* màu viền */
    align-items: center;
    justify-content: center;
    -webkit-mask: radial-gradient(20px at 0 0, transparent 98%, black 100%) top left, radial-gradient(20px at 100% 0, transparent 98%, black 100%) top right, radial-gradient(20px at 100% 100%, transparent 98%, black 100%) bottom right, radial-gradient(20px at 0 100%, transparent 98%, black 100%) bottom left;
    -webkit-mask-size: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top left, top right, bottom right, bottom left;
    mask: radial-gradient(20px at 0 0, transparent 98%, black 100%) top left, radial-gradient(20px at 100% 0, transparent 98%, black 100%) top right, radial-gradient(20px at 100% 100%, transparent 98%, black 100%) bottom right, radial-gradient(20px at 0 100%, transparent 98%, black 100%) bottom left;
    display: inline-block;
    mask-size: 50% 50%;
    mask-repeat: no-repeat;
    mask-position: top left, top right, bottom right, bottom left;
}

    .section_Category_DuocLieu .section_Category_DuocLieu_Img {
        display: block;
        object-fit: cover;
        /* thêm lớp tối dần từ trên xuống */
        -webkit-mask-image: linear-gradient(to bottom, #FFF, rgba(98,53,36,0.9));
        -webkit-mask-composite: destination-in;
        mask-image: linear-gradient(to bottom, #FFF, rgba(98,53,36,0.9));
        mask-composite: intersect;
        padding: 1px;
        -webkit-mask: radial-gradient(20px at 0 0, transparent 98%, black 100%) top left, radial-gradient(20px at 100% 0, transparent 98%, black 100%) top right, radial-gradient(20px at 100% 100%, transparent 98%, black 100%) bottom right, radial-gradient(20px at 0 100%, transparent 98%, black 100%) bottom left;
        -webkit-mask-size: 50% 50%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: top left, top right, bottom right, bottom left;
        mask: radial-gradient(20px at 0 0, transparent 98%, black 100%) top left, radial-gradient(20px at 100% 0, transparent 98%, black 100%) top right, radial-gradient(20px at 100% 100%, transparent 98%, black 100%) bottom right, radial-gradient(20px at 0 100%, transparent 98%, black 100%) bottom left;
        /*display: inline-block;*/
        mask-size: 50% 50%;
        mask-repeat: no-repeat;
        mask-position: top left, top right, bottom right, bottom left;
    }

.div-product-item {
}

    .div-product-item .div-product-item-xemchitiet {
        display: none;
        text-shadow: 0 0 4px rgba(0,0,0,0.5);
    }

    .div-product-item:hover .div-product-item-xemchitiet {
        display: block;
    }

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /*background-color: #f8f4ed;
    border-radius: 8px;
    padding: 20px;
    text-align: center;*/
}

    .product-card .img-wrapper img {
        border-radius: 6px;
        width: 100%;
        height: 100%;
        object-fit: cover; /* ảnh tự co giãn theo khung, không méo */
        object-position: center center; /* 🟢 đảm bảo ảnh luôn hiển thị ở chính giữa */
        display: block;
    }

    .product-card .img-wrapper {
        width: 100%;
        aspect-ratio: 4/3; /* 🟢 Giữ cùng tỉ lệ cho tất cả ảnh (4:3, có thể đổi 1/1, 16/9...) */
        overflow: hidden;
        border-radius: 6px;
    }

    .product-card .product-title {
        font-weight: bold;
        margin: 15px 0 10px;
    }

    .product-card .product-desc {
        flex-grow: 1; /* giúp phần mô tả giãn ra chiếm khoảng trống */
        /*color: #555;*/
    }

    .product-card .price {
        font-weight: bold;
        /*color: #b86b00;
        margin: 10px 0;*/
    }