:root {

	--ink: #292524;
	--ink-950: #1c1917;
	--ink-900: #292524;
	--ink-800: #44403c;
	--ink-700: #57534e;
	--ink-600: #57534e;
	--ink-500: #746d68;
	--ink-400: #a8a29e;

	--red: #c0392b;
	--red-ink: #a93226;
	--red-light: #e8897f;
	--red-dark: #9a2f24;


	--bg: #ffffff;
	--bg-soft: #faf9f7;
	--bg-mute: #f5f4f2;
	--line: #e7e5e4;
	--line-strong: #d6d3d1;


	--text: #1c1917;
	--text-soft: #57534e;
	--muted: #746d68;


	--brand: var(--ink);
	--brand-dark: var(--ink-950);
	--brand-darker: #000000;
	--brand-light: var(--bg-mute);
	--accent: var(--red);


	--radius-xs: 2px;
	--radius: 4px;
	--radius-lg: 6px;


	--shadow-sm: 0 1px 2px rgba(28, 25, 23, .05);
	--shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 8px 24px rgba(28, 25, 23, .07);
	--shadow-lg: 0 2px 4px rgba(28, 25, 23, .05), 0 18px 44px rgba(28, 25, 23, .12);


	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;

	--container: 1220px;
	--header-h: 78px;
	--ease: cubic-bezier(.22, .61, .36, 1);
	--dur: 220ms;

	--font: "Be Vietnam Pro", "Segoe UI", Roboto, Arial, sans-serif;
	--font-head: "Lexend", "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Trên desktop shell "tàng hình" để .nav nằm thẳng trong hàng flex của header */
.nav-shell {
	display: contents;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	cursor: pointer;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 .6em;
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--ink-950);
}

h1 {
	font-size: 2.2rem;
	font-weight: 800;
}

h2 {
	font-size: 1.7rem;
}

h3 {
	font-size: 1.12rem;
}

p {
	margin: 0 0 1em;
}


:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 20px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


.section {
	padding: var(--space-7) 0;
}

.section--soft {
	background: var(--bg-soft);
}

.section--tight {
	padding: var(--space-6) 0;
}

.section-head {
	max-width: 760px;
	margin: 0 auto var(--space-6);
	text-align: center;
}

.section-head h2 {
	font-size: 1.85rem;
	margin-bottom: 12px;
}

.section-head p {
	color: var(--text-soft);
	margin: 0;
}


.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-family: var(--font-head);
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--red-ink);
}

.eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--red);
}

.section-head .eyebrow {
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: .88rem;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background: var(--ink);
	color: #fff;
}

.btn--primary:hover {
	background: var(--ink-800);
	box-shadow: var(--shadow);
}

.btn--red {
	background: var(--red);
	color: #fff;
}

.btn--red:hover {
	background: var(--red-dark);
	box-shadow: 0 6px 18px rgba(192, 57, 43, .28);
}

.btn--ghost {
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
}

.btn--ghost:hover {
	background: #fff;
	color: var(--ink-950);
	border-color: #fff;
}

.btn--outline {
	border-color: var(--line-strong);
	color: var(--ink-950);
	background: #fff;
}

.btn--outline:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: #fff;
}

.btn--block {
	width: 100%;
}

.grid {
	display: grid;
	gap: var(--space-4);
}

.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
	grid-template-columns: repeat(4, 1fr);
}


.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}
}


.topbar {
	background: var(--ink-950);
	color: var(--ink-400);
	font-size: .8rem;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 40px;
	flex-wrap: wrap;
}

.topbar__list {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.topbar__list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.topbar a {
	transition: color var(--dur) var(--ease);
}

.topbar a:hover {
	color: #fff;
}

.topbar svg {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--red);
}


/* KHÔNG dùng backdrop-filter ở đây: nó tạo containing block cho phần tử
   position:fixed bên trong, khiến panel menu mobile bị ghim vào vùng header
   thay vì phủ toàn màn hình. Nền vốn đã gần như đục nên không mất gì. */
.header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-h);
}

.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.logo img {
	width: 46px;
	height: 46px;
}

