/* ===============================
   GLOBAL & BODY STYLES
   =============================== */
body {
	background: #fff;
}

/* Header clip-path style (disabled) */
/*@media (max-width: 767px) {
	.mid-header:after {
		content: '';
		width: 100%;
		position: absolute;
		background: var(--header-background);
		height: 200px;
		z-index: -1;
		clip-path: ellipse(100% 55% at 48% 44%);
		margin-top: 0;
		transform-origin: center center;
	}
}*/

/* ===============================
   HOME BANNER GROUP STYLES
   =============================== */
.home-banner-group {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
	border:2px solid #e6efff !important;
	border-radius:10px;
	box-shadow:0 12px 28px rgba(34,102,234,.08);
}

.home-banner-left {
  grid-column: var(--grid-colum);
  aspect-ratio: 1200 / 630;        /* Tỷ lệ cố định */
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.home-banner-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* Crop ảnh để fit tỷ lệ */
  object-position: center;        /* Crop từ center */
}

.sub_banner {
	flex-direction: column;
	display: flex;
	grid-gap: 10px
}

.sub_banner--bottom {
	grid-column: 1 / span 3;
	flex-direction: row;
}

.sub_banner--bottom .banner {
	flex: 1 1 auto;
}

/* Banner responsive breakpoints */
@media (max-width: 1024px) {
	.sub_banner {
		grid-gap: 8px;
	}
}
@media (max-width: 992px) {
	.sub_banner {
		grid-gap: 10px;
		padding-left: 10px;
	}
}
@media (max-width: 767px) {
	.sub_banner {
		grid-template-columns: 1fr 1fr;
		grid-gap: 15px;
	}
}

/* ===============================
   HOME SLIDER STYLES
   =============================== */
.home-slider {
	display: flex;
	align-items: center;
	max-width: 100%;
	overflow: hidden;
}

.home-slider .items {
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
	overflow: hidden;
}

.home-slider .items img {
	width: 100%;
	object-fit: contain;
}

.home-slider .slick-arrow.slick-prev {
	left: 10px;
}

.home-slider .slick-arrow.slick-next {
	right: 10px;
}

/* ===============================
   BLOG & SIDEBAR STYLES
   =============================== */
@media (min-width: 768px) {
	.section_blog_right {
		max-height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		border-left: 1px solid #f7f7f7;
		position: absolute;
		top: 0;
		padding: 0 10px;
	}
}

/* ===============================
   PRODUCT TOP & FLASHSALE GRID SYSTEM
   =============================== */
@media (max-width: 767px) {
	.flashsale .container {
		padding: 0;
	}
}

.section_product_top .tab-content.current .row, .flashsale .row {
	--limit-column: 5;
	--percent: 44.333%;
}

/* Tablet grid adjustments */
@media (max-width: 991px) {
	.flashsale .row {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: repeat(var(--limit-column), 30%);
		overflow: auto;
		justify-content: start;
	}
	
	/* Hide scrollbars */
	.section_product_top .tab-content.current .row::-webkit-scrollbar, 
	.flashsale .row::-webkit-scrollbar, 
	.section_product_tag .row.carousel::-webkit-scrollbar {
		display: none;
	}
	
	.section_product_top .tab-content.current .row, .flashsale .row {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
		padding: 1px;
	}
	
	.section_product_top .tab-content.current .row .col-12, .flashsale .row .col-12 {
		padding: 5px;
	}
}

/* Mobile grid adjustments */
@media (max-width: 767px) {
	.section_product_top .tab-content.current .row, 
	.flashsale .row, 
	.section_product_tag .row.carousel {
		display: grid;
		grid-template-rows: 1fr;
		overflow: auto;
		justify-content: start;
		grid-template-columns: repeat(var(--limit-column), var(--percent));
	}
	
	.section_product_top .tab-content.current .row.one-row, 
	.flashsale .row.one-row, 
	.section_product_tag .row.carousel {
		display: flex;
		flex-wrap: nowrap;
	}
	
	.section_product_top .tab-content.current .row.one-row .product-col, 
	.flashsale .row.one-row .flashsale__item {
		flex: 0 0 44.333%;
		max-width: 44.333%;
	}
	
	.btn-outline-secondary {
		border-color: var(--border-color);
		color: #2F80ED
	}
}

/* ===============================
   FLASHSALE SECTION SPECIFIC
   =============================== */
