/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 20 2025 | 09:26:36 */
/* NÚT CHỌN NAM - NỮ */
.gender-filter a.gender-button {
	background-color: #F0F0F0;
	padding: 10px 24px;
	font-size: 16px;
	color: #000;
	border-radius: 113px;
	text-transform: uppercase;
	font-weight: 500;
}
.gender-filter a.gender-button.active {
	background: #0A4271;
	color: #fff;
}
.gender-filter a.gender-button + a.gender-button {
	margin-left: 10px;
}



/* NÚT XEM THÊM - THU GỌN */
button.hn__button-see-more {
	padding-right: 0;
	padding-left: 0;
	background: transparent !important;
	border: 0;
	color: #787878 !important;
	text-decoration: underline !important;
}


/* COLUMN FILTER PRODUCT */
.hn__product-category  h3, .hn__product-filters h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}
.hn__product-category .hn__cat-list {
	margin-top: 16px;
}
.hn__product-category .hn__cat-link {
	display: flex;
	align-items: center;
	color: #464646;
	gap: 10px;
	font-size: 15px;
}
.hn__product-category .hn__cat-link + .hn__cat-link {
	margin-top: 8px;
}
.hn__product-category .hn__cat-link .dot {
	--size-dot: 18px;
	width: var(--size-dot);
	height: var(--size-dot);
	display: inline-block;
	border-radius: 50%;
	border: 1px solid #464646;
	position: relative;
}
.hn__product-category .hn__cat-link .dot::before {
	content: "";
	position: absolute;
	background: transparent;
	inset: 2px;
	border-radius: 50%;
}
.hn__product-category .hn__cat-link.active .dot::before {
	background: #464646;
}

.hn__product-filters {
	margin-top: 32px;
}
.hn__filters-head {
	padding-bottom: 20px;
	border-bottom: 1px solid #D9D9D9;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
}
.hn__filters-head button.hn__clear-filters {
	padding: 0;
	font-size: 12px;
	color: #A6A6A6 !important;
	background: transparent !important;
	border: 0;
}
.hn__product-filters  p.filter-title {
    color: #0a4271;
    font-size: 16px;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 16px;
}
.hn__product-filters  .chip-wrap {
    --bg-hover-and-active: #114470;
    --gap: 10px;
    --column-count: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    grid-gap: var(--gap);
}
.hn__product-filters .chip-wrap button.chip {
	width: calc((100% - (var(--gap) * (var(--column-count) - 1))) / var(--column-count) );
	padding: 7px 5px;
	text-wrap: wrap;
	font-size: 12px;
	background: #fff;
	border: 1px solid #B7B7B7;
	transition: background .5s ease, color .5s ease;
	color: #464646;
	border-radius: 5px;
}
.hn__product-filters .chip-wrap button.chip.active, 
.hn__product-filters .chip-wrap button.chip:hover {
	background: var(--bg-hover-and-active);
	color: #fff;
}
.hn__product-filters .chip-wrap button.chip.hidden-more {
	display: none;
}
.hn__product-filters .chip-wrap button.chip-more-toggle {
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent !important;
	color: #787878 !important;
	font-size: 15px;
	text-decoration: underline;
	font-weight: 500;
}

.filter-size .btn-grid {
	display: flex;
	flex-wrap: wrap;
	--bg-hover-and-active: #0A4271;
	--gap: 10px;
	--column-count: 4;
	gap: var(--gap);
}
.filter-size .btn-grid .btn-opt {
	width: calc((100% - (var(--gap) * (var(--column-count) - 1))) / var(--column-count) );
	font-size: 14px;
	background: #fff;
	border: 1px solid #B7B7B7;
	transition: background .5s ease, color .5s ease;
	color: #464646;
	border-radius: 5px;
}

.filter-size .btn-grid .btn-opt.active, 
.filter-size .btn-grid .btn-opt:hover {
	background: var(--bg-hover-and-active);
	color: #fff;
}