.logo__text strong {
	display: block;
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--ink-950);
	line-height: 1.15;
}

.logo__text span {
	display: block;
	font-size: .68rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.nav {
	margin-left: auto;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
}

.nav__list>li {
	position: relative;
}

.nav__list>li>a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 11px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
	color: var(--ink-700);
	transition: color var(--dur) var(--ease);
}

.nav__list>li>a::after {
	content: "";
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 10px;
	height: 2px;
	background: var(--red);
	transform: scaleX(0);
	transition: transform var(--dur) var(--ease);
}

.nav__list>li:hover>a,
.nav__list>li.is-active>a {
	color: var(--ink-950);
}

.nav__list>li:hover>a::after,
.nav__list>li.is-active>a::after {
	transform: scaleX(1);
}

.nav__list>li>a .caret {
	width: 9px;
	height: 9px;
	transition: transform var(--dur) var(--ease);
}

.nav__list>li:hover>a .caret {
	transform: rotate(180deg);
}

.submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 254px;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 2px solid var(--red);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

/* Mega menu "Sản phẩm": 2 cột trên desktop */
.submenu--mega {
	min-width: 520px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.nav__list li:hover>.submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.submenu a {
	display: block;
	padding: 9px 14px;
	font-size: .87rem;
	border-radius: var(--radius-xs);
	color: var(--text-soft);
	border-left: 2px solid transparent;
	transition: all var(--dur) var(--ease);
}

.submenu a:hover {
	background: var(--bg-mute);
	color: var(--ink-950);
	border-left-color: var(--red);
}

.submenu .submenu-title {
	padding: 10px 14px 6px;
	font-family: var(--font-head);
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--muted);
}

.header__cta {
	display: flex;
	align-items: center;
	gap: 11px;
	flex: none;
	padding-left: 20px;
	border-left: 1px solid var(--line);
}

.header__cta>svg {
	width: 38px;
	height: 38px;
	padding: 8px;
	background: var(--red);
	color: #fff;
	border-radius: var(--radius);
	flex: none;
}

.header__cta span {
	display: block;
	font-size: .68rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.header__cta strong {
	display: block;
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink-950);
}

.burger {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	align-items: center;
	justify-content: center;
}

.burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--ink);
	position: relative;
}

.burger span::before,
.burger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: var(--ink);
}

.burger span::before {
	top: -6px;
}

.burger span::after {
	top: 6px;
}


.hero {
	position: relative;
	overflow: hidden;
	background: var(--ink-950);
}

.hero__track {
	position: relative;
	height: 500px;
}

/* Slide rời đi mờ nhanh (240ms), slide vào hiện chậm hơn (620ms) — giảm khoảng
   thời gian hai đoạn chữ chồng lên nhau khi chuyển. */
.hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 240ms var(--ease);
	background-size: cover;
	background-position: center;
}

.hero__slide.is-active {
	transition: opacity 620ms var(--ease);
	opacity: 1;
}

.hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(96deg, rgba(28, 25, 23, .96) 0%, rgba(28, 25, 23, .82) 46%, rgba(28, 25, 23, .35) 100%);
}

.hero::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -20%;
	right: 12%;
	width: 3px;
	height: 140%;
	background: var(--red);
	transform: rotate(18deg);
	opacity: .8;
}

.hero__content {
	position: relative;
	z-index: 3;
	max-width: 660px;
	color: #fff;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-family: var(--font-head);
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: #fff;
}

.hero__eyebrow::before {
	content: "";
	width: 30px;
	height: 3px;
	background: var(--red);
}

.hero__content h2 {
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.08;
	color: #fff;
	margin-bottom: 18px;
}

.hero__content p {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, .75);
	margin-bottom: 30px;
	max-width: 540px;
}

.hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	backdrop-filter: blur(4px);
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.hero__arrow:hover {
	background: var(--red);
	border-color: var(--red);
}

.hero__arrow--prev {
	left: 24px;
}

.hero__arrow--next {
	right: 24px;
}

.hero__arrow svg {
	width: 19px;
	height: 19px;
}