.section_flashsale .row {
	margin-left: -5px;
	margin-right: -5px;
}

.section_flashsale .flashsale__item {
	padding: 5px;
}

/* ===============================
   SLICK BANNER & NEWS STYLES
   =============================== */
.slick-pro-banner {
	width: 100%;
}

.slick-pro-banner, .slick-new:not(.slick-slider) {
	display: flex;
	align-items: start;
	overflow-x: auto;
	flex-wrap: nowrap;
	white-space: nowrap;
}

/* Hide scrollbars */
.slick-pro-banner::-webkit-scrollbar, .slick-new:not(.slick-slider)::-webkit-scrollbar {
	display: none;
}

.slick-pro-banner, .slick-new:not(.slick-slider) {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.slick-pro-banner .col-5, .slick-new:not(.slick-slider) .col-5 {
	padding: 5px;
}

.flashsale__news-list {
	display: flex;
}

.flashsale__news a {
	white-space: nowrap;
}

/* ===============================
   BANNER COLLECTION STYLES
   =============================== */
.section_banner_coll .row {
	overflow-x: auto;
	flex-wrap: nowrap;
}

.section_banner_coll .row::-webkit-scrollbar {
	display: none;
}

.section_banner_coll .row {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.banner_col {
	order: -1;
}

@media (min-width: 768px) {
	.banner_col.right {
		order: 1;
	}
}

/* ===============================
   BRAND SECTION STYLES
   =============================== */
/* khoảng cách ngoài section */
.section_brand{
	margin: 0 0 10px 0;
}

/* Khung ngoài của section brand */
.section_brand > .container,
.section_brand > .container.card{
	background:#fff;
	border:1px solid #e6efff !important;
	border-radius:10px;
	box-shadow:0 12px 28px rgba(34,102,234,.08);
	padding:16px 16px 22px; /* thêm padding-bottom để thoáng */
	overflow:hidden;
}

/* Hàng chứa logo – tạo khoảng cách giữa các item */
.section_brand .hrz-scroll,
.section_brand .row{
	gap:16px 20px; /* row-gap / column-gap */
}

/* Logo item: giữ style cũ, KHÔNG border */
.section_brand .item{
	margin-bottom:16px; /* cách phía dưới 10–20px như yêu cầu */
	background:transparent;
	border:0; 
	box-shadow:none;
	transition:transform .3s ease;
}

/* Hover logo: phóng nhẹ */
.section_brand .item:hover{
	transform:scale(1.1);
}

/* Đảm bảo ảnh không tràn khung */
.section_brand .item img{
	display:block;
	max-width:100%;
	height:auto;
}

/* Brand responsive */
@media (max-width: 991px){
	.section_brand > .container,
	.section_brand > .container.card{
		border-radius:10px;
		padding:14px 14px 18px; /* vẫn giữ padding-bottom */
	}
	.section_brand .hrz-scroll{
		overflow-x:auto;
		flex-wrap:nowrap;
		justify-content:initial !important;
		gap:14px;
		padding-bottom:6px; /* tránh đè sát viền & thanh scroll */
	}
	.section_brand .item{
		flex:0 0 170px;
		max-width:170px;
		padding:10px;
		margin-bottom:0; /* dùng ngang → không cần khoảng dưới */
	}
}
@media (max-width: 768px){
	.section_brand > .container,
	.section_brand > .container.card{
		border-radius:10px;
		padding:12px 12px 16px;
		box-shadow:0 8px 20px rgba(34,102,234,.08);
	}
	.section_brand .item{
		flex:0 0 140px;
		max-width:140px;
		padding:5px 5px 0;
	}
}

/* ===============================
   COLLECTIONS SECTION STYLES (2 hàng, ring viền + tada)
   =============================== */
.section_collections{ 
	margin:10px 0; 
}

/* Khung ngoài đồng bộ */
.section_collections .container > .row{
	background:#fff;
	border:1px solid #dfe8ff;
	border-radius:10px;
	box-shadow:0 18px 44px rgba(34,102,234,.14);
	padding:10px;
	overflow:hidden;
	margin-left:0!important;
	margin-right:0!important;
}

.section_collections .row::-webkit-scrollbar{ 
	display:none; 
}

/* Card styles */
.section_collections .item{
	width:calc(100%/6);
	flex:0 0 calc(100%/6);
	padding:14px 10px;
	text-align:center;
	border-radius:10px;
}

/* Đảm bảo item 7+ vẫn hiện (đủ 2 hàng) */
.section_collections .item:nth-child(n+7){ 
	display:block!important; 
}

/* Khối card bên trong: có viền mặc định */
.section_collections .item > a{
	position:relative;
	display:block;
	padding:18px 14px;
	border-radius:10px;
	text-decoration:none;
	background:#fff;
	border:1px solid #e9eefc; /* viền rõ cho từng item */
	box-shadow:
		0 2px 0 rgba(34,102,234,.05),
		0 6px 18px rgba(0,0,0,.04);  
	transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Ring full viền khi hover/focus (không giật layout) */
.section_collections .item > a::after{
	content:"";
	position:absolute; 
	inset:0;
	border:2px solid var(--primary-color,#ff4d30);
	border-radius:inherit;
	opacity:0; 
	transform:scale(.985);
	pointer-events:none;
	transition:opacity .18s ease, transform .18s ease;
}

/* Hover/focus: nổi nhẹ + hiện ring */
.section_collections .item:hover > a,
.section_collections .item > a:focus-visible{
	transform:translateY(-3px);
	box-shadow:
		0 18px 36px rgba(0,0,0,.12),
		0 3px 0 rgba(34,102,234,.06);
	border-color: rgba(34,102,234,.35);
	outline:none;
}

.section_collections .item:hover > a::after,
.section_collections .item > a:focus-visible::after{
	opacity:1; 
	transform:scale(1);
}

/* Ảnh + tiêu đề */
.section_collections img{
	display:block; 
	margin:auto;
	width:100%; 
	height:auto;
	max-width:88px; 
	max-height:88px; 
	object-fit:contain;
	transition:filter .22s ease;
}

.section_collections .item h3{ 
	margin:12px 0 0; 
}

.section_collections .item h3 a{
	display:-webkit-box; 
	-webkit-box-orient:vertical; 
	-webkit-line-clamp:2;
	overflow:hidden;
	font-size:14px; 
	line-height:1.3;
	color:var(--text-color,#333);
	text-decoration:none; 
	transition:color .22s ease;
}

/* Hover: tada cho icon + đổi màu tiêu đề */
.section_collections .item:hover img{
	animation:tada 1.1s ease both;
	filter:drop-shadow(0 6px 14px rgba(34,102,234,.12));
}

.section_collections .item:hover h3 a,
.section_collections .item > a:focus-visible h3 a{
	color:var(--primary-color,#ff4d30);
}

/* Collections responsive */
/* Tablet: 4 cột */
@media (max-width:991.98px){
	.section_collections .item{ 
		width:25%; 
		flex:0 0 25%; 
		padding:12px 8px; 
	}
	.section_collections img{ 
		max-width:76px; 
		max-height:76px; 
	}
	.section_collections .container > .row{ 
		padding:14px; 
		border-radius:10px; 
	}
}

/* MOBILE: 4 cột (1 hàng 4 danh mục) */
@media (max-width: 767.98px){
	/* đảm bảo vẫn dùng flex + wrap như Bootstrap */
	.section_collections .container > .row{
		display: flex !important;
		flex-wrap: wrap !important;
	}
	/* mỗi item chiếm 1/4 chiều rộng */
	.section_collections .item{
		width: calc(100% / 4) !important;
		flex: 0 0 calc(100% / 4) !important;
		padding: 10px 8px;
	}
	/* tùy chọn: kích thước icon ảnh một chút cho cân */
	.section_collections img{
		max-width: 70px;
		max-height: 70px;
	}
}

// /* BÓNG ĐỔ đậm hơn cho khung & card */
// .section_collections .container > .row{
// 	border:1px solid #dfe8ff;
// 	box-shadow:0 18px 44px rgba(34,102,234,.14);
// }

.section_collections .item > a{
	box-shadow:0 2px 0 rgba(34,102,234,.05), 0 6px 18px rgba(0,0,0,.04);
}

.section_collections .item:hover > a,
.section_collections .item > a:focus-visible{
	box-shadow:0 18px 36px rgba(0,0,0,.12), 0 3px 0 rgba(34,102,234,.06);
	border-color:rgba(34,102,234,.35);
}

/* Keyframes: tada animation */
@keyframes tada{
	0%{transform:scaleX(1)}
	10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}
	30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}
	40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}
	100%{transform:scaleX(1)}
}

/* ===============================
   PRODUCT TAG MENU & TAGS
   =============================== */
.section_product_tag .menu {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

.section_product_tag .menu__link {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 992px) {
	.tag-list {
		white-space: nowrap;
		overflow: auto;
	}
}

.tag-item {
	padding: 4px 8px;
	background: var(--tag-bg);
	color: var(--tag-color);
	margin-top: 10px;
	display: inline-block;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 400;
	transition: border 0.3s ease-out;
	border: 1px solid var(--tag-bg);
}

.tag-item + .tag-item {
	margin-right: 5px;
}

.tag-item:hover {
	border: 1px solid var(--tag-color);
	color: var(--tag-color);
}

/* ===============================
   BLOG SECTION STYLES
   =============================== */
.section_blog .blogwp.media .image-blog {
	width: 190px;
	flex: 0 0 190px;
	border-radius: 10px;
	overflow: hidden;
}

.blogwp h3, .blogwp h3 a.link {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 500;
}

.section_blog .blogwp.media h3, .section_blog .blogwp.media h3 a.link {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
}

.section_blog .blogwp.media .button_custome_35.link {
	display: none;
}

.blogwp .card-body p {
	font-size: 14px;
	color: #727272;
}

.blogwp .media .media-body {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 5px;
}

.blogwp .button_custome_35.link {
	display: block;
	margin-top: 10px;
}

.blogwp .content_blog a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blogwp .content_blog .art-summary {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Banner & Blog responsive */
@media (max-width: 991px) {
	.home-banner-group {
		display: block;
		padding: 0;
	}
}

@media (max-width: 767px) {	
	.blog-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 10px;
	}
	
	.blogwp {
		display: block;
	}
	
	.blogwp.media + * {
		margin-top: 0;
		border-top: none;
		padding-top: 0;
	}
	
	.section_blog .blogwp.media .image-blog {
		width: 100%;
		flex: 0 0 100%;
		display: block;
		margin-bottom: 5px;
	}
}

@media (max-width: 320px) {
	.section_product_top .tab-content.current .row, .flashsale .row {
		--percent: 70%;
	}
}

/* ===============================
   SHARED CONTAINER STYLES (product_tag, product_top, blog)
   =============================== */
.section_product_tag > .container,
.section_product_top > .container,
.section_blog > .container{
	background:#fff;
	border:1px solid #e6efff; /* viền xanh nhạt */
	border-radius:10px;
	box-shadow:0 12px 28px rgba(34,102,234,.08);
	padding:16px;
	overflow:hidden; /* bo góc không bị children "tràn" */
}

/* Khoảng cách tiêu đề trong khung */
.section_product_tag .title_module_main,
.section_product_top .title_module_main,
.section_blog .title_module_main{
	// margin-bottom:12px;
}

/* Shared responsive tweaks */
@media (max-width: 991.98px){
	.section_product_tag > .container,
	.section_product_top > .container,
	.section_blog > .container{
		border-radius:10px;
		box-shadow:0 10px 24px rgba(34,102,234,.07);
		padding:14px;
	}
}

@media (max-width: 575.98px){
	.section_product_tag > .container,
	.section_product_top > .container,
	.section_blog > .container{
		border-radius:10px;
		box-shadow:0 8px 18px rgba(34,102,234,.06);
		padding:12px;
	}
	
	/* Tabs/nhóm link trên tiêu đề có thể nhiều -> cho cuộn ngang mượt */
	.section_product_tag .title_module_main .tabs-group,
	.section_product_top .title_module_main .tabs-group,
	.section_blog .title_module_main .tabs-group{
		overflow:auto;
		-webkit-overflow-scrolling:touch;
		gap:8px;
		scrollbar-width:none;
	}
	
	.section_product_tag .title_module_main .tabs-group::-webkit-scrollbar,
	.section_product_top .title_module_main .tabs-group::-webkit-scrollbar,
	.section_blog .title_module_main .tabs-group::-webkit-scrollbar{
		display:none;
	}
}

/* ===============================
   PRODUCT TOP & PRODUCT TAG CARD STYLES
   =============================== */
.section_product_top,
.section_product_tag{
	--card-radius: 12px;
	--accent: #ff7a00;
}

/* Khung ngoài */
.section_product_top > .container,
.section_product_tag > .container{
	background:#fff !important;
	border:1px solid #e6efff !important;
	border-radius:10px !important;
	box-shadow:0 12px 28px rgba(34,102,234,.08) !important;
	padding:10px !important;
	overflow:hidden !important;
}

/* Bỏ viền lưới bên trong */
.section_product_top .product-list,
.section_product_top .product-list [class*="col-"],
.section_product_top .product-list .product-col,
.section_product_tag .product-list,
.section_product_tag .product-list [class*="col-"],
.section_product_tag .product-list .product-col{
	border:none !important;
	background:transparent !important;
}

.section_product_top .product-list [class*="col-"]::before,
.section_product_top .product-list [class*="col-"]::after,
.section_product_tag .product-list [class*="col-"]::before,
.section_product_tag .product-list [class*="col-"]::after{
	content:none !important;
}

/* Khoảng cách giữa card */
.section_product_top .product-list,
.section_product_tag .product-list{ 
	margin-left:-6px; 
	margin-right:-6px; 
}

.section_product_top .product-list .product-col,
.section_product_tag .product-list .product-col{
	padding:6px;
	box-sizing:border-box;
}

/* Card: viền + bóng rõ */
.section_product_top .item_product_main,
.section_product_tag .item_product_main{
	height:100%;
	display:flex; 
	flex-direction:column;
	background:#fff;
	border:1px solid #e9eef6;
	border-radius:var(--card-radius);
	overflow:visible;
	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;
}

/* Hover card */
.section_product_top .item_product_main:hover,
.section_product_tag .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;
}

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

.section_product_top .item_product_main .product-name a,
.section_product_top .product-title,
.section_product_tag .item_product_main .product-name a,
.section_product_tag .product-title{
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; 
	overflow:hidden; 
	line-height:1.5; 
	min-height:3em;
}

/* Focus ring nhẹ */
.section_product_top .item_product_main:focus-within,
.section_product_tag .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);
}

/* Product cards mobile responsive */
@media (max-width: 767.98px){
	.section_product_top .product-list,
	.section_product_tag .product-list{ 
		margin-left:-6px; 
		margin-right:-6px; 
	}
	
	.section_product_top .product-list .product-col,
	.section_product_tag .product-list .product-col{ 
		padding:6px; 
	}
	
	.section_product_top .item_product_main,
	.section_product_tag .item_product_main{
		border-radius:10px;
		box-shadow:0 8px 18px rgba(16,24,40,.12), 0 1px 0 rgba(16,24,40,.06);
	}
	
	.section_product_top .item_product_main .product-info,
	.section_product_tag .item_product_main .product-info{ 
		padding:8px 10px 10px; 
		gap:6px; 
	}
}
/* =========================================
   TOKENS
========================================= */
:root{
  --brand-heading-color:#e74c3c;

  /* Card co giãn theo viewport (PC/Laptop) */
  --card-min: 220px;
  --card-ideal: 24vw;    /* 24% viewport width */
  --card-max: 320px;

  /* Card trên mobile = % chiều rộng */
  --mobile-card-width: 44%;
}

/* =========================================
   HEADING + TABS (section_product_tag)
========================================= */
/* Hàng tiêu đề */
.section_product_tag .title_module_main{
  display:flex; align-items:center; gap:12px; padding:0 10px;
}

/* Title */
.section_product_tag .heading-bar__title{
  margin:0; font-size:22px; font-weight:700; line-height:1.2;
  text-transform:uppercase; color:var(--brand-heading-color);
}
.section_product_tag .heading-bar__title .link{ color:inherit; text-decoration:none; }

/* --------- TABS PILL --------- */
/* Nhóm tabs bên phải tiêu đề (desktop default: cạnh tiêu đề) */
.section_product_tag .title_module_main .tabs-group,
.section_product_tag .tabs-group{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; list-style:none;
  margin:0 0 0 12px; padding:0 0 10px 0; background:transparent;
}
.section_product_tag .title_module_main .tabs-group > li,
.section_product_tag .tabs-group > li{
  list-style:none; margin:0; padding:0 !important; border:none !important; background:transparent !important;
}

/* Nút pill (trừ “Xem tất cả”) */
.section_product_tag .title_module_main .tabs-group > li > a:not(.text-primary),
.section_product_tag .tabs-group .tab-link > a:not(.text-primary){
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px !important; line-height:1; text-decoration:none; font-weight:500;
  color:#e74c3c; background:#fff;
  border:1.5px solid rgba(231,76,60,.35); border-radius:15px;
  box-shadow:0 1px 0 rgba(16,24,40,.06);
  white-space:nowrap; cursor:pointer; user-select:none;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
}
.section_product_tag .title_module_main .tabs-group > li > a:not(.text-primary):hover,
.section_product_tag .tabs-group .tab-link > a:not(.text-primary):hover{
  border-color:#e74c3c; background:rgba(231,76,60,.06);
}

/* Active */
.section_product_tag .title_module_main .tabs-group > li.current > a:not(.text-primary),
.section_product_tag .title_module_main .tabs-group > li > a.is-active:not(.text-primary),
.section_product_tag .title_module_main .tabs-group > li > a.active:not(.text-primary),
.section_product_tag .title_module_main .tabs-group > li > a[aria-current="page"]:not(.text-primary),
.section_product_tag .tabs-group .tab-link.current > a:not(.text-primary),
.section_product_tag .tabs-group .tab-link.active  > a:not(.text-primary){
  background:#e74c3c !important; color:#fff !important; border-color:#e74c3c !important;
  box-shadow:0 0 0 2px rgba(231,76,60,.08) inset; position:relative;
}
/* gạch trang trí (ẩn trên mobile ở dưới) */
.section_product_tag .tabs-group .tab-link.current > a::after,
.section_product_tag .tabs-group .tab-link.active  > a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-8px;
  height:3px; background:#e74c3c; border-radius:2px;
}

