/* =========================================================
Laptop Quick Navigation (OVERLAY ARROWS - Stable)
- Brand: 1 row, horizontal scroll
- Use case: 1 row, horizontal scroll
- Arrows: overlay on items (absolute), no layout shifting
- Flicker fix: arrows default hidden until JS marks ready
========================================================= */

:root{
	/* BRAND sizing */
	--brand-btn-h: 50px;
	--brand-col-w: 100px;
	--brand-gap: 10px;
	--brand-radius: 12px;
	--brand-logo-w: 100px;
	--brand-logo-h: 50px;

	/* USE CASE sizing */
	--usecase-card-w: 154px;
	--usecase-gap: 12px;

	/* ARROW sizing */
	--arrow-size: 30px;
	--arrow-offset: 6px;
	--arrow-shadow: 0 6px 18px rgba(0,0,0,.06);

	/* Track padding (vertical only) */
	--track-pad-y: 5px;

	/* safe area so items won't be covered by arrows too much */
	--scroll-safe: calc(var(--arrow-size) + 14px);

	/* PRODUCT LINE (text buttons) */
	--model-btn-h: 36px;
	--model-gap: 10px;
	--model-radius: 999px;
	--model-pad-x: 14px;

	/* ARROW sizing for modelbar */
	--model-arrow-w: 20px;
	--model-arrow-h: 44px;
	--model-arrow-radius: 22px;

	/* Arrow gradient */
	--arrow-bg-mid: rgba(220,220,220,.95); 	--arrow-bg-edge: rgba(235,235,235,0);

}

/* Header */
.laptop-quicknav{ background:#fff; border-radius:12px; }
.laptop-quicknav__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:12px;
}
.laptop-quicknav__title{ font-size:20px; margin:0; font-weight:700; line-height:1.2; }
.laptop-quicknav__count{ font-weight:500; color:#7a7a7a; font-size:14px; }

/* =========================================================
BRAND
========================================================= */
.brandbar2{
	position:relative;
	margin:5px 0 5px;
}

.brandbar2__track{
	display:flex;
	gap:var(--brand-gap);
	overflow-x:auto;
	overflow-y:hidden;

	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;

	padding:var(--track-pad-y) 0;
	scrollbar-width:none;
	scroll-snap-type:x proximity;

	min-width:0;

	scroll-padding-left: var(--scroll-safe);
	scroll-padding-right: var(--scroll-safe);
}
.brandbar2__track::-webkit-scrollbar{ height:0; }

.brandbtn{
	flex: 0 0 auto;
	width: var(--brand-col-w);
	min-width: var(--brand-col-w);
	height: var(--brand-btn-h);

	padding: 0px 0px;
	box-sizing: border-box;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border: 1px solid var(--border-subtle);
	border-radius: var(--brand-radius);
	background: #fff;
	text-decoration: none;

	scroll-snap-align: start;

	box-shadow: 0 1px 3px rgba(0,0,0,.05);

	transition:
		transform .12s ease,
		box-shadow .12s ease,
		border-color .12s ease;
}

.brandbtn:hover{
	transform: translateY(-1px);
	border-color: #cfcfcf;
	box-shadow: 0 3px 8px rgba(0,0,0,.08);
}


.brandbtn img{
	width:var(--brand-logo-w);
	height:var(--brand-logo-h);
	object-fit:contain;
	display:block;
}

/* =========================================================
USE CASE
========================================================= */
.usecase{ margin-top:8px; }
.usecase__title{ font-size:18px; font-weight:550; margin:0 0 12px; }

.usecase__slider{ position:relative; }

.usecase__track{
	display:flex;
	gap:var(--usecase-gap);
	overflow-x:auto;
	overflow-y:hidden;

	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;

	padding:5px 0;
	scrollbar-width:none;
	scroll-snap-type:x mandatory;

	min-width:0;

	scroll-padding-left: var(--scroll-safe);
	scroll-padding-right: var(--scroll-safe);
}
.usecase__track::-webkit-scrollbar{ height:0; }

.usecasecard{
	flex: 0 0 auto;
	width: var(--usecase-card-w);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

	border: 1px solid var(--border-normal);
	border-radius: 12px;
	background: #fff;
	text-decoration: none;

	scroll-snap-align: start;

	position: relative;
	overflow: hidden;

	--uc-accent: #FFE300;
	padding: 10px 0 0 0;
	box-sizing: border-box;

	box-shadow: 0 1px 3px rgba(0,0,0,.05);

	transition:
		transform .12s ease,
		box-shadow .12s ease,
		border-color .12s ease;
}

.usecasecard:hover{
	transform: translateY(-1px);
	border-color: #cfcfcf;
	box-shadow: 0 3px 8px rgba(0,0,0,.08);
	z-index: 1;
}

.usecasecard__img {
  width: 135px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .usecasecard__img {
    width: 100px;
    height: 55px;
  }
}

.usecasecard__img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


/* label block + nền màu kéo xuống đáy */
.usecasecard__labelwrap{
	position:relative;
	display:block;
	width: calc(100% + 20px);
	margin-left:-10px;
	margin-right:-10px;
	margin-top:8px;
}
.usecasecard__labelbg{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:-20px;
	background: var(--uc-accent);
	z-index:1;
}
.usecasecard__label{
	position:relative;
	z-index:2;
	display:block;
	width:100%;
	padding:10px;
	text-align:center;
	line-height:1.2;
	font-weight:700;
	font-size:14px;
	color:#222;
}

/* =========================================================
OVERLAY ARROWS (shared base)
- Default hidden to prevent flicker before JS runs
========================================================= */

/* base visual */
.brandbar2__arrow,
.usecase__arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);

	display:flex;
	align-items:center;
	justify-content:center;

	background: rgba(231,231,231,.6);
	box-shadow: var(--arrow-shadow);
	cursor:pointer;

	z-index:5;
	padding:0;

	user-select:none;

	/* default hidden -> anti-flicker */
	opacity:0;
	pointer-events:none;

	transition: opacity .15s ease;
}

