/* ==========================================================================
   HAFELE OL 2026 — PRODUCT CATEGORIES V2
   Desktop: 1 feature + 9 cards / 3x3.
   Height of 3 small rows = height of feature card.
   Tablet/mobile: feature + horizontal category rail.
   ========================================================================== */

.home-section-frame:has(> .categories-v2){
	margin-top:0!important;
	margin-bottom:0!important;
}

.categories-v2{
	--cat-accent:#B91441;
	--cat-text:#1f1f1f;
	--cat-muted:#686868;
	--cat-border:#e2e2e2;
	--cat-gap:12px;
	width:100%;
	padding:18px 0;
	background:#fff;
}

.categories-v2__head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:28px;
	margin-bottom:18px;
}

.categories-v2__heading{
	max-width:760px;
}

.categories-v2__head h2{
	margin:0;
	color:var(--cat-text);
	font-size:clamp(28px,2.25vw,36px);
	font-weight:700;
	line-height:1.14;
	letter-spacing:-.03em;
}

.categories-v2__heading p{
	margin:8px 0 0;
	max-width:700px;
	color:var(--cat-muted);
	font-size:14px;
	line-height:1.55;
}

.categories-v2__all{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	gap:9px;
	padding-bottom:5px;
	border-bottom:1px solid #252525;
	color:#252525;
	font-size:14px;
	font-weight:600;
	line-height:1.2;
	text-decoration:none;
}

.categories-v2__all span:last-child{
	color:var(--cat-accent);
	font-size:18px;
	transition:transform .22s ease;
}

.categories-v2__all:hover span:last-child{
	transform:translateX(3px);
}

.categories-v2__layout{
	display:grid;
	grid-template-columns:minmax(340px,.86fr) minmax(0,1.64fr);
	gap:var(--cat-gap);
	height:clamp(560px,42vw,610px);
}

.categories-v2--no-feature .categories-v2__layout{
	grid-template-columns:1fr;
}

.categories-v2__feature,
.categories-v2__card{
	position:relative;
	min-width:0;
	overflow:hidden;
	border:1px solid var(--cat-border);
	border-radius:15px;
	background:#fff;
}

.categories-v2__feature{
	height:100%;
}

.categories-v2__feature-link,
.categories-v2__card-link{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
	color:#fff;
	text-decoration:none;
}

.categories-v2__media,
.categories-v2__image{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}

.categories-v2__media{
	background:#fff;
}

.categories-v2__image{
	display:block;
	object-fit:cover;
	object-position:center;
	background:#fff;
	transform:scale(1.002);
	transition:transform .75s cubic-bezier(.16,1,.3,1),filter .35s ease;
}

.categories-v2__feature-link:hover .categories-v2__image,
.categories-v2__card-link:hover .categories-v2__image{
	transform:scale(1.045);
	filter:saturate(1.04);
}

.categories-v2__overlay{
	position:absolute;
	inset:0;
	background:
		linear-gradient(180deg,rgba(7,7,7,.02) 12%,rgba(7,7,7,.10) 42%,rgba(7,7,7,.82) 100%),
		linear-gradient(90deg,rgba(7,7,7,.24) 0%,rgba(7,7,7,0) 65%);
	pointer-events:none;
}

.categories-v2__overlay--small{
	background:linear-gradient(180deg,rgba(8,8,8,.02) 25%,rgba(8,8,8,.70) 100%);
}

.categories-v2__feature-content{
	position:absolute;
	z-index:2;
	left:26px;
	right:26px;
	bottom:25px;
}

.categories-v2__badge{
	display:inline-flex;
	align-items:center;
	min-height:28px;
	margin-bottom:12px;
	padding:0 11px;
	border:1px solid rgba(255,255,255,.48);
	border-radius:999px;
	background:rgba(14,14,14,.20);
	color:#fff;
	-webkit-backdrop-filter:blur(7px);
	backdrop-filter:blur(7px);
	font-size:10px;
	font-weight:700;
	line-height:1;
	letter-spacing:.055em;
	text-transform:uppercase;
}