/* Link “Xem tất cả” (không pill) */
.section_product_tag .title_module_main .tabs-group a.text-primary{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 0; color:#0d6efd; font-weight:600; text-decoration:none;
  border:none !important; background:transparent !important; border-radius:0 !important; box-shadow:none !important;
}
.section_product_tag .title_module_main .tabs-group a.text-primary:hover{ text-decoration:underline; }
.section_product_tag .title_module_main .tabs-group a.text-primary svg,
.section_product_tag .title_module_main .tabs-group a.text-primary i{
  width:16px; height:16px; stroke:currentColor; fill:none; transition:transform .18s ease;
}
.section_product_tag .title_module_main .tabs-group a.text-primary:hover svg,
.section_product_tag .title_module_main .tabs-group a.text-primary:hover i{ transform:translateX(2px); }
.section_product_tag .title_module_main .tabs-group a.text-primary:focus-visible{
  outline:0; border-radius:6px; box-shadow:0 0 0 3px rgba(13,110,253,.25);
}

/* --------- TABLET (≤ 992px): trung tâm + tabs 1 hàng vuốt --------- */
@media (max-width:991.98px){
  .section_product_tag .title_module_main{
    flex-wrap:wrap; justify-content:center; padding:12px 10px 12px; gap:12px;
  }
  .section_product_tag .heading-bar__title{
    width:100%; text-align:center; font-size:18px; margin:0;
  }
  .section_product_tag .title_module_main .tabs-group,
  .section_product_tag .tabs-group{
    width:100%; margin-left:0; gap:8px; padding:0;
    flex-wrap:nowrap !important; justify-content:center;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:#e74c3c #f1f1f1;
  }
  .section_product_tag .tabs-group::-webkit-scrollbar{ height:4px; background:#f1f1f1; }
  .section_product_tag .tabs-group::-webkit-scrollbar-thumb{ background:#e74c3c; border-radius:2px; }

  .section_product_tag .tabs-group .tab-link > a{ height:36px; padding:0 14px !important; font-size:14px; border-radius:12px; }
}

/* --------- MOBILE (≤ 576px): 1 hàng vuốt --------- */
@media (max-width:575.98px){
  .section_product_tag .title_module_main{ padding:10px 8px 6px; gap:0px; }
  .section_product_tag .heading-bar__title{ font-size:16px; margin:0 0 6px; text-align:center; width:100%; }

  .section_product_tag .tabs-group{
    flex-wrap:nowrap !important; justify-content:flex-start; gap:8px; width:100%;
    margin-left:0; padding:0 0 2px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  }
  .section_product_tag .tabs-group .tab-link > a{ height:32px; padding:0 12px !important; font-size:13px; border-radius:10px; }
  /* Ẩn gạch trang trí để không bị cắt */
  .section_product_tag .tabs-group .tab-link.current > a::after,
  .section_product_tag .tabs-group .tab-link.active  > a::after{ display:none !important; }

  /* Kéo “Xem tất cả” lên cùng hàng nếu từng d-none d-sm-block */
  .section_product_tag .tabs-group .tab-link.d-none.d-sm-block{ display:inline-flex !important; padding:0; }
  .section_product_tag .tabs-group .tab-link.d-none.d-sm-block > a{
    display:inline-flex; align-items:center; justify-content:center;
    height:32px; min-width:120px; padding:0 12px; font-size:13px; border-radius:10px;
    border:1px solid rgba(231,76,60,.22); background:#fff;
  }
}

/* =========================================
   PRODUCT LIST — LUÔN 1 HÀNG, VUỐT/KÉO NGANG
   (KHÔNG width cố định, dùng clamp co giãn)
========================================= */
.section_product_tag .product-list{
  display:flex !important;
  flex-wrap:nowrap !important;            /* luôn 1 hàng */
  overflow-x:auto !important;             /* cuộn ngang */
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  // gap:16px;
  padding-bottom:10px;
}
.section_product_tag .product-col{
  /* co giãn theo viewport: không cố định */
  flex: 0 0 clamp(var(--card-min), var(--card-ideal), var(--card-max));
  max-width: clamp(var(--card-min), var(--card-ideal), var(--card-max));
  scroll-snap-align:start;
}

/* Mobile: card theo phần trăm, vẫn 1 hàng vuốt ngang */
@media (max-width:767.98px){
  .section_product_tag .product-list:not(.slick-initialized){
    display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    scroll-padding-left:12px;
  }
  .section_product_tag .product-list:not(.slick-initialized) .product-col{
    flex:0 0 var(--mobile-card-width) !important;
    max-width:var(--mobile-card-width) !important;
    padding:6px !important; scroll-snap-align:start;
  }

  .section_product_tag .text-center {
    display: none;
  } 

  /* Nếu đang dùng slick → chuyển sang cuộn native */
  .section_product_tag .product-list.carousel.slick-initialized .slick-list{
    overflow-x:auto !important; overflow-y:visible !important;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; padding-bottom:12px;
  }
  .section_product_tag .product-list.carousel.slick-initialized .slick-track{
    display:flex !important; gap:0px; transform:none !important; width:auto !important;
  }
  .section_product_tag .product-list.carousel.slick-initialized .slick-slide{
    float:none !important; height:auto !important;
  }
  .section_product_tag .product-list.carousel .product-col{
    flex:0 0 var(--mobile-card-width) !important;
    max-width:var(--mobile-card-width) !important; padding:6px !important; scroll-snap-align:start;
  }

  .section_product_tag .slick-prev,
  .section_product_tag .slick-next,
  .section_product_tag .slick-dots{ display:none !important; }
}

/* Ẩn scrollbar WebKit (nếu muốn hiển thị thì bỏ đoạn này) */
.section_product_tag .product-list::-webkit-scrollbar{ display:none; }

/* Link tiêu đề màu đỏ (tuỳ chọn) */
.custom-heading-bar__title .link{ color:#e74c3c; text-decoration:none; }
.custom-heading-bar__title .link:hover{ opacity:.9; }

/* Nhỏ điều chỉnh khoảng cách mobile cho nhóm tabs cạnh tiêu đề */
@media (max-width:767.98px){
  .section_product_tag .title_module_main .tabs-group{ gap:8px; margin-left:8px; justify-content: flex-start; }
}

// /* =========================================
//    LAPTOP 16 INCH (≥ 1440px)
// ========================================= */
// @media (min-width: 1440px) {
//   .section_product_tag .product-col {
//     flex: 0 0 234px;
//     max-width: 234px;
//   }
  
//   .section_product_tag .product-list {
//     gap: 14px;
//   }
// }

/* ===== Heading bar cho SECTION BLOG (chỉ tác động trong .section_blog) ===== */
.section_blog{
  --blog-heading-color: var(--primary-color, #e74c3c); /* màu chữ + gạch; thay đổi nếu muốn */
}

.section_blog .custom-heading-bar{
  position: relative;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}

.section_blog .custom-heading-bar__title{
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  background: #fff;                 /* che phần gạch phía dưới */
  padding-right: 20px;
  z-index: 1;
  white-space: nowrap;
}

.section_blog .custom-heading-bar__title > a{
  // color: var(--blog-heading-color);
  text-decoration: none;
}

.section_blog .custom-heading-bar::after{
  content: "";
  flex: 1;
  height: 2px;
  background: var(--blog-heading-color);
}

/* Ẩn heading cũ nếu còn class mặc định */
.section_blog .title_module_main.heading-bar{ display: none; }

/* Responsive */
@media (max-width: 767px){
  .section_blog .custom-heading-bar__title{ font-size: 16px; padding-right: 15px; }
  .section_blog .custom-heading-bar{ margin-bottom: 12px; }
  .section_blog .custom-heading-bar::after{ height: 1.5px; }
}

/* ========= HEADING + TABS (section_product_top) — FINAL, RESPONSIVE ========= */
:root{ --brand-heading-color:#e74c3c; }

/* --- Title row (title on the left, tabs on the right) --- */
.section_product_top .title_module_main{
  display:flex; align-items:center;
  gap:12px;
  padding:0 10px;
}

/* Title */
.section_product_top .heading-bar__title{
  margin:0;
  font-size:22px;
  font-weight:700;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--brand-heading-color);
}
.section_product_top .heading-bar__title .link{
  color:inherit; text-decoration:none;
}

/* --- Tabs group (desktop) --- */
.section_product_top .tabs-group{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px; list-style:none;
  margin-left:auto;               /* push tabs to the right of the title */
  padding:0 0 10px 0;             /* space for the small underline bar */
  background:transparent; overflow:visible;
}

/* Reset li paddings coming from utility classes */
.section_product_top .tabs-group > li{ margin:0; padding:0 !important; }

/* Tab pill */
.section_product_top .tabs-group .tab-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem !important;
  border:1px solid rgba(231,76,60,.22);
  border-radius:12px;
  background:#fff;
  color:#e74c3c;
  font-size:14px; line-height:1; white-space:nowrap;
  cursor:pointer; user-select:none;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.section_product_top .tabs-group .tab-link:hover{ border-color:#e74c3c; }

/* Active tab + small underline */
.section_product_top .tabs-group .tab-link.current{
  background:#e74c3c; color:#fff; border-color:#e74c3c; position:relative;
}
.section_product_top .tabs-group .tab-link.current::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-8px;
  height:3px; background:#e74c3c; border-radius:2px;
}

/* ===================== TABLET (≤ 992px) ===================== */
@media (max-width:991.98px){
  .section_product_top .title_module_main{
    flex-wrap:wrap; justify-content:center;
    padding:12px 10px 12px;            /* đều trên–dưới */
    gap:12px;
  }
  .section_product_top .heading-bar__title{
    width:100%; text-align:center; font-size:18px; margin:0;
  }
  .section_product_top .tabs-group{
    width:100%; justify-content:center; margin-left:0;
    margin-top:0 !important;          /* đừng cách quá xa tiêu đề */
    gap:8px; padding:0;
  }
  .section_product_top .tabs-group .tab-link{
    display:inline-flex; align-items:center; justify-content:center;
    height:36px;                      /* cân chữ theo chiều dọc */
    padding:0 14px;                   /* ngang gọn */
    line-height:1; font-size:14px; border-radius:12px;
  }
}

/* ===================== MOBILE (≤ 576px) ===================== */
@media (max-width:575.98px){
  .section_product_top .title_module_main{ padding:10px 8px 6px; gap:6px; }
  .section_product_top .heading-bar__title{ font-size:16px; margin:0 0 6px; }

  /* Horizontal scroll chips on small screens */
  .section_product_top .tabs-group{
    flex-wrap:nowrap; justify-content:flex-start; gap:8px;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .section_product_top .tabs-group::-webkit-scrollbar{ height:4px; background:#f1f1f1; }
  .section_product_top .tabs-group::-webkit-scrollbar-thumb{ background:#e74c3c; border-radius:2px; }

  /* smaller chips */
  .section_product_top .tabs-group .tab-link{
    flex:0 0 auto; min-width:110px; text-align:center;
    display:inline-flex; align-items:center; justify-content:center;
    height:32px; padding:0 12px !important; font-size:13px; border-radius:10px;
  }

  /* hide the small underline on mobile to save space */
  .section_product_top .tabs-group .tab-link.current::after{ display:none; }
}