.projectsIsotope--wrapper ul#filters li {
    border: 0px !important;
}

.projectsIsotope--wrapper ul#filters li a.selected {
    background-color: #494949;
    color: #ffffff !important;
}











.filter-tag {
	display: inline-flex;
	align-items: center;
	background: #eee;
	border-radius: 20px;
	padding: 4px 10px;
	margin: 16px 8px 0px 8px;
	font-size: 14px;
}
.filter-tag span {
	margin-right: 6px;
}
.filter-tag .remove {
	cursor: pointer;
	font-weight: bold;
	color: #555;
}

body .filter-button-style {
    font-size: 16px !important;
	line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #000000 !important;
    border-radius: 8px !important;
    border: 1px solid grey !important;
    padding: 8px 12px !important;
    width: 200px;
	background-color: transparent;
}

body .project--filter-wrapper {
    justify-content: flex-start;
    gap: 16px;
}

body .projectsIsotope--wrapper ul#filters {
    grid-gap: 16px;
}

body .projects--fillter-right {
    grid-gap: 16px;
}


button#toggle-filter {
    background: #000000;
    border: 1px solid #000000;
    border-radius: 12px;
    width: 100%;
    font-size: 16px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 12px 16px;
}

.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

button#close-filter {
    background: #000000;
    width: 40px;
    height: 40px;
    padding: 0px;
    border-radius: 0%;
    border: 1px solid #ffffff !important;
}

.mobile-filter-heading {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
}

ul.cards.grid {
	margin-top: 32px;
}

@media(min-width: 1025px) {
    button#toggle-filter, .filter-sidebar-header {
        display: none !important;
    }    
}
@media(max-width: 1024px){
	.filter-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease;
		z-index: 9998;
	}
	
	.filter-overlay.active {
		opacity: 1;
		visibility: visible;
	}
	
	.filter-sidebar {
		position: fixed;
		top: 0;
		right: -100%;
		width: 80%;
		max-width: 320px;
		height: 100%;
		background: #fff;
		box-shadow: -2px 0 8px rgba(0,0,0,0.2);
		transition: right 0.3s ease;
		z-index: 9999;
		overflow-y: auto;
		padding: 20px;
	}
	
	.filter-sidebar.active {
		right: 0;
	}    
	
	.filter-button-style {
		width: 100% !important;
	}

	.projects-type>div:first-child {
        display: block !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        color: #000000 !important;
	}

	.projects-type {
		flex-direction: column;
		align-items: flex-start !important;
	}

	select.filter-button-style {
		background: transparent !important;
	}	
	
	
	
}



/* Overlay mờ nền */
/* Sidebar filter */

/* 
.filter-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	z-index: 9998;
}

.filter-overlay.active {
	opacity: 1;
	visibility: visible;
}

.filter-sidebar {
	position: fixed;
	top: 0;
	right: -100%;
	width: 80%;
	max-width: 320px;
	height: 100%;
	background: #fff;
	box-shadow: -2px 0 8px rgba(0,0,0,0.2);
	transition: right 0.3s ease;
	z-index: 9999;
	overflow-y: auto;
	padding: 20px;
}

.filter-sidebar.active {
	right: 0;
}
 */