: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;
	max-width: fit-content;
}

.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);
}

/* Các quy tắc ẩn/hiện mục topbar đều phải kèm "li": .topbar__list li ở trên có
   độ ưu tiên (0,1,1), chỉ dùng tên lớp (0,1,0) sẽ bị display:flex đè mất.
   Trên desktop hotline đã nằm ở nút CTA bên phải header nên không lặp lại ở đây;
   quy tắc hiện lại nằm trong các media query cuối file. */
.topbar__list li.topbar__hotline {
	display: none;
}

.topbar__hotline a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.topbar__hotline b {
	color: #fff;
	font-weight: 600;
	letter-spacing: .01em;
}


/* 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);
	max-width: fit-content;
}

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

/* --- Khối hai logo --------------------------------------------------------
   TPĐ là thương hiệu của công ty nên đứng trước và lớn hơn; CADI-SUN là hãng
   được phân phối nên đứng sau vạch ngăn với cỡ nhỏ hơn. Hai dấu hiệu được cân
   theo chiều cao thị giác chứ không theo chiều cao khung ảnh. */

.logo__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	/* Cao hơn logo CADI-SUN vì dấu hiệu TPĐ nằm ngang: cân theo diện tích
	   thị giác thì chữ TPĐ mới đủ lớn để đọc ở cỡ header. */
	height: 54px;
	border-radius: 9px;
	overflow: hidden;
	/* Ảnh nhận diện TPĐ đã có sẵn nền đen–vàng nên khối chỉ cần bo góc và
	   cắt gọn, không thêm nền hay đệm. */
	/* background: #17140f; */
}

.logo__badge img {
	display: block;
	height: 100%;
	width: auto;
}

.logo__partner {
	display: flex;
	align-items: center;
	flex: none;
	padding-left: 14px;
	border-left: 1px solid var(--line);
}

.logo__partner img {
	display: block;
	width: 40px;
	height: 40px;
}

/* Header hẹp: bỏ dấu hiệu CADI-SUN để chừa chỗ cho menu và nút hotline.
   Footer vẫn giữ đủ hai logo vì không bị giới hạn chiều ngang. */
@media (max-width: 1100px) {
	.header .logo__partner {
		display: none;
	}
}

.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;
}

/* Nền footer đã tối nên viền ngăn phải sáng lên mới thấy được. */
.footer__logo .logo__partner {
	border-left-color: rgba(255, 255, 255, .18);
}

/* Cột footer hẹp, tên đầy đủ của công ty lại dài — xếp hai dấu hiệu chung một
   hàng rồi cho phần chữ xuống dòng dưới thay vì chen ngang giữa hai logo. */
.footer__logo {
	flex-wrap: wrap;
}

.footer__logo .logo__badge {
	order: 0;
}

.footer__logo .logo__partner {
	order: 1;
}

.footer__logo-text {
	order: 2;
	flex: 1 0 100%;
}

.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;
	}

	/* Địa chỉ là chuỗi dài nhất trên topbar — bỏ trước tiên khi hết chỗ. */
	.topbar__list li.topbar__addr {
		display: none;
	}
}

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

	.burger {
		display: flex;
	}

	/* Nút hotline trong header vừa bị ẩn, đưa hotline lên topbar thay thế. */
	.topbar__list li.topbar__hotline {
		display: flex;
	}

	.topbar__list li.topbar__hours {
		display: none;
	}

	/* 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__badge {
		height: 40px;
		padding: 6px 8px;
	}

	.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);
	}

	/* Điện thoại: topbar thu về đúng một dòng hotline bấm gọi, cao 34px.
	   Trước đây địa chỉ + giờ làm việc + email xuống dòng thành mảng đen
	   ~95px, cao gần bằng cả header. */
	.topbar__list li.topbar__mail {
		display: none;
	}

	.topbar__inner {
		justify-content: center;
		min-height: 34px;
		font-size: .78rem;
	}

	.topbar__list {
		gap: 14px;
	}

	.topbar__hotline svg {
		width: 13px;
		height: 13px;
	}

	.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;
	}
}