.sort-cate ul {
	padding-left: 0;
	list-style: none;
	margin: 0px;
}
@media (max-width: 1023px) {
	.sort-cate {
		--border-color: #eee;
		font-size: 12px;
	}
	.sort-cate li {
		margin: 0 auto;
		outline: none;
		position: relative;
		width: 120px;
		padding: 0 10px;
		color: var(--text-color);
		font-size: 12px;
		cursor: pointer;
		border: 1px solid var(--border-color);
		border-radius: 6px;
	}
	.sort-cate #sort-by {
		background: #fff;
		padding-bottom: 10px;
	}
	.sort-cate #sort-by > ul > li {
		line-height: 34px;
	}
	.sort-cate #sort-by > ul > li .fas {
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.sort-cate #sort-by > ul > li:hover {
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
		box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
	}
	.sort-cate #sort-by > ul > li:hover > ul {
		visibility: visible;
	}
	.sort-cate #sort-by li > ul {
		position: absolute;
		visibility: hidden;
		width: 120px;
		left: -1px;
		top: 34px;
		z-index: 9999;
		border: 1px solid var(--border-color);
		border-radius: 0px 0px 6px 6px;
		overflow: hidden;
		background: #fff;
	}
	.sort-cate #sort-by li > ul li {
		border-top: none;
		border-right: none;
		border-left: none;
		border-radius: 0px;
	}
	.sort-cate #sort-by li > ul li:hover a {
		color: var(--primary-color);
	}
	#open-filters {
		font-size: 12px;
	}
	#open-filters .fa {
		font-size: 16px;
	}
}
@media (min-width: 1024px) {
	.sort-cate .fas {
		display: none;
	}
	.sort-cate .content_ul li {
		display: inline-block;
	}
	.sort-cate .content_ul li a {
		font-weight: 400;
		color: #898989;
		padding: 9px 10px 11px;
		display: inline-block;
	}
	.sort-cate .content_ul li:hover, .sort-cate .content_ul li.active {
		border-bottom: 2px solid var(--primary-color);
		margin-bottom: -2px;
	}
	.sort-cate .content_ul li:hover a, .sort-cate .content_ul li.active a {
		color: var(--primary-color);
	}
}
.card {
	border-radius: 0px;
	border: none;
}
@media (min-width: 1200px) {
	.sidebar .wrap_background_aside {
		// border-right: 1px solid #eee;
	}
}
.sidebar.openf {
	top: 0 !important;
	right: 0;
	height: 100%;
	overflow: auto;
	z-index: 9999;
	visibility: visible;
	opacity: 1;
	width: 300px;
}
.pagenav {
	display: flex;
	justify-content: center;
	align-items: center;
}
.overflow-item:not(.show) {
	display: none;
}
.filter-item-toggle .fas {
	transitions: all 0.3s ease-out;
}
.filter-item-toggle.show {
	display: inline-block;
}
.filter-item-toggle.show .fas {
	transform: rotate(180deg);
}

.ega-badge-ctd {
	display: flex;
	align-items: center; }

.ega-badge-ctd__item {
	border-radius: 3px;
	margin: auto 6px;
	color: var(--countdown-color);
	background-color: var(--countdown-background);
	text-align: center;
	display: flex;
	place-items: center;
	place-content: center;
	width: 44px;
	height: 40px;
	font-size: 18px;
	font-weight: 500;
	line-height: 20px; }

.ega-badge-ctd__colon {
	font-weight: bold;
	font-size: 14px;
	color: var(--countdown-background); }

.ega-badge-ctd__s {
	margin-right: 0px; }

.flashsale {
	--background-color: #f4ebc1;
	--countdown-background: #d3232a;
	--countdown-color: #fff;
	background: var(--background-color, transparent);
	padding: 10px;
	margin-bottom: 20px;
	border-radius: 10px; }
@media (max-width: 575px) {
	.flashsale {
		padding: 0px; } }
.flashsale__title {
	display: flex;
	align-items: center; }
.flashsale__header {
	flex-direction: column;
	justify-content: center;
	margin: auto; }