.categories-v2__feature-content h3{
	max-width:13ch;
	margin:0;
	color:#fff;
	font-size:clamp(32px,3vw,46px);
	font-weight:600;
	line-height:1.08;
	letter-spacing:-.03em;
	text-shadow:0 3px 18px rgba(0,0,0,.22);
}

.categories-v2__feature-content p{
	max-width:38ch;
	margin:12px 0 0;
	color:rgba(255,255,255,.9);
	font-size:14px;
	line-height:1.55;
}

.categories-v2__feature-cta{
	display:inline-flex;
	align-items:center;
	gap:12px;
	margin-top:18px;
	color:#fff;
	font-size:14px;
	font-weight:600;
}

.categories-v2__arrow{
	width:42px;
	height:42px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	border-radius:50%;
	background:var(--cat-accent);
	color:#fff;
	font-size:20px;
	line-height:1;
	transition:transform .22s ease,background .22s ease;
}

.categories-v2__feature-link:hover .categories-v2__arrow,
.categories-v2__card-link:hover .categories-v2__arrow{
	transform:translateX(3px);
}

.categories-v2__small-wrap{
	min-width:0;
	height:100%;
}

.categories-v2__small-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	grid-template-rows:repeat(3,minmax(0,1fr));
	gap:var(--cat-gap);
	height:100%;
}

.categories-v2__card-content{
	position:absolute;
	z-index:2;
	left:16px;
	right:13px;
	bottom:13px;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:10px;
}

.categories-v2__card-content h3{
	margin:0;
	max-width:72%;
	color:#fff;
	font-size:clamp(16px,1.2vw,20px);
	font-weight:600;
	line-height:1.18;
	letter-spacing:-.015em;
	text-shadow:0 2px 10px rgba(0,0,0,.28);
}

.categories-v2__card-action{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:8px;
	color:rgba(255,255,255,.92);
	font-size:11px;
	font-weight:500;
}

.categories-v2__card .categories-v2__arrow--small{
	width:30px;
	height:30px;
	border:1px solid rgba(255,255,255,.75);
	background:rgba(255,255,255,.94);
	color:var(--cat-accent);
	font-size:14px;
}

.categories-v2__card-action > span:first-child{
	display:none;
}

/* Clean fallback when an image is missing or broken */
.categories-v2__feature.is-no-image .categories-v2__overlay,
.categories-v2__card.is-no-image .categories-v2__overlay{
	display:none;
}

.categories-v2__feature.is-no-image .categories-v2__feature-content h3,
.categories-v2__card.is-no-image .categories-v2__card-content h3{
	color:var(--cat-text);
	text-shadow:none;
}

.categories-v2__feature.is-no-image .categories-v2__feature-content p{
	color:var(--cat-muted);
}

.categories-v2__feature.is-no-image .categories-v2__badge{
	border-color:rgba(185,20,65,.25);
	background:rgba(185,20,65,.06);
	color:var(--cat-accent);
}

.categories-v2__feature.is-no-image .categories-v2__feature-cta{
	color:var(--cat-text);
}

.categories-v2__card.is-no-image .categories-v2__arrow--small{
	border-color:rgba(185,20,65,.20);
	background:rgba(185,20,65,.06);
}

.categories-v2__mobile-controls{
	display:none;
}

