/* ==========================================================================
   Base: design tokens (Figma – PLAN.md mục 5.2), reset, typography, nút, tiện ích.
   Giá trị gốc đo ở khung 1920px; clamp() co giãn xuống mobile.
   ========================================================================== */

:root {
	--color-bg: #f6f6f6;
	--color-surface: #fff;
	--color-text: #1e1e1e;
	--color-text-strong: #000;
	--color-text-muted: #757575;
	--color-text-subtle: #b3b3b3;
	--color-border: #d9d9d9;
	--color-primary: #e53e51;
	--color-primary-dark: #bc3b4a;
	--color-primary-darker: #b83a4b;
	--color-blue: #3d9df3;
	--color-blue-strong: #1f95ff;
	--color-navy-from: #004fc5;
	--color-navy-to: #00265f;
	--color-beige: #e9e1d8;
	--color-brown: #ac7f5e;
	--color-ink: #323234;
	--color-dark: #000;

	--font-display: "Zalando Sans Expanded", "Arial", sans-serif;
	--font-body: "Be Vietnam Pro", "Helvetica Neue", "Arial", sans-serif;

	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: clamp(24px, 2.5vw, 48px);
	--radius-pill: 999px;
	--shadow-card: 0 4px 10px rgba(0, 0, 0, 0.1);

	--container: 1808px;
	--gutter: clamp(16px, 2.92vw, 56px);
	--section-space: clamp(72px, 8.33vw, 160px);
	--header-height: clamp(72px, 5.42vw, 104px);

	--fs-decor: clamp(56px, 10.3vw, 198px);
	--fs-h2: clamp(34px, 4.79vw, 92px);
	--fs-h2-sm: clamp(30px, 3.13vw, 60px);
	--fs-body-lg: clamp(17px, 1.25vw, 24px);
	--fs-body: clamp(16px, 1.04vw, 20px);
	--fs-button: clamp(13px, 0.83vw, 16px);
}

/* Reset tối giản ------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 16px);
}

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

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}

ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}

img,
svg,
video,
picture {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

/* <picture> do Modern Image Formats tạo (AVIF + fallback) không tạo hộp riêng: <img> bên trong bố cục như con trực tiếp.
   Thay cho style inline mà plugin chèn (bị mu-plugin dugarco-core bỏ đi để giữ R7). */
picture {
	display: contents;
}

/* Trình duyệt không ẩn sẵn <source>: khi <picture> là "contents", <source> thành ô trống trong grid/flex của block cha. */
picture > source {
	display: none;
}

/* WordPress "sizes=auto" – thay cho CSS inline mặc định của core. */
img:is([sizes="auto" i], [sizes^="auto," i]) {
	contain-intrinsic-size: 3000px 1500px;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/* Tiện ích ------------------------------------------------------------- */

.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.section {
	position: relative;
	margin-block: var(--section-space);
	overflow-x: clip; /* Chữ trang trí cố ý tràn 2 mép – cắt trong section, không tạo thanh cuộn ngang. */
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 12px 20px;
	border-radius: var(--radius-sm);
	background: var(--color-dark);
	color: #fff;
}

.skip-link:focus {
	top: 16px;
}

.icon {
	width: 24px;
	height: 24px;
	flex: none;
	fill: currentColor;
}

/* Chữ trang trí khổng lồ phía sau section (aria-hidden, không phải heading). */
.decor-text {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-decor);
	font-weight: 800;
	line-height: 0.98;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-text-subtle);
	opacity: 0.2;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* Tiếng Việt: chữ hoa có dấu chồng (Ố, Ế, Ẩ…) cao hơn chữ hoa tiếng Anh. Khối chữ lớn dòng sát (line-height ≤ 1)
   xuống nhiều dòng thì dấu của dòng dưới chạm vào chữ dòng trên (dấu sắc của "Ó" nằm dưới chữ I phía trên trông như "Ị"):
   chỉ bản VI giãn dòng, bản EN giữ đúng thiết kế. html:lang(vi) để thắng CSS của block (nạp sau base.css). */
html:lang(vi) :is(
	.decor-text,
	.site-footer__statement-text,
	.stack-card__title,
	.block-gallery__title,
	.block-rfq__title,
	.stat-slide__label
) {
	line-height: 1.22;
}

/* Chữ tô bằng nền cắt theo hình chữ (background-clip: text): nền chỉ có trong khung phần tử, phần dấu nhô lên trên
   dòng đầu bị mất (dấu sắc của "Ế" biến mất). Thêm khoảng đệm trên / dưới để dấu nằm trong khung. */
html:lang(vi) :is(.block-testimonials__decor, .stat-slide__label) {
	padding-block: 0.2em;
}

.section-title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 900;
	line-height: 1.22;
	text-transform: uppercase;
	color: var(--color-text);
}

/* Nút ------------------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: clamp(14px, 1.25vw, 24px) clamp(20px, 1.67vw, 32px);
	border: 0;
	border-radius: var(--radius-sm);
	font-family: var(--font-display);
	font-size: var(--fs-button);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.btn .icon {
	transition: transform 0.2s;
}

.btn:hover .icon {
	transform: translateX(3px);
}

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

.btn--primary:hover {
	background: var(--color-primary-dark);
}

.btn--light {
	background: #fff;
	color: var(--color-text-strong);
}

.btn--light:hover {
	background: var(--color-text-strong);
	color: #fff;
}

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

.btn--light-red:hover {
	background: var(--color-text-strong);
	color: #fff;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: underline;
}