.hero__dots {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	display: flex;
	gap: 8px;
}

.hero__dots button {
	width: 26px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, .3);
	transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}

.hero__dots button.is-active {
	background: var(--red);
	width: 46px;
}


.promise {
	background: var(--ink-950);
	color: #fff;
}

.promise__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.promise__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 26px 24px;
	border-right: 1px solid rgba(255, 255, 255, .1);
	transition: background var(--dur) var(--ease);
}

.promise__item:last-child {
	border-right: 0;
}

.promise__item:hover {
	background: rgba(255, 255, 255, .04);
}

.promise__item svg {
	width: 40px;
	height: 40px;
	padding: 9px;
	flex: none;
	background: var(--red);
	color: #fff;
	border-radius: var(--radius);
}

.promise__item strong {
	display: block;
	font-family: var(--font-head);
	font-size: .94rem;
	font-weight: 600;
}

.promise__item span {
	font-size: .8rem;
	color: var(--ink-400);
}


.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.card::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 280ms var(--ease);
}

.card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-3px);
	border-color: var(--line-strong);
}

.card:hover::before {
	transform: scaleX(1);
}

.card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #fff;
	overflow: hidden;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 480ms var(--ease);
}

.card:hover .card__media img {
	transform: scale(1.04);
}

.badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: var(--radius-xs);
	background: var(--red);
	color: #fff;
	font-family: var(--font-head);
	font-size: .64rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.card__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.card__cat {
	font-family: var(--font-head);
	font-size: .68rem;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 8px;
}

.card__title {
	font-family: var(--font-head);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.01em;
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.9em;
	transition: color var(--dur) var(--ease);
}

.card:hover .card__title {
	color: var(--red-ink);
}

.card__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.card__price {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--red-ink);
	font-size: .93rem;
}

.card__link {
	font-size: .8rem;
	font-weight: 600;
	color: var(--ink-600);
	transition: color var(--dur) var(--ease);
}

.card:hover .card__link {
	color: var(--ink-950);
}


.cat-card {
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--ink-950);
}

/* Ảnh minh hoạ nay là nền sáng nên KHÔNG giảm opacity nữa (sẽ thành xám đục).
   Độ tương phản cho chữ trắng do lớp phủ gradient ở đáy đảm nhiệm. */
.cat-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 520ms var(--ease);
}

.cat-card:hover img {
	transform: scale(1.06);
}

.cat-card__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 56px 20px 20px;
	color: #fff;
	background: linear-gradient(to top,
			rgba(28, 25, 23, .94) 0%,
			rgba(28, 25, 23, .78) 45%,
			rgba(28, 25, 23, 0) 100%);
}

.cat-card__body h3 {
	color: #fff;
	margin: 0 0 4px;
	font-size: 1.05rem;
	position: relative;
	padding-left: 0;
	transition: padding-left var(--dur) var(--ease);
}

.cat-card__body h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 2px;
	background: var(--red);
	transform: translateY(-50%);
	transition: width var(--dur) var(--ease);
}

.cat-card:hover .cat-card__body h3 {
	padding-left: 24px;
}

.cat-card:hover .cat-card__body h3::before {
	width: 16px;
}

.cat-card__body span {
	font-size: .8rem;
	color: var(--ink-400);
}


.reason {
	display: flex;
	gap: 18px;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.reason:hover {
	box-shadow: var(--shadow);
	transform: translateY(-3px);
	border-color: var(--line-strong);
}

.reason__icon {
	flex: none;
	width: 50px;
	height: 50px;
	display: grid;
	place-items: center;
	border-radius: var(--radius);
	background: var(--ink-950);
	color: #fff;
	transition: background var(--dur) var(--ease);
}

.reason:hover .reason__icon {
	background: var(--red);
}

.reason__icon svg {
	width: 24px;
	height: 24px;
}

.reason h3 {
	font-size: 1rem;
	margin-bottom: 6px;
}

.reason p {
	margin: 0;
	font-size: .89rem;
	color: var(--text-soft);
}


.news-card {
	display: flex;
	flex-direction: column;
}

.news-card__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-mute);
	margin-bottom: 16px;
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 480ms var(--ease);
}