.flashsale__countdown-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: auto; }
.flashsale__countdown-label {
	color: var(--text-color);
	font-size: 1rem;
	margin-bottom: 10px; }

.promo-box-wrapper {
	/* the parent */ }
.promo-box-wrapper .slick-list {
	margin: auto; }
.promo-box-wrapper::-webkit-scrollbar {
	display: none; }
.promo-box-wrapper .slick-slide {
	margin: 0 10px; }
.promo-box-wrapper .slick-list {
	margin: 0 -10px; }
.promo-box-wrapper:not(.slick-slider) {
	overflow: auto;
	display: flex;
	flex-wrap: no-wrap; }

.flashsale-coupon {
	margin: 1rem auto;
	border-radius: 0.25rem !important;
	box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
	background: #fff;
	margin: 10px auto; }
.flashsale-coupon .coupon-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 16px;
	color: #000;
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
	border-bottom: 1px solid #eee; }
.flashsale-coupon .coupon-footer {
	border-top: 1px dashed #bbb;
	padding-top: 8px; }
.flashsale-coupon .coupon-content {
	line-height: 1.5;
	margin-bottom: .75rem; }
.flashsale-coupon .text-blue {
	color: #06748a; }
.flashsale-coupon .code {
	text-transform: uppercase;
	font-size: 1.7rem;
	margin-bottom: 0 !important;
	font-weight: 500;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 60%;
	color: #f44336; }
.flashsale-coupon .copy-btn {
	--primary-color: #ff5722;
	font-size: .68rem;
	border-radius: 1rem;
	display: inline-block;
	padding: .35rem .6rem;
	font-weight: 500;
	text-transform: capitalize; }
.flashsale-coupon .coupon-body {
	padding: .5rem; }
.flashsale-coupon .coupon-body p {
	line-height: 1.5;
	font-size: 14px;
	padding: 10px; }
@media (max-width: 767px) {
	.flashsale-coupon {
		flex: 0 0 300px;
		max-width: 300px; }
	.flashsale-coupon + .flashsale-coupon {
		margin-left: 10px; } }
/*Mai (23/06/2022)*/
.col_content .col_desc {
	height: 100px;
	overflow: hidden;
}

.col_content.see_more_tab .col_desc {
	height: auto;
}

.col_content .gradient {
	position: absolute;
	bottom: 39px;
	left: 0px;
	width: 100%;
	height: 100px;
	display: block;
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
.col_content.see_more_tab .gradient{
	display: none;
}
.btn_more.btn-secondary p {
	padding: 5px;
	margin-bottom: 0;
	text-align: center;
	border-radius: 5px;
}
.btn_more.btn-secondary {
	border-radius: 5px;
}
@media (max-width: 991px){
	#open-filters {
		display: flex !important;
		align-items: center;
		padding: 7px 10px !important;
		border: 1px solid #ddd;
		border-radius: 5px;
    font-weight: 500;
	}
	#open-filters h6{margin-bottom: 0;margin-left: 3px;}
}

/* ================= BASE ================= */
/* ================= BASE ================= */
.owl-coll-slider{
  margin-bottom:15px;background:#fff;border:1px solid #e6e8f0;border-radius:14px;padding:12px;
  box-shadow:0 8px 28px rgba(16,24,40,.06);overflow:hidden!important; /* Fix: ẩn khoảng trống */
}
.owl-coll-slider .slick-list{margin:0;} /* Fix: bỏ margin âm */
.owl-coll-slider .slick-slide{padding:0 4px;height:auto;width:auto!important;} /* Fix: giảm padding */
.owl-coll-slider .slick-track{display:flex;gap:0;align-items:stretch;} /* Fix: bỏ gap */
.owl-coll-slider .slick-slide>div{height:100%;}

/* Card chung (brand dạng "dynamic width") */
.owl-coll-slider .col-vendor-item{
  height:60px;padding:8px 12px;border:1px solid #e6e8f0;border-radius:12px;background:#fff; /* Fix: border xám khi không hover */
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;
  text-align:left;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,transform .2s;
  width:auto!important;min-width:auto;max-width:none;flex-shrink:0;
  margin-right:8px; /* Fix: thay gap bằng margin */
}
.owl-coll-slider .slick-slide:last-child .col-vendor-item{margin-right:0;} /* Fix: bỏ margin cuối */

.owl-coll-slider .col-vendor-item a:first-child{
  height:40px;width:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:none!important;background:transparent;line-height:0;font-size:0;box-shadow:none!important;
}
.owl-coll-slider .col-vendor-item a:first-child img{
  max-height:32px;max-width:32px;width:auto!important;height:auto!important;object-fit:contain;
  display:block!important;margin:auto;filter:grayscale(18%);transition:filter .2s,transform .2s;
}
.owl-coll-slider .col-vendor-item .title{
  display:block!important;font-size:12px;line-height:1.3;color:#111827;
  white-space:nowrap;overflow:visible;text-overflow:clip;margin:0;flex-shrink:0;
}

/* Hover & arrows (desktop) - Fix: border cam chỉ khi hover */
@media (hover:hover){
  .owl-coll-slider .col-vendor-item:hover{
    border-color:#ff6600!important; /* Fix: border cam khi hover */
    box-shadow:0 6px 18px rgba(16,24,40,.12);transform:translateY(-1px);
  }
  .owl-coll-slider .col-vendor-item:hover a:first-child img{filter:grayscale(0%);transform:scale(1.05);}
}

@media (min-width:992px){
  .owl-coll-slider .slick-arrow{
    position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
    background:#fff!important;border:1px solid #e6e8f0;box-shadow:0 3px 10px rgba(0,0,0,.12);z-index:3;
  }
  .owl-coll-slider .slick-prev{left:-22px;}
  .owl-coll-slider .slick-next{right:-22px;}
  .owl-coll-slider .slick-prev:before,.owl-coll-slider .slick-next:before{color:#111;font-size:16px;opacity:.8;}
}

/* ================= <=1200px ================= */
@media (max-width:1199.98px){
  .owl-coll-slider .slick-list{margin:0;} /* Fix: bỏ margin âm */
  .owl-coll-slider .slick-slide{padding:0 3px;} /* Fix: giảm padding */
  .owl-coll-slider .col-vendor-item{gap:8px;margin-right:6px;} /* Fix: giảm margin */
}

/* ================= <=992px (tablet) ================= */
@media (max-width:991.98px){
  .owl-coll-slider{padding:8px 6px;}
  .owl-coll-slider .slick-list{margin:0;} /* Fix: bỏ margin âm */
  .owl-coll-slider .slick-slide{padding:0 2px;} /* Fix: giảm padding */
  .owl-coll-slider .col-vendor-item{height:45px;padding:5px 8px;gap:6px;margin-right:4px;} /* Fix: thêm margin */
  .owl-coll-slider .col-vendor-item a:first-child{height:30px;width:30px;}
  .owl-coll-slider .col-vendor-item a:first-child img{max-height:24px;max-width:24px;}
  .owl-coll-slider .col-vendor-item .title{font-size:10px;line-height:1.2;}
  .owl-coll-slider .slick-arrow{display:none!important;}
}

/* ================= <=768px (phablet) ================= */
@media (max-width:767.98px){
  .owl-coll-slider .slick-list{margin:0;} /* Fix: bỏ margin âm */
  .owl-coll-slider .slick-slide{padding:0 2px;} /* Fix: giảm padding */
  .owl-coll-slider .col-vendor-item{margin-right:3px;} /* Fix: giảm margin */
}

/* ================= <=576px (mobile) ================= */
@media (max-width:575.98px){
  .owl-coll-slider{padding:6px 4px;margin-bottom:10px;}
  .owl-coll-slider .slick-list{margin:0;} /* Fix: bỏ margin âm */
  .owl-coll-slider .slick-slide{padding:0 1px;} /* Fix: giảm padding */
  .owl-coll-slider .col-vendor-item{height:36px;padding:4px 6px;gap:5px;border-radius:10px;margin-right:6px;} /* Fix: thêm margin */
  .owl-coll-slider .col-vendor-item a:first-child{height:24px;width:24px;}
  .owl-coll-slider .col-vendor-item a:first-child img{max-height:20px;max-width:20px;}
  .owl-coll-slider .col-vendor-item .title{font-size:9px;line-height:1.1;}
}

/* ================= <=400px (xs) ================= */
@media (max-width:400px){
  .owl-coll-slider{padding:4px;}
  .owl-coll-slider .slick-list{margin:0;} /* Fix: bỏ margin âm */
  .owl-coll-slider .slick-slide{padding:0 1px;} /* Fix: giảm padding */
  .owl-coll-slider .col-vendor-item{height:32px;padding:3px 5px;gap:4px;margin-right:1px;} /* Fix: thêm margin */
  .owl-coll-slider .col-vendor-item a:first-child{height:20px;width:20px;}
  .owl-coll-slider .col-vendor-item a:first-child img{max-height:18px;max-width:18px;}
  .owl-coll-slider .col-vendor-item .title{font-size:8px;}
}

/* ================= Reduce motion ================= */
@media (prefers-reduced-motion:reduce){
  .owl-coll-slider .col-vendor-item,
  .owl-coll-slider .col-vendor-item a:first-child,
  .owl-coll-slider .col-vendor-item a:first-child img{transition:none!important;}
}

/* ================= PRODUCT SLIDER (không phải .brands-grid) ================= */
.owl-coll-slider:not(.brands-grid) .slick-list{margin:0 -10px;}
.owl-coll-slider:not(.brands-grid) .slick-slide{padding:0 10px;}
.owl-coll-slider:not(.brands-grid) .col-vendor-item{
  height:80px;padding:10px 12px;border:1px solid #e6e8f0;gap:12px;justify-content:flex-start; /* Fix: border xám mặc định */
  width:auto!important;min-width:fit-content;max-width:220px;
}
.owl-coll-slider:not(.brands-grid) .col-vendor-item:hover{
  border-color:#ff6600!important; /* Fix: border cam khi hover */
}
.owl-coll-slider:not(.brands-grid) .col-vendor-item a:first-child{
  height:60px;width:60px;margin-bottom:0;padding:6px;border:1px solid #e6e8f0!important;border-radius:12px; /* Fix: border xám mặc định */
  background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);flex-shrink:0;
}
.owl-coll-slider:not(.brands-grid) .col-vendor-item:hover a:first-child{
  border-color:#ff6600!important; /* Fix: border cam khi hover */
}
.owl-coll-slider:not(.brands-grid) .col-vendor-item a:first-child img{width:100%;height:100%;}
.owl-coll-slider:not(.brands-grid) .col-vendor-item .title{
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;
  overflow:hidden;text-overflow:ellipsis;min-height:auto;font-size:12px;line-height:1.3;padding:0;flex-shrink:1;text-align:left;
}

/* <=992px */
@media (max-width:991.98px){
  .owl-coll-slider:not(.brands-grid) .slick-list{margin:0 -6px;}
  .owl-coll-slider:not(.brands-grid) .slick-slide{padding:0 6px;}
  .owl-coll-slider:not(.brands-grid) .col-vendor-item{height:60px;padding:6px 8px;gap:8px;max-width:180px;}
  .owl-coll-slider:not(.brands-grid) .col-vendor-item a:first-child{height:50px;width:50px;}
  .owl-coll-slider:not(.brands-grid) .col-vendor-item .title{font-size:11px;}
}

/* <=576px */
@media (max-width:575.98px){
  .owl-coll-slider:not(.brands-grid) .slick-list{margin:0 -4px;}
  .owl-coll-slider:not(.brands-grid) .slick-slide{padding:0 4px;}
  .owl-coll-slider:not(.brands-grid) .col-vendor-item{height:48px;padding:4px 6px;gap:6px;max-width:160px;}
  .owl-coll-slider:not(.brands-grid) .col-vendor-item a:first-child{height:45px;width:45px;}
  .owl-coll-slider:not(.brands-grid) .col-vendor-item .title{font-size:10px;}
}

/* ================= FIX CUỐI CÙNG - NGĂN KHOẢNG TRỐNG THỪA ================= */
.owl-coll-slider .slick-track{
  width:auto!important;
  max-width:none!important;
}


/* ========= PRODUCT GRID (products-view) ========= */
/* Khoảng cách cột – bỏ cảm giác ô lưới */
.products-view .product-list{ 
  margin-left:-10px; 
  margin-right:-10px;
}
.products-view .product-list .product-col{ 
  padding-left:5px; 
  padding-right:5px; 
  margin-bottom:10px;
}

/* XÓA mọi đường kẻ/lưới bên ngoài do theme chèn */
.products-view.products-view-grid,
.products-view.products-view-grid .product-list{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
.products-view.products-view-grid .product-list .product-col{
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  background:transparent !important;
}
.products-view.products-view-grid .product-list:before,
.products-view.products-view-grid .product-list:after,
.products-view.products-view-grid .product-list .product-col:before,
.products-view.products-view-grid .product-list .product-col:after{
  content:none !important;
  display:none !important;
}

/* Card: bo góc + viền + đổ bóng */
.products-view .item_product_main{
  --card-radius: 14px;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e9eef6;
  border-radius:var(--card-radius);
  overflow:hidden; /* ảnh bo theo card */
  box-shadow:
    0 10px 24px rgba(16,24,40,.12),
    0 1px 0 rgba(16,24,40,.06);
  transition: transform .22s, box-shadow .22s, border-color .22s;
  will-change: transform;
}

/* Ảnh đầu thẻ bo theo card */
.products-view .item_product_main .product-thumbnail img,
.products-view .item_product_main .thumb img,
.products-view .item_product_main .image img{
  width:100%;
  height:auto;
  display:block;
  border-top-left-radius:var(--card-radius);
  border-top-right-radius:var(--card-radius);
  object-fit:cover;
}

/* Nội dung trong card */
.products-view .item_product_main .product-info,
.products-view .item_product_main .info,
.products-view .item_product_main .content{
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

/* Tên sản phẩm 2 dòng gọn */
.products-view .item_product_main .product-name a,
.products-view .item_product_main .product-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  line-height:1.5;
  min-height:3em;
}

/* Hover card: nhấc nhẹ + bóng đậm + viền ấm */
.products-view .item_product_main:hover{
  transform:translateY(-4px);
  box-shadow:
    0 22px 44px rgba(16,24,40,.16),
    0 2px 0 rgba(16,24,40,.06);
  border-color:#ffcaa6;
}

/* Focus ring nhẹ khi tab vào */
.products-view .item_product_main:focus-within{
  outline:none;
  box-shadow:
    0 22px 44px rgba(16,24,40,.18),
    0 0 0 2px rgba(255,122,0,.12);
  border-color:rgba(255,122,0,.6);
}

/* Sao đánh giá – sáng & nhún khi hover card */
.products-view .item_product_main .rating i,
.products-view .item_product_main .spr-icon-star,
.products-view .item_product_main .bizweb-product-reviews-star,
.products-view .item_product_main .fa-star,
.products-view .item_product_main .icon-star{
  color:#ffb000;
  transition: transform .18s ease, filter .18s ease, color .18s;
}
.products-view .item_product_main:hover .rating i,
.products-view .item_product_main:hover .spr-icon-star,
.products-view .item_product_main:hover .bizweb-product-reviews-star,
.products-view .item_product_main:hover .fa-star,
.products-view .item_product_main:hover .icon-star{
  color:#ffc857;
  transform:translateY(-1px) scale(1.08);
  filter:drop-shadow(0 0 6px rgba(255,184,40,.45));
}

/* ===== Mobile (≤ 768px) ===== */
@media (max-width: 767.98px){
  .products-view .product-list{ margin-left:-6px; margin-right:-6px; }
  .products-view .product-list .product-col{ padding:6px; margin-bottom:12px; }

  .products-view .item_product_main{
    --card-radius:10px;
    box-shadow:0 8px 18px rgba(16,24,40,.12), 0 1px 0 rgba(16,24,40,.06);
  }
  .products-view .item_product_main .product-info{ padding:8px 10px 10px; gap:6px; }
}

/* ===== FIX sau khi lọc (AJAX) – giữ gutter, bỏ lưới ===== */

/* Gutter cho cả 2 trường hợp: có .product-list hoặc chỉ còn .content-col */
.products-view.products-view-grid .product-list,
.products-view.products-view-grid .content-col{ 
  margin-left:-10px !important;
  margin-right:-10px !important;
}

/* Cột sản phẩm: bỏ border/âm margin của theme & thêm padding đều */
.products-view.products-view-grid .product-list > [class*="product-col"],
.products-view.products-view-grid .content-col  > [class*="product-col"],
.list_hover_pro .content-col > [class*="product-col"],
.responsive.list_hover_pro .content-col > [class*="product-col"]{
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin: 0 0 10px 0 !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Xoá các đường kẻ/pseudo grid mà theme chèn */
.products-view.products-view-grid .product-list::before,
.products-view.products-view-grid .product-list::after,
.products-view.products-view-grid .content-col::before,
.products-view.products-view-grid .content-col::after,
.products-view.products-view-grid .product-list > [class*="product-col"]::before,
.products-view.products-view-grid .product-list > [class*="product-col"]::after,
.products-view.products-view-grid .content-col  > [class*="product-col"]::before,
.products-view.products-view-grid .content-col  > [class*="product-col"]::after{
  content:none !important;
  display:none !important;
}

/* Mobile: giữ khoảng cách mềm */
@media (max-width: 767.98px){
  .products-view.products-view-grid .product-list,
  .products-view.products-view-grid .content-col{
    margin-left:-6px !important;
    margin-right:-6px !important;
  }
  .products-view.products-view-grid .product-list > [class*="product-col"],
  .products-view.products-view-grid .content-col  > [class*="product-col"]{
    padding:6px !important;
    margin-bottom:12px !important;
  }
}

/* ===== Toolbar (không sticky) ===== */
.collection-toolbar{
  --ctlr-border:#e6eef6; --ctlr-bg:#fff;
  position:static; margin:12px 0 16px; padding:10px 12px;
  display:flex; align-items:center; 
  background:var(--ctlr-bg); border:1px solid var(--ctlr-border);
  border-radius:10px; box-shadow:0 6px 20px rgba(17,24,39,.08);
}
.collection-toolbar .sortPagiBar{display:flex; align-items:center; gap:12px;}
.collection-toolbar label{margin:0; font-size:14px; color:#475569}

/* Sort pill */
.collection-toolbar .ul_col,.collection-toolbar .ul_col>li,
.collection-toolbar .content_ul,.collection-toolbar .content_ul li{list-style:none;margin:0;padding:0}
.collection-toolbar .ul_col>li{
  position:relative; display:flex; align-items:center; gap:6px;
  min-height:36px; padding:8px 12px; background:#fff;
  border:1px solid var(--ctlr-border); border-radius:10px;
  font-weight:600; color:#111827; white-space:nowrap; word-break:normal;
  box-shadow:inset 0 -1px 0 rgba(17,24,39,.02); cursor:pointer;
}
.collection-toolbar .ul_col>li:hover{border-color:#dbe7ff}
.collection-toolbar .ul_col>li .fa-chevron-down{font-size:12px;opacity:.7}

/* Sort dropdown */
.collection-toolbar .content_ul{
  position:absolute; left:0; top:calc(100% + 10px); min-width:240px;
  background:#fff; border:1px solid var(--ctlr-border); border-radius:12px;
  box-shadow:0 16px 34px rgba(17,24,39,.14); padding:6px 0; display:none; z-index:70;
}
.collection-toolbar .content_ul::before{
  content:""; position:absolute; top:-12px; left:22px; width:20px; height:20px;
  background:#fff; border-left:1px solid var(--ctlr-border); border-top:1px solid var(--ctlr-border);
  transform:rotate(45deg); pointer-events:none;
}
.collection-toolbar .content_ul li{padding:10px 14px; white-space:nowrap}
.collection-toolbar .content_ul li+li{border-top:1px solid #f1f4f8}
.collection-toolbar .content_ul a{display:block; text-decoration:none; color:#111827; font-weight:500}
.collection-toolbar .content_ul li:hover{background:#f8fafc}

/* Desktop: mở theo hover */
@media (hover:hover){
  .collection-toolbar .ul_col>li:hover .content_ul{display:block}
}

/* Mobile: mở bằng class .open */
.collection-toolbar .sort-trigger.open .content_ul{display:block}

/* Nút Lọc (mobile) */
.collection-toolbar .open-filters{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border:1px solid var(--ctlr-border); border-radius:10px; background:#fff; font-weight:600;
}
.collection-toolbar .open-filters:hover{border-color:#dbe7ff; box-shadow:0 3px 10px rgba(17,24,39,.06)}

/* ===== Sidebar embed trong toolbar (Hãng sản xuất) ===== */
.collection-toolbar .dqdt-sidebar{
  position:relative!important; display:inline-block!important; vertical-align:middle;
  background:transparent!important; border:0!important; box-shadow:none!important;
  padding:0!important; margin:0 0 0 8px!important; width:auto!important; max-width:none!important;
  z-index:60; /* dưới dropdown sort một chút */
}
/* Ẩn tiêu đề gốc */
.collection-toolbar .dqdt-sidebar .aside-title,
.collection-toolbar .dqdt-sidebar .title-head{display:none!important}

/* Nút pill */
.collection-toolbar .dqdt-sidebar::before{
  content:"Hãng sản xuất";
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:8px 12px;
  border:1px solid var(--ctlr-border); border-radius:10px; background:#fff;
  font-weight:600; color:#111827; box-shadow:inset 0 -1px 0 rgba(17,24,39,.02);
  white-space:nowrap; line-height:1; cursor:pointer;
}

/* Panel */
.collection-toolbar .dqdt-sidebar .wrap_background_aside{
  position:absolute; left:0; top:calc(100% + 10px); min-width:280px; max-height:360px; overflow:auto;
  background:#fff; border:1px solid var(--ctlr-border); border-radius:12px;
  box-shadow:0 16px 34px rgba(17,24,39,.14); padding:10px; z-index:65; display:none;
}
.collection-toolbar .dqdt-sidebar .wrap_background_aside::before{
  content:""; position:absolute; top:-12px; left:24px; width:22px; height:22px;
  background:#fff; border-left:1px solid var(--ctlr-border); border-top:1px solid var(--ctlr-border);
  transform:rotate(45deg); pointer-events:none;
}
/* Cầu hover desktop */
.collection-toolbar .dqdt-sidebar .wrap_background_aside::after{
  content:""; position:absolute; left:-10px; right:-10px; top:-18px; height:18px;
}
.collection-toolbar .dqdt-sidebar:hover .wrap_background_aside{display:block}

/* Gọn item bên trong panel */
.collection-toolbar .dqdt-sidebar aside.aside-item{border:0; margin:0; padding:0}
.collection-toolbar .dqdt-sidebar .aside-filter ul{list-style:none;margin:0;padding:0}
.collection-toolbar .dqdt-sidebar .aside-content{max-height:none}
.collection-toolbar .dqdt-sidebar .filter-item{padding:4px 0}
.collection-toolbar .dqdt-sidebar .filter-item label{font-weight:500}

@media (max-width: 991.98px){
  /* 1 hàng, gọn khoảng cách */
  .collection-toolbar{
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
  }
  .collection-toolbar .sortPagiBar{
    flex: 1 1 auto !important;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap !important;
    min-width: 0;
  }
  /* Ẩn nhãn "Sắp xếp:" để đủ chỗ */
  .collection-toolbar #sort-by > label{ display: none !important; }

  /* Thu nhỏ pill một chút (không ảnh hưởng click) */
  .collection-toolbar .ul_col>li,
  .collection-toolbar .dqdt-sidebar::before{
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 14px;
  }
  .collection-toolbar .ul_col>li .fa-chevron-down{ font-size: 11px; }

  /* Vendor pill + mũi tên phải */
  .collection-toolbar .dqdt-sidebar{ position: relative !important; }
  .collection-toolbar .dqdt-sidebar::before{
    content:"Hãng sản xuất";
    display: inline-flex; align-items: center;
    padding-right: 26px;                    /* chừa chỗ mũi tên */
    background:#fff;
    border:1px solid var(--ctlr-border);
    border-radius:10px;
    font-weight:600;
  }
  .collection-toolbar .dqdt-sidebar::after{
    content:"▾";
    position:absolute; right:10px; top:50%;
    transform:translateY(-50%);
    font-size:12px; color:#667085; pointer-events:none;
  }
  .collection-toolbar .dqdt-sidebar.is-open::after{
    transform:translateY(-50%) rotate(180deg);
  }

  /* "Bộ lọc" dạt mép phải, cùng hàng */
  #open-filters{
    margin-left: auto !important;
    white-space: nowrap;
    padding: 6px 10px;
    min-height: 34px;
    border-radius: 10px;
  }

  /* Panel nổi đủ cao (vẫn dùng cơ chế .open/.is-open của CSS #1) */
  .collection-toolbar .content_ul,
  .collection-toolbar .dqdt-sidebar .wrap_background_aside{
    z-index: 9999; min-width: 220px;
  }

  /* Không để cầu hover đè nút khác */
  .collection-toolbar .dqdt-sidebar .wrap_background_aside::after{ display: none !important; }
}

/* ===== BỔ SUNG TỪ CSS 2 - MŨI TÊN LỚN ===== */
/* Mũi tên lớn – dùng chung cho Sort & Vendor panel */
.collection-toolbar .content_ul::before,
.collection-toolbar .dqdt-sidebar .wrap_background_aside::before{
  content:"";
  position:absolute;
  left:28px;
  top:-10px;
  width:18px;
  height:18px;
  background:#fff;
  border-left:1px solid var(--ctlr-border);
  border-top:1px solid var(--ctlr-border);
  transform:rotate(45deg);
  pointer-events:none;          /* không cản click */
}

/* ===== BỔ SUNG TỪ CSS 2 - CẦU HOVER DÀI HƠN ===== */
/* CẦU HOVER – chống hụt khi rê chuột đi xuống panel cho Vendor */
.collection-toolbar .dqdt-sidebar::after{
  content:"";
  position:absolute;
  left:-12px;                   /* rộng hơn xíu cho dễ bắt */
  right:-12px;
  top:100%;
  height:16px;                  /* cao = độ hở giữa nút và panel */
  background:transparent;
  /* không cần pointer-events, vì chỉ cần giữ :hover trên .dqdt-sidebar */
}

/* CẦU HOVER cho dropdown Sort - DÀI VÀ TO HƠN */
.collection-toolbar .ul_col>li::after{
  content:"";
  position:absolute;
  left:-12px;                   /* rộng hơn từ -10px thành -12px */
  right:-12px;                  /* rộng hơn từ -10px thành -12px */
  top:100%;
  height:18px;                  /* cao hơn từ 14px thành 18px */
  background:transparent;
}

/* ===== OVERRIDE LẠI CÁC PSEUDO-ELEMENT CONFLICT ===== */
/* Đảm bảo vendor dropdown arrow không bị ghi đè bởi hover bridge */
.collection-toolbar .dqdt-sidebar.is-open::after{
  content:"▾" !important;       /* giữ nguyên mũi tên, không để bridge ghi đè */
  transform:translateY(-50%) rotate(180deg) !important;
  left: auto !important;
  right: 10px !important;
  top: 50% !important;
  height: auto !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  font-size: 12px !important;
  color: #667085 !important;
}

/* Để bridge hover không ảnh hưởng khi vendor dropdown đang mở */
.collection-toolbar .dqdt-sidebar.is-open::before{
  z-index: 1;
}