.brandbar2__arrow i,
.usecase__arrow i{
	font-size:20px;
	line-height:1;
	pointer-events:none;
}

/* sizes (pill style) */
.brandbar2__arrow{
	width:20px;
	height:50px;
}
.usecase__arrow{
	width:20px;
	height:145px;
}

@media (max-width: 767px) {
	.usecase__arrow i{
		font-size:15px;
	}
	.usecase__arrow {
		height:115px;
	}
}

/* positions + rounded pills */
.brandbar2__arrow.is-left{
	left:-1px;
}
.brandbar2__arrow.is-right{
	right:-1px;
}
.usecase__arrow.is-left{
	left:-1px;
}
.usecase__arrow.is-right{
	right:-1px;
}

/* "soft hide" class used by JS */
.brandbar2__arrow.is-hidden,
.usecase__arrow.is-hidden{
	opacity:0 !important;
	pointer-events:none !important;
}

/* disabled stays hidden */
.brandbar2__arrow[disabled],
.usecase__arrow[disabled]{
	opacity:0 !important;
	pointer-events:none !important;
	box-shadow:none;
	cursor:not-allowed;
}

/* Only allow showing after JS marks slider ready */
[data-slider].is-ready .brandbar2__arrow:not(.is-hidden):not([disabled]),
[data-slider].is-ready .usecase__arrow:not(.is-hidden):not([disabled]){
	opacity:1;
	pointer-events:auto;
}

/* =========================================================
PRODUCT LINE (MODEL BAR)
========================================================= */
.modelbar{
	position:relative;
}

.modelbar__track{
	display:flex;
	gap:var(--model-gap);
	overflow-x:auto;
	overflow-y:hidden;

	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;

	padding:var(--track-pad-y) 0;
	scrollbar-width:none;
	scroll-snap-type:x proximity;

	min-width:0;

	scroll-padding-left: var(--scroll-safe);
	scroll-padding-right: var(--scroll-safe);
}
.modelbar__track::-webkit-scrollbar{ height:0; }

.modelbtn{
	flex:0 0 auto;
	height:var(--model-btn-h);
	padding:0 var(--model-pad-x);
	box-sizing:border-box;

	display:inline-flex;
	align-items:center;
	justify-content:center;

	border:1px solid #e8e8e8;
	border-radius:var(--model-radius);
	background:#fff;
	text-decoration:none;

	scroll-snap-align:start;
	transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;

	font-size:13px;
	font-weight:600;
	line-height:1;
	color:#222;

	white-space:nowrap;
}

.modelbtn:hover{
	transform:translateY(-1px);
	box-shadow:0 6px 18px rgba(0,0,0,.06);
	border-color:#dcdcdc;
}