.filter-color .color-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px var(--gap);
	--gap: 10px;
	--column-count: 3;
	--bg-hover-and-active: #B2854E;
}
.filter-color .color-grid .color-opt {
	width: calc((100% - (var(--gap) * (var(--column-count) - 1))) / var(--column-count) );
	padding: 0;
	border: 0;
	color: #464646 !important;
	background: transparent !important;
	font-size: 14px;
	/* 	display: flex; */
}
.filter-color .color-grid .color-opt .dot {
	--width: 28px;
	width: var(--width);
	height: var(--width);
	display: inline-block;
	border-radius: 50%;
	border: 1px solid transparent;
	position: relative;
}
.filter-color .color-grid .color-opt.active .dot {
	border: 1px solid var(--bg-hover-and-active);
}
.filter-color .color-grid .color-opt .dot::before {
	content: "";
	background: var(--color-variation);
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	border: 1px solid #e2e2e2;
}
.filter-color .color-grid .color-opt .label {
	display: block;
	line-height: 1em;
}
.filter-color .color-grid .color-opt.active .label {
	color: var(--bg-hover-and-active);
}



.filter-price .hn__price-list label.hn__radio {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: -10px;
}
.filter-price .hn__price-list label.hn__radio + label.hn__radio {
	margin-top: 12px;
}
.filter-price .hn__price-list label.hn__radio input {
	width: 0;
}

.filter-price .hn__price-list label.hn__radio .dot {
	--size-dot: 18px;
	width: var(--size-dot);
	height: var(--size-dot);
	display: inline-block;
	border-radius: 50%;
	border: 1px solid #464646;
	position: relative;
}
.filter-price .hn__price-list label.hn__radio .dot::before {
	content: "";
	position: absolute;
	background: transparent;
	inset: 2px;
	border-radius: 50%;
}
.filter-price .hn__price-list label.hn__radio input:checked + .dot::before {
	background: #464646;
}
.filter-price .hn__price-list label.hn__radio .text {
	font-size: 15px;
}