.news-card:hover .news-card__media img {
	transform: scale(1.05);
}

.news-card__date {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 10px;
	font-family: var(--font-head);
	font-size: .72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
}

.news-card__date svg {
	width: 13px;
	height: 13px;
	color: var(--red);
}

.news-card h3 {
	font-size: 1.02rem;
	line-height: 1.42;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--dur) var(--ease);
}

.news-card:hover h3 {
	color: var(--red-ink);
}

.news-card p {
	font-size: .88rem;
	color: var(--text-soft);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


.testimonial {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 26px;
	transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.testimonial:hover {
	box-shadow: var(--shadow);
	border-color: var(--line-strong);
}

.testimonial__quote {
	position: absolute;
	top: 14px;
	right: 22px;
	font-size: 3.6rem;
	line-height: 1;
	color: var(--bg-mute);
	font-family: Georgia, serif;
}

.testimonial p {
	font-size: .92rem;
	color: var(--text-soft);
}

.testimonial__stars {
	color: var(--red);
	letter-spacing: 3px;
	margin-bottom: 14px;
	font-size: .9rem;
}

.testimonial__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.testimonial__avatar {
	width: 42px;
	height: 42px;
	border-radius: var(--radius);
	background: var(--ink-950);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--font-head);
	font-weight: 700;
	flex: none;
}

.testimonial__author strong {
	display: block;
	font-size: .9rem;
	font-family: var(--font-head);
}

.testimonial__author span {
	font-size: .78rem;
	color: var(--muted);
}



.partners {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.partner {
	display: grid;
	place-items: center;
	height: 96px;
	padding: 14px;
	background: #fff;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .06em;
	/* --ink-400 quá nhạt trên nền trắng (2,4:1); dùng --ink-500 để đọc được */
	color: var(--ink-500);
	text-align: center;
	transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.partner:hover {
	color: var(--ink-950);
	background: var(--bg-soft);
}


.cta-band {
	position: relative;
	background: var(--ink-950);
	color: #fff;
	overflow: hidden;
}

.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/bg-cta.svg") center/cover;
	opacity: .5;
}

.cta-band::after {
	content: "";
	position: absolute;
	top: -30%;
	left: -6%;
	width: 3px;
	height: 160%;
	background: var(--red);
	transform: rotate(16deg);
	opacity: .7;
}

.cta-band>.container {
	position: relative;
	z-index: 2;
}

.cta-band__grid {
	display: grid;
	grid-template-columns: 1fr 470px;
	gap: 56px;
	align-items: center;
}

.cta-band h2 {
	color: #fff;
	font-size: 2rem;
}

.cta-band p {
	color: rgba(255, 255, 255, .72);
}

.cta-band__list {
	margin-top: 24px;
	display: grid;
	gap: 12px;
}

.cta-band__list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: .92rem;
}

.cta-band__list svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--red);
	margin-top: 4px;
}

.form-box {
	background: #fff;
	border-radius: var(--radius);
	border-top: 3px solid var(--red);
	padding: 32px 30px;
	box-shadow: var(--shadow-lg);
	color: var(--text);
}

.form-box h3 {
	font-size: 1.22rem;
	margin-bottom: 4px;
}

.form-box>p {
	font-size: .86rem;
	color: var(--text-soft);
	margin-bottom: 20px;
}

.field {
	margin-bottom: 16px;
}

.field label {
	display: block;
	font-family: var(--font-head);
	font-size: .8rem;
	font-weight: 600;
	margin-bottom: 7px;
	color: var(--ink-800);
}

.field label .req {
	color: var(--red);
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: .9rem;
	background: #fff;
	color: var(--text);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--ink-400);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: 0;
	border-color: var(--ink-950);
	box-shadow: 0 0 0 3px rgba(28, 25, 23, .08);
}

.field textarea {
	resize: vertical;
	min-height: 96px;
}

