@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
body {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.box-menu-mb.active{
    opacity: 1;
    visibility: visible;
}

.box-menu-mb.active > ul{
    transform: translateX(0);
}

.clamp-1 {
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-2 {
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-3 {
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scrollbar {
    overflow-y: overlay;
}

.scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
}

.scrollbar::-webkit-scrollbar {
    width: 6px;
    background-color: #f5f5f5;
}

.scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #000;
}

.owl-prev {
    left: 10px;
}
.owl-next {
    right: 10px;
}

.owl-nav > div {
    position: absolute;
    top: 50%;
    background-color: #0009;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    border-radius: 5px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.5;
    transform: translateY(-50%);
    transition: all 0.3s;
}

.owl-nav > div:hover{
    opacity: 1;
}

img {
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.hover-zoom:hover img {
    transform: scale(1.05);
}
.hover-zoom {
    overflow: hidden;
}

.box-search > div.active{
    display: block;
}

.box-banner .box-left .box-hotline li a{
    background-image: linear-gradient(to bottom, #dff0d8 0, #c8e5bc 100%);
}

.main-banner img{
    aspect-ratio: 34 / 15;
    object-fit: cover;
}

.item-product img{
    aspect-ratio:  1 / 1;
}

.cus-info-footer .box-content h2{
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 700;
}

.cus-info-footer .box-content p{
    text-align: justify;
}

.cus-info-footer .box-content p:not(:last-child){
    margin-bottom: 10px;
}

footer .box-list-logo-policy img{
    aspect-ratio: 1 / 1;
}

.page-cate-product .box-desc h2{
    margin: 20px 0 10px;
    font-size: 30px;
    font-weight: 700;
}

.page-cate-product .box-desc p:not(:last-child){
    margin-bottom: 10px;
}

.item-art img{
    aspect-ratio: 16 / 9;
}

.pagination li .page-link{
    background: #BCBCBC;
    color: #fff;
}

.page-detail-art .box-content h2, .page-product-detail .box-content h2{
    font-size: 24px;
    font-weight: 700;
}

.page-detail-art .box-content h3, .page-product-detail .box-content h3{
    font-size: 20px;
    font-weight: 700;
}

.page-detail-art .box-content *, .page-contact .box-info p, .page-product-detail .box-content *{
    margin-bottom: 10px;
}

.page-detail-art .box-content p[style="text-align: center;"] img, .page-product-detail .box-content p[style="text-align: center;"] img{
    margin: 0 auto;
}

.page-detail-art .box-content table[border="1"] tr, .page-detail-art .box-content table[border="1"] td, .page-detail-art .box-content table[border="1"] th,
.page-product-detail .box-content table[border="1"] tr, .page-product-detail .box-content table[border="1"] td, .page-product-detail .box-content table[border="1"] th{
    border: 1px solid #808080;
}

.page-detail-art .box-content table td, .page-detail-art .box-content table th, .page-product-detail .box-content table td, .page-product-detail .box-content table th{
    padding: 5px;
}

.page-contact .box-map iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.page-product-detail .box-img img{
    aspect-ratio: 3 / 2;
}

.page-product-detail .box-callnow a{
    font-size: 20px;
    color: red;
}

.zoomIn{
    animation-name: zoomIn;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.pulse{
    animation-name: pulse;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.tada{
    animation-name: tadaa;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes zoomIn{
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes pulse{
    0% {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

@media(max-width:767px){
    footer .cus-info-footer.box-3{
        margin-top: -10px;
    }

    footer .cus-info-footer.box-3 h2{
        display: none;
    }
}