/* SẮP XẾP SẢN PHẨM */ 
.hn__sort-dropdown{
	position:relative;
	display:inline-block
}
.hn-sort__trigger {
	padding: 10px 24px;
	border-radius: 50px;
	border: 0 !important;
	background: #EFEFEF !important;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}
.hn-sort__trigger span.hn-sort__label {
	font-size: 15px;
	color: #4E4E4E;
	font-weight: 500;
	margin-right: 10px;
}
.hn-sort.is-open .hn-sort__trigger{
	border-color:#111; 
	box-shadow:0 0 0 2px rgba(17,17,17,.06)
}
.hn-sort__menu {
	position: absolute;
	z-index: 2;
	margin-top: 6px;
	min-width: 100%;
	background: #fff;
	border: 0 !important;
	border-radius: 16px;
	box-shadow: 0 2px 6px rgb(224 224 224 / 70%);
	padding: 5px;
	display: none;
}
.hn-sort.is-open .hn-sort__menu{
	display:block
}
.hn-sort__option {
	padding: 8px 20px;
	border-radius: 12px;
	cursor: pointer;
	font-size: 14px;
	white-space: nowrap;
}
.hn-sort__option:hover, .hn-sort__option.is-active {
	background: #f4f4f4;
}
.hn-sort__option.is-selected{
	background: #f4f4f4;
}
.hn-sort__chev {
	display: flex;
	transform: rotate(0);
}

/* EXPORT FILTER */
.homenest__exported-filters > span:not(:first-of-type) {
    margin-left: 10px;
}

.homenest__exported-filters > span:not(.clear-filter-tag) {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 14px;
}

.homenest__exported-filters > span {
	color: #525252;
}

.homenest__exported-filters > span > a {
    color: #525252;
}

.homenest__exported-filters > span.clear-filter-tag > a {
    color: #0A4271;
    font-weight: 500;
}






/* COL COLUMN PRODUCT */
.hn__product-list {
	display: grid;
	--column: 4;
	--column-gap: 16px;
	--row-gap: 28px;
	--width-column: calc((100% - (var(--column-gap) * (var(--column) - 1))) / var(--column));
	grid-template-columns: repeat(var(--column), var(--width-column));
	grid-gap: var(--row-gap) var(--column-gap);
}




/* ITEM PRODUCT */
.hn__all-products .hn__product-item__feature-image .add-to-cart__buy-now > a.add-to-cart {
	max-width: max-content;
}
.hn__all-products .hn__product-item__feature-image .add-to-cart__buy-now > a > span {
	display: none;
}

.hn__product-item__feature-image .add-to-cart__buy-now > a.buy-now {
	min-width: min-content;
	white-space: nowrap;
}


/* PAGINATION */
.hn__load-more-wrapper {
    text-align: center;
    margin-top: 40px;
}

button.hn__load-more-btn {
    background: #0A4271;
    border: 0;
    color: #FFF;
    height: 40px;
    padding: 0 20px;
    border-radius: 5px;
}


@media (max-width: 1600px) {
	/* NÚT CHỌN NAM - NỮ */
	/* NÚT XEM THÊM - THU GỌN */
	/* COLUMN FILTER PRODUCT */
	/* SẮP XẾP SẢN PHẨM */ 
	/* COL COLUMN PRODUCT */
	/* ITEM PRODUCT */
	/* PAGINATION */
}


@media (max-width: 1400px) {
	/* NÚT CHỌN NAM - NỮ */
	/* NÚT XEM THÊM - THU GỌN */
	/* COLUMN FILTER PRODUCT */
	/* SẮP XẾP SẢN PHẨM */ 
	/* COL COLUMN PRODUCT */
	.hn__product-list {
		--column-gap: 12px;
	}
	/* ITEM PRODUCT */
	/* PAGINATION */

}

@media (max-width: 1280px) {
	/* NÚT CHỌN NAM - NỮ */
	/* NÚT XEM THÊM - THU GỌN */
	/* COLUMN FILTER PRODUCT */
	.hn__column-filter {
		width: 25%;
	}
	/* SẮP XẾP SẢN PHẨM */ 
	/* COL COLUMN PRODUCT */
	.hn__column-product {
		width: 75%;
	}
	.hn__product-list {
		--column: 3;
	}
	/* ITEM PRODUCT */

	/* PAGINATION */

}

@media (max-width: 992px) {
	/* NÚT CHỌN NAM - NỮ */
	/* NÚT XEM THÊM - THU GỌN */
	/* COLUMN FILTER PRODUCT */
	/* SẮP XẾP SẢN PHẨM */ 
	/* COL COLUMN PRODUCT */
	.hn__column-product {
		width: 100%;
	}
	/* ITEM PRODUCT */
	/* PAGINATION */


}


@media (max-width: 768px) {
	/* NÚT CHỌN NAM - NỮ */
	/* NÚT XEM THÊM - THU GỌN */
	/* COLUMN FILTER PRODUCT */
	/* SẮP XẾP SẢN PHẨM */ 
	/* COL COLUMN PRODUCT */
	.hn__product-list {
		--column: 2;
	}
	/* ITEM PRODUCT */
	/* PAGINATION */

}



@media (max-width: 576px) {
	/* NÚT CHỌN NAM - NỮ */
	/* NÚT XEM THÊM - THU GỌN */
	/* COLUMN FILTER PRODUCT */
	/* SẮP XẾP SẢN PHẨM */ 
	/* COL COLUMN PRODUCT */
	.hn__product-list {
		--column-gap: 8px;
	}

	/* ITEM PRODUCT */
	/* PAGINATION */

	.hn-sort__trigger {
		line-height: 1em;
		padding: 12px 16px;
	}



	.hn-sort__option {
		padding: 7px 20px;
		font-size: 13px;
	}


	nav.hn__pagination ul.page-numbers {
		gap: 8px;
		--size-btn: 32px;
		font-size: 14px;
	}
}