.field .error {
	display: none;
	margin-top: 6px;
	font-size: .78rem;
	color: var(--red-ink);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
	border-color: var(--red);
}

.field.has-error input:focus,
.field.has-error textarea:focus {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}

.field.has-error .error {
	display: block;
}

.form-note {
	font-size: .78rem;
	color: var(--muted);
	margin: 14px 0 0;
	text-align: center;
}

.form-note a {
	color: var(--red-ink);
	font-weight: 600;
}

.form-success {
	display: none;
	padding: 13px 16px;
	margin-bottom: 18px;
	border-radius: var(--radius);
	background: var(--bg-mute);
	border-left: 3px solid var(--ink-950);
	color: var(--ink-950);
	font-size: .87rem;
}

.form-success.is-visible {
	display: block;
}


.page-hero {
	position: relative;
	padding: 56px 0;
	background: var(--ink-950);
	color: #fff;
	overflow: hidden;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/bg-page.svg") center/cover;
	opacity: .45;
}

.page-hero::after {
	content: "";
	position: absolute;
	top: -40%;
	right: 14%;
	width: 3px;
	height: 180%;
	background: var(--red);
	transform: rotate(18deg);
	opacity: .75;
}

.page-hero>.container {
	position: relative;
	z-index: 2;
}

.page-hero h1 {
	color: #fff;
	margin-bottom: 10px;
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .84rem;
	color: var(--ink-400);
}

.breadcrumb a {
	transition: color var(--dur) var(--ease);
}

.breadcrumb a:hover {
	color: var(--red-light);
}

.breadcrumb li+li::before {
	content: "/";
	margin-right: 8px;
	/* --ink-700 gần như chìm vào nền đen; --ink-500 vẫn nhạt hơn chữ nhưng thấy được */
	color: var(--ink-500);
}

.breadcrumb li {
	display: flex;
}


.layout {
	display: grid;
	grid-template-columns: 286px 1fr;
	gap: 36px;
	align-items: start;
}

.layout--right {
	grid-template-columns: 1fr 306px;
}

.widget {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 24px;
}

.widget__head {
	padding: 15px 18px;
	background: var(--ink-950);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	border-bottom: 2px solid var(--red);
}

.widget__body {
	padding: 8px;
}

.cat-nav__group+.cat-nav__group {
	border-top: 1px solid var(--line);
	margin-top: 6px;
	padding-top: 6px;
}

.cat-nav__title {
	display: block;
	padding: 11px 12px 7px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: .74rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .12em;
}

.cat-nav a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 12px 9px 26px;
	font-size: .87rem;
	color: var(--text-soft);
	border-radius: var(--radius-xs);
	transition: all var(--dur) var(--ease);
}

.cat-nav a::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 6px;
	height: 1px;
	background: var(--ink-400);
	transform: translateY(-50%);
	transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}

.cat-nav a:hover,
.cat-nav a.is-active {
	background: var(--bg-mute);
	color: var(--ink-950);
	font-weight: 600;
}

.cat-nav a:hover::before,
.cat-nav a.is-active::before {
	width: 10px;
	background: var(--red);
}

.cat-nav a .count {
	font-size: .75rem;
	color: var(--muted);
	font-weight: 400;
}

.side-product {
	display: flex;
	gap: 12px;
	padding: 10px;
	border-radius: var(--radius-xs);
	transition: background var(--dur) var(--ease);
}

.side-product:hover {
	background: var(--bg-soft);
}

.side-product img {
	width: 62px;
	height: 62px;
	border-radius: var(--radius-xs);
	object-fit: contain;
	flex: none;
	background: #fff;
	border: 1px solid var(--line);
}

.side-product strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .84rem;
	font-weight: 600;
	line-height: 1.45;
}

.side-product:hover strong {
	color: var(--red-ink);
}

.side-product>span {
	color: var(--text);
	min-width: 0;
}

.side-product>span>span {
	font-size: .79rem;
	color: var(--red-ink);
	font-weight: 600;
}

.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 18px;
	margin-bottom: 24px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: .87rem;
}

