/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* ========================================
   PRODUCT HOVER ACTION
======================================== */

.product-small .box-image {
    position: relative;
    overflow: hidden;
}

/* Khung 3 nút */
.net5s-product-actions {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;

    display: flex;
    align-items: center;
    gap: 5px;

    z-index: 20;

    opacity: 0;
    visibility: hidden;

    transform: translateY(50px);

    transition:
        transform .35s ease,
        opacity .3s ease,
        visibility .3s ease;
}

/* Hover sản phẩm */
.product-small:hover .net5s-product-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ========================================
   BUTTON CHUNG
======================================== */

.net5s-product-actions a {
    margin: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}


/* Hai nút icon */
.net5s-action-btn {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;

    display: flex !important;
    justify-content: center;
    align-items: center;

    background: #ff6a21;
    color: #fff;

    border-radius: 6px;

    padding: 0 !important;
    min-height: 40px !important;

    transition: all .25s ease;
}

.net5s-action-btn i {
    font-size: 18px;
    line-height: 1;
}


/* MUA NGAY */
.net5s-buy-now {
    flex: 1;

    height: 40px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    background: #ff6a21;
    color: #fff !important;

    border-radius: 6px;

    font-size: 13px;
    font-weight: 700;

    padding: 0 10px !important;

    min-height: 40px !important;

    transition: all .25s ease;
}


/* Hover */
.net5s-action-btn:hover,
.net5s-buy-now:hover {
    background: #e95512;
    color: #fff;
}


/* ========================================
   MOBILE / TABLET
======================================== */

@media (max-width: 849px) {

    .net5s-product-actions {
		display: none;
        left: 7px;
        right: 7px;
        bottom: 7px;
        gap: 4px;

        /* mobile luôn hiện nếu muốn */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .net5s-action-btn {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        min-height: 36px !important;
    }

    .net5s-buy-now {
        height: 36px;
        min-height: 36px !important;
        font-size: 11px;
    }
}

.badge-container {
    margin: 10px 10px 0 0 !important;
}

.badge-container .onsale {
    background: #f00 !important;
    color: #fff !important;

    border-radius: 4px !important;

    padding: 7px 8px !important;

    min-width: auto !important;
    min-height: auto !important;

    font-size: 13px !important;
    line-height: 1 !important;
}

@media only screen and (max-width: 48em) {
	/*************** ADD MOBILE ONLY CSS HERE  ***************/


}