/*
Theme Name: Namtech Theme Woocommerce
Theme URI: #
Description: 
Author: Namtech
Author URI: https://namtech.vn/
Version: 1.0
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support
Text Domain: namtech.vn
*/

.alignnone{margin:5px 20px 20px 0}
.aligncenter,div.aligncenter{display:block;margin:5px auto}
.alignright{float:right;margin:5px 0 20px 20px}
.alignleft{float:left;margin:5px 20px 20px 0}
a img.alignright{float:right;margin:5px 0 20px 20px}
a img.alignnone{margin:5px 20px 20px 0}
a img.alignleft{float:left;margin:5px 20px 20px 0}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:96%;padding:5px 3px 10px;text-align:center}
.wp-caption.alignleft,.wp-caption.alignnone{margin:5px 20px 20px 0}
.wp-caption.alignright{margin:5px 0 20px 20px}
.wp-caption img{border:0;height:auto;margin:0;max-width:98.5%;padding:0;width:auto}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}
.mona-product-pagination .page-numbers,.mona-product-pagination .page-numbers li{display:inline-block}
.mona-gallery{column-count:3;-webkit-column-count:3;-moz-column-count:3}
.mona-content{color:#000}
.mona-content p{margin:10px 0}
.mona-content strong{font-weight:bold}
.mona-content em{font-style:italic}
.mona-content a{color:#bf2922}
.mona-content blockquote{margin:20px;padding:10px;border-left:4px solid #e5be95}
.mona-content table{max-width:100%;border-collapse:collapse;width:auto;margin-bottom:40px}
.mona-content table th,.mona-content table td{border:1px solid #bdbdbd;padding:5px 10px;vertical-align:middle}
.clearfix:before{display:table;content:" "}
.clearfix:after{content:"";display:table;clear:both}
.mona-content ul,.mona-content ol{padding-left:40px;margin-bottom:20px;list-style-position:outside}
.mona-content h1{margin:10px 0;font-size:36px}
.mona-content h2{font-size:30px;margin:10px 0}
.mona-content h3{font-size:24px;margin:10px 0}
.mona-content h4{font-size:20px;margin:10px 0}
.mona-content h5{font-size:18px;margin:10px 0}
.mona-content h6{font-size:16px;margin:10px 0}
img{max-width:100%;height:auto}
#add_payment_method table.cart img,.woocommerce-cart table.cart img,.woocommerce-checkout table.cart img{width:100px}
#add_payment_method table.cart .product-thumbnail,.woocommerce-cart table.cart .product-thumbnail,.woocommerce-checkout table.cart .product-thumbnail{width:100px}
#add_payment_method table.cart input,.woocommerce-cart table.cart input,.woocommerce-checkout table.cart input,.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea{font-family:inherit;width:100%;height:40px;font-size:14px;border:solid 1px #e1e1e1;padding:10px 15px;line-height:20px;outline:0;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
.woocommerce form .form-row textarea.input-text{min-height:100px}
#add_payment_method table.cart input[type="number"],.woocommerce-cart table.cart input[type="number"],.woocommerce-checkout table.cart input[type="number"]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;padding:5px}
.woocommerce a.remove,.woocommerce .cart .button,.woocommerce .cart input.button{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background-color:#384259;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
.woocommerce #respond input#submit.alt:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover{background-color:#001a54}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background-color:#001a54;color:#fff}
#coupon_code{height:28px}
.woocommerce table.shop_table th{background:#384259;color:#fff}
.cart-collaterals .cart_totals h2{font-size:20px}
.cart-collaterals .cart_totals>h2,.woocommerce-additional-fields>h3,.woocommerce-billing-fields>h3,#order_review_heading{font-size:20px;color:#384259}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot th{background:#fff;color:#000}
.mona-wrapper-404{width:700px;margin:auto;max-width:100%;background:#f5f5f5;padding:40px;text-align:center;box-shadow:0 0 10px 0 #9c9c9c;-webkit-box-shadow:0 0 10px 0 #9c9c9c;border-radius:5px}
.mona-wrapper-404 .title-404{font-size:100px;margin:0;color:#b91c1c}
.mona-wrapper-404 .content-404{font-style:italic;margin:0;margin-bottom:20px}
.mona-wrapper-404 .mona-button-style{text-decoration:none;text-transform:uppercase;font-weight:normal;border:1px solid #b91d1c;padding:10px 20px;border-radius:10px;box-sizing:border-box;display:inline-block;font-size:15px;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}
.mona-wrapper-404 .mona-button-style:hover{background:#b91d1c;color:#fff}

/**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */
 @-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
    }
    20% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    80%{
        opacity: .5;
    }
    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 1;
    }
  }
  @keyframes scale-up-center {
    0% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    80%{
        opacity: .5;
    }
    100% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
        opacity: 1;
    }
  }

  
.block-product_category .product_category_list{
    display: grid;
    grid-template-columns: repeat( 5, 1fr );
    justify-content: center;
    gap: 50px;
    padding: 80px 0;
}
.product_category_list .cat-item{
    text-align: left;
}
.product_category_list .cat-item .cat-item-inner{
    position: relative;
    display: block;
    padding-top: 60px;
    background-size: cover;
    background-position: center;
    background-attachment: local;    
}

.product_category_list .cat-item .cat-item-inner img{
    transition: all 300ms ease;
    transform: scale(1);
    pointer-events: none;
}

.product_category_list .cat-item .cat-item-inner .cat-name{
    /* color: var(--color-pri); */
    color: var(--color-text);
    font-size: 2rem;
    text-transform: uppercase;
    position: absolute;
    top: 20px;
    left: 20px;
    transition: all .2s ease;
}
.product_category_list .cat-item .cat-item-inner:hover img{
    transform: translateX(20px) translateY(50px) scale(1.2);
}
.product_category_list .cat-item .cat-item-inner:hover .cat-name{
    color: var(--color-pri); 
}

@media (max-width:1445px) {
    .product_category_list .cat-item .cat-item-inner .cat-name{
        font-size: 18px;
    }
}

@media (max-width:1220px) {
    .block-product_category .product_category_list{
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width:991px) {
    .block-product_category .product_category_list{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:767px) {
    .block-product_category .product_category_list{
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .product_category_list .cat-item .cat-item-inner{
        padding-top: 40px;
    }
    .product_category_list .cat-item .cat-item-inner:hover img {
        transform: translateX(10px) translateY(25px) scale(1.2);
    }
}

@media (max-width:568px) {
    .block-product_category .product_category_list{
        gap: 30px;
    }
    .product_category_list .cat-item .cat-item-inner .cat-name{
        font-size: 12px;
        top: 16px;
        left: 16px;
    }
}