.toolbar select,
.toolbar input {
	padding: 9px 13px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: .86rem;
	background: #fff;
	transition: border-color var(--dur) var(--ease);
}

.toolbar select:focus,
.toolbar input:focus {
	outline: 0;
	border-color: var(--ink-950);
}

.pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 38px;
	flex-wrap: wrap;
}

.pagination button {
	min-width: 40px;
	height: 40px;
	padding: 0 13px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font-family: var(--font-head);
	font-size: .86rem;
	font-weight: 600;
	color: var(--text-soft);
	transition: all var(--dur) var(--ease);
}

.pagination button:hover:not(:disabled) {
	border-color: var(--ink-950);
	color: var(--ink-950);
}

.pagination button.is-active {
	background: var(--ink-950);
	border-color: var(--ink-950);
	color: #fff;
}

.pagination button:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.empty-state {
	padding: 64px 20px;
	text-align: center;
	color: var(--text-soft);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--bg-soft);
}


.pd {
	display: grid;
	grid-template-columns: 490px 1fr;
	gap: 48px;
	align-items: start;
}

.pd__gallery {
	position: sticky;
	top: calc(var(--header-h) + 20px);
}

.pd__main {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
	aspect-ratio: 1;
}

/* Ảnh sản phẩm là ảnh chụp nền trắng theo khung 4/3 — dùng contain để
   không cắt mất đầu cáp khi đặt trong khung vuông. */
.pd__main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pd__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 12px;
}

.pd__thumbs button {
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-xs);
	overflow: hidden;
	background: #fff;
	aspect-ratio: 1;
	transition: border-color var(--dur) var(--ease);
}

.pd__thumbs button:hover {
	border-color: var(--line-strong);
}

.pd__thumbs button.is-active {
	border-color: var(--red);
	border-width: 2px;
}

.pd__thumbs img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pd__meta {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	font-size: .84rem;
	color: var(--muted);
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}

.pd__meta b {
	color: var(--ink-950);
	font-weight: 600;
}

.pd__price-box {
	padding: 20px 22px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-left: 3px solid var(--red);
	border-radius: var(--radius);
	margin-bottom: 24px;
}

.pd__price-box .label {
	font-size: .8rem;
	color: var(--muted);
}

.pd__price-box .value {
	font-family: var(--font-head);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--red);
	letter-spacing: -.02em;
}

