@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;
    }