/* Tablet: feature + one horizontal rail, avoiding a very tall page */
@media(max-width:1023px){
	.categories-v2{
		padding:16px 0;
	}

	.categories-v2__head{
		margin-bottom:16px;
	}

	.categories-v2__layout{
		display:block;
		height:auto;
	}

	.categories-v2__feature{
		height:430px;
		margin-bottom:12px;
	}

	.categories-v2--no-feature .categories-v2__feature{
		display:none;
	}

	.categories-v2__small-wrap{
		height:auto;
	}

	.categories-v2__small-grid{
		height:auto;
		display:flex;
		gap:12px;
		overflow-x:auto;
		overflow-y:hidden;
		padding:0 0 4px;
		scroll-snap-type:x mandatory;
		scroll-behavior:smooth;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}

	.categories-v2__small-grid::-webkit-scrollbar{
		display:none;
	}

	.categories-v2__card{
		flex:0 0 min(42vw,320px);
		height:205px;
		scroll-snap-align:start;
	}

	.categories-v2__mobile-controls{
		display:flex;
		align-items:center;
		justify-content:space-between;
		margin-top:10px;
	}

	.categories-v2__mobile-controls[hidden]{
		display:none!important;
	}

	.categories-v2__counter{
		display:flex;
		align-items:center;
		gap:5px;
		color:#777;
		font-size:12px;
		font-variant-numeric:tabular-nums;
	}

	.categories-v2__buttons{
		display:flex;
		gap:7px;
	}

	.categories-v2__nav{
		width:36px;
		height:36px;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		padding:0;
		border:1px solid #d7d7d7;
		border-radius:50%;
		background:#fff;
		color:#222;
		font-size:17px;
		line-height:1;
		cursor:pointer;
		transition:border-color .2s ease,color .2s ease,transform .2s ease;
	}

	.categories-v2__nav:hover{
		border-color:var(--cat-accent);
		color:var(--cat-accent);
	}

	.categories-v2__nav:disabled{
		opacity:.35;
		cursor:default;
	}
}

/* Mobile */
@media(max-width:767px){
	.categories-v2{
		padding:14px 0;
	}

	.categories-v2__head{
		align-items:flex-start;
		gap:12px;
		margin-bottom:14px;
	}

	.categories-v2__head h2{
		font-size:27px;
	}

	.categories-v2__heading p{
		font-size:13px;
		line-height:1.5;
	}

	.categories-v2__all{
		display:none;
	}

	.categories-v2__feature{
		height:410px;
		border-radius:14px;
	}

	.categories-v2__feature-content{
		left:19px;
		right:19px;
		bottom:19px;
	}

	.categories-v2__feature-content h3{
		max-width:15ch;
		font-size:31px;
	}

	.categories-v2__feature-content p{
		font-size:13px;
		line-height:1.48;
	}

	.categories-v2__feature-cta{
		margin-top:14px;
		font-size:13px;
	}

	.categories-v2__arrow{
		width:38px;
		height:38px;
	}

	.categories-v2__small-wrap{
		margin-inline:calc(var(--site-gutter,16px) * -1);
	}

	.categories-v2__small-grid{
		padding-inline:var(--site-gutter,16px);
		scroll-padding-inline:var(--site-gutter,16px);
	}

	.categories-v2__card{
		flex-basis:78vw;
		max-width:310px;
		height:190px;
		border-radius:13px;
	}

	.categories-v2__card-content h3{
		font-size:18px;
	}

	.categories-v2__mobile-controls{
		padding-inline:var(--site-gutter,16px);
	}
}

@media(max-width:420px){
	.categories-v2__feature{
		height:390px;
	}

	.categories-v2__feature-content h3{
		font-size:29px;
	}

	.categories-v2__card{
		flex-basis:82vw;
		height:185px;
	}
}



/* ==========================================================================
   CATEGORY TRUST STRIP
   ========================================================================== */