.pd__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.tabs {
	border-bottom: 1px solid var(--line);
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.tabs button {
	padding: 13px 22px;
	border: 0;
	background: none;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: .88rem;
	color: var(--muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tabs button:hover {
	color: var(--ink-950);
}

.tabs button.is-active {
	color: var(--ink-950);
	border-bottom-color: var(--red);
}

.tab-panel {
	display: none;
}

.tab-panel.is-active {
	display: block;
}

.table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

table.data {
	width: 100%;
	min-width: 540px;
	border-collapse: collapse;
	font-size: .87rem;
}

/* Bảng dạng khoá – giá trị (2 cột): cho phép co lại vừa màn hình điện thoại
   thay vì bắt người dùng cuộn ngang như bảng tra thông số nhiều cột. */
table.data--kv {
	min-width: 0;
}

table.data th,
table.data td {
	padding: 12px 15px;
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
	text-align: left;
}

table.data th:last-child,
table.data td:last-child {
	border-right: 0;
}

table.data tbody tr:last-child td {
	border-bottom: 0;
}

table.data thead th {
	background: var(--ink-950);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
	border-right-color: rgba(255, 255, 255, .12);
	border-bottom: 0;
}

table.data tbody tr {
	transition: background var(--dur) var(--ease);
}

table.data tbody tr:nth-child(even) {
	background: var(--bg-soft);
}

table.data tbody tr:hover {
	background: var(--bg-mute);
	box-shadow: inset 3px 0 0 var(--red);
}


.prose {
	font-size: .97rem;
	color: #2b2b30;
}

.prose h2 {
	font-size: 1.4rem;
	margin-top: 1.7em;
}

.prose h3 {
	font-size: 1.12rem;
	margin-top: 1.5em;
}

.prose img {
	border-radius: var(--radius);
	margin: 1.5em 0;
}

.prose a {
	color: var(--red-ink);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prose ul {
	margin: 0 0 1.2em;
	display: grid;
	gap: 9px;
}

.prose ul li {
	padding-left: 26px;
	position: relative;
}

.prose ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 11px;
	width: 12px;
	height: 2px;
	background: var(--red);
}

.prose blockquote {
	margin: 1.6em 0;
	padding: 20px 24px;
	border-left: 3px solid var(--red);
	background: var(--bg-soft);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
	color: var(--text-soft);
}

.prose blockquote p:last-child {
	margin: 0;
}

.info-card {
	background: #fff;
	border: 1px solid var(--line);
	border-left: 3px solid var(--ink-950);
	border-radius: var(--radius);
	padding: 22px 24px;
}


.footer {
	background: var(--ink-950);
	color: var(--ink-400);
	font-size: .88rem;
	padding-top: 60px;
	border-top: 3px solid var(--red);
}

.footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: 40px;
	padding-bottom: 46px;
}

.footer h4 {
	position: relative;
	color: #fff;
	font-size: .84rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 34px;
	height: 1px;
	background: var(--red);
}

.footer a {
	transition: color var(--dur) var(--ease);
}

.footer a:hover {
	color: #fff;
}

.footer__links {
	display: grid;
	gap: 11px;
}

.footer__links a {
	position: relative;
	padding-left: 0;
	transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}

.footer__links a:hover {
	padding-left: 10px;
	color: #fff;
}

.footer__links a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 1px;
	background: var(--red);
	transform: translateY(-50%);
	transition: width var(--dur) var(--ease);
}

.footer__links a:hover::before {
	width: 6px;
}

.footer__contact {
	display: grid;
	gap: 13px;
}

.footer__contact li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
}

.footer__contact svg {
	width: 16px;
	height: 16px;
	flex: none;
	margin-top: 4px;
	color: var(--red);
}

.footer__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.footer__logo img {
	width: 46px;
	height: 46px;
}

.footer__logo strong {
	color: #fff;
	font-family: var(--font-head);
	font-size: .96rem;
	display: block;
	line-height: 1.3;
}

.socials {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}

.socials a {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.socials a:hover {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

.socials svg {
	width: 17px;
	height: 17px;
}

.footer__bottom {
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: .81rem;
	color: #948d87;
}


.floating {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 70;
	display: grid;
	gap: 10px;
}

.floating a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 8px 8px;
	border-radius: var(--radius);
	background: var(--red);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: .86rem;
	box-shadow: var(--shadow);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.floating a:hover {
	transform: translateX(3px);
	box-shadow: var(--shadow-lg);
}

.floating a.is-zalo {
	background: #3874FF;
}

.floating a .ico {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-xs);
	background: rgba(255, 255, 255, .18);
}

.floating svg {
	width: 17px;
	height: 17px;
}

.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 70;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--radius);
	background: var(--ink-950);
	color: #fff;
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all var(--dur) var(--ease);
}

