@font-face {
font-family: "Chakra Petch";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/chakra-petch-400.woff2") format("woff2");
}
@font-face {
font-family: "Chakra Petch";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/chakra-petch-500.woff2") format("woff2");
}
@font-face {
font-family: "Chakra Petch";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/chakra-petch-600.woff2") format("woff2");
}
@font-face {
font-family: "Chakra Petch";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/chakra-petch-700.woff2") format("woff2");
}
h1,h2,h3,h4,h5,h6,.uagb-heading-text,.cv-heading{
font-family: "Chakra Petch", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
letter-spacing: 0.02em;
}
header.site-header,.site-header{
background: #ffffff !important;
position: relative;
width: 100%;
z-index: 99;
}
header.site-header .ast-container,.main-header-bar .ast-container,.ast-main-header-wrap .ast-container{
max-width: 1240px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
.main-header-bar{
border-bottom: 1px solid #d1d5db !important;
background-color: #ffffff !important;
}
.site-logo-img img,.custom-logo{
max-width: 145px !important;
height: auto !important;
display: block !important;
}
.site-title,.site-description,.ast-site-title-wrap{
display: none !important;
}
.main-header-menu .menu-item:not(.cv-menu-contact-wrap) a{
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: 0.03em;
color: #1a202c !important;
transition: color 0.2s ease;
}
.main-header-menu .menu-item:not(.cv-menu-contact-wrap):hover > a,.main-header-menu .current-menu-item:not(.cv-menu-contact-wrap) > a,.main-header-menu .current_page_item:not(.cv-menu-contact-wrap) > a,.main-header-menu .current-menu-ancestor:not(.cv-menu-contact-wrap) > a{
color: #1ec776 !important;
}
.cv-menu-contact-wrap{
margin-left: auto;
display: flex;
align-items: center;
}
.cv-header-contact{
border: 1px solid #333333;
border-radius: 4px;
padding: 6px 14px;
display: inline-flex;
align-items: center;
gap: 10px;
background: #ffffff;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.cv-header-contact svg{
stroke: #333333;
flex-shrink: 0;
}
.cv-header-contact-text{
display: flex;
flex-direction: column;
line-height: 1.25;
}
.main-header-menu .menu-item .cv-header-hotline,.cv-header-contact .cv-header-hotline,a.cv-header-hotline,.cv-header-hotline{
color: #ed1c24 !important;
font-weight: 700 !important;
font-size: 15px !important;
text-decoration: none !important;
padding: 0 !important;
line-height: 1.2 !important;
font-family: "Chakra Petch", sans-serif !important;
}
.main-header-menu .menu-item .cv-header-hotline:hover,.cv-header-contact .cv-header-hotline:hover,a.cv-header-hotline:hover,.cv-header-hotline:hover{
color: #c81016 !important;
}
.cv-header-email{
color: #64748b;
font-size: 11px;
}
.cv-title-accent{
display: none !important;
}
.cv-product-card{
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
overflow: hidden;
border-radius: 6px !important;
background-color: #ffffff !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
touch-action: manipulation;
}
@media  (hover: hover) and (pointer: fine) {.cv-product-card:hover{
transform: translateY(-5px);
box-shadow: 0px 16px 16px #E1FAE3 !important;
}}
.cv-product-card figure.wp-block-image,.cv-product-card figure.wp-block-image a{
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
display: block !important;
width: 100% !important;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.cv-product-card figure.wp-block-image img{
width: 100% !important;
height: 240px !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.35s ease;
}
@media  (hover: hover) and (pointer: fine) {.cv-product-card:hover figure.wp-block-image img{
transform: scale(1.05);
}}
.cv-product-card .uagb-heading-text a{
color: #333333 !important;
text-decoration: none;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.35;
transition: color 0.2s ease;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
@media  (hover: hover) and (pointer: fine) {.cv-product-card:hover .uagb-heading-text a{
color: #1ec776 !important;
}}
.cv-partner-grid{
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
width: 100% !important;
gap: 20px !important;
}
.cv-partner-item{
flex: 1 1 140px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
@media  (max-width: 767px) {.cv-partner-grid{
justify-content: center !important;
}
.cv-partner-item{
flex: 0 0 calc(33.33% - 20px) !important;
max-width: 120px !important;
}}
@media  (max-width: 480px) {.cv-partner-item{
flex: 0 0 calc(50% - 20px) !important;
}}
.cv-partner-item img{
max-height: 46px;
max-width: 140px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(20%);
transition: filter 0.2s ease, transform 0.2s ease;
}
.cv-partner-item:hover img{
filter: grayscale(0%);
transform: scale(1.05);
}
.wp-block-uagb-container.uagb-block-cv_footer_outer,.uagb-block-cv_footer_outer,.cv-cat-footer-outer{
background-color: #0a0a0a !important;
padding: 95px 0 95px !important;
width: 100% !important;
}
.uagb-block-cv_footer_inner{
max-width: 1200px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
align-items: center !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
.wp-block-uagb-container.uagb-is-root-container .cv-footer-col-left,.uagb-block-cv_footer_inner .cv-footer-col-left{
width: auto !important;
max-width: 200px !important;
flex: 0 0 auto !important;
}
.wp-block-uagb-container.uagb-is-root-container .cv-footer-col-right,.uagb-block-cv_footer_inner .cv-footer-col-right{
width: auto !important;
max-width: 100% !important;
text-align: left !important;
}
.uagb-block-cv_footer_inner .cv-social-icons{
justify-content: flex-start !important;
}
@media  (max-width: 767px) {.wp-block-uagb-container.uagb-block-cv_footer_outer,.uagb-block-cv_footer_outer,.cv-cat-footer-outer{
padding: 70px 0 95px !important;
}
.uagb-block-cv_footer_inner{
display: flex !important;
flex-direction: column !important;
text-align: center !important;
gap: 24px !important;
}
.wp-block-uagb-container.uagb-is-root-container .cv-footer-col-left,.uagb-block-cv_footer_inner .cv-footer-col-left,.wp-block-uagb-container.uagb-is-root-container .cv-footer-col-right,.uagb-block-cv_footer_inner .cv-footer-col-right{
max-width: 100% !important;
text-align: center !important;
}
.uagb-block-cv_footer_inner .cv-social-icons{
justify-content: center !important;
}}
.site-footer,.ast-footer-builder{
display: none !important;
}
.cv-floating-hotline{
position: fixed;
bottom: 25px;
left: 25px;
z-index: 9999;
}
.cv-floating-hotline a{
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
color: #ffffff !important;
font-weight: 700;
font-size: 15px;
padding: 10px 20px;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(229, 57, 53, 0.45);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media  (hover: hover) and (pointer: fine) {.cv-floating-hotline a:hover{
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(229, 57, 53, 0.6);
}}
.cv-floating-hotline a:active{
transform: scale(0.96);
}
.cv-floating-hotline-icon{
width: 28px;
height: 28px;
background: #ffffff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
color: #e53935;
font-size: 14px;
}
.cv-floating-zalo{
position: fixed;
bottom: 80px;
right: 21px;
z-index: 99999;
}
.cv-floating-zalo a{
display: block;
width: 52px;
height: 52px;
border-radius: 50%;
background-color: #009af8;
box-shadow: 0 4px 15px rgba(0, 136, 255, 0.45);
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
@media  (hover: hover) and (pointer: fine) {.cv-floating-zalo a:hover{
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 136, 255, 0.6);
}}
.cv-floating-zalo a:active{
transform: scale(0.96);
}
.cv-floating-zalo a svg{
display: block;
width: 100%;
height: 100%;
}
.cv-floating-zalo a:focus-visible{
outline: 3px solid #005a9c;
outline-offset: 4px;
}
.cv-floating-zalo img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.cv-scroll-to-top{
position: fixed;
bottom: 25px;
right: 25px;
width: 44px;
height: 44px;
background-color: #333333;
color: #ffffff;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
z-index: 99998;
text-decoration: none !important;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.cv-scroll-to-top.is-visible{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media  (hover: hover) and (pointer: fine) {.cv-scroll-to-top:hover{
background-color: #ed1c24;
color: #ffffff;
}}
.cv-scroll-to-top:active{
background-color: #ed1c24;
transform: scale(0.94);
}
.cv-scroll-to-top svg{
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2.5;
pointer-events: none;
}
#ast-scroll-top{
display: none !important;
}
.cv-category-page-wrap{
width: 100%;
background-color: #ffffff;
}
.cv-cat-header-wrap{
width: 100%;
background-color: #ffffff;
padding-top: 35px;
padding-bottom: 5px;
}
.cv-cat-header-inner{
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.cv-cat-title-container{
position: relative;
display: inline-block;
margin-bottom: 12px;
}
.cv-cat-title{
position: relative;
font-family: "Chakra Petch", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 36px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #333333 !important;
margin: 0 !important;
padding: 0 0 0 16px !important;
display: inline-block;
z-index: 1;
}
.cv-cat-title::before{
content: "";
position: absolute;
top: -10px;
left: 0;
width: 55px;
height: 55px;
background-color: #1ec776;
z-index: -1;
display: block;
border-radius: 2px;
}
.cv-cat-desc{
margin-top: 15px;
margin-bottom: 25px;
}
.cv-cat-desc p{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: #4f4f4f !important;
margin: 0 !important;
max-width: 100%;
}
.cv-cat-products-wrap{
width: 100%;
background-color: #f3fff4 !important;
padding-top: 45px;
padding-bottom: 60px;
box-sizing: border-box;
}
.cv-cat-products-inner{
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.category-san-pham #content,.category-san-pham #content .ast-container,.category-san-pham #primary{
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.cv-products-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 30px;
row-gap: 65px;
width: 100%;
}
.cv-product-card{
position: relative;
box-sizing: border-box;
}
.cv-product-card-inner{
position: relative;
width: 100%;
}
.cv-product-thumb-link{
display: block;
text-decoration: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.cv-product-thumb-wrap{
width: 100%;
height: 260px;
overflow: hidden;
border-radius: 4px;
background-color: #e2e8f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.cv-product-thumb-wrap img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
@media  (hover: hover) and (pointer: fine) {.cv-product-card:hover .cv-product-thumb-wrap img{
transform: scale(1.04);
}}
.cv-product-content-box{
position: absolute;
bottom: -15px;
left: 45px;
right: -15px;
background-color: #ffffff;
padding: 16px 20px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
border-radius: 2px;
z-index: 2;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
@media  (hover: hover) and (pointer: fine) {.cv-product-card:hover .cv-product-content-box{
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}}
.cv-product-title{
font-family: "Chakra Petch", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
margin: 0 !important;
}
.cv-product-title a{
color: #333333 !important;
text-decoration: none !important;
transition: color 0.2s ease;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
@media  (hover: hover) and (pointer: fine) {.cv-product-title a:hover{
color: #1ec776 !important;
}}
.cv-cat-partner-outer{
background-color: #f8fafc;
padding: 60px 0;
width: 100%;
}
.cv-cat-partner-inner{
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
@media  (max-width: 991px) {.cv-products-grid{
grid-template-columns: repeat(2, 1fr);
column-gap: 24px;
row-gap: 55px;
}
.cv-product-content-box{
left: 25px;
right: 0;
}}
@media  (max-width: 640px) {.cv-products-grid{
grid-template-columns: 1fr;
row-gap: 50px;
}
.cv-product-thumb-wrap{
height: 220px;
}
.cv-product-content-box{
left: 15px;
right: 0;
bottom: -15px;
}}
.wp-caption,figure.wp-caption,.wp-block-image,figure.wp-block-image,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright,.wp-block-image.alignnone{
display: block !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
.wp-caption img,figure.wp-caption img,.wp-block-image img,figure.wp-block-image img{
display: block !important;
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
figure.wp-block-image:has(.wp-caption) > figcaption.wp-element-caption,figure.wp-block-image:has(.wp-caption) > br,.wp-caption + br,.wp-caption + br + .wp-element-caption{
display: none !important;
}
.wp-block-image figcaption,.wp-caption figcaption,figcaption.wp-element-caption,figcaption.wp-caption-text{
text-align: center !important;
font-size: 14px !important;
color: #666666 !important;
margin-top: 8px !important;
display: block !important;
width: 100% !important;
}
.wp-block-uagb-container.uagb-block-cv_about_outer{
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.wp-block-uagb-container.uagb-block-cv_about_inner{
max-width: 1200px !important;
width: 100% !important;
margin: 0 auto !important;
align-items: stretch !important;
box-sizing: border-box !important;
}
@media  (max-width: 767px) {.wp-block-uagb-container.uagb-block-cv_about_outer{
padding-left: 16px !important;
padding-right: 16px !important;
padding-top: 30px !important;
padding-bottom: 40px !important;
}
.wp-block-uagb-container.uagb-block-cv_about_inner{
padding: 0 !important;
align-items: flex-start !important;
}
.wp-block-uagb-container.uagb-block-cv_about_inner .cv-cat-title-container{
margin-left: 0 !important;
margin-right: auto !important;
}
.wp-block-uagb-container.uagb-block-cv_about_inner p{
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}}
.cv-social-icons a:focus-visible{
outline: 2px solid currentColor;
outline-offset: 4px;
}