.categories-v2__trust{
	margin-top:22px;
	padding:18px 0 2px;
	border-top:1px solid var(--cat-trust-border,#B91441);
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
}

.categories-v2__trust-item{
	position:relative;
	min-width:0;
	display:grid;
	grid-template-columns:48px minmax(0,1fr);
	align-items:center;
	gap:12px;
	padding:0 22px;
}

.categories-v2__trust-item:first-child{
	padding-left:10px;
}

.categories-v2__trust-item:last-child{
	padding-right:10px;
}

.categories-v2__trust-item:not(:last-child)::after{
	content:"";
	position:absolute;
	top:10px;
	right:0;
	width:1px;
	height:38px;
	background:var(--cat-trust-divider,#fff);
	opacity:.30;
}

.categories-v2__trust-icon{
	width:48px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--cat-trust-icon,#fff);
}

.categories-v2__trust-icon img{
	width:42px;
	height:42px;
	display:block;
	object-fit:contain;
	object-position:center;
}

.categories-v2--trust-icons-white .categories-v2__trust-icon img{
	filter:brightness(0) invert(1);
	opacity:.96;
}

.categories-v2--trust-icons-original .categories-v2__trust-icon img{
	filter:none;
}

.categories-v2__trust-fallback{
	width:42px;
	height:42px;
	display:none;
	fill:none;
	stroke:currentColor;
	stroke-width:1.65;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.categories-v2__trust-copy{
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:3px;
}

.categories-v2__trust-copy strong{
	color:var(--cat-trust-title,#fff);
	font-size:15px;
	font-weight:700;
	line-height:1.3;
}

.categories-v2__trust-copy span{
	color:var(--cat-trust-desc,#fff);
	font-size:13px;
	font-weight:400;
	line-height:1.4;
}

@media(max-width:1199px){
	.categories-v2__trust{
		grid-template-columns:repeat(5,minmax(0,1fr));
	}

	.categories-v2__trust-item{
		grid-template-columns:40px minmax(0,1fr);
		gap:9px;
		padding:0 12px;
	}

	.categories-v2__trust-icon{
		width:40px;
		height:40px;
	}

	.categories-v2__trust-icon img,
	.categories-v2__trust-fallback{
		width:36px;
		height:36px;
	}

	.categories-v2__trust-copy strong{
		font-size:13.5px;
	}

	.categories-v2__trust-copy span{
		font-size:12px;
	}
}

@media(max-width:1023px){
	.categories-v2__trust{
		grid-template-columns:repeat(3,minmax(0,1fr));
		gap:18px 0;
		padding-top:18px;
	}

	.categories-v2__trust-item{
		padding:0 16px;
	}

	.categories-v2__trust-item:nth-child(3)::after,
	.categories-v2__trust-item:last-child::after{
		display:none;
	}
}

@media(max-width:767px){
	.categories-v2__trust{
		display:flex;
		gap:0;
		overflow-x:auto;
		overflow-y:hidden;
		margin-top:18px;
		padding:15px 0 3px;
		scroll-snap-type:x mandatory;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
	}

	.categories-v2__trust::-webkit-scrollbar{
		display:none;
	}

	.categories-v2__trust-item{
		flex:0 0 76%;
		max-width:280px;
		grid-template-columns:42px minmax(0,1fr);
		gap:11px;
		padding:0 20px;
		scroll-snap-align:start;
	}

	.categories-v2__trust-item:first-child{
		padding-left:0;
	}

	.categories-v2__trust-item:not(:last-child)::after{
		top:5px;
		height:42px;
	}

	.categories-v2__trust-icon{
		width:42px;
		height:42px;
	}

	.categories-v2__trust-copy strong{
		font-size:14px;
	}

	.categories-v2__trust-copy span{
		font-size:12.5px;
	}
}

@media(prefers-reduced-motion:reduce){
	.categories-v2__image,
	.categories-v2__arrow,
	.categories-v2__all span:last-child,
	.categories-v2__small-grid{
		transition:none!important;
		scroll-behavior:auto!important;
	}
}

/* ==========================================================================
   CATEGORY TRUST STRIP - BƯỚC 50D: THÊM KHUNG RÕ RÀNG
   ========================================================================== */
.categories-v2__trust{
	margin-top:22px;
	padding:18px 18px;
	border:1px solid var(--cat-trust-border,#B91441);
	border-radius:18px;
	background:var(--cat-trust-bg,#B91441);
	box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.categories-v2__trust-item:first-child{
	padding-left:6px;
}

.categories-v2__trust-item:last-child{
	padding-right:6px;
}

@media (max-width: 991.98px){
	.categories-v2__trust{
		padding:16px 14px;
		border-radius:16px;
	}
}

@media (max-width: 767.98px){
	.categories-v2__trust{
		padding:14px 12px;
		border-radius:14px;
		background:var(--cat-trust-bg,#B91441);
	}
}

/* ==========================================================================
   BƯỚC 50E — FIX MOBILE DANH MỤC + DẢI GIÁ TRỊ
   ========================================================================== */
@media(max-width:767px){
	/* 1 card danh mục nhỏ / 1 màn hình, không còn card kế bên bị cắt */
	.categories-v2__small-wrap{
		margin-inline:0;
	}

	.categories-v2__small-grid{
		padding-inline:0;
		scroll-padding-inline:0;
		gap:10px;
	}

	.categories-v2__card{
		flex:0 0 100%;
		width:100%;
		max-width:none;
		height:190px;
		box-sizing:border-box;
	}

	.categories-v2__mobile-controls{
		padding-inline:0;
		margin-top:10px;
	}

	/* Dải giá trị: mỗi lần hiển thị trọn 1 mục, không lộ/chồng chữ mục kế bên */
	.categories-v2__trust{
		display:flex;
		gap:0;
		overflow-x:auto;
		overflow-y:hidden;
		padding:14px 12px;
		scroll-snap-type:x mandatory;
		scroll-padding-inline:12px;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}

	.categories-v2__trust::-webkit-scrollbar{
		display:none;
	}

	.categories-v2__trust-item{
		flex:0 0 100%;
		width:100%;
		max-width:none;
		box-sizing:border-box;
		grid-template-columns:42px minmax(0,1fr);
		gap:12px;
		padding:0 6px;
		scroll-snap-align:start;
	}

	.categories-v2__trust-item:first-child,
	.categories-v2__trust-item:last-child{
		padding-left:6px;
		padding-right:6px;
	}

	.categories-v2__trust-item::after{
		display:none!important;
	}

	.categories-v2__trust-copy{
		min-width:0;
	}

	.categories-v2__trust-copy strong,
	.categories-v2__trust-copy span{
		white-space:normal;
		overflow-wrap:anywhere;
	}

	.categories-v2__trust-copy strong{
		font-size:14px;
		line-height:1.35;
	}

	.categories-v2__trust-copy span{
		font-size:12.5px;
		line-height:1.4;
	}
}

/* ==========================================================================
   BƯỚC 50F — TỐI ƯU TABLET 768–1023
   ========================================================================== */
@media(min-width:768px) and (max-width:1023px){
	/* Ô lớn chiếm trọn chiều ngang */
	.categories-v2__feature{
		height:430px;
		margin-bottom:12px;
	}

	/* Danh mục nhỏ: đúng 2 card / 1 khung nhìn */
	.categories-v2__small-grid{
		display:flex;
		gap:12px;
		overflow-x:auto;
		overflow-y:hidden;
		padding:0 0 4px;
		scroll-snap-type:x mandatory;
		scroll-padding-inline:0;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}

	.categories-v2__small-grid::-webkit-scrollbar{
		display:none;
	}

	.categories-v2__card{
		flex:0 0 calc((100% - 12px)/2);
		width:calc((100% - 12px)/2);
		max-width:none;
		height:220px;
		scroll-snap-align:start;
		box-sizing:border-box;
	}

	.categories-v2__mobile-controls{
		display:flex;
		padding-inline:0;
		margin-top:10px;
	}

	/* Dải giá trị: 3 mục / 1 khung nhìn, vuốt ngang cho 2 mục còn lại */
	.categories-v2__trust{
		display:flex;
		gap:0;
		overflow-x:auto;
		overflow-y:hidden;
		padding:16px 14px;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}

	.categories-v2__trust::-webkit-scrollbar{
		display:none;
	}

	.categories-v2__trust-item{
		flex:0 0 33.3333%;
		width:33.3333%;
		max-width:none;
		box-sizing:border-box;
		grid-template-columns:40px minmax(0,1fr);
		gap:10px;
		padding:0 16px;
		scroll-snap-align:start;
	}

	.categories-v2__trust-item:first-child{
		padding-left:8px;
	}

	.categories-v2__trust-item:last-child{
		padding-right:8px;
	}

	.categories-v2__trust-item:not(:last-child)::after{
		display:block;
		top:6px;
		height:40px;
	}

	.categories-v2__trust-copy strong{
		font-size:13.5px;
		line-height:1.3;
	}

	.categories-v2__trust-copy span{
		font-size:12px;
		line-height:1.4;
	}
}