.to-top:hover {
	background: var(--red);
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.to-top svg {
	width: 20px;
	height: 20px;
}


@media (max-width: 1100px) {
	.footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.partners {
		grid-template-columns: repeat(3, 1fr);
	}

	.pd {
		grid-template-columns: 1fr;
	}

	.pd__gallery {
		position: static;
		max-width: 480px;
	}

	.cta-band__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.hero__content h2 {
		font-size: 2.4rem;
	}
}

@media (max-width: 992px) {
	.header__cta {
		display: none;
	}

	.burger {
		display: flex;
	}

	/* Shell phủ đúng bằng màn hình và cắt phần thừa, nên panel trượt ra ngoài
	   không tạo vùng cuộn ngang. Không nhận sự kiện chuột khi menu đang đóng. */
	.nav-shell {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 80;
		overflow: hidden;
		pointer-events: none;
	}

	.nav-shell.is-open {
		pointer-events: auto;
	}

	.nav {
		position: absolute;
		inset: 0 0 0 auto;
		width: min(344px, 88vw);
		background: #fff;
		padding: 20px;
		overflow-y: auto;
		box-shadow: var(--shadow-lg);
		transform: translateX(100%);
		transition: transform 300ms var(--ease);
	}

	.nav.is-open {
		transform: translateX(0);
	}

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav__list>li>a {
		padding: 14px 8px;
		border-bottom: 1px solid var(--line);
	}

	.nav__list>li>a::after {
		display: none;
	}

	.nav__list>li.is-active>a {
		color: var(--red-ink);
	}

	.nav__list>li>a .caret {
		margin-left: auto;
	}

	.submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--line);
		border-radius: 0;
		display: none;
		padding: 6px 0 10px 10px;
		min-width: 0;
	}

	.nav__list li.is-open>.submenu {
		display: block;
	}

	.nav__list li:hover>.submenu {
		display: none;
	}

	.nav__list li.is-open:hover>.submenu {
		display: block;
	}

	/* Mega menu về 1 cột cho vừa panel hẹp */
	.submenu--mega {
		min-width: 0;
		grid-template-columns: 1fr;
	}

	.nav__list li.is-open>.submenu--mega {
		display: grid;
	}

	.nav__list li:hover>.submenu--mega {
		display: none;
	}

	.nav__list li.is-open:hover>.submenu--mega {
		display: grid;
	}

	/* z-index phải NHỎ HƠN .header (60): header tạo stacking context riêng nên
	   panel menu nằm trong đó không thể vượt lên trên lớp phủ này được. */
	.nav-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(28, 25, 23, .5);
		z-index: 55;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--dur) var(--ease), visibility var(--dur);
	}

	.nav-backdrop.is-open {
		opacity: 1;
		visibility: visible;
	}

	.nav__close {
		display: block;
		margin: 0 0 14px auto;
		width: 40px;
		height: 40px;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		background: #fff;
		font-size: 1.2rem;
		line-height: 1;
		color: var(--ink-950);
	}

	.layout,
	.layout--right {
		grid-template-columns: 1fr;
	}

	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.promise__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.promise__item:nth-child(2n) {
		border-right: 0;
	}

	.promise__item:nth-child(-n+2) {
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}

	.hero__track {
		height: 430px;
	}

	.hero__content h2 {
		font-size: 2.1rem;
	}

	.hero__arrow {
		display: none;
	}

	.hero::before {
		right: 4%;
	}
}

/* Màn hình hẹp: bỏ dòng slogan trong logo để nút menu không bị đẩy ra ngoài */
@media (max-width: 480px) {
	.logo img {
		width: 40px;
		height: 40px;
	}

	.logo__text strong {
		font-size: .9rem;
	}

	.logo__text span {
		display: none;
	}

	.header__inner {
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.section {
		padding: var(--space-6) 0;
	}

	h1 {
		font-size: 1.6rem;
	}

	.section-head {
		margin-bottom: var(--space-5);
	}

	.section-head h2 {
		font-size: 1.38rem;
	}

	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr;
	}

	.promise__grid {
		grid-template-columns: 1fr;
	}

	.promise__item {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}

	.footer__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.partners {
		grid-template-columns: repeat(2, 1fr);
	}

	.topbar__inner {
		justify-content: center;
		font-size: .74rem;
	}

	.topbar__list {
		gap: 14px;
	}

	.hero__track {
		height: 400px;
	}

	.hero__content h2 {
		font-size: 1.7rem;
	}

	.hero__content p {
		font-size: .94rem;
	}

	.hero__actions .btn {
		flex: 1;
	}

	.form-box {
		padding: 24px 20px;
	}

	.floating a span.txt {
		display: none;
	}

	.floating a {
		padding: 8px;
	}

	.pd__gallery {
		max-width: none;
	}

	.pd {
		gap: 30px;
	}

	.tabs button {
		padding: 11px 14px;
		font-size: .82rem;
	}

	.cta-band h2 {
		font-size: 1.45rem;
	}
}

@media (min-width: 993px) {

	.nav__close,
	.nav-backdrop {
		display: none;
	}
}