/*
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.   ***************/
/* Khi màn hình lớn hơn 1025px NHƯNG nhỏ hơn 1650px */
@media (min-width: 1025px) and (max-width: 1650px) {
    .container-width, .full-width .ubermenu-nav, .container, .row {
        max-width: 1428px !important;
    }
}
/* Laptop màn nhỏ hoặc Tablet ngang */
@media (min-width: 1025px) and (max-width: 1280px) {
   .container-width, .full-width .ubermenu-nav, .container, .row {
       max-width: 1170px !important; 
   }
}
.row-full-width {
    max-width: 100% !important;
}
@media screen and (min-width: 850px) {
    .gallery-columns-5 .gallery-item, .large-columns-5 .flickity-slider>.col, .large-columns-5>.col {
        flex-basis: 22%;
        max-width: 22%;
    }
}
h1, h2, h3, h4, h5, h6, .heading-font{
	font-family: 'Hina Mincho' !important;
}
.row-slider.slider-nav-circle .flickity-prev-next-button{
	    bottom: 0;
	opacity: 1;
	width: 48px;
}
.row-slider.slider-nav-circle .flickity-prev-next-button svg{
	    top: 100%;
	padding: 33%;
} 
.slider-nav-circle .flickity-prev-next-button .arrow, .slider-nav-circle .flickity-prev-next-button svg {
    border: 1px solid #dddddd !important;
}
.row-slider.slider-nav-circle .flickity-prev-next-button.previous{
	left: 88%;
}
.row-slider.slider-nav-circle .flickity-prev-next-button.next{
	right: 6%;
}
.related-products-wrapper .row-slider.slider-nav-circle .flickity-prev-next-button.next {
    right: 0%;
}
.related-products-wrapper .row-slider.slider-nav-circle .flickity-prev-next-button.previous {
    left: 93%;
}
@media (min-width: 1025px) and (max-width: 1650px) {
	.row-slider.slider-nav-circle .flickity-prev-next-button.next{
		right: 4%;
	}
}
.row-slider.slider-nav-circle .flickity-viewport:after{
	content:"";
	display: block;
	width: 87%;
	height: 1px;
	background: #ddd;
	position: absolute;
	left: 0;
	bottom:0;
}
.related-products-wrapper .row-slider.slider-nav-circle .flickity-viewport:after{
	width: 92%;
}
.nb-section5 .row2 > .col > .col-inner {
    	padding: 0px 0px 0px 9% !important;
}
@media (min-width: 1025px) and (max-width: 1650px) {
	.nb-section5 .row.row-full-width{
		max-width: 1428px !important;
	}
	.nb-section5 .row2 > .col > .col-inner {
    	padding: 0px 0px 0px 0% !important;
	}
}
@media only screen and (max-width: 48em) {
	.nb-section5 .row2 > .col > .col-inner {
    	padding: 0px 0px 0px 4% !important;
	}
	.related-products-wrapper .row-slider.slider-nav-circle .flickity-prev-next-button.next {
		right: 6%;
	}
	.related-products-wrapper .row-slider.slider-nav-circle .flickity-prev-next-button.previous {
		left: 80%;
	}
	.row-slider.slider-nav-circle .flickity-prev-next-button svg {
		padding: 25% !important;
	}
	.related-products-wrapper .row-slider.slider-nav-circle .flickity-viewport:after{
		width: 80%;
	}
	.row-slider.slider-nav-circle .flickity-prev-next-button {
		width: 35px !important;
	}
	.row-slider.slider-nav-circle .flickity-prev-next-button.next {
		right: 0%;
	}
	.row-slider.slider-nav-circle .flickity-prev-next-button.previous {
		left: 80%;
	}
	.row-slider.slider-nav-circle .flickity-viewport:after {
		width: 79%;
	}
}
.row.mobile-scroll-grid .col{
	padding-bottom: 0 !important;
}
/* Chỉ áp dụng cho Mobile (dưới 850px) */
@media (max-width: 849px) {
    .mobile-scroll-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; 
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px !important; 
    }
    .mobile-scroll-grid > .col {
        flex: 0 0 31% !important; 
        max-width: 31% !important;
        scroll-snap-align: start;
    }
    .mobile-scroll-grid::-webkit-scrollbar {
        height: 4px;
        display: block;
    }
    .mobile-scroll-grid::-webkit-scrollbar-track {
        background-color: #ebebeb;
        border-radius: 4px;
        margin: 0 10px;
    }
    .mobile-scroll-grid::-webkit-scrollbar-thumb {
        background-color: #333;
        border-radius: 4px;
        border: 1px solid #ebebeb;
    }
    .mobile-scroll-grid {
        scrollbar-width: thin;
        scrollbar-color: #333 #ebebeb;
    }
}


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


}