/* =========================================================
MODEL BAR ARROWS (overlay + anti-flicker)
========================================================= */
.modelbar__arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);

	display:flex;
	align-items:center;
	justify-content:center;

	background: rgba(231,231,231,.95);
	border:1px solid #e8e8e8;
	box-shadow: var(--arrow-shadow);
	cursor:pointer;

	z-index:5;
	padding:0;

	user-select:none;

	/* default hidden -> anti-flicker */
	opacity:0;
	pointer-events:none;

	transition: opacity .15s ease;
}

.modelbar__arrow i{
	font-size:20px;
	line-height:1;
	pointer-events:none;
}

/* size riêng */
.modelbar__arrow{
	width:var(--model-arrow-w);
	height:var(--model-arrow-h);
}

/* positions + rounded pills */
.modelbar__arrow.is-left{
	left:0;
	border-left:0;
}
.modelbar__arrow.is-right{
	right:0;
	border-right:0;
}

/* soft hide class used by JS */
.modelbar__arrow.is-hidden{
	opacity:0 !important;
	pointer-events:none !important;
}

/* disabled stays hidden */
.modelbar__arrow[disabled]{
	opacity:0 !important;
	pointer-events:none !important;
	box-shadow:none;
	cursor:not-allowed;
}

/* show only after JS marks slider ready */
[data-slider].is-ready .modelbar__arrow:not(.is-hidden):not([disabled]){
	opacity:1;
	pointer-events:auto;
}

/* base visual */
.brandbar2__arrow,
.usecase__arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);

	display:flex;
	align-items:center;
	justify-content:center;

	/* GRADIENT nền trong suốt dần trên/dưới */
	background:
		linear-gradient(
			to bottom,
			var(--arrow-bg-edge) 0%,
			var(--arrow-bg-mid) 28%,
			var(--arrow-bg-mid) 72%,
			var(--arrow-bg-edge) 100%
		);

	border:1px solid #e8e8e800;
	box-shadow: var(--arrow-shadow);
	cursor:pointer;

	z-index:5;
	padding:0;
	user-select:none;

	opacity:0;
	pointer-events:none;

	transition:
		opacity .15s ease,
		background .15s ease;
}

.brandbar2__arrow:hover,
.usecase__arrow:hover{
	background:
		linear-gradient(
			to bottom,
			rgba(235,235,235,0) 0%,
			rgba(225,225,225,.98) 30%,
			rgba(225,225,225,.98) 70%,
			rgba(235,235,235,0) 100%
		);
}


/* ===== BRAND Selected ===== */
.brandbar2 .brandbtn.is-selected{
	border-color: rgba(0,0,0,.35) !important;       /* nhẹ hơn #111 */
	box-shadow: 0 6px 14px rgba(0,0,0,.14) !important; /* shadow nhỏ/gọn hơn */
}

.brandbar2 .brandbtn.is-selected img{
	opacity: 1 !important;
	filter: none !important;
}

/* ===== BRAND De-selected ===== */
.brandbar2 .brandbtn:not(.is-selected){
	box-shadow: none !important;
	border-color: rgba(0,0,0,.12) !important;
}

.brandbar2 .brandbtn:not(.is-selected) img{
	opacity: .85 !important;
	filter: grayscale(20%) !important;
}


/* ===== USECASE Selected ===== */
.usecase .usecasecard.is-selected{
	border-color: rgba(0,0,0,.35) !important;        /* nhẹ hơn */
	box-shadow: 0 6px 14px rgba(0,0,0,.14) !important;  /* shadow nhỏ/gọn */
}

/* ===== USECASE De-selected ===== */
.usecase .usecasecard:not(.is-selected){
	box-shadow: none !important;
	border-color: rgba(0,0,0,.12) !important;
}

.brandbar2 .brandbtn.is-hidden{
	display: none !important;
}

/* =========================================================
Responsive
========================================================= */
@media (max-width: 576px){
	:root{
		--brand-gap: 5px;
		--usecase-gap: 5px;
		--brand-col-w: 75px;
		--brand-logo-w: 110px;
		--brand-logo-h: 40px;
		--usecase-card-w: 102px;
	}
}
@media (max-width: 420px){
	:root{

		--arrow-size: 28px;
		--arrow-offset: 6px;
		--scroll-safe: calc(var(--arrow-size) + 12px);
	}
}