@media(max-width: 849px){
	.mobile-sidebar .nav>li>a{
		color: #000;
		font-size: 1rem;
	}

	.nav-column>li>a,
	.nav-dropdown>li>a,
	.nav-vertical-fly-out>li>a,
	.nav>li>a{
		color: #000;
		font-size: 0.875rem;
	}

	.header-main .header-inner .flex-left,
	.header-main .header-inner .flex-right{
		width: 200px;
		flex: unset;
	}

	.mobile-nav > li{
		margin: 0;
	}

	.mobile-nav > li .icon.button,
	.mobile-nav .nav-icon a{
		background-color: transparent;
		border: 0;
		width: 2rem;
		height: 2rem;
	}


	.banner-page{
		height: 40vh;
	}

	.banner-page .title-banner-page{
		font-size: 60px;
	}

	/*==== Trang chủ*/
	.swipper-specialization .swiper-slide{
		width: 60%;
	}

	.partner-block{
		grid-template-columns: repeat(4, 1fr);
	}


	/*Trang giới thiệu*/
	.collection-list{
		grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
	}

}


@media(max-width: 549px){
    input[type='submit'], input[type="button"], button:not(.icon), .button:not(.icon){
		font-size: 0.875rem;
		padding: 0.5rem 0.75rem;
	}

	body{
		font-size: 0.875rem;
	}

	.section-title-container{
		margin-bottom: 30px;
	}

	.section-title.section-title-normal{
		font-size: 30px;
	}


	/*===*/
	.banner-page .title-banner-page{
		font-size: 50px;
	}


	/*==== Trang chủ*/
	.swipper-specialization .swiper-slide{
		width: 90%;
	}

	.specialization-button-next,
	.specialization-button-prev{
	    width: 2.75rem;
	    height: 2.75rem;
	}


	.specialization-button-next:after,
	.specialization-button-prev:after{
		font-size: 1.5rem;
	}


	.partner-block{
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}



	/*Trang giới thiệu*/
	.collection-list{
		grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
	}




	/*Footer*/
	.stack-column-for-mb{
		flex-wrap: wrap;
		gap: 2rem;
	}

	.col-footer .ux-menu{
		flex-wrap: wrap;
		gap: 3rem;
		margin-left: 0 !important;
	}

	.col-footer .ux-menu .ux-menu-link{
		width: calc(50% - 2rem);
		justify-content: center;
	}


}

@media (min-width: 550px){
	.justify-content-md-between{
		justify-content: space-between;
	}

	.col-md-auto{
		flex-basis: auto;
		max-width: fit-content;
	}

}

@media (min-width: 850px){
	.row-col-lg-5 .col{
		flex-basis: 20%;
        max-width: 20%;
	}

	.flex-lg-row-reverse{
		flex-direction: row-reverse;
	}

	.justify-content-lg-between{
		justify-content: space-between;
	}

	.col-lg-auto{
		flex-basis: auto;
		max-width: fit-content;
	}

	/*.header-nav-main.nav li.menu-item.active > a,
	.header-nav-main.nav li.menu-item:hover > a{
		color: #e04742 !important;

	}*/

	.header-nav .sub-menu,
	.header-nav .active>ul.children,
	.header-nav .active>ul.sub-menu{
		display: none !important;
		padding: 0;
		/*min-width: unset;*/
		border: 0;
		border-radius: 0.25rem;
		background-color: #fff;
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	}

	.header-nav .menu-item{
		width: unset !important;
		min-width: unset !important;
		position: relative;
		margin: 0;
	}

	/*=== cs bg-item*/
	.header-nav.nav > li.menu-item{
		z-index: 1;
		padding-left: 40px;
		padding-right: 40px;
	}

	.header-nav.nav > li.menu-item> a:after {
        content: "";
        position: absolute;
 		inset: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
        background-image: linear-gradient(to bottom, var(--fs-color-primary) 6%, #0f4d8a 50%, var(--fs-color-primary) 93%);
        transition: all .3s ease-in-out;
        opacity: 0;
    }



    .header-nav-main.nav > li.menu-item.active > a,

	.header-nav-main.nav > li.menu-item:hover > a,

	.header-nav-main.nav > li.menu-item.current-dropdown > a{

		color: #fff !important;

	}



	.header-nav-main.nav > li.menu-item.active > a:after,

	.header-nav-main.nav > li.menu-item > a:hover:after,

	.header-nav-main.nav > li.menu-item.current-dropdown > a:after{

		opacity: 1;

	}

	/*=== end cs bg-item*/



	.header-nav .sub-menu>.menu-item>a{

		padding: 0.75rem 0;

		font-size: 15px;

		font-weight: 500;

		color: #000;

		text-transform: capitalize;

	}



	.header-nav .sub-menu > .menu-item:hover > a{

		color: var(--primary-color);

	}





	.header-nav .menu-item:hover > .sub-menu,

	.header-nav .menu-item.current-dropdown .sub-menu{

		display: block !important;

		animation: menu 0.3s;

		height: min-content;

	}



	.header-nav .sub-menu .menu-item>.sub-menu{

		position: absolute;

		left: 100%;

		top: 0;

		z-index: 10;

	}



	.header-nav .sub-menu li{

		display: block;

	}



	@keyframes menu {

	    0% { transform: translateY(20px); opacity: 0}

	    100% { transform: translateY(0px); opacity: 1}

	}



}