/* INOZETEK Việt Nam – front-end styles.
   Colours, fonts and sizes for blocks come from theme.json; this file covers
   the header/footer chrome and the INOZETEK block styles. */

:root {
	--inz-bg: #050505;
	--inz-panel: #0d0d0d;
	--inz-line: #3c3c3c; /* inozetek.com border colour */
	--inz-corner: #b8b8b8;
	--inz-line-strong: rgba(255, 255, 255, .32);
	--inz-text: #f2f2f2;
	--inz-muted: #a3a3a3;
	--inz-max: 1136px;
	--inz-gutter: 20px;
	--inz-header-h: 64px;
	--inz-orange: #ff5f1f;
	/* Motion curves measured on inozetek.com */
	--inz-ease-out: cubic-bezier(.16, 1, .3, 1);
	--inz-ease-io: cubic-bezier(.44, 0, .56, 1);
	--inz-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 5.3 19.9 12l-6.7 6.7-1.4-1.4 4.3-4.3H4v-2h12.1l-4.3-4.3z'/%3E%3C/svg%3E");
	--inz-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 4.8 11.5l-1.4 1.4 6.1 6.1L20.6 7.9l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--inz-header-h) + 16px); }
body {
	margin: 0;
	background: var(--inz-bg);
	color: var(--inz-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; height: auto; }
/* Titles that wrap split into even lines instead of leaving one word alone on the last line;
   body text avoids a single orphaned word too. */
h1, h2, h3, h4, .wp-block-heading { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
a { color: inherit; }
::selection { background: #fff; color: #000; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.inz-icon { display: block; flex: none; }
body.is-locked { overflow: hidden; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 1000;
	padding: 10px 14px;
	background: #fff;
	color: #000;
	font-weight: 700;
}
.skip-link:focus { top: 12px; }

.container {
	width: min(100% - 2 * var(--inz-gutter), var(--inz-max));
	margin-inline: auto;
}
.section { padding-block: clamp(40px, 6vw, 80px); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--inz-line);
	background: rgba(5, 5, 5, .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__bar {
	display: flex;
	align-items: center;
	gap: 18px;
	/* Wider than the 1136 column so the nine top items fit beside the logo and the two buttons. */
	width: min(100% - 2 * var(--inz-gutter), 1320px);
	height: var(--inz-header-h);
	margin-inline: auto;
}

/* Logo sizes as on inozetek.com: 160×32 in the header, 407 wide in the footer. */
.site-logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.site-logo__img { display: block; width: 160px; max-width: 100%; height: auto; }

.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 34px;
	padding: 0 7px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: #e7e7e7;
	font: inherit;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.site-nav__link:hover,
.site-nav__toggle[aria-expanded="true"],
.site-nav__item.is-current > .site-nav__link { background: rgba(255, 255, 255, .09); color: #fff; }
.site-nav__toggle .inz-icon { width: 14px; height: 14px; opacity: .7; transition: transform .2s; }
.site-nav__toggle[aria-expanded="true"] .inz-icon { transform: rotate(180deg); }

.site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-header__buttons { display: flex; gap: 8px; }

.header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid #fff;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}
.header-btn.is-solid { background: #fff; color: #000; }
.header-btn.is-solid:hover { background: #e6e6e6; }
.header-btn.is-outline { border-color: var(--inz-line-strong); background: rgba(255, 255, 255, .04); color: #fff; }
.header-btn.is-outline:hover { border-color: #fff; }
.header-btn--block { width: 100%; min-height: 46px; font-size: 15px; }

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #fff;
	cursor: pointer;
}
.icon-btn:hover { background: rgba(255, 255, 255, .08); }

.burger { display: none; gap: 4px; align-content: center; }
.burger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }

/* ---------- Mega menu ---------- */
.mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	border-bottom: 1px solid var(--inz-line);
	background: #050505;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
	animation: inz-mega-open .45s var(--inz-ease-out);
}
/* Moving between top-level items keeps the panel open; only its content fades in again. */
.mega.is-switch { animation: none; }
.mega[hidden] { display: none; }
.mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	width: min(100% - 2 * var(--inz-gutter), var(--inz-max));
	min-height: 220px;
	margin-inline: auto;
}
.mega__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px 40px;
	align-content: start;
	padding: 26px 24px 30px 0;
}
.mega__heading {
	display: block;
	margin: 0 0 12px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.mega__links { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.mega__link {
	color: #c9c9c9;
	font-size: 13px;
	text-decoration: none;
	transition: color .15s;
}
.mega__link:hover, a.mega__heading:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.inz-badge-new {
	margin-left: 3px;
	color: #ff3b3b;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .04em;
	vertical-align: super;
}

.mega__cards { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.mega-card {
	position: relative;
	display: block;
	min-height: 220px;
	overflow: hidden;
	border-left: 1px solid var(--inz-line);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}
.mega-card__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.mega-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .35) 100%);
}
.mega-card:hover .mega-card__img { transform: scale(1.04); }
.mega-card__text { display: grid; gap: 4px; padding: 14px 14px 0; }
.mega-card__title { font-size: clamp(18px, 1.7vw, 26px); font-weight: 800; line-height: 1.02; text-transform: uppercase; transition: color .3s var(--inz-ease-io); }
.mega-card:hover .mega-card__title, .mega-card:focus-visible .mega-card__title { color: var(--inz-orange); }

/* Columns, then picture cards, fade in one after another (inozetek.com: 0.2s + 0.05s steps, 0.4s each). */
.mega__col, .mega-card { animation: inz-fade-in .4s var(--inz-ease-io) .2s both; }
.mega__col:nth-child(2), .mega-card:nth-child(2) { animation-delay: .25s; }
.mega__col:nth-child(3), .mega-card:nth-child(3) { animation-delay: .3s; }
.mega__col:nth-child(4), .mega-card:nth-child(4) { animation-delay: .35s; }
.mega-card__sub { font-size: 11.5px; font-weight: 600; opacity: .85; }

@keyframes inz-mega-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Search ---------- */
.search-panel { border-top: 1px solid var(--inz-line); background: #050505; }
.search-panel[hidden] { display: none; }
.search-panel__form {
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(100% - 2 * var(--inz-gutter), var(--inz-max));
	margin-inline: auto;
	padding-block: 14px;
	color: var(--inz-muted);
}
.search-panel__form input {
	flex: 1;
	min-width: 0;
	height: 44px;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-size: 18px;
}
.search-panel__form input:focus { outline: none; }

.search-inline { display: flex; gap: 8px; max-width: 520px; margin: 20px auto 0; }
.search-inline input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--inz-line-strong);
	border-radius: 8px;
	background: #0d0d0d;
	color: #fff;
	font: inherit;
}
.search-inline button {
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: #fff;
	color: #000;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Mobile drawer ---------- */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 0 var(--inz-gutter) 28px;
	background: #050505;
	animation: inz-fade .18s ease-out;
}
.drawer[hidden] { display: none; }
.admin-bar .drawer { top: 46px; }
.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--inz-header-h);
	border-bottom: 1px solid var(--inz-line);
}
.drawer__logo .site-logo__img { width: 128px; }
.drawer__list { margin: 8px 0 24px; padding: 0; list-style: none; }
.drawer__item { border-bottom: 1px solid var(--inz-line); }
.drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 56px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-size: 19px;
	font-weight: 700;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.drawer__toggle .inz-icon { transition: transform .2s; }
.drawer__toggle[aria-expanded="true"] .inz-icon { transform: rotate(180deg); }
.drawer__sub { padding: 0 0 18px; }
.drawer__sub[hidden] { display: none; }
.drawer__heading { margin: 10px 0 8px; color: var(--inz-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.drawer__links { display: grid; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
.drawer__sublink { display: block; padding: 7px 0; color: #dcdcdc; font-size: 16px; text-decoration: none; }
.drawer__buttons { display: grid; gap: 10px; margin-top: auto; }

@keyframes inz-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Page heads ---------- */
.page-hero {
	position: relative;
	border-bottom: 1px solid var(--inz-line);
	background:
		linear-gradient(180deg, rgba(5, 5, 5, 0) 0%, #050505 100%),
		linear-gradient(90deg, var(--inz-line) 1px, transparent 1px) center / calc(100% / 12) 100%;
}
.page-hero__inner {
	width: min(100% - 2 * var(--inz-gutter), var(--inz-max));
	margin-inline: auto;
	padding-block: clamp(56px, 9vw, 120px) clamp(32px, 4vw, 56px);
}
.page-hero__title { margin: 0; font-size: clamp(34px, 5vw, 64px); }
.page-hero__lead { max-width: 720px; margin: 16px 0 0; color: var(--inz-muted); font-size: 17px; }
.page-hero__meta { margin: 0 0 14px; color: var(--inz-muted); font-size: 13px; font-weight: 600; }
.page-hero__meta a { color: inherit; }

/* ---------- Block content ---------- */
.entry-content { padding-block: clamp(32px, 5vw, 64px); }
.inz-blank-page .entry-content { padding-block: 0; }
.inz-blank-page .entry-content > :first-child { margin-block-start: 0; }
.single-post .entry-content > :not(.alignwide):not(.alignfull) { max-width: 760px; }
.single-post__cover { width: min(100% - 2 * var(--inz-gutter), 1000px); margin: 40px auto 0; }
.single-post__cover img { display: block; width: 100%; height: auto; border: 1px solid var(--inz-line); }
.entry-content p a, .entry-content li a { text-underline-offset: 3px; }
.entry-content strong { color: #fff; }

/* Buttons: arrow after the label, like inozetek.com */
.wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; transition: background .15s, border-color .15s; }
.wp-block-button__link::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--inz-arrow) center / contain no-repeat;
	mask: var(--inz-arrow) center / contain no-repeat;
	transition: transform .15s;
}
.wp-block-button__link:hover::after { transform: translateX(3px); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--inz-line-strong);
	background: rgba(255, 255, 255, .04);
	color: #fff;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* Nhãn viên thuốc */
p.is-style-inz-badge {
	width: fit-content;
	padding: 4px 11px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 7px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}
p.is-style-inz-badge.has-text-align-center { margin-inline: auto; }
p.is-style-inz-badge.has-text-align-right { margin-left: auto; }

/* Chữ nhỏ in hoa */
p.is-style-inz-eyebrow {
	color: var(--inz-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Chữ chạy cỡ lớn: inozetek.com's 112px slogan, dark grey fading out towards the top, gliding left at 60px/s.
   Separate items with "·" (e.g. "DYNAMIC PPF · INOCOLOR"). */
p.is-style-inz-marquee {
	overflow: hidden;
	margin-block: 0;
	padding-block: 10px;
	color: #3c3c3c;
	font-size: clamp(56px, 7.8vw, 112px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.055em;
	word-spacing: .14em; /* Plus Jakarta's space is narrower than DM Sans' */
	white-space: nowrap;
	text-transform: uppercase;
}
/* As a page section: a 104px box open at the bottom; the letters run slightly past its top and are cut by the box below. */
.entry-content > p.is-style-inz-marquee {
	height: .93em;
	padding: 0;
	border: 1px solid var(--inz-line);
	border-bottom: 0;
}
.entry-content > p.is-style-inz-marquee .inz-marquee__track { margin-top: -.134em; }
.inz-marquee__track { display: inline-flex; animation: inz-marquee var(--inz-marquee-speed, 30s) linear infinite; }
.inz-marquee__track > span {
	padding-right: 32px;
	background-image: linear-gradient(0deg, #3c3c3c 19%, rgba(0, 0, 0, 0) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
@keyframes inz-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .inz-marquee__track { animation: none; } }

/* Dấu tích */
ul.is-style-inz-check { display: grid; gap: 9px; padding: 0; list-style: none; font-size: 15px; }
ul.is-style-inz-check li { position: relative; padding-left: 28px; }
ul.is-style-inz-check li::before {
	content: "";
	position: absolute;
	top: .25em;
	left: 0;
	width: 17px;
	height: 17px;
	background: #fff;
	-webkit-mask: var(--inz-check) center / contain no-repeat;
	mask: var(--inz-check) center / contain no-repeat;
}

/* ---------- Page frame (inozetek.com) ----------
   Top-level sections of a page stack into one 1136px column of boxes that share their 1px lines;
   grid bands sit between some of them, with 13px corner marks where they meet a box. */
.inz-blank-page .entry-content > :not(.alignfull) { max-width: var(--inz-max); margin-inline: auto !important; }
.inz-blank-page .entry-content > * { margin-block: 0 !important; }
.inz-blank-page .entry-content > * + * { margin-top: -1px !important; }
/* Room under the header before the first box, as on inozetek.com (box top at 144px). */
.inz-blank-page .entry-content:has(> .is-style-inz-marquee:first-child) { padding-top: 80px; }
.inz-blank-page .entry-content:has(> .is-style-inz-back:first-child) { padding-top: 32px; }

/* Corner marks: two 13px L-shapes along the top edge of the element they are drawn on (flip for the bottom). */
.wp-block-cover:is(.is-style-inz-band, .is-style-inz-globe, .is-style-inz-benefit)::before,
.wp-block-cover:is(.is-style-inz-band, .is-style-inz-globe, .is-style-inz-benefit)::after,
.wp-block-group.is-style-inz-cta::before,
.wp-block-group.is-style-inz-cta::after,
.wp-block-spacer.is-style-inz-grid::before,
.wp-block-spacer.is-style-inz-grid::after {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	z-index: 3;
	height: 13px;
	background:
		linear-gradient(var(--inz-corner), var(--inz-corner)) left top / 13px 1px no-repeat,
		linear-gradient(var(--inz-corner), var(--inz-corner)) left top / 1px 13px no-repeat,
		linear-gradient(var(--inz-corner), var(--inz-corner)) right top / 13px 1px no-repeat,
		linear-gradient(var(--inz-corner), var(--inz-corner)) right top / 1px 13px no-repeat;
	pointer-events: none;
}
.wp-block-cover:is(.is-style-inz-band, .is-style-inz-globe, .is-style-inz-benefit)::before,
.wp-block-group.is-style-inz-cta::before { top: -1px; }
.wp-block-cover:is(.is-style-inz-band, .is-style-inz-globe, .is-style-inz-benefit)::after,
.wp-block-group.is-style-inz-cta::after { bottom: -1px; transform: scaleY(-1); }
/* A grid band marks the bottom corners of the box above it and the top corners of the box below. */
.wp-block-spacer.is-style-inz-grid::before { top: -13px; transform: scaleY(-1); }
.wp-block-spacer.is-style-inz-grid::after { bottom: -13px; }

/* Khung kẻ viền */
.wp-block-group.is-style-inz-frame {
	position: relative;
	border: 1px solid var(--inz-line);
	padding: clamp(36px, 6vw, 88px) clamp(16px, 4vw, 56px);
}

/* Khung chữ (cột 720): long text such as warranty terms, centred in a framed box. */
.wp-block-group.is-style-inz-text {
	position: relative;
	border: 1px solid var(--inz-line);
	padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 32px);
}
.wp-block-group.is-style-inz-text > * { max-width: 720px !important; margin-inline: auto !important; }
.wp-block-group.is-style-inz-text h2 { margin: 64px auto 16px; font-size: clamp(26px, 2.6vw, 32px); font-weight: 700; line-height: 1.5; }
.wp-block-group.is-style-inz-text > h2:first-child { margin-top: 0; }
.wp-block-group.is-style-inz-text :is(p, li) { color: #b8b8b8; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.4; }

/* Khung liên hệ cuối trang ("Get In Touch") */
.wp-block-group.is-style-inz-cta {
	position: relative;
	border: 1px solid var(--inz-line);
	padding: 80px 32px;
	text-align: center;
}
.wp-block-group.is-style-inz-cta h2 { margin: 0; font-size: clamp(34px, 4vw, 48px); font-weight: 800; }
.wp-block-group.is-style-inz-cta p { max-width: 560px; margin: 16px auto 0; color: #b8b8b8; font-size: 16px; font-weight: 500; }
.wp-block-group.is-style-inz-cta .wp-block-buttons { justify-content: center; margin-top: 32px; }

/* Nút quay lại dạng thẻ, gắn trên khung (e.g. "Quay lại Bảo hành") */
p.is-style-inz-back { margin: 0; }
p.is-style-inz-back a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 24px;
	border: 1px solid var(--inz-line);
	border-bottom: 0;
	color: #f2f2f2;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
p.is-style-inz-back a::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--inz-arrow) center / contain no-repeat;
	mask: var(--inz-arrow) center / contain no-repeat;
	transform: rotate(180deg);
}
p.is-style-inz-back a:hover { background: rgba(255, 255, 255, .06); }

/* Thẻ nền tối */
.wp-block-group.is-style-inz-panel {
	border: 1px solid var(--inz-line);
	background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
	padding: clamp(20px, 3vw, 32px);
}

/* Dải lưới: 2 rows of 50px, 20 columns, side rails only (the boxes around it draw the rest). */
.wp-block-spacer.is-style-inz-grid {
	position: relative;
	height: 100px !important;
	border-inline: 1px solid var(--inz-line);
	background-image:
		linear-gradient(90deg, var(--inz-line) 1px, transparent 1px),
		linear-gradient(var(--inz-line) 1px, transparent 1px);
	background-size: calc(100% / 20) 50px;
	background-position: -1px 0;
}
.entry-content > .wp-block-spacer.is-style-inz-grid { margin-block: 0; }

/* Khối có viền góc (also the frame of "Địa cầu xoay") */
.wp-block-cover:is(.is-style-inz-band, .is-style-inz-globe) { border: 1px solid var(--inz-line); }
.entry-content > .wp-block-cover:is(.is-style-inz-band, .is-style-inz-globe) { margin-block: 0; }

/* Ảnh lợi ích (product pages): a 1136×490 picture, title and text at the bottom over a fade to black. */
.wp-block-cover.is-style-inz-benefit { align-items: flex-end; padding: 0 32px 40px; border: 1px solid var(--inz-line); }
.wp-block-cover.is-style-inz-benefit > .wp-block-cover__background { background: linear-gradient(rgba(5, 5, 5, 0) 0%, #050505 90%) !important; opacity: 1 !important; }
.wp-block-cover.is-style-inz-benefit h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; }
.wp-block-cover.is-style-inz-benefit p { max-width: 760px; margin: 12px auto 0; color: #b8b8b8; font-size: 16px; }
.inz-blank-page .entry-content > .is-style-inz-benefit + .is-style-inz-benefit { margin-top: 32px !important; }

/* Địa cầu xoay: globe.js draws the turning dotted globe; the still picture stays for the editor and old browsers. */
.wp-block-cover.is-style-inz-globe { overflow: hidden; }
.wp-block-cover.has-inz-globe > .wp-block-cover__image-background { display: none; }
.wp-block-cover.has-inz-globe > .wp-block-cover__background { opacity: 1; background-color: #050505 !important; }
.inz-globe {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.inz-globe > canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: min(800px, 100%);
	aspect-ratio: 1;
	translate: -50% -50%;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 70%);
	mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 70%);
	animation: inz-fade-in 1.2s var(--inz-ease-io) both;
}
.wp-block-cover.has-inz-globe > .wp-block-cover__inner-container { z-index: 2; }

/* "Địa cầu Việt Nam" (extra class inz-globe-vn): text on the left, the globe on the right turns to Việt Nam,
   zooms in and the red dot map with Hoàng Sa and Trường Sa takes over (globe-vn.js). */
.wp-block-cover.inz-globe-vn { min-height: 640px !important; }
.inz-vnmap {
	position: absolute;
	top: 50%;
	left: 50%;
	height: min(92%, 680px);
	aspect-ratio: 600 / 760;
	opacity: 0;
	translate: -50% -50%;
	scale: .7;
	transition: opacity 1s var(--inz-ease-io), scale 1.4s var(--inz-ease-io);
}
.inz-vnmap canvas { display: block; width: 100%; height: 100%; }
.inz-globe > canvas { transition: filter 1.2s var(--inz-ease-io); }
.is-vn-zoomed .inz-vnmap { opacity: 1; scale: 1; }
.is-vn-zoomed .inz-globe > canvas { filter: brightness(.22) blur(2px); }
.inz-vnmap__label {
	position: absolute;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
	opacity: 0;
	translate: 10px -50%;
	transition: opacity .8s var(--inz-ease-io) 1.6s;
}
.is-vn-zoomed .inz-vnmap__label { opacity: 1; }
.inz-vnmap__label::before { content: ""; position: absolute; top: 50%; left: -10px; width: 5px; height: 5px; border-radius: 50%; background: #fff; translate: 0 -50%; }
.inz-vnmap__label.is-big { font-size: clamp(16px, 1.6vw, 22px); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; translate: -110% -50%; }
.inz-vnmap__label.is-big::before,
.inz-vnmap__label.is-sea::before { content: none; }
.inz-vnmap__label.is-island { color: #ffd2cf; font-size: 11.5px; }
.inz-vnmap__label.is-sea { color: rgba(255, 255, 255, .45); font-style: italic; font-weight: 600; translate: -50% -50%; }
/* "39 Limited Network trên toàn Việt Nam" on the globe of Tìm đại lý: a red pill with the number. */
.wp-block-cover .wp-block-cover__inner-container > p.inz-globe-note {
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	max-width: 100%;
	margin: 6px auto 18px;
	padding: 6px 20px 6px 6px;
	border: 1px solid rgba(218, 37, 29, .6);
	border-radius: 48px;
	background: rgba(218, 37, 29, .14);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
}
.inz-globe-note strong {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border-radius: 44px;
	background: #da251d;
	box-shadow: 0 0 24px rgba(218, 37, 29, .55);
	color: #fff;
	font-size: 22px;
	font-weight: 900;
}
/* Phones and tablets: the text on top, the globe and the map of Việt Nam under it. */
@media (max-width: 899px) {
	.wp-block-cover.inz-globe-vn { flex-direction: column; padding-bottom: 0; }
	.wp-block-cover.inz-globe-vn > .wp-block-cover__inner-container { order: 1; }
	.wp-block-cover.inz-globe-vn .inz-globe { position: relative; inset: auto; order: 2; flex: none; width: 100%; height: min(118vw, 560px); }
	.wp-block-cover.inz-globe-vn .inz-vnmap { left: 42%; }
	.inz-vnmap__label { font-size: 10px; }
	.inz-vnmap__label.is-island { font-size: 9.5px; }
}
@media (min-width: 900px) {
	.wp-block-cover.inz-globe-vn > .wp-block-cover__inner-container { width: min(100%, 1136px); padding-right: 46%; }
	/* Two lines: "Mạng lưới nhà phân phối" / "Việt Nam Network INOZETEK" (owner, 04/11/2026). */
	.wp-block-cover.inz-globe-vn h2 { font-size: clamp(26px, 2.9vw, 42px); white-space: nowrap; }
	.wp-block-cover.inz-globe-vn > .wp-block-cover__inner-container > * { text-align: left !important; margin-left: 0 !important; justify-content: flex-start !important; }
	.wp-block-cover.inz-globe-vn .inz-globe { left: 44%; }
	.wp-block-cover.inz-globe-vn .inz-globe > canvas { width: min(680px, 100%); }
}

/* Wide enough that a title running a little long stays on one line; the text under it keeps its 620px column. */
.wp-block-cover .wp-block-cover__inner-container { width: min(100%, 1000px); color: #fff; }
.wp-block-cover.alignfull .wp-block-cover__inner-container { width: min(100%, 980px); }
.wp-block-cover .wp-block-cover__inner-container > p:not(.is-style-inz-badge) { max-width: 620px; margin-inline: auto; }
.wp-block-cover p { color: rgba(255, 255, 255, .82); }

/* Viền mảnh */
.wp-block-image.is-style-inz-border img { border: 1px solid rgba(255, 255, 255, .55); }

/* Tiêu đề in hoa */
.is-style-inz-display { text-transform: uppercase; letter-spacing: -.015em; }

/* Media & text rows (product lines) */
.wp-block-media-text { gap: clamp(24px, 4vw, 56px); }
.wp-block-media-text > .wp-block-media-text__content { padding: 0; }
.wp-block-media-text .wp-block-media-text__media img {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, .55);
}
@media (max-width: 781px) {
	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { padding-top: 24px; }
}

/* Small brand mark inside content (e.g. above product line titles) */
.wp-block-image.is-style-inz-logo img { width: 120px; height: auto; }
/* Product-line logos at their inozetek.com sizes */
.wp-block-image.is-style-inz-logo img[src*="logo-dynamic-ppf"] { width: 127px; }
.wp-block-image.is-style-inz-logo img[src*="logo-inoshield"] { width: 144px; }
.wp-block-image.is-style-inz-logo img[src*="logo-inocut"] { width: 194px; }

/* ---------- Logo chữ số 0/1 ---------- */
.wp-block-image.is-style-inz-ascii { position: relative; }
.wp-block-image.is-style-inz-ascii.is-ascii-ready img { opacity: 0; }
.inz-ascii__canvas { position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; }

/* ---------- Dải sản phẩm ---------- */
.product-strip { padding-block: clamp(40px, 6vw, 80px); }
.product-strip__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.product-strip__title { margin: 0; font-size: clamp(26px, 3vw, 40px); text-transform: uppercase; }
.product-strip__tools { display: flex; align-items: center; gap: 8px; }
.product-strip__all { margin-right: 8px; color: var(--inz-muted); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; }
@media (max-width: 600px) {
	.product-strip .product-strip__nav { display: none; }
	.product-strip__title { font-size: 24px; }
	.product-strip__track { grid-auto-columns: 62%; }
}
.product-strip__all:hover { color: #fff; text-decoration: underline; }
.product-strip__nav {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--inz-line-strong);
	border-radius: 8px;
	background: rgba(255, 255, 255, .04);
	color: #fff;
	cursor: pointer;
}
.product-strip__nav:hover { border-color: #fff; }
.product-strip__nav[data-dir="-1"] .inz-icon { transform: rotate(180deg); }
.product-strip__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(170px, 22%, 260px);
	gap: 16px;
	margin: 0;
	padding: 0 0 8px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.product-strip__track::-webkit-scrollbar { display: none; }
.product-card { scroll-snap-align: start; }
.product-card a { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.product-card__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--inz-line);
	background: #111;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card a:hover .product-card__media img { transform: scale(1.05); }
.product-card__code { margin-top: 6px; color: var(--inz-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.product-card__name { color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; }

/* ---------- Thẻ tin tức (core Latest Posts) ---------- */
.wp-block-latest-posts.is-style-inz-cards { gap: 20px; padding: 0; }
.wp-block-latest-posts.is-style-inz-cards.is-grid li {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	border: 1px solid var(--inz-line);
	background: var(--inz-panel);
	transition: border-color .2s;
}
.wp-block-latest-posts.is-style-inz-cards.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.wp-block-latest-posts.is-style-inz-cards li:hover { border-color: var(--inz-line-strong); }
.wp-block-latest-posts.is-style-inz-cards .wp-block-latest-posts__featured-image { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.wp-block-latest-posts.is-style-inz-cards .wp-block-latest-posts__featured-image img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-latest-posts.is-style-inz-cards .wp-block-latest-posts__post-title {
	display: block;
	padding: 16px 16px 0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}
.wp-block-latest-posts.is-style-inz-cards .wp-block-latest-posts__post-title:hover { text-decoration: underline; }
.wp-block-latest-posts.is-style-inz-cards .wp-block-latest-posts__post-date { order: 1; padding: 14px 16px 0; color: var(--inz-muted); font-size: 12px; font-weight: 600; }
.wp-block-latest-posts.is-style-inz-cards .wp-block-latest-posts__post-title { order: 2; padding-top: 6px; padding-bottom: 18px; }
.wp-block-latest-posts.is-style-inz-cards .wp-block-latest-posts__post-excerpt { order: 3; margin: -8px 16px 18px; color: #bdbdbd; font-size: 14px; }

/* ---------- Ô ưu điểm có số (core Columns) ---------- */
.wp-block-columns.is-style-inz-features { gap: 0; counter-reset: inz-feature; border: 1px solid var(--inz-line); }
.wp-block-columns.is-style-inz-features > .wp-block-column {
	padding: clamp(22px, 3vw, 32px);
	border-left: 1px solid var(--inz-line);
	counter-increment: inz-feature;
}
.wp-block-columns.is-style-inz-features > .wp-block-column:first-child { border-left: 0; }
.wp-block-columns.is-style-inz-features > .wp-block-column::before {
	content: counter(inz-feature, decimal-leading-zero);
	display: block;
	margin-bottom: 18px;
	color: transparent;
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .45);
}
.wp-block-columns.is-style-inz-features h3 { margin: 0 0 8px; font-size: 18px; }
.wp-block-columns.is-style-inz-features p { margin: 0; font-size: 14px; }
@media (max-width: 781px) {
	.wp-block-columns.is-style-inz-features > .wp-block-column { border-left: 0; border-top: 1px solid var(--inz-line); }
	.wp-block-columns.is-style-inz-features > .wp-block-column:first-child { border-top: 0; }
}

/* ---------- Ô có biểu tượng (core Columns) ---------- */
.wp-block-columns.is-style-inz-tiles { gap: 0; border: 1px solid var(--inz-line); }
.wp-block-columns.is-style-inz-tiles > .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(22px, 3vw, 36px) 16px;
	border-left: 1px solid var(--inz-line);
	text-align: center;
}
.wp-block-columns.is-style-inz-tiles > .wp-block-column:first-child { border-left: 0; }
/* inozetek.com cards: 166px tall, 40px icon shaded grey → dark, 20px title with a silver fill. */
.wp-block-columns.is-style-inz-tiles > .wp-block-column { min-height: 166px; }
.wp-block-columns.is-style-inz-tiles .wp-block-image { position: relative; margin: 0 0 20px; }
.wp-block-columns.is-style-inz-tiles .wp-block-image img { display: block; width: 40px; height: 40px; }
.wp-block-columns.is-style-inz-tiles .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #b8b8b8, #3c3c3c);
	mix-blend-mode: multiply;
	pointer-events: none;
}
.wp-block-columns.is-style-inz-tiles h3 {
	margin: 0;
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 700;
	line-height: 1.1;
	background-image: linear-gradient(0deg, #c2c2c2, #f2f2f2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.wp-block-columns.is-style-inz-tiles p { margin: 8px 0 0; font-size: 14px; }
@media (max-width: 781px) {
	.wp-block-columns.is-style-inz-tiles { display: grid; grid-template-columns: 1fr 1fr; }
	.wp-block-columns.is-style-inz-tiles > .wp-block-column { border-left: 0; border-top: 1px solid var(--inz-line); }
	.wp-block-columns.is-style-inz-tiles > .wp-block-column:nth-child(2n) { border-left: 1px solid var(--inz-line); }
	.wp-block-columns.is-style-inz-tiles > .wp-block-column:nth-child(-n+2) { border-top: 0; }
}

/* ---------- Thẻ ảnh có tiêu đề (core Columns) ---------- */
.wp-block-columns.is-style-inz-photos { gap: 12px; }
.wp-block-columns.is-style-inz-photos > .wp-block-column { position: relative; border: 1px solid var(--inz-line); background: #0b0b0b; }
.wp-block-columns.is-style-inz-photos .wp-block-image { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.wp-block-columns.is-style-inz-photos .wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.wp-block-columns.is-style-inz-photos > .wp-block-column:hover img { transform: scale(1.04); }
.wp-block-columns.is-style-inz-photos h3 { margin: 0; padding: 14px 14px 4px; font-size: 15px; line-height: 1.3; }
.wp-block-columns.is-style-inz-photos p { margin: 0; padding: 0 14px 16px; color: var(--inz-muted); font-size: 13px; }
.wp-block-columns.is-style-inz-photos h3 a { color: #fff; text-decoration: none; }
.wp-block-columns.is-style-inz-photos h3 a::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 781px) {
	.wp-block-columns.is-style-inz-photos { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- Bảng thông số (core Table) ---------- */
/* As on inozetek.com: equal columns ruled both ways, edge to edge in its framed section; the property names
   and the header row in 20 px white, the values in 16 px grey. */
.wp-block-table.is-style-inz-specs { margin: 0; overflow-x: auto; }
.wp-block-table.is-style-inz-specs table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
.wp-block-table.is-style-inz-specs th,
.wp-block-table.is-style-inz-specs td { padding: 22px clamp(14px, 2.2vw, 32px); border: 1px solid var(--inz-line); color: #b8b8b8; font-size: 16px; font-weight: 400; line-height: 1.4; text-align: left; vertical-align: middle; }
.wp-block-table.is-style-inz-specs tr > :first-child { border-left: 0; }
.wp-block-table.is-style-inz-specs tr > :last-child { border-right: 0; }
.wp-block-table.is-style-inz-specs thead th { padding-block: 24px; color: #f2f2f2; font-size: 20px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.wp-block-table.is-style-inz-specs tbody td:first-child { color: #f2f2f2; font-size: 20px; font-weight: 600; }
.wp-block-table.is-style-inz-specs tbody tr:last-child td { border-bottom: 0; }
.wp-block-group.is-style-inz-frame > .wp-block-table.is-style-inz-specs { max-width: none !important; margin: 48px calc(-1 * clamp(16px, 4vw, 56px)) 0 !important; }
.wp-block-group.is-style-inz-frame > .wp-block-table.is-style-inz-specs:last-child { margin-bottom: calc(-1 * clamp(36px, 6vw, 88px)) !important; }


/* Section heading row: title left, link right (used above news, strips) */
.inz-section-head { align-items: flex-end; }
.inz-section-head h2 { margin: 0; text-transform: uppercase; }
.inz-section-head p a { color: var(--inz-muted); font-weight: 600; text-decoration: none; }
.inz-section-head p a:hover { color: #fff; text-decoration: underline; }

/* ---------- Colour page (single product) ---------- */
/* inozetek.com frame: one 1136px column 32px under the header – back tab, 100px marquee box, the card
   (550px square photo + details), then grid bands between boxes that share their 1px lines. */
.pdp { overflow: hidden; padding: 32px var(--inz-gutter) clamp(40px, 6vw, 80px); }
.pdp > * { position: relative; width: 100%; max-width: var(--inz-max); margin-inline: auto; }
.pdp > * + * { margin-top: -1px; }
.pdp-hero__marquee.is-style-inz-marquee {
	height: .93em;
	padding: 0;
	border: 1px solid var(--inz-line);
	border-bottom: 0;
}
.pdp-hero__marquee .inz-marquee__track { margin-top: -.134em; }
.pdp-hero__inner { position: relative; }
.pdp-card {
	display: grid;
	grid-template-columns: minmax(0, 48.42%) minmax(0, 1fr);
	border: 1px solid var(--inz-line);
	background: #050505;
}
.pdp-gallery { min-width: 0; border-right: 1px solid var(--inz-line); }
.pdp-info { min-width: 0; }
.pdp-gallery__stage { position: relative; aspect-ratio: 1; background: #0d0d0d; }
.pdp-gallery__slide { position: absolute; inset: 0; margin: 0; }
.pdp-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--inz-line-strong);
	border-radius: 50%;
	background: rgba(5, 5, 5, .6);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
}
.pdp-gallery__nav[data-dir="-1"] { left: 14px; }
.pdp-gallery__nav[data-dir="-1"] .inz-icon { transform: rotate(180deg); }
.pdp-gallery__nav[data-dir="1"] { right: 14px; }
.pdp-gallery__nav:hover { border-color: #fff; background: rgba(5, 5, 5, .85); }
.pdp-info { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 5.6vw, 64px); }
.pdp-info__labels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pdp-pill {
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 6px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.pdp-pill--accent { border-color: rgba(255, 255, 255, .5); background: #fff; color: #000; }
.pdp-info__name { margin: 0; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.05; text-transform: uppercase; }
.pdp-info__sku { margin: 12px 0 0; color: var(--inz-muted); font-size: 14px; font-weight: 600; }
.pdp-info__vn { margin: 4px 0 0; color: #cfcfcf; font-size: 15px; }
.pdp-info__actions { display: grid; gap: 10px; margin-top: 28px; }
.pdp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 20px;
	border: 1px solid var(--inz-line-strong);
	border-radius: 8px;
	background: #0d0d0d;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.pdp-btn .inz-icon { width: 15px; height: 15px; }
.pdp-btn:hover { border-color: #fff; }
.pdp-btn--solid { border-color: #fff; background: #fff; color: #000; }
.pdp-btn--solid:hover { background: #e6e6e6; }

.pdp-details {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 415px;
	overflow: hidden;
	border: 1px solid var(--inz-line);
	isolation: isolate;
	text-align: center;
}
.pdp-details__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pdp-details::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(5, 5, 5, .74); }
.pdp-details__inner { max-width: 760px; padding: 56px 24px; }
.pdp-details h2 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); }
.pdp-details__name { margin: 6px 0 18px; color: #d6d6d6; font-size: 20px; font-weight: 800; text-transform: uppercase; }
.pdp-details__text p { color: #d6d6d6; font-size: 15px; }
.pdp-share { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 6px 10px; border: 1px solid var(--inz-line); border-radius: 8px; background: rgba(5, 5, 5, .7); font-size: 13px; font-weight: 700; }
.pdp-share > span { margin-right: 6px; }
.pdp-share__btn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: #fff;
	cursor: pointer;
}
.pdp-share__btn:hover { background: rgba(255, 255, 255, .1); }
.pdp-share__btn.is-copied { color: #7dff9a; }

.pdp > .wp-block-spacer.is-style-inz-grid { height: 100px; }

.pdp-specs, .pdp-faq, .pdp-contact {
	padding: clamp(40px, 6vw, 72px) clamp(16px, 6vw, 96px);
	border: 1px solid var(--inz-line);
	text-align: center;
}
.pdp-specs h2, .pdp-faq h2, .pdp-contact h2 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); }
.pdp-specs__intro, .pdp-faq__intro { margin: 8px auto 32px; max-width: 520px; color: var(--inz-muted); font-size: 14px; }
.pdp-specs__table { width: 100%; border-collapse: collapse; text-align: left; }
.pdp-specs__table th, .pdp-specs__table td { padding: 14px 16px; border-top: 1px solid var(--inz-line); vertical-align: top; }
.pdp-specs__table tr:last-child th, .pdp-specs__table tr:last-child td { border-bottom: 1px solid var(--inz-line); }
.pdp-specs__table th { width: 50%; color: #fff; font-size: 15px; font-weight: 700; }
.pdp-specs__table td { color: #c9c9c9; font-size: 14px; }
.pdp-specs__table td a { color: #fff; }

.pdp-faq__list { max-width: 820px; margin: 0 auto; text-align: left; }
.faq-group { margin: 32px 0 6px !important; color: var(--inz-muted) !important; font-size: 15px !important; font-weight: 700 !important; }
.wp-block-details.faq-item, .pdp-faq details { border-bottom: 1px solid var(--inz-line); }
.wp-block-details.faq-item summary, .pdp-faq details summary {
	position: relative;
	padding: 16px 36px 16px 0;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
.wp-block-details.faq-item summary::-webkit-details-marker { display: none; }
.wp-block-details.faq-item summary::after, .pdp-faq details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 4px;
	color: var(--inz-muted);
	font-size: 22px;
	font-weight: 300;
	transform: translateY(-50%);
	transition: transform .45s var(--inz-ease-out);
}
.wp-block-details.faq-item[open] summary::after, .pdp-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wp-block-details.faq-item[open].is-closing summary::after, .pdp-faq details[open].is-closing summary::after { transform: translateY(-50%); }
.wp-block-details.faq-item p, .pdp-faq details p { margin: 0 0 18px; color: #bdbdbd; font-size: 14px; }
.pdp-contact p { margin: 10px auto 24px; max-width: 520px; color: var(--inz-muted); }

/* ---------- Colour grid + filter bar ---------- */
.color-grid { position: relative; padding-bottom: 100px; }
.color-grid__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.color-card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--inz-line);
	background: #0b0b0b;
	color: inherit;
	text-decoration: none;
	transition: border-color .2s;
}
.color-card a:hover { border-color: var(--inz-line-strong); }
.color-card { position: relative; }
.color-card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #fff; }
.color-card__media img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
/* Photo slider inside each card: arrows on hover, swipe on touch (like inozetek.com). */
.color-card__track { display: flex; height: 100%; transition: transform .6s var(--inz-ease-out); }
.color-card__navs {
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	aspect-ratio: 1;
	padding: 0 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s var(--inz-ease-io);
}
.color-card:hover .color-card__navs, .color-card__navs:focus-within { opacity: 1; }
.color-card__nav {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 6px;
	background: rgba(5, 5, 5, .72);
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
}
.color-card__nav:hover { background: #050505; border-color: #fff; }
.color-card__nav .inz-icon { width: 14px; height: 14px; }
.color-card__nav[data-dir="-1"] .inz-icon { transform: rotate(180deg); }
@media (hover: none) { .color-card__navs { display: none; } }
.color-card__badge {
	position: absolute;
	top: 10px;
	left: 10px; /* the right corner carries the PRE-ORDER band */
	padding: 4px 9px;
	border-radius: 6px;
	background: rgba(5, 5, 5, .78);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}
.color-card__name { padding: 16px 16px 2px; color: #fff; font-size: 16px; font-weight: 800; line-height: 1.25; text-transform: uppercase; }
.color-card__code { padding: 0 16px 18px; color: var(--inz-muted); font-size: 12px; font-weight: 600; }
.color-card[hidden] { display: none; }
.color-grid__empty { padding: 48px 0; color: var(--inz-muted); text-align: center; }
.color-filter {
	position: sticky;
	bottom: 18px;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: min(100%, 860px);
	margin: 28px auto 0;
	padding: 10px 12px;
	border: 1px solid var(--inz-line-strong);
	border-radius: 12px;
	background: rgba(13, 13, 13, .92);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.color-filter__label { padding: 0 6px; color: #fff; font-size: 14px; font-weight: 800; }
.color-filter select, .color-filter input {
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--inz-line);
	border-radius: 8px;
	background: #050505;
	color: #fff;
	font: inherit;
	font-size: 13px;
}
.color-filter__select select { min-width: 170px; }
.color-filter__search { position: relative; display: flex; flex: 1 1 200px; align-items: center; }
.color-filter__search .inz-icon { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--inz-muted); }
.color-filter__search input { width: 100%; padding-left: 34px; }
.color-filter__count { color: var(--inz-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
@media (max-width: 1000px) { .color-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 781px) {
	.pdp-card { grid-template-columns: 1fr; }
	.pdp-gallery { border-right: 0; border-bottom: 1px solid var(--inz-line); }
	.pdp-specs__table th, .pdp-specs__table td { display: block; width: auto; padding: 10px 0; }
	.pdp-specs__table td { padding-top: 0; border-top: 0; }
	.color-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.color-card__name { padding: 12px 12px 2px; font-size: 14px; }
	.color-card__code { padding: 0 12px 14px; }
	.color-filter__select { flex: 1 1 140px; }
	.color-filter__select select { width: 100%; min-width: 0; }
}

/* ---------- Forms (Contact Form 7) ----------
   Every form uses the same box as inozetek.com: a 600px column, 44px fields in rows of two,
   150px message boxes and a full-width white button. */
.wpcf7 { width: min(100%, 600px); margin-inline: auto; text-align: left; }
.wpcf7 form { display: grid; gap: 16px; }
.wpcf7 form > p, .wpcf7 form p:empty { margin: 0; }
.wpcf7 h3 { margin: 16px 0 0; font-size: 18px; font-weight: 700; }
.wpcf7 h3:first-child { margin-top: 0; }
.wpcf7 label { display: grid; gap: 8px; margin: 0; color: #f2f2f2; font-size: 14px; font-weight: 600; line-height: 1.3; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.inz-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.inz-form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inz-form__hint { margin: -8px 0 0; color: var(--inz-muted); font-size: 13px; }
.wpcf7 label .inz-form__hint { display: block; margin: 0; font-weight: 400; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"],
.wpcf7 input[type="number"], .wpcf7 input[type="date"], .wpcf7 select, .wpcf7 textarea {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--inz-line);
	border-radius: 4px;
	background: rgba(255, 255, 255, .02);
	color: #f2f2f2;
	font: inherit;
	font-size: 15px;
	font-weight: 400;
}
.wpcf7 select { padding-right: 36px; }
.wpcf7 select option { background: #0d0d0d; }
.wpcf7 textarea { height: 150px; padding: 12px 14px; resize: vertical; }
.wpcf7 ::placeholder { color: #7a7a7a; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border-color: #f2f2f2; outline: none; }
.wpcf7 input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px;
	border: 1px dashed var(--inz-line);
	border-radius: 4px;
	background: rgba(255, 255, 255, .02);
	color: var(--inz-muted);
	font-size: 13px;
}
.wpcf7 .wpcf7-list-item { margin: 0 16px 0 0; }
.wpcf7 .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.wpcf7 .wpcf7-acceptance label, .wpcf7 .wpcf7-checkbox label { color: #cfcfcf; font-weight: 400; }
.wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] { width: 16px; height: 16px; accent-color: #fff; }
.wpcf7 input[type="submit"] {
	width: 100%;
	height: 44px;
	padding: 0 24px;
	border: 0;
	border-radius: 4px;
	background: #f2f2f2;
	color: #050505;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: #fff; }
.wpcf7 .wpcf7-spinner { position: absolute; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; color: #ff6b6b; font-size: 12px; font-weight: 500; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 12px 14px; border: 1px solid var(--inz-line); border-radius: 4px; color: #fff; font-size: 14px; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #3fbf6a; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #ff6b6b; }
@media (max-width: 600px) { .inz-form__row, .inz-form__row--3 { grid-template-columns: 1fr; } }
/* Brand colour swatch */
.inz-swatch { height: 96px; margin-bottom: 14px; border: 1px solid var(--inz-line-strong); border-radius: 6px; }
.wp-block-group.is-style-inz-panel h4 { margin: 0 0 6px; font-size: 16px; }
.wp-block-group.is-style-inz-panel h4 + p, .wp-block-group.is-style-inz-panel h4 ~ p { margin: 2px 0; color: var(--inz-muted); font-size: 13px; }

/* Contact details list (contact page) */
.inz-contact-list { display: grid; gap: 4px; }
.inz-contact-list a { color: #fff; }

/* ---------- Post cards ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--inz-line);
	background: var(--inz-panel);
	transition: border-color .2s;
}
.post-card:hover { border-color: var(--inz-line-strong); }
.post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #151515, #070707); }
.post-card__body { padding: 18px 18px 22px; }
.post-card__meta { margin: 0 0 8px; color: var(--inz-muted); font-size: 12px; font-weight: 600; }
.post-card__title { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; }
.post-card__excerpt { margin: 0; color: #bdbdbd; font-size: 14px; }

.pagination, .navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.nav-links .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--inz-line);
	border-radius: 8px;
	text-decoration: none;
}
.nav-links .page-numbers.current { background: #fff; color: #000; }

.post-nav { display: flex; justify-content: space-between; gap: 20px; padding-block: 0 64px; font-size: 14px; }
.post-nav a { color: var(--inz-muted); text-decoration: none; }
.post-nav a:hover { color: #fff; }

.empty-state, .not-found { text-align: center; }
.not-found { width: min(100% - 2 * var(--inz-gutter), 640px); margin: 0 auto; padding-block: clamp(80px, 12vw, 160px); }
.not-found__code { margin: 0; color: transparent; font-size: clamp(96px, 18vw, 180px); font-weight: 800; line-height: 1; -webkit-text-stroke: 1px rgba(255, 255, 255, .4); }
.not-found h1 { margin: 8px 0 12px; }
.not-found p { color: var(--inz-muted); }
.not-found__actions { margin-top: 24px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--inz-line); background: #050505; }
.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
	gap: 48px;
	width: min(100% - 2 * var(--inz-gutter), var(--inz-max));
	margin-inline: auto;
	padding-block: clamp(48px, 7vw, 88px);
}
.site-footer__logo .site-logo__img { width: 407px; }
.site-footer__tagline { margin: 18px 0 0; color: #d4d4d4; font-size: 16px; }
.site-footer__contact { margin: 10px 0 0; color: var(--inz-muted); font-size: 14px; }
.site-footer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: min(100%, 360px);
	min-height: 44px;
	margin-top: 20px;
	border: 1px solid var(--inz-line);
	border-radius: 8px;
	background: #0d0d0d;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .15s;
}
.site-footer__cta:hover { border-color: var(--inz-line-strong); }
.site-footer__cta .inz-icon { width: 16px; height: 16px; }
/* Menu columns: text 20% larger and spread evenly to the right edge of the bottom bar (owner, 04/11/2026). */
.site-footer__cols { display: grid; grid-auto-columns: max-content; grid-auto-flow: column; justify-content: space-between; gap: 32px 48px; }
.site-footer__heading { margin: 0 0 18px; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.site-footer__links { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.site-footer__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #bdbdbd;
	font-size: 16px;
	line-height: 1.35;
	text-decoration: none;
	transition: color .15s;
}
.site-footer__links a:hover { color: #fff; }
.site-footer__socials a { gap: 10px; }
.site-footer__socials .inz-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	width: min(100% - 2 * var(--inz-gutter), var(--inz-max));
	margin-inline: auto;
	padding-block: 22px 28px;
	border-top: 1px solid var(--inz-line);
	color: var(--inz-muted);
	font-size: 12.5px;
}
.site-footer__bottom p { margin: 0; }
.site-footer__copy2 { margin-top: 4px !important; font-size: 12px; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.site-footer__legal a { color: var(--inz-muted); font-size: 15px; text-decoration: none; }
.site-footer__legal a:hover { color: #fff; }

/* ---------- Motion (timings measured on inozetek.com) ---------- */
@keyframes inz-fade-in { from { opacity: 0; } }
@keyframes inz-appear { from { opacity: 0; transform: translateY(32px) scale(.9); } }
@keyframes inz-spin { to { transform: rotate(360deg); } }
@keyframes inz-spin-half { to { transform: rotate(180deg); } }
@keyframes inz-intro-out { to { opacity: 0; visibility: hidden; } }

/* Home page intro (desktop only, as on inozetek.com): the mark inside two turning rings of text. */
:root { --inz-intro: 0s; }
.inz-intro { display: none; }
@media (min-width: 1200px) {
	.home { --inz-intro: 1.5s; }
	.inz-intro {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: grid;
		place-items: center;
		background: #0a0a0a;
		pointer-events: none;
		animation: inz-intro-out .7s var(--inz-ease-io) 1.5s forwards;
	}
}
.inz-intro__badge { position: relative; width: 168px; height: 168px; }
.inz-intro__ring { position: absolute; overflow: visible; fill: #6b6b6b; font-weight: 800; }
.inz-intro__ring--outer {
	inset: 0;
	width: 168px;
	height: 168px;
	font-size: 14px;
	letter-spacing: .13em;
	animation: inz-spin 2s var(--inz-ease-out) both;
}
.inz-intro__ring--inner {
	top: 11px;
	left: 11px;
	width: 146px;
	height: 146px;
	font-size: 8px;
	letter-spacing: .43em;
	animation: inz-spin-half 2s var(--inz-ease-out) both;
}
.inz-intro__mark { position: absolute; top: 28px; left: 34.5px; width: 99px; height: 112px; fill: #fff; }

/* Page load: the first section's text rises in, then the background video fades up. */
:is(
	.entry-content > .wp-block-cover:first-child,
	.entry-content > .is-style-inz-marquee:first-child + .wp-block-cover
) > .wp-block-cover__inner-container > *,
.page-hero__inner > *,
.pdp-card > * {
	animation: inz-appear 2s var(--inz-ease-out) calc(var(--inz-intro) + .55s) both;
}
:is(
	.entry-content > .wp-block-cover:first-child,
	.entry-content > .is-style-inz-marquee:first-child + .wp-block-cover
) > .wp-block-cover__inner-container > :nth-child(2),
.page-hero__inner > :nth-child(2),
.pdp-card > :nth-child(2) { animation-delay: calc(var(--inz-intro) + .63s); }
:is(
	.entry-content > .wp-block-cover:first-child,
	.entry-content > .is-style-inz-marquee:first-child + .wp-block-cover
) > .wp-block-cover__inner-container > :nth-child(3),
.page-hero__inner > :nth-child(3) { animation-delay: calc(var(--inz-intro) + .71s); }
:is(
	.entry-content > .wp-block-cover:first-child,
	.entry-content > .is-style-inz-marquee:first-child + .wp-block-cover
) > .wp-block-cover__inner-container > :nth-child(n+4),
.page-hero__inner > :nth-child(n+4) { animation-delay: calc(var(--inz-intro) + .79s); }
:is(
	.entry-content > .wp-block-cover:first-child,
	.entry-content > .is-style-inz-marquee:first-child + .wp-block-cover
) > :is(.wp-block-cover__video-background, .wp-block-cover__image-background) {
	animation: inz-fade-in 1.4s var(--inz-ease-io) calc(var(--inz-intro) + .25s) both;
}

/* Scroll reveal: main.js tags blocks below the fold; they fade in (cards also grow from 97%) as they arrive. */
.inz-reveal {
	opacity: 0;
	transition: opacity 1.6s var(--inz-ease-out), transform 1.6s var(--inz-ease-out);
	transition-delay: var(--inz-delay, 0s);
}
.inz-reveal--card { transform: scale(.97); }
.inz-reveal.is-in { opacity: 1; transform: none; }

/* Dòng sản phẩm cuộn: the picture stays put on the left while each product line scrolls past on the right. */
.wp-block-group.is-style-inz-scrolly {
	position: relative;
	border-inline: 1px solid var(--inz-line);
	padding: clamp(36px, 6vw, 88px) clamp(16px, 4vw, 56px);
}
.wp-block-group.is-style-inz-scrolly > .wp-block-media-text + .wp-block-media-text { margin-top: clamp(48px, 8vw, 96px); }
.inz-scrolly__stage { display: none; }
@media (min-width: 782px) {
	.wp-block-group.is-style-inz-scrolly.is-scrolly-ready {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		column-gap: clamp(32px, 5vw, 80px);
		padding-block: 0;
	}
	.is-scrolly-ready > * { grid-column: 1 / -1; max-width: none !important; margin: 0 !important; }
	.is-scrolly-ready > .inz-scrolly__stage {
		position: sticky;
		top: var(--inz-header-h);
		display: grid;
		grid-column: 1;
		align-items: center;
		align-self: start;
		height: calc(100vh - var(--inz-header-h));
	}
	.is-scrolly-ready > .wp-block-media-text {
		display: flex !important;
		grid-column: 2;
		align-items: center;
		min-height: 80vh;
	}
	.is-scrolly-ready > .wp-block-media-text > .wp-block-media-text__media { display: none; }
	.is-scrolly-ready > .wp-block-media-text > .wp-block-media-text__content { width: 100%; }
}
.inz-scrolly__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .55);
	background: #0d0d0d;
	box-shadow: 0 0 48px rgba(255, 255, 255, .12);
}
.inz-scrolly__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .6s var(--inz-ease-io);
}
.inz-scrolly__media img.is-active { opacity: 1; }

/* Lên đầu trang (colour pages) */
.back-to-top {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border: 1px solid var(--inz-line-strong);
	background: rgba(5, 5, 5, .88);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity .3s var(--inz-ease-io), transform .5s var(--inz-ease-out), border-color .15s;
}
.back-to-top::before,
.back-to-top::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	border: 1px solid #fff;
}
.back-to-top::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.back-to-top::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.back-to-top .inz-icon { width: 14px; height: 14px; transform: rotate(-90deg); }
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; }
	.inz-intro { display: none !important; }
	.inz-reveal { opacity: 1; transform: none; transition: none; }
	.color-card__track, .inz-scrolly__media img, .back-to-top { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
	.site-nav { display: none; }
	.burger { display: inline-grid; }
}
/* Nine items (InoWorldWide is the longest) on 1280–1439 px screens: a little less space between them. */
@media (min-width: 1280px) and (max-width: 1439px) {
	.site-nav__link { padding: 0 5px; }
}
@media (max-width: 720px) {
	.site-header__buttons { display: none; }
	.site-footer__inner { grid-template-columns: 1fr; gap: 40px; }
	.site-footer__cols { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 32px 24px; }
}
/* Phones: keep two menu columns side by side (shorter footer); the social column wraps below. */
@media (max-width: 360px) {
	.site-footer__cols { grid-template-columns: 1fr; }
}
@media (min-width: 1081px) {
	.drawer { display: none !important; }
}

/* ---------- Nhà phân phối (inozetek.com/distributors) ---------- */
.inz-dist-toolbar {
	display: flex;
	gap: 16px;
	max-width: var(--inz-max);
	margin: -1px auto 0;
	padding: 24px 32px;
	border: 1px solid var(--inz-line);
}
.inz-dist-toolbar select,
.inz-dist-toolbar input {
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--inz-line);
	border-radius: 4px;
	background: #050505;
	color: #f2f2f2;
	font: inherit;
	font-size: 15px;
}
.inz-dist-toolbar select { flex: 0 1 360px; min-width: 0; }
.inz-dist-toolbar input { flex: 1 1 auto; min-width: 0; }
.wp-block-group.is-style-inz-distributors.is-layout-grid { gap: 19px; }
.wp-block-group.is-style-inz-dist-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 260px;
	padding: 40px 16px;
	border: 1px solid var(--inz-line);
	background: rgba(242, 242, 242, .02);
	text-align: center;
}
.wp-block-group.is-style-inz-dist-card[hidden] { display: none; }
.wp-block-group.is-style-inz-dist-card > * { margin: 0 !important; }
.is-style-inz-dist-card p.is-style-inz-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 6px;
	border-color: var(--inz-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	font-size: 14px;
	font-weight: 600;
}
.is-style-inz-dist-card .inz-flag { width: 28px; height: auto; border-radius: 3px; }
.is-style-inz-dist-card h2 { font-size: 24px; font-weight: 700; }
.is-style-inz-dist-card h3 { color: #b8b8b8; font-size: 16px; font-weight: 500; }

/* Nút liên hệ dạng biểu tượng: each link shows an icon picked from its address. */
p.is-style-inz-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px !important; }
p.is-style-inz-icons a {
	--inz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E");
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 1px solid var(--inz-line);
	border-radius: 4px;
	background: rgba(255, 255, 255, .02);
	color: transparent;
	font-size: 0;
	transition: border-color .15s;
}
p.is-style-inz-icons a::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	background: #f2f2f2;
	-webkit-mask: var(--inz-i) center / contain no-repeat;
	mask: var(--inz-i) center / contain no-repeat;
}
p.is-style-inz-icons a:hover { border-color: #f2f2f2; }
p.is-style-inz-icons a[href^="tel:"] { --inz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
p.is-style-inz-icons a[href^="mailto:"] { --inz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E"); }
p.is-style-inz-icons a:is([href*="google.com/maps"], [href*="goo.gl/maps"], [href*="maps.app.goo.gl"]) { --inz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
p.is-style-inz-icons a[href*="instagram.com"] { --inz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.5'/%3E%3C/svg%3E"); }
p.is-style-inz-icons a[href*="facebook.com"] { --inz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3c-2.8 0-5 2.2-5 5v2H7v4h2v9h4v-9h3l1-4h-4V9c0-.6.4-1 1-1z'/%3E%3C/svg%3E"); }
p.is-style-inz-icons a[href*="zalo.me"] { --inz-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.9 2 11.7c0 2.6 1.3 4.9 3.4 6.5L4.6 21l3.3-1.6c1.3.4 2.6.6 4.1.6 5.5 0 10-3.9 10-8.7S17.5 3 12 3zM8.5 8.5h7v1.6l-4.6 5.2h4.6v1.7h-7v-1.6l4.6-5.2H8.5z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
@media (max-width: 900px) {
	.wp-block-group.is-style-inz-distributors.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.wp-block-group.is-style-inz-distributors.is-layout-grid { grid-template-columns: 1fr; }
	.inz-dist-toolbar { flex-direction: column; padding: 16px; }
	.inz-dist-toolbar select { flex-basis: auto; }
}

/* ==========================================================================
   Trang chủ kiểu inozetekusa.com: đầu trang cột màu, dải chữ chạy nhỏ,
   khu nền trắng, ô danh mục, ảnh lớn tràn màn hình, lưới sản phẩm 4 ô, ô ưu điểm nền đen.
   ========================================================================== */

/* Heavy uppercase titles with inozetekusa.com's silver gradient (dark gradient on white). */
.wp-block-group.is-style-inz-swatch-hero h1,
.wp-block-cover:is(.is-style-inz-showcase, .is-style-inz-wide) :is(h1, h2),
.wp-block-group.is-style-inz-light h2 {
	margin: 0;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: uppercase;
	background-image: linear-gradient(180deg, #fff, #c2c2c2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Đầu trang cột màu: brand on the left, colour columns on the right, title and button at the bottom. */
.wp-block-group.is-style-inz-swatch-hero {
	--inz-edge: max(var(--inz-gutter), calc((100% - var(--inz-max)) / 2));
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 24px;
	min-height: clamp(560px, 60vw, 800px);
	padding: 0 var(--inz-edge) clamp(40px, 6vw, 72px);
	overflow: hidden;
	background: #000;
	isolation: isolate;
}
.wp-block-group.is-style-inz-swatch-hero > * {
	position: relative;
	z-index: 2;
	max-width: 600px;
	margin: 0 !important;
	animation: inz-appear 2s var(--inz-ease-out) calc(var(--inz-intro) + .9s) both;
}
.wp-block-group.is-style-inz-swatch-hero > .wp-block-buttons { animation-delay: calc(var(--inz-intro) + 1.05s); }
.wp-block-group.is-style-inz-swatch-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	z-index: 1;
	height: 42%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000);
	pointer-events: none;
}
.wp-block-group.is-style-inz-swatch-hero h1 { font-size: clamp(32px, 4vw, 56px); }
/* Brand block: Dynamic PPF lockup + slogan, sitting left of the columns. */
.wp-block-group.is-style-inz-swatch-hero > .wp-block-group {
	position: absolute;
	top: 30%;
	left: var(--inz-edge);
	display: grid;
	gap: 20px;
	width: clamp(200px, 25vw, 340px);
	animation-delay: calc(var(--inz-intro) + .6s);
}
.wp-block-group.is-style-inz-swatch-hero > .wp-block-group > * { margin: 0; }
.wp-block-group.is-style-inz-swatch-hero .wp-block-image img { display: block; width: 100%; height: auto; }
.wp-block-group.is-style-inz-swatch-hero > .wp-block-group p {
	color: #8c8c8c;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.wp-block-group.is-style-inz-swatch-hero > .color-columns {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: 0;
	width: 64%;
	max-width: none;
	animation: none;
}
.color-columns { display: flex; gap: 6px; height: 100%; }
.color-column {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 42%, #000 92%);
	color: #fff;
	text-decoration: none;
	transform-origin: top;
	transition: flex-grow .8s var(--inz-ease-out), filter .5s;
	animation: inz-swatch-drop 1.5s var(--inz-ease-out) calc(var(--inz-intro) + .1s + var(--i) * .08s) both;
}
/* A light sweep crosses each film in turn, like a reflection on a wrapped panel. */
.color-column::before {
	content: "";
	position: absolute;
	inset: -10% -80%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 58%);
	transform: translateX(-60%);
	animation: inz-swatch-sheen 8s var(--inz-ease-io) calc(var(--inz-intro) + 1.8s + var(--i) * .2s) infinite;
}
.color-column__name {
	position: absolute;
	top: 58%;
	left: 50%;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1;
	white-space: nowrap;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: translate(-50%, -50%) rotate(180deg);
}
.color-columns:hover .color-column { filter: brightness(.55) saturate(.8); }
.color-columns .color-column:is(:hover, :focus-visible) { flex-grow: 2.4; filter: none; }
.color-column:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@keyframes inz-swatch-drop { from { transform: scaleY(0); } }
@keyframes inz-swatch-sheen { 0%, 72% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
@media (max-width: 781px) {
	.wp-block-group.is-style-inz-swatch-hero { min-height: min(150vw, 720px); }
	.wp-block-group.is-style-inz-swatch-hero > .color-columns { width: 100%; }
	/* The columns fill the screen here, so the brand gets a dark fade of its own at the top. */
	.wp-block-group.is-style-inz-swatch-hero::before {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		z-index: 1;
		height: 34%;
		background: linear-gradient(180deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
		pointer-events: none;
	}
	.wp-block-group.is-style-inz-swatch-hero > .wp-block-group { top: 24px; width: 180px; gap: 12px; }
	.wp-block-group.is-style-inz-swatch-hero > .wp-block-group p { font-size: 11px; text-shadow: 0 1px 8px #000; }
	.color-columns { gap: 3px; }
	.color-column__name { top: 54%; font-size: 10px; }
}

/* Dải chữ chạy nhỏ: inozetekusa.com's black strip ("APPROVED DEALERS ONLY"), fading out at both ends. */
p.is-style-inz-ticker {
	position: relative;
	overflow: hidden;
	margin-block: 0;
	padding-block: 9px;
	background: #000;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.6;
	white-space: nowrap;
	text-transform: uppercase;
}
.inz-blank-page .entry-content > p.is-style-inz-ticker { max-width: none; }
p.is-style-inz-ticker::before,
p.is-style-inz-ticker::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 20%;
	background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0));
	pointer-events: none;
}
p.is-style-inz-ticker::before { left: 0; }
p.is-style-inz-ticker::after { right: 0; transform: scaleX(-1); }
p.is-style-inz-ticker .inz-marquee__track > span { padding-right: 64px; background: none; color: inherit; }

/* Khu nền trắng */
.wp-block-group.is-style-inz-light {
	padding: clamp(64px, 8vw, 96px) var(--inz-gutter);
	background: #fff;
	color: #121212;
	text-align: center;
}
.wp-block-group.is-style-inz-light h2 { font-size: clamp(28px, 3.4vw, 40px); background-image: linear-gradient(180deg, #3c3c3c, #000); }
.wp-block-group.is-style-inz-light p { max-width: 630px; margin-inline: auto; color: #5e5e5e; font-size: 16px; font-weight: 500; line-height: 1.3; }
.wp-block-group.is-style-inz-light > h2 + p { margin-top: 12px; }
.wp-block-group.is-style-inz-light > :is(.wp-block-gallery, .product-strip) { margin-top: clamp(32px, 4vw, 48px); }
.wp-block-group.is-style-inz-light .wp-block-buttons { justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.wp-block-group.is-style-inz-light .wp-block-button__link { border-color: #050505; background: #050505; color: #fff; }
.wp-block-group.is-style-inz-light .wp-block-button__link:hover { border-color: #2a2a2a; background: #2a2a2a; }

/* Ô danh mục vuông: square photos, name over a dark fade. */
.wp-block-gallery.has-nested-images.is-style-inz-cat-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.wp-block-gallery.has-nested-images.is-style-inz-cat-tiles figure.wp-block-image {
	position: relative;
	width: auto !important;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid #e5e5e5;
}
.wp-block-gallery.has-nested-images.is-style-inz-cat-tiles figure.wp-block-image:has(figcaption)::before { display: none; }
.wp-block-gallery.has-nested-images.is-style-inz-cat-tiles figure.wp-block-image a { display: block; height: 100%; }
.wp-block-gallery.has-nested-images.is-style-inz-cat-tiles figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--inz-ease-out);
}
.wp-block-gallery.has-nested-images.is-style-inz-cat-tiles figure.wp-block-image:hover img { transform: scale(1.06); }
.wp-block-gallery.has-nested-images.is-style-inz-cat-tiles figure.wp-block-image figcaption {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	align-items: flex-end;
	height: 50%;
	max-height: none;
	margin: 0;
	padding: clamp(8px, 1.4vw, 16px);
	overflow: visible;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000);
	color: #fff;
	font-size: clamp(16px, 2.3vw, 32px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	text-align: left;
	text-transform: uppercase;
	pointer-events: none;
}
@media (max-width: 781px) {
	.wp-block-gallery.has-nested-images.is-style-inz-cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ảnh lớn tràn màn hình (3:2, 2:3 on phones) and Ảnh ngang 3:1: bottom fade, gradient title. */
.wp-block-cover:is(.is-style-inz-showcase, .is-style-inz-wide) { overflow: hidden; }
.wp-block-cover:is(.is-style-inz-showcase, .is-style-inz-wide)::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	z-index: 1;
	height: 40%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000);
	pointer-events: none;
}
.wp-block-cover.is-style-inz-showcase {
	align-items: flex-end;
	justify-content: flex-start;
	min-height: min(800px, 66.667vw) !important;
	padding: 0 max(var(--inz-gutter), calc((100% - var(--inz-max)) / 2)) clamp(40px, 6vw, 72px);
}
.wp-block-cover.is-style-inz-showcase.alignfull .wp-block-cover__inner-container {
	z-index: 2;
	display: grid;
	justify-items: start;
	gap: 24px;
	width: 100%;
	max-width: 600px;
	margin: 0;
}
.wp-block-cover.is-style-inz-showcase .wp-block-cover__inner-container > * { margin: 0; }
.wp-block-cover.is-style-inz-showcase :is(h1, h2) { font-size: clamp(32px, 3.4vw, 48px); text-align: left; }
.wp-block-cover.is-style-inz-wide { min-height: max(320px, 33.333vw) !important; }
.wp-block-cover.is-style-inz-wide::after { height: 50%; }
.wp-block-cover.is-style-inz-wide.alignfull .wp-block-cover__inner-container { z-index: 2; width: min(100%, 820px); }
.wp-block-cover.is-style-inz-wide :is(h1, h2) { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; text-align: center; }
/* Photos settle from a slight zoom as they scroll in (main.js adds .inz-zoom). */
.wp-block-cover.inz-zoom .wp-block-cover__image-background { transform: scale(1.12); }
.wp-block-cover.inz-zoom.is-in .wp-block-cover__image-background { transform: none; transition: transform 2.4s var(--inz-ease-out); }
@media (max-width: 781px) {
	.wp-block-cover.is-style-inz-showcase { min-height: min(150vw, 720px) !important; }
	.wp-block-cover.is-style-inz-wide { min-height: 260px !important; }
}

/* Lưới 4 ô for "Dải sản phẩm" on a white section. */
.product-strip.is-style-inz-grid4 .product-strip__head { display: none; }
.product-strip.is-style-inz-grid4 .product-strip__track {
	grid-auto-flow: row;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 16px;
	padding: 0;
	overflow: visible;
	scroll-snap-type: none;
	text-align: left;
}
.product-strip.is-style-inz-grid4 .product-card a { gap: 4px; }
.product-strip.is-style-inz-grid4 .product-card__media { margin-bottom: 8px; border-color: #e5e5e5; background: #fff; }
.product-strip.is-style-inz-grid4 .product-card__code { margin: 0; color: #8a8a8a; }
.product-strip.is-style-inz-grid4 .product-card__name { color: #121212; font-weight: 800; text-transform: uppercase; }
@media (max-width: 781px) {
	.product-strip.is-style-inz-grid4 .product-strip__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ô ưu điểm nền đen */
.wp-block-columns.is-style-inz-perks { flex-wrap: wrap !important; gap: 8px; padding: 16px 0 clamp(64px, 8vw, 96px); }
.wp-block-columns.is-style-inz-perks > .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(24px, 3vw, 40px) 16px;
	border: 1px solid #2a2a2a;
	background: #0a0a0a;
	text-align: center;
	transition: border-color .3s, transform .6s var(--inz-ease-out);
}
.wp-block-columns.is-style-inz-perks > .wp-block-column:hover { border-color: #5a5a5a; transform: translateY(-4px); }
.wp-block-columns.is-style-inz-perks .wp-block-image { margin: 0 0 clamp(16px, 2vw, 24px); }
.wp-block-columns.is-style-inz-perks .wp-block-image img { width: 40px; height: 40px; }
.wp-block-columns.is-style-inz-perks h3 { margin: 0 0 10px; color: #fff; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; text-transform: uppercase; }
.wp-block-columns.is-style-inz-perks p { margin: 0; color: var(--inz-muted); font-size: 14px; line-height: 1.45; }
@media (min-width: 782px) and (max-width: 1023px) {
	.wp-block-columns.is-style-inz-perks > .wp-block-column { flex-basis: calc(50% - 4px) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.color-column, .color-column::before, .wp-block-group.is-style-inz-swatch-hero > * { animation: none; }
	.wp-block-cover.inz-zoom .wp-block-cover__image-background { transform: none; }
}

/* ==========================================================================
   Special Edition (inozetek.com/special-edition): dải ảnh cuộn phim, tường ảnh, đoạn màu trượt ngang.
   ========================================================================== */

/* Dải ảnh chạy ngang: "Dải sản phẩm" as an endless row of roll photos (main.js doubles the row). */
.product-strip.is-style-inz-reel {
	position: relative;
	padding: 24px 0;
	overflow: hidden;
	border: 1px solid var(--inz-line);
}
.product-strip.is-style-inz-reel .product-strip__head,
.product-strip.is-style-inz-reel .product-card__code,
.product-strip.is-style-inz-reel .product-card__name { display: none; }
.product-strip.is-style-inz-reel .product-strip__track {
	display: flex;
	gap: 12px;
	width: max-content;
	padding: 0;
	overflow: visible;
	animation: inz-marquee var(--inz-marquee-speed, 60s) linear infinite;
}
.product-strip.is-style-inz-reel:hover .product-strip__track { animation-play-state: paused; }
.product-strip.is-style-inz-reel .product-card { flex: 0 0 136px; }
.product-strip.is-style-inz-reel .product-card__media { border-color: var(--inz-line); }
.product-strip.is-style-inz-reel::before,
.product-strip.is-style-inz-reel::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 12%;
	background: linear-gradient(90deg, #050505, rgba(5, 5, 5, 0));
	pointer-events: none;
}
.product-strip.is-style-inz-reel::before { left: 0; }
.product-strip.is-style-inz-reel::after { right: 0; transform: scaleX(-1); }

/* Tường ảnh: five columns that start staggered and line up as the wall scrolls in (main.js). */
.wp-block-gallery.has-nested-images.is-style-inz-wall {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--inz-wall-rows, 5), auto);
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	padding: 48px clamp(16px, 4vw, 56px);
	overflow: hidden;
	border-inline: 1px solid var(--inz-line);
}
.wp-block-gallery.has-nested-images.is-style-inz-wall figure.wp-block-image {
	width: auto !important;
	margin: 0;
	aspect-ratio: 16 / 15;
	overflow: hidden;
	will-change: transform;
}
.wp-block-gallery.has-nested-images.is-style-inz-wall figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-gallery.has-nested-images.is-style-inz-wall::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 30%;
	background: linear-gradient(180deg, rgba(5, 5, 5, 0), #050505);
	pointer-events: none;
}

/* Đoạn màu đặc biệt: the colour's name stays on screen while its photos slide across (main.js). */
.wp-block-group.is-style-inz-showroll {
	position: relative;
	height: 260vh;
	padding: 0;
}
.wp-block-group.is-style-inz-showroll > .wp-block-group {
	position: sticky;
	top: var(--inz-header-h);
	height: calc(100vh - var(--inz-header-h));
	max-width: none !important;
	margin: 0 !important;
	overflow: hidden;
}
.admin-bar .wp-block-group.is-style-inz-showroll > .wp-block-group { top: calc(var(--inz-header-h) + 32px); height: calc(100vh - var(--inz-header-h) - 32px); }
.is-style-inz-showroll .wp-block-gallery.has-nested-images {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	width: max-content;
	max-width: none !important;
	margin: 0 !important;
	transform: translate3d(var(--inz-roll-x, 0px), -50%, 0);
	will-change: transform;
}
.is-style-inz-showroll .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex: none;
	width: auto !important;
	height: clamp(220px, 48vh, 410px);
	margin: 0;
	aspect-ratio: 3 / 2;
}
.is-style-inz-showroll .wp-block-gallery.has-nested-images figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
/* Name card on the right, above the moving photos. */
.is-style-inz-showroll > .wp-block-group > .wp-block-group {
	position: absolute;
	top: 50%;
	right: max(var(--inz-gutter), calc((100% - var(--inz-max)) / 2));
	z-index: 2;
	width: min(420px, 90%);
	max-width: none !important;
	margin: 0 !important;
	padding: 32px;
	border: 1px solid var(--inz-line);
	background: rgba(5, 5, 5, .92);
	transform: translateY(-50%);
}
.is-style-inz-showroll > .wp-block-group > .wp-block-group > * { margin: 0; }
.is-style-inz-showroll > .wp-block-group > .wp-block-group > p:first-child { color: var(--inz-muted); font-size: 14px; font-weight: 600; }
.is-style-inz-showroll h2 { margin: 6px 0 4px !important; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; text-transform: uppercase; }
.is-style-inz-showroll h2 + p { color: #cfcfcf; font-size: 15px; font-weight: 700; text-transform: uppercase; }
.is-style-inz-showroll .wp-block-buttons { margin-top: 24px !important; }
.is-style-inz-showroll .wp-block-button { width: 100%; }
.is-style-inz-showroll .wp-block-button__link { justify-content: center; width: 100%; }
@media (max-width: 781px) {
	.wp-block-gallery.has-nested-images.is-style-inz-wall { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 24px 16px; }
	.wp-block-group.is-style-inz-showroll { height: auto; padding: 32px 0; }
	.wp-block-group.is-style-inz-showroll > .wp-block-group { position: static; height: auto; overflow: visible; }
	.is-style-inz-showroll > .wp-block-group > .wp-block-group { position: static; width: auto; margin: 0 16px !important; transform: none; }
	.is-style-inz-showroll .wp-block-gallery.has-nested-images {
		position: static;
		width: auto;
		margin-top: 16px !important;
		padding: 0 16px;
		overflow-x: auto;
		transform: none;
		scroll-snap-type: x mandatory;
	}
	.is-style-inz-showroll .wp-block-gallery.has-nested-images figure.wp-block-image { height: 220px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
	.product-strip.is-style-inz-reel .product-strip__track { animation: none; }
	.product-strip.is-style-inz-reel { overflow-x: auto; }
}

/* ==========================================================================
   InoNetwork: thẻ ba cấp Shield Network / Shield Network+ / Việt Nam Network và bảng so sánh.
   ========================================================================== */
.wp-block-columns.is-style-inz-plans { gap: 0; margin: 0; border: 1px solid var(--inz-line); }
.wp-block-columns.is-style-inz-plans > .wp-block-column {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 3.4vw, 44px) clamp(20px, 2.6vw, 32px);
	border-left: 1px solid var(--inz-line);
}
.wp-block-columns.is-style-inz-plans > .wp-block-column:first-child { border-left: 0; }
.wp-block-columns.is-style-inz-plans > .wp-block-column > * { margin: 0; }
.wp-block-columns.is-style-inz-plans p.is-style-inz-badge { align-self: flex-start; margin-bottom: 18px; }
.wp-block-columns.is-style-inz-plans h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.wp-block-columns.is-style-inz-plans h3 + p { margin-top: 10px; color: #b8b8b8; font-size: 15px; }
.wp-block-columns.is-style-inz-plans .wp-block-list { flex: 1; margin-top: 24px; }
.wp-block-columns.is-style-inz-plans .wp-block-buttons { margin-top: 28px; }
.wp-block-columns.is-style-inz-plans .wp-block-button,
.wp-block-columns.is-style-inz-plans .wp-block-button__link { width: 100%; justify-content: center; }
/* Shield Network+ in white, Việt Nam Network in red and gold (same as the dealer portal badge). */
.wp-block-columns.is-style-inz-plans > .wp-block-column:nth-child(2) p.is-style-inz-badge { background: #f2f2f2; color: #050505; }
.wp-block-columns.is-style-inz-plans > .wp-block-column:nth-child(3) { background: linear-gradient(180deg, rgba(218, 37, 29, .14), rgba(5, 5, 5, 0) 60%); }
.wp-block-columns.is-style-inz-plans > .wp-block-column:nth-child(3)::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto;
	height: 3px;
	background: linear-gradient(90deg, #da251d, #ffcd00);
}
.wp-block-columns.is-style-inz-plans > .wp-block-column:nth-child(3) p.is-style-inz-badge { border-color: transparent; background: linear-gradient(90deg, #da251d, #ffcd00); color: #050505; }
@media (max-width: 781px) {
	.wp-block-columns.is-style-inz-plans > .wp-block-column { border-left: 0; border-top: 1px solid var(--inz-line); }
	.wp-block-columns.is-style-inz-plans > .wp-block-column:first-child { border-top: 0; }
}

.wp-block-table.is-style-inz-compare { margin: 0; overflow-x: auto; }
.wp-block-table.is-style-inz-compare table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.wp-block-table.is-style-inz-compare th,
.wp-block-table.is-style-inz-compare td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--inz-line); text-align: center; vertical-align: middle; }
.wp-block-table.is-style-inz-compare :is(th, td):first-child { color: #f2f2f2; font-weight: 600; text-align: left; }
.wp-block-table.is-style-inz-compare td:not(:first-child) { color: #b8b8b8; }
.wp-block-table.is-style-inz-compare thead th { color: var(--inz-muted); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wp-block-table.is-style-inz-compare :is(th, td):last-child { background: rgba(218, 37, 29, .07); }
.wp-block-table.is-style-inz-compare thead th:last-child { color: #ffcd00; }


/* Pre-order: colour with no roll left in Kho SKU (warranty plugin), red band across the top right corner. */
.inz-preorder {
	position: absolute;
	top: 22px;
	right: -46px;
	z-index: 3;
	width: 170px;
	padding: 5px 0;
	background: #da251d;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	transform: rotate(45deg);
	pointer-events: none;
}
.product-card__media { position: relative; }
/* On cards the band follows the photo's width: 136px reel thumbnails get a small one, 260px cards the full one. */
.color-card__media,
.product-card__media { container-type: inline-size; }
:is(.color-card__media, .product-card__media) > .inz-preorder {
	top: 8.5cqi;
	right: -18cqi;
	width: 66cqi;
	padding: 1.8cqi 0;
	font-size: clamp(7px, 4.2cqi, 11px);
}
.pdp-gallery__stage { overflow: hidden; }
.pdp-gallery__stage > .inz-preorder { top: 30px; right: -52px; width: 210px; padding: 7px 0; font-size: 13px; }
.pdp-pill--preorder { border-color: #da251d; background: #da251d; color: #fff; }

/* ==========================================================================
   Ảnh xe đã dán (Gallery): every car photo of the colours, masonry, filters, lightbox.
   ========================================================================== */
.car-photos__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.car-photos__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.car-photos__filters button {
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--inz-line);
	border-radius: 999px;
	background: none;
	color: #cfcfcf;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.car-photos__filters button small { margin-left: 4px; color: var(--inz-muted); }
.car-photos__filters button.is-active,
.car-photos__filters button:hover { border-color: #fff; background: #fff; color: #050505; }
.car-photos__filters button.is-active small { color: #555; }
.car-photos__search input {
	width: min(280px, 100%);
	height: 38px;
	padding: 0 14px;
	border: 1px solid var(--inz-line);
	border-radius: 999px;
	background: #0d0d0d;
	color: #fff;
	font: inherit;
	font-size: 14px;
}
.car-photos__grid { columns: 4 240px; column-gap: 10px; margin: 0; padding: 0; list-style: none; }
.car-photos__item { margin: 0 0 10px; break-inside: avoid; }
.car-photos__item[hidden] { display: none; }
.car-photos__item a { position: relative; display: block; overflow: hidden; border: 1px solid var(--inz-line); background: #0d0d0d; }
.car-photos__item img { display: block; width: 100%; height: auto; transition: transform 1s var(--inz-ease-out), filter .4s; }
.car-photos__item a:hover img { transform: scale(1.05); filter: brightness(.8); }
.car-photos__name {
	position: absolute;
	inset: auto 0 0;
	padding: 28px 12px 10px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .85));
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s, transform .3s;
}
.car-photos__item a:hover .car-photos__name,
.car-photos__item a:focus-visible .car-photos__name { opacity: 1; transform: none; }
.car-photos__empty { color: var(--inz-muted); text-align: center; }
.car-photos__more-wrap { margin: 24px 0 0; text-align: center; }
.car-photos__more {
	min-height: 46px;
	padding: 0 24px;
	border: 1px solid #fff;
	border-radius: 8px;
	background: #fff;
	color: #050505;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
}
.car-photos__more[hidden] { display: none; }
.car-photos__box {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 64px;
	align-items: center;
	padding: 24px 12px;
	background: rgba(0, 0, 0, .92);
}
.car-photos__box[hidden] { display: none; }
.car-photos__figure { display: grid; justify-items: center; gap: 12px; margin: 0; }
.car-photos__figure img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; }
.car-photos__figure figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; color: #cfcfcf; font-size: 14px; }
.car-photos__figure strong { color: #fff; text-transform: uppercase; }
.car-photos__go { padding: 6px 12px; border-radius: 6px; background: #fff; color: #050505; font-weight: 800; text-decoration: none; }
.car-photos__close {
	position: absolute;
	top: 12px;
	right: 16px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}
.car-photos__nav {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--inz-line-strong);
	border-radius: 50%;
	background: rgba(5, 5, 5, .6);
	color: #fff;
	cursor: pointer;
}
.car-photos__nav[data-photos-nav="-1"] .inz-icon { transform: rotate(180deg); }
@media (max-width: 781px) {
	.car-photos__grid { columns: 2 140px; column-gap: 6px; }
	.car-photos__item { margin-bottom: 6px; }
	.car-photos__name { opacity: 1; transform: none; padding: 20px 8px 6px; font-size: 11px; }
	.car-photos__box { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 16px 4px; }
	.car-photos__nav { width: 40px; height: 40px; }
}

/* The colour's photos as square thumbnails at the foot of the big one; the one on show is outlined. */
.pdp-thumbs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 10px; border-top: 1px solid var(--inz-line); list-style: none; }
.pdp-gallery__count {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 2;
	padding: 3px 9px;
	border-radius: 20px;
	background: rgba(5, 5, 5, .7);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.pdp-gallery__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--inz-line);
	border-radius: 6px;
	background: #0d0d0d;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s, border-color .2s;
}
.pdp-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pdp-gallery__thumb:hover,
.pdp-gallery__thumb:focus-visible { opacity: 1; outline: none; border-color: var(--inz-line-strong); }
.pdp-gallery__thumb:hover img { transform: scale(1.06); }
.pdp-gallery__thumb.is-active { opacity: 1; border-color: #fff; box-shadow: 0 0 0 1px #fff; }
@media (max-width: 520px) {
	.pdp-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Smaller name and side-by-side buttons (owner, 04/11/2026). */
.pdp-info__name { font-size: clamp(26px, 2.9vw, 36px); line-height: 1.08; }
.pdp-info__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pdp-info__actions .pdp-btn { min-height: 42px; padding: 0 18px; font-size: 13px; }
.pdp-btn--sm { min-height: 36px; padding: 0 14px; font-size: 12.5px; white-space: nowrap; }

/* Slim bar under the menu once the card's buttons have scrolled away. */
.pdp-bar {
	position: fixed;
	top: var(--inz-header-h);
	right: 0;
	left: 0;
	z-index: 90;
	border-bottom: 1px solid var(--inz-line);
	background: rgba(5, 5, 5, .94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	transition: transform .3s, opacity .3s, visibility .3s;
}
.admin-bar .pdp-bar { top: calc(var(--inz-header-h) + 32px); }
@media (max-width: 782px) { .admin-bar .pdp-bar { top: calc(var(--inz-header-h) + 46px); } }
@media (max-width: 600px) { .admin-bar .pdp-bar { top: var(--inz-header-h); } }
.pdp-bar.is-shown { opacity: 1; visibility: visible; transform: none; }
.pdp-bar__inner { display: flex; align-items: center; gap: 12px; width: min(100% - 2 * var(--inz-gutter), var(--inz-max)); margin: 0 auto; padding: 8px 0; }
.pdp-bar__img { width: 40px; height: 40px; border: 1px solid var(--inz-line); border-radius: 6px; object-fit: cover; }
.pdp-bar__name { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; margin: 0; }
.pdp-bar__name strong { overflow: hidden; font-size: 14px; line-height: 1.25; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pdp-bar__name span { color: var(--inz-muted); font-size: 12px; }
@media (max-width: 520px) {
	.pdp-bar__img { display: none; }
	.pdp-bar .pdp-btn--sm { padding: 0 10px; }
}
/* When the details run taller than the square photo, the photo grows with them instead of leaving a gap. */
.pdp-gallery { display: flex; flex-direction: column; }
.pdp-gallery__stage { flex: 1 0 auto; }

/* ==========================================================================
   Thẻ cấp đại lý (kiểu gswfvietnam.com): Shield Network xanh, Shield Network+ vàng, Việt Nam Network đỏ – vàng.
   ========================================================================== */
.wp-block-group.is-style-inz-tier {
	--tier: #3b82f6;
	--tier-soft: rgba(59, 130, 246, .12);
	position: relative;
	padding: clamp(28px, 4vw, 52px) clamp(22px, 4vw, 52px);
	border: 1px solid var(--inz-line);
	background: linear-gradient(180deg, var(--tier-soft), rgba(5, 5, 5, 0) 55%), #070707;
}
.wp-block-group.is-style-inz-tier.inz-tier--plus { --tier: #f59e0b; --tier-soft: rgba(245, 158, 11, .13); }
.wp-block-group.is-style-inz-tier.inz-tier--vnn { --tier: #da251d; --tier-soft: rgba(218, 37, 29, .16); }
.wp-block-group.is-style-inz-tier::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto;
	height: 3px;
	background: var(--tier);
}
.wp-block-group.is-style-inz-tier.inz-tier--vnn::before { background: linear-gradient(90deg, #da251d, #ffcd00); }
.wp-block-group.is-style-inz-tier > * { max-width: none !important; }
.wp-block-group.is-style-inz-tier p.is-style-inz-eyebrow { margin: 0 0 6px; color: var(--tier); }
.wp-block-group.is-style-inz-tier.inz-tier--vnn p.is-style-inz-eyebrow { color: #ffcd00; }
.wp-block-group.is-style-inz-tier > h2,
.wp-block-group.is-style-inz-tier > h3 { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 900; line-height: 1.08; text-transform: uppercase; }
.wp-block-group.is-style-inz-tier p.is-style-inz-badge { width: fit-content; margin: 16px 0 0; border-color: var(--tier); background: var(--tier-soft); color: #fff; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
.wp-block-group.is-style-inz-tier p.is-style-inz-badge + p.is-style-inz-badge { margin-top: 8px; }
.wp-block-group.is-style-inz-tier p.is-style-inz-badge + p:not(.is-style-inz-badge) { margin-top: 12px; color: #cfcfcf; }
.wp-block-group.is-style-inz-tier ul.is-style-inz-check { margin-top: 24px; }
.wp-block-group.is-style-inz-tier ul.is-style-inz-check li { padding-left: 30px; color: #d8d8d8; }
.wp-block-group.is-style-inz-tier ul.is-style-inz-check li::before { background: var(--tier); }
.wp-block-group.is-style-inz-tier ul.is-style-inz-check li strong { color: #fff; }
.wp-block-group.is-style-inz-tier .wp-block-columns.is-style-inz-features { margin-top: 26px; }
.wp-block-group.is-style-inz-tier .wp-block-columns.is-style-inz-features + .wp-block-columns.is-style-inz-features { margin-top: -1px; }
.wp-block-group.is-style-inz-tier .wp-block-columns.is-style-inz-features > .wp-block-column::before { -webkit-text-stroke-color: var(--tier); }
.wp-block-group.is-style-inz-tier.inz-tier--vnn .wp-block-columns.is-style-inz-features > .wp-block-column::before { -webkit-text-stroke-color: #ffcd00; }
.wp-block-group.is-style-inz-tier .wp-block-buttons { margin-top: 30px; }
.wp-block-group.is-style-inz-tier .wp-block-button:not(.is-style-outline) .wp-block-button__link { border-color: var(--tier); background: var(--tier); color: #050505; }
.wp-block-group.is-style-inz-tier.inz-tier--vnn .wp-block-button:not(.is-style-outline) .wp-block-button__link { border-color: transparent; background: linear-gradient(90deg, #da251d, #ffcd00); }
/* The second features row continues the numbering of the first. */
.wp-block-group.is-style-inz-tier { counter-reset: inz-feature; }
.wp-block-group.is-style-inz-tier .wp-block-columns.is-style-inz-features { counter-reset: none; }

/* ==========================================================================
   Thẻ tab: each child group is one tab; main.js builds the buttons from the groups' first headings.
   ========================================================================== */
.inz-tabs__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 26px; }
.inz-tabs__bar button {
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid var(--inz-line-strong);
	border-radius: 40px;
	background: transparent;
	color: #cfcfcf;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.inz-tabs__bar button:hover { border-color: #fff; color: #fff; }
.inz-tabs__bar button[aria-selected="true"] { border-color: #fff; background: #fff; color: #050505; }
.wp-block-group.is-style-inz-tabs.is-ready > .wp-block-group > .inz-tabs__title { display: none; }
.wp-block-group.is-style-inz-tabs > .wp-block-group[hidden] { display: none; }

/* ==========================================================================
   Dải ảnh 2 hàng (inozetek.com "Protect What Moves You."): the gallery's photos run in two rows, the top one to
   the right and the bottom one to the left, about 35 px a second; logo, title and text sit in the middle.
   main.js builds the rows from the Gallery block inside the group.
   ========================================================================== */
.wp-block-group.is-style-inz-photoband {
	--band-h: clamp(220px, 29.6vw, 426px);
	position: relative;
	margin-block: 0;
	padding: 10px 0;
	overflow: hidden;
}
.entry-content > .wp-block-group.is-style-inz-photoband { max-width: none; }
.is-style-inz-photoband.is-ready > .wp-block-gallery { display: none; }
.inz-photoband__row { height: var(--band-h); overflow: hidden; }
.inz-photoband__row + .inz-photoband__row { margin-top: 19px; }
.inz-photoband__track { display: flex; gap: 12px; width: max-content; height: 100%; animation: inz-band-left var(--band-dur, 90s) linear infinite; }
.inz-photoband__row:first-child .inz-photoband__track { animation-name: inz-band-right; }
.inz-photoband__track img { flex: none; width: calc(var(--band-h) * 1.512); height: 100%; object-fit: cover; }
@keyframes inz-band-left { to { transform: translateX(-50%); } }
@keyframes inz-band-right { from { transform: translateX(-50%); } }
.inz-photoband__text {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 var(--inz-gutter);
	background: linear-gradient(180deg, rgba(5, 5, 5, .1) 0%, rgba(5, 5, 5, .82) 38%, rgba(5, 5, 5, .82) 62%, rgba(5, 5, 5, .1) 100%);
	text-align: center;
}
.inz-photoband__text > * { max-width: 620px; margin: 0 auto; }
.inz-photoband__text > h2 { max-width: 900px; }
.inz-photoband__text .wp-block-image { margin-bottom: 14px; }
.inz-photoband__text .wp-block-image img { width: 188px; max-width: 60vw; height: auto; }
.inz-photoband__text h2 { margin-bottom: 14px; }
.inz-photoband__text p { color: rgba(255, 255, 255, .82); }
@media (prefers-reduced-motion: reduce) {
	.inz-photoband__track { animation: none; }
}

/* INOcut "How it works" (inozetek.com): picture cards in a staggered grid, narrow–wide then wide–narrow,
   title and line of text at the foot of each card. */
.wp-block-columns.inz-bento-row { gap: 12px; margin: 0; }
.wp-block-columns.inz-bento-row + .wp-block-columns.inz-bento-row { margin-top: 12px; }
.wp-block-cover.is-style-inz-bento {
	min-height: 395px !important;
	align-items: flex-end;
	padding: 28px 24px;
	overflow: hidden;
	border: 1px solid var(--inz-line);
	border-radius: 2px;
}
.wp-block-cover.is-style-inz-bento .wp-block-cover__background { background: linear-gradient(180deg, rgba(5, 5, 5, 0) 35%, rgba(5, 5, 5, .92) 100%) !important; opacity: 1 !important; }
.wp-block-cover.is-style-inz-bento .wp-block-cover__image-background { object-position: left top; transition: transform 1.2s var(--inz-ease-io); }
.wp-block-cover.is-style-inz-bento:hover .wp-block-cover__image-background { transform: scale(1.04); }
.wp-block-cover.is-style-inz-bento .wp-block-cover__inner-container { width: 100%; text-align: center; }
.wp-block-cover.is-style-inz-bento h3 { margin: 0; font-size: clamp(18px, 1.6vw, 20px); }
.wp-block-cover.is-style-inz-bento p { margin: 6px auto 0; color: rgba(255, 255, 255, .72); font-size: 15px; }
@media (max-width: 781px) {
	.wp-block-columns.inz-bento-row { flex-wrap: wrap !important; }
	.wp-block-columns.inz-bento-row > .wp-block-column { flex-basis: 100% !important; }
	.wp-block-cover.is-style-inz-bento { min-height: 300px !important; }
}

/* INOcut features: 2 × 2 framed cells with a large title (inozetek.com). */
.wp-block-columns.is-style-inz-tiles.inz-tiles--2 > .wp-block-column { min-height: 200px; padding: 40px 24px; }
.wp-block-columns.is-style-inz-tiles.inz-tiles--2 h3 { font-size: clamp(22px, 2.3vw, 32px); }
.wp-block-columns.is-style-inz-tiles.inz-tiles--2 p { font-size: 15px; color: rgba(255, 255, 255, .72); }
.wp-block-columns.is-style-inz-tiles.inz-tiles--2 + .wp-block-columns.is-style-inz-tiles.inz-tiles--2 { margin-top: -1px; }
@media (max-width: 781px) {
	.wp-block-columns.is-style-inz-tiles.inz-tiles--2 { display: grid; grid-template-columns: 1fr; }
	.wp-block-columns.is-style-inz-tiles.inz-tiles--2 > .wp-block-column:nth-child(2n) { border-left: 0; }
}
/* INOcut laptop mock-up centred above "Vì sao chọn INOCUT?". */
.wp-block-image.inz-laptop { margin: 0 auto 36px; }
.wp-block-image.inz-laptop img { width: min(100%, 661px); height: auto; }
/* Cells without an icon (INOSHIELD "Thiết kế cho điều kiện lái thực tế"). */
.wp-block-columns.is-style-inz-tiles.inz-tiles--text > .wp-block-column { justify-content: center; min-height: 120px; }
/* Layer drawing of the film in the Specifications section (inozetek.com, 700 px wide). */
.wp-block-image.inz-spec-layers { margin: 28px auto 40px; }
.wp-block-image.inz-spec-layers img { width: min(100%, 700px); height: auto; }

/* Dealer finder (inozetek.com Dealer Locator): four programme cards in a framed row, each tinted at the foot
   in its dealer level's colour – the same colours as the map ticks and pins. */
.wp-block-columns.inz-network { gap: 0; margin: 0; border: 1px solid var(--inz-line); }
.wp-block-columns.inz-network > .wp-block-column {
	--net: 255, 255, 255;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 233px;
	padding: 28px 22px;
	border-left: 1px solid var(--inz-line);
	background: linear-gradient(180deg, rgba(242, 242, 242, .02) 0%, rgba(var(--net), .12) 100%);
	text-align: center;
}
.wp-block-columns.inz-network > .wp-block-column:first-child { border-left: 0; }
.wp-block-columns.inz-network > .inz-net--hq { --net: 239, 68, 68; }
.wp-block-columns.inz-network > .inz-net--sn { --net: 59, 130, 246; }
.wp-block-columns.inz-network > .inz-net--snp { --net: 245, 158, 11; }
.wp-block-columns.inz-network > .inz-net--vnn { --net: 168, 85, 247; }
.wp-block-columns.inz-network h3 { margin: 0 0 10px; font-size: 20px; }
.wp-block-columns.inz-network p { margin: 0 0 18px; color: #b8b8b8; font-size: 15px; }
.wp-block-columns.inz-network .wp-block-buttons { justify-content: center; margin-top: auto; }
@media (max-width: 781px) {
	.wp-block-columns.inz-network { display: grid; grid-template-columns: 1fr 1fr; }
	.wp-block-columns.inz-network > .wp-block-column { min-height: 0; border-left: 0; border-top: 1px solid var(--inz-line); }
	.wp-block-columns.inz-network > .wp-block-column:nth-child(2n) { border-left: 1px solid var(--inz-line); }
	.wp-block-columns.inz-network > .wp-block-column:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 480px) {
	.wp-block-columns.inz-network { grid-template-columns: 1fr; }
	.wp-block-columns.inz-network > .wp-block-column:nth-child(2n) { border-left: 0; }
	.wp-block-columns.inz-network > .wp-block-column:nth-child(2) { border-top: 1px solid var(--inz-line); }
}

/* Contact page (inozetek.com): address / email / phone cells under the title box, then the form box. */
.wp-block-columns.inz-contact-cells > .wp-block-column { align-items: center; justify-content: center; min-height: 150px; text-align: center; }
.wp-block-columns.inz-contact-cells h3 { margin: 0 0 10px; font-size: clamp(22px, 2.2vw, 28px); }
.wp-block-columns.inz-contact-cells p { margin: 0; font-size: 16px; }
.wp-block-columns.inz-contact-cells a { color: #d4d4d4; text-decoration: none; }
.wp-block-columns.inz-contact-cells a:hover { color: #fff; text-decoration: underline; }
.wp-block-group.inz-form-frame .wpcf7 { max-width: 600px; margin-inline: auto; }
.wp-block-group.inz-form-frame .wpcf7-submit { width: 100%; }

/* ---------- Nút liên hệ nhanh: Zalo, Facebook, Instagram (owner, 04/11/2026) ---------- */
.quick-contact {
	position: fixed;
	right: clamp(14px, 2.2vw, 28px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 45;
	display: grid;
	gap: 10px;
}
/* Inner pages also have "Lên đầu trang" in that corner: sit above it. */
.quick-contact--raised { bottom: calc(clamp(16px, 3vw, 32px) + 58px); }
.quick-contact__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
	transition: transform .2s var(--inz-ease-out), box-shadow .2s;
}
.quick-contact__btn:hover,
.quick-contact__btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .55); }
.quick-contact__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.quick-contact__btn .inz-icon { width: 24px; height: 24px; }
.quick-contact__btn--zalo { background: #0068ff; }
.quick-contact__btn--facebook { background: #0866ff; }
.quick-contact__btn--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285aeb 92%); }
.quick-contact__word { font-size: 13px; font-weight: 800; letter-spacing: .01em; }
/* Soft ring on Zalo, the main channel in Việt Nam. */
.quick-contact__btn--zalo::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 2px solid #0068ff;
	border-radius: 50%;
	animation: inz-quick-ring 2.4s var(--inz-ease-out) infinite;
	pointer-events: none;
}
@keyframes inz-quick-ring {
	0% { opacity: .7; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(1.45); }
}
.quick-contact__tip {
	position: absolute;
	top: 50%;
	right: calc(100% + 10px);
	padding: 6px 10px;
	border: 1px solid var(--inz-line);
	border-radius: 4px;
	background: rgba(5, 5, 5, .92);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	transform: translate(6px, -50%);
	transition: opacity .15s, transform .2s var(--inz-ease-out);
	pointer-events: none;
}
.quick-contact__btn:hover .quick-contact__tip,
.quick-contact__btn:focus-visible .quick-contact__tip { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 720px) {
	.quick-contact { gap: 8px; }
	.quick-contact__btn { width: 44px; height: 44px; }
	.quick-contact__btn .inz-icon { width: 21px; height: 21px; }
	.quick-contact__word { font-size: 12px; }
	.quick-contact__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.quick-contact__btn { transition: none; }
	.quick-contact__btn--zalo::after { animation: none; opacity: 0; }
}

/* ---------- Chữ ngay ngắn (owner, 04/11/2026: "chữ lòi, mất cân đối") ---------- */
/* Feature tiles start at the top, so icons and titles of one row sit on the same line
   (centred content moved them up or down with the length of the text below). */
.wp-block-columns.is-style-inz-tiles > .wp-block-column { justify-content: flex-start; }
/* Uppercase Vietnamese titles need room for the accents when they wrap to two lines. */
.wp-block-group.is-style-inz-tier > h3,
.is-style-inz-showroll h2 { line-height: 1.16; }
/* Titles of cards in one row get the same height (main.js) so the text under them starts level. */
[data-inz-even] { display: block; }
/* Open / close (owner, 04/11/2026): one round button; the three buttons fold into it. */
.quick-contact { justify-items: center; }
.quick-contact__list { display: grid; gap: 10px; transform-origin: 50% 100%; transition: opacity .2s var(--inz-ease-io), transform .3s var(--inz-ease-out), visibility 0s linear 0s; }
.quick-contact.is-ready:not(.is-open) .quick-contact__list { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); pointer-events: none; transition: opacity .15s, transform .2s, visibility 0s linear .2s; }
.quick-contact__toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: #111;
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
	cursor: pointer;
	transition: transform .2s var(--inz-ease-out), background-color .15s;
}
.quick-contact__toggle:hover { background: #1d1d1d; transform: translateY(-2px); }
.quick-contact__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.quick-contact__toggle svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: opacity .15s, transform .25s var(--inz-ease-out); }
.quick-contact__toggle .inz-icon--close { width: 20px; height: 20px; }
.quick-contact__label { position: absolute; bottom: -2px; left: 50%; padding: 1px 6px; border-radius: 999px; background: #0068ff; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .02em; line-height: 1.4; text-transform: uppercase; transform: translate(-50%, 50%); }
.quick-contact.is-open .quick-contact__open,
.quick-contact:not(.is-open) .inz-icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.quick-contact.is-open .quick-contact__label { opacity: 0; }
/* Closed: a soft blue ring says "chat here". */
.quick-contact.is-ready:not(.is-open) .quick-contact__toggle::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 2px solid #0068ff;
	border-radius: 50%;
	animation: inz-quick-ring 2.4s var(--inz-ease-out) infinite;
	pointer-events: none;
}
.quick-contact.is-ready:not(.is-open) .quick-contact__btn--zalo::after { animation: none; opacity: 0; }
@media (max-width: 720px) {
	.quick-contact__toggle { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
	.quick-contact__list, .quick-contact__toggle, .quick-contact__toggle svg { transition: none; }
	.quick-contact.is-ready:not(.is-open) .quick-contact__toggle::after { animation: none; opacity: 0; }
}
/* The folded list keeps its place: let taps through to the page under it. */
.quick-contact.is-ready { pointer-events: none; }
.quick-contact.is-ready .quick-contact__toggle,
.quick-contact.is-ready.is-open .quick-contact__list { pointer-events: auto; }

/* ---------- Trang chủ gọn hơn (owner, 04/11/2026: "khoảng cách trắng hơi lớn … co lại cho cân xứng") ----------
   Measured at 1440 px: white sections had 96 px above and below, 48 px around the grids and 32 px between rows;
   the four perks had 56 px above and 138 px below. Now one rhythm: 64 / 32 / 24 (phones 44 / 24 / 20),
   perks with the same space above and below. */
.home .wp-block-group.is-style-inz-light { padding-block: clamp(44px, 5vw, 64px); }
.home .wp-block-group.is-style-inz-light > :is(.wp-block-gallery, .product-strip) { margin-top: clamp(24px, 3vw, 32px); }
.home .wp-block-group.is-style-inz-light .wp-block-buttons { margin-top: clamp(24px, 3vw, 32px); }
.home .product-strip.is-style-inz-grid4 .product-strip__track { row-gap: clamp(20px, 2vw, 24px); }
.home .wp-block-columns.is-style-inz-perks { padding-block: clamp(40px, 5vw, 56px); }

/* Titles beside a photo (Giới thiệu…): sized for the half-width column so they wrap to two lines at most;
   an eyebrow line above (owner, 04/11/2026: "tiêu đề không đẹp với cân đối"). */
.wp-block-media-text__content > h2 { margin: 0 0 18px; font-size: clamp(30px, 2.7vw, 40px); line-height: 1.12; }
.wp-block-media-text__content > p.is-style-inz-eyebrow { margin: 0 0 10px; }
/* The button = INOZETEK mark inside a slowly turning ring of text (like the home intro badge). */
.quick-contact__toggle { width: 60px; height: 60px; border-color: rgba(255, 255, 255, .22); background: radial-gradient(circle at 50% 35%, #1f1f1f, #050505 70%); }
.quick-contact__toggle .quick-contact__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #a8a8a8; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; animation: inz-quick-spin 14s linear infinite; }
.quick-contact__toggle .quick-contact__mark { width: 19px; height: 22px; }
.quick-contact__toggle:hover .quick-contact__ring { fill: #fff; }
.quick-contact.is-open .quick-contact__ring { opacity: .35; animation-play-state: paused; }
.quick-contact__label { display: none; }
/* No blue ring around the closed button any more: the turning text is the hint. */
.quick-contact.is-ready:not(.is-open) .quick-contact__toggle::after { content: none; }
@keyframes inz-quick-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
	.quick-contact__toggle { width: 54px; height: 54px; }
	.quick-contact__toggle .quick-contact__mark { width: 17px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.quick-contact__toggle .quick-contact__ring { animation: none; }
}