/* =================================
   MOBILE RESPONSIVE
================================= */


@media(max-width:768px)
{
    



/* ===============================
   GLOBAL
================================ */

.container
{
    width:90%;
    margin:auto;
}



/* ===============================
   HERO
================================ */


.hero
{
    padding:35px 0;
}



.hero-grid
{
    display:flex;

    flex-direction:column-reverse;

    gap:25px;
}



.hero-image
{
    padding:5px 15px;
}



.hero-image img
{
    width:100%;

    height:auto;

}



.hero h1
{
    font-size:34px;

    text-align:center;

}



.hero h2
{
    font-size:21px;

    text-align:center;

}



.hero p
{
    text-align:center;

    font-size:16px;

    line-height:1.7;

    margin-bottom:30px;

}



.hero-label
{
    display:block;

    text-align:center;

}



.hero-buttons
{
    flex-direction:column;

    gap:15px;

}



.btn-primary,
.btn-phone
{
    width:100%;

    padding:16px;

}



/* ===============================
   PRODUCTS
================================ */


.products-grid
{
    grid-template-columns:repeat(2,1fr) !important;

    gap:15px;

}



.product-card
{
    padding:12px;

    min-width:0;

}



/* giữ ảnh không méo */

.product-image
{
    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

}



.product-image img
{
    width:100%;

    height:100%;

    object-fit:cover;

}



.section-title h2
{
    font-size:28px;

}



.product-card h3
{
    font-size:15px;

    line-height:1.4;

}



.price
{
    font-size:17px;

}



.buy-button
{
    font-size:14px;

    padding:10px 5px;

}




/* ===============================
   CONTENT IMAGE
================================ */


.entry-content img,
.page-content img
{
    border-radius:10px;

    margin:20px auto;

}



.entry-content p
{
    margin-bottom:18px;

}

.woocommerce ul.products,
.woocommerce-page ul.products
{
    display:grid;

    grid-template-columns:repeat(2,1fr)!important;

    gap:15px;
}


.woocommerce ul.products li.product
{
    width:100%!important;

    margin:0!important;
}

.product-card
{
padding:10px;

border-radius:15px;

}


.product-badge
{
font-size:10px;

padding:5px 10px;

}



.buy-button
{
font-size:13px;

padding:10px 5px;

}



/* ===============================
   STORY
================================ */

.story-section
{
    padding:45px 0;
}



.story-title h2
{
font-size:28px;
}



.story-title p
{
font-size:16px;
}






.story-grid
{
    display:grid !important;

    grid-template-columns:repeat(2, minmax(0,1fr)) !important;

    gap:20px !important;

    width:100%;

}




.story-item
{
    width:100% !important;

    min-width:0;

    padding:18px 10px;

    border-radius:15px;

    box-sizing:border-box;

}



.story-icon
{
    font-size:32px;

    margin-bottom:10px;

}



.story-icon
{
    font-size:32px;

    margin-bottom:10px;

}


.story-icon
{
    font-size:32px;

    margin-bottom:10px;

}



/* ===============================
   BRAND STORY
================================ */



.brand-story
{
    width:100%;

    overflow:hidden;

}



.brand-story .container
{
    width:90%;

    max-width:100%;

    padding:0;

}



.brand-story-grid
{
    display:flex !important;

    flex-direction:column;

    width:100%;

    gap:35px;

}



.brand-story-image,
.brand-story-content
{
    width:100%;

    max-width:100%;

    box-sizing:border-box;

}



.brand-story-image img
{
    width:100%;

    max-width:100%;

    height:auto;

    display:block;

    object-fit:cover;

    border-radius:20px;

}



.brand-story-content
{
    overflow:hidden;

}



.brand-story-content h2
{
    font-size:28px;

    line-height:1.35;

    margin-left:0;

    margin-right:0;

}



.brand-story-content p
{
    font-size:15px;

    line-height:1.7;

}



.brand-story-content ul
{
    padding-left:0;

}



.story-button
{
    display:block;

    width:100%;

    box-sizing:border-box;

    text-align:center;

}

/* ===============================
   REVIEW
================================ */

.reviews-section
{
padding:50px 0;
}



.reviews-title h2
{
font-size:28px;

}



.reviews-title p
{
font-size:15px;

}



.reviews-grid
{
display:grid !important;

grid-template-columns:1fr !important;

gap:20px;

}



.review-card
{
padding:20px;

}



.stars
{
font-size:22px;

}



.review-card p
{
font-size:15px;

}

/* ===============================
   CTA
================================ */

.cta-section
{
padding:45px 0;

}



.cta-box
{
padding:40px 20px;

border-radius:20px;

}



.cta-content h2
{
font-size:27px;

line-height:1.4;

}



.cta-content p
{
font-size:15px;

}



.cta-buttons
{
display:flex !important;

flex-direction:column !important;

width:100%;

gap:15px;

}



.cta-buy,
.cta-phone
{
width:100% !important;

min-width:0;

padding:16px 20px;

box-sizing:border-box;

text-align:center;

font-size:16px;

text-decoration:none !important;

}

/* ===============================
   FOOTER MOBILE
================================ */
.footer-grid
{
display:grid;

grid-template-columns:1fr;

gap:30px;

text-align:center;
}



.footer-logo img
{
width:90px;

height:90px;
}



.footer-col h3
{
font-size:18px;
}



.footer-bottom
{
font-size:13px;
}

html,
body
{
max-width:100%;

overflow-x:hidden;
}

body
{
padding-bottom:60px;
}

/* ===========================
SINGLE PRODUCT MOBILE
=========================== */

.woocommerce div.product{
    display:block;
}

.woocommerce div.product div.images{
    margin-bottom:30px!important;
}

.woocommerce div.product div.summary{
    padding:0;
}

.woocommerce div.product .product_title{
    font-size:28px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price{
    font-size:28px;
}

.quantity{
    margin-bottom:15px;
}

.woocommerce button.single_add_to_cart_button{
    width:100%;
}

.related.products ul.products{
    display:grid!important;
    grid-template-columns:repeat(2,1fr)!important;
    gap:15px;
}

.related.products ul.products
{
    grid-template-columns:repeat(2,1fr);
}


.single-product .woocommerce-tabs
{
    padding:25px 18px;

    margin-top:50px;

    border-radius:18px;
}



.single-product .woocommerce-tabs ul.tabs
{
    flex-wrap:wrap;
}



.single-product .woocommerce-tabs ul.tabs li
{
    width:100%;

    text-align:center;
}



.single-product .woocommerce-Tabs-panel
{
    font-size:16px;

    line-height:1.8;
}



.product-trust-box
{
    margin-top:25px;

    padding:20px;
}


.woocommerce div.product form.cart
{
    display:flex;

    flex-direction:column;

    width:100%;
}



.woocommerce div.product form.cart
.button,
.buy-now-button
{
    width:100%!important;

    max-width:100%!important;

    box-sizing:border-box;

    margin-left:0!important;

    margin-right:0!important;

    text-align:center;

    justify-content:center;
}



/* khoảng cách 2 nút */

.buy-now-button
{
    margin-top:15px!important;

    height:52px;

}



.woocommerce button.single_add_to_cart_button
{
    width:100%!important;

    height:52px;

}

.product-service-box
{
    padding:18px;

    margin-top:15px;
}



.service-row
{
    gap:12px;
}



.service-row strong
{
    font-size:15px;
}



.service-row p
{
    font-size:13px;
}

.related.products
{
    margin-top:55px;
}

.related.products h2
{
    font-size:28px;
}

.related-description
{
    font-size:15px;

    padding:0 15px;
}

/*===============================
RELATED MOBILE
===============================*/

@media(max-width:768px)
{

.related.products ul.products
{
    grid-template-columns:repeat(2,1fr);

    gap:15px;
}



.related.products li.product
{
    border-radius:18px;
}



.related.products li.product h2,
.related.products li.product .woocommerce-loop-product__title
{
    font-size:15px;

    min-height:auto;
}



.related.products li.product .price
{
    font-size:20px;
}



.related.products a.button
{
    padding:12px;

    font-size:14px;
}

}

.quick-order-box
{
    padding:20px 16px;

    border-radius:18px;
}


.quick-order-heading h3
{
    font-size:23px;
}


.quick-field input,
.quick-field textarea
{
    font-size:16px;

    padding:14px;
}


.quick-order-product
{
    display:block;
}


.quick-order-product strong
{
    display:block;

    margin-top:4px;
}


.quick-order-submit
{
    min-height:54px;
}




}