/**
 * About Company Section — trang chủ. BẢN V3: dùng ẢNH THIẾT KẾ THẬT do designer xuất từ Figma
 * làm nền (Rectangle 19.png qua background-image) — KHÔNG còn clip-path/polygon()/skew()/SVG
 * tự vẽ hình như bản v1-v2. Ảnh thang máy PNG nền trong suốt là 1 LAYER position:absolute
 * riêng, đè lên trên cùng, KHÔNG nằm trong .container/Grid/Flex nào. Toàn bộ giá trị động lấy
 * từ CSS custom property do inc/template-functions.php::tmnhanphat_render_about_css_vars()
 * sinh ra (mục 22).
 *
 * THỨ TỰ LAYER (thấp → cao, khớp DOM order trong template-parts/home/about.php):
 * nền trắng (.about-home) → .about-home__shape (z-index:1) → .container (z-index:2, chứa Text)
 * → .about-home__image (z-index mặc định 3, tuỳ chỉnh qua Customizer — luôn trên cùng).
 */

.about-home {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg);
	/* HỆ TOẠ ĐỘ FIGMA (audit lần 2): Polygon (1925×808) + Elevator (873×873) là MỘT CỤM ĐỒ HOẠ
	   đặt theo toạ độ tuyệt đối như artboard Figma, không phải 2 phần tử layout độc lập.
	   --about-fpx = "1 pixel Figma": bằng đúng 1px khi viewport ≥ 1925px (canvas gốc), co lại
	   theo tỉ lệ 100vw/1925 — MỌI kích thước/toạ độ của cả 2 asset đều nhân với biến này nên
	   tương quan giữa chúng (khoảng cách 1089px, lệch đỉnh 27px, các đường xiên cắt qua
	   Elevator) giữ nguyên TUYỆT ĐỐI ở mọi viewport, đúng yêu cầu "scale đồng đều, không đổi
	   tương quan". KHÔNG chặn trần 1px: trên màn ≥1925 (2K/4K) composition tiếp tục scale to
	   theo viewport để Polygon luôn full-bleed — không lộ khoảng trắng 2 bên (yêu cầu chủ dự
	   án). Chặn dưới 0.6px: dưới ngưỡng đó Polygon thấp hơn khối Text (Text không scale theo
	   composition) — khi chạm sàn, Polygon rộng hơn viewport và bị crop ĐỀU 2 bên (neo giữa
	   bằng translateX(-50%)), góc xiên không đổi. */
	--about-fpx: max(0.6px, 100vw / 1925);
	/* 900 = đáy Elevator trong hệ Figma (27 đỉnh + 873 cao) — chân Elevator nhô khỏi Polygon
	   (808) ~92px nằm trên nền trắng, giống hệt Figma. */
	min-height: calc(800 * var(--about-fpx));
	padding-block: var(--about-padding, 50px);
	display: flex;
	align-items: var(--about-vertical-align, center);
}

/* Rectangle Polygon — asset ĐỘC LẬP giữ ĐÚNG kích thước thiết kế 1925×808 (nhân --about-fpx),
   neo giữa bằng left:50% + translateX(-50%) — KHÔNG width:100%, KHÔNG kéo giãn theo section.
   Tỉ lệ width/height LUÔN là 1925:808 ở mọi viewport (cùng nhân 1 biến = scale đồng đều,
   tương đương transform:scale() nhưng tham gia được vào phép tính toạ độ của Elevator). */
.about-home__shape {
	display: var(--about-shape-display, block);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: calc(1925 * var(--about-fpx));
	height: calc(808 * var(--about-fpx));
	transform: translateX(-50%);
	background-color: var(--about-background, #cc322d);
	background-image: var(--about-shape-image, none);
	background-repeat: no-repeat;
	background-size: var(--about-shape-bg-size, 100% 100%);
	background-position: var(--about-shape-bg-position, center);
	opacity: var(--about-shape-opacity, 1);
}

.about-home>.container {
	position: relative;
	z-index: 2;
	max-width: var(--about-container-width, var(--container-max-width));
	/* Section cao 900fpx nhưng Polygon chỉ 808fpx (92fpx cuối là nền trắng cho chân Elevator) —
	   bù margin-bottom đúng 92fpx để phép căn giữa dọc (align-items:center) của Text rơi vào
	   TÂM POLYGON (phần màu tối) chứ không phải tâm section. */
	margin-bottom: calc(92 * var(--about-fpx));
}

.about-home__content {
	max-width: var(--about-text-width, 42%);
	display: flex;
	flex-direction: column;
	/* Figma: Label → Heading cách 12px (Heading → Description 30px, bù thêm 18px
	   bằng margin-top của Description bên dưới). */
	gap: 12px;
}

/* Figma: Label Inter 32/400 TRẮNG ĐẶC, chữ thường, letter-spacing 0, lh Auto (~1.21). */
.about-home__label {
	margin: 0;
	color: #ffffff;
	font-size: clamp(1.125rem, calc(32 * var(--fig1px)), 2rem);
	font-weight: 400;
	line-height: 1.21;
}

/* Figma: Heading 85/900 trắng — fluid theo tỉ lệ container (--fig1px). */
.about-home__heading {
	margin: 0;
	color: #ffffff;
	font-size: clamp(2rem, calc(85 * var(--fig1px)), 5.3125rem);
	font-weight: 900;
	line-height: 1.21;
	letter-spacing: -0.02em;
	/* Taste B: tracking âm nhẹ cho display lớn (premium). */
}

/* Figma: Description Inter 20/400 trắng đặc, lh Auto (~1.21), box 921px. */
.about-home__description {
	margin: 18px 0 0;
	/* gap 12 + 18 = 30px đúng khoảng Heading → Description Figma. */
	max-width: var(--about-description-max-width, 921px);
	color: #ffffff;
	font-size: clamp(1rem, calc(20 * var(--fig1px)), 1.25rem);
	line-height: 1.5;
	/* Taste A: body văn xuôi leading thoáng. */
}

/* ==================== BUTTON CTA ==================== */
.about-home__cta-wrap {
	margin-top: clamp(20px, calc(32 * var(--fig1px)), 36px);
}

.about-home__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: clamp(10px, calc(14 * var(--fig1px)), 14px) clamp(22px, calc(28 * var(--fig1px)), 30px);
	border-radius: 10px;
	background-color: #ffffff;
	color: #046AB5;
	font-size: clamp(14px, calc(16 * var(--fig1px)), 16px);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	transition: background-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.about-home__btn svg {
	width: 18px;
	height: 18px;
	transition: transform 0.3s ease;
}

.about-home__btn:hover,
.about-home__btn:focus-visible {
	background-color: #E31F2B;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(227, 31, 43, 0.35);
}

.about-home__btn:hover svg,
.about-home__btn:focus-visible svg {
	transform: translateX(4px);
}

/* Elevator PNG — asset tuyệt đối 873×873, đặt THEO TOẠ ĐỘ CỦA POLYGON chứ không theo mép
   phải/Flexbox. Số liệu Figma (bản hiện hành, node 360:2): Polygon X=-3, Elevator X=1086 →
   mép trái Elevator cách mép trái Polygon 1089fpx; đỉnh Elevator thấp hơn đỉnh Polygon 27fpx.
   Mép trái Polygon = 50% - 962.5fpx (nửa của 1925), nên left Elevator = 50% + (1089 - 962.5)fpx
   = 50% + 126.5fpx — mép phải Elevator tràn nhẹ khỏi viewport ~39px đúng như Figma (section
   overflow:hidden tự crop). --about-elevator-ratio (Customizer, mặc định 1 = đúng 873fpx
   thiết kế) là hệ số tinh chỉnh kích thước; Horizontal/Vertical Offset cộng qua translate(). */
.about-home__image {
	position: absolute;
	top: calc(27 * var(--about-fpx));
	left: calc(50% + 126.5 * var(--about-fpx));
	--about-reveal-x: 0px;
	transform: translate(calc(var(--about-image-offset-x, 0px) + var(--about-reveal-x)), var(--about-image-offset-y, 0px));
	height: calc(873 * var(--about-fpx) * var(--about-elevator-ratio, 1));
	width: auto;
	z-index: var(--about-elevator-zindex, 3);
}

.about-home__image-el {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: contain;
	/* giữ nguyên tỉ lệ gốc — không crop/stretch/méo */
}

/* ==================== RESPONSIVE ==================== */
/* Tablet: vẫn giữ layer chồng lớp (Elevator đè lên Shape) như Desktop, chỉ giảm kích thước
   Elevator qua --about-elevator-ratio (đã redefine theo breakpoint trong
   tmnhanphat_render_about_css_vars()) — không để che khuất Text. */
@media (max-width: 991px) {
	.about-home__heading {
		font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);
	}
}

/* Mobile: bỏ position:absolute của Text/Elevator, quay về luồng tài liệu bình thường
   (Text ↓ Elevator, hoặc ngược lại theo setting Mobile Layout) — Shape vẫn dùng ảnh nền như cũ,
   chỉ giảm chiều cao section. */
@media (max-width: 599px) {
	.about-home {
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
	}

	/* Mobile (yêu cầu chủ dự án): KHÔNG đủ không gian cho composition Polygon+Elevator —
	   ẨN ảnh thang máy, Polygon bỏ ảnh xiên (có vùng trong suốt gây khoảng trắng chéo)
	   → thành KHỐI CHỮ NHẬT xanh brand đặc phủ kín dưới Text. */
	.about-home__shape {
		left: 0;
		width: 100%;
		height: 100%;
		transform: none;
		background-image: none;
		background-color: #046AB5;
	}

	.about-home>.container {
		position: static;
		transform: none;
		margin-bottom: 0;
	}

	.about-home__content {
		max-width: 100%;
	}

	.about-home__image {
		display: none;
	}
}

/* ==================== ANIMATION (fade nhẹ khi cuộn tới) ==================== */
/* Trạng thái ban đầu chỉ áp dụng khi JS xác nhận trình duyệt hỗ trợ (class .js-about-ready
   do assets/js/pages/front-page.js gắn) — progressive enhancement, nếu JS lỗi/bị chặn thì nội
   dung vẫn hiển thị đầy đủ ngay lập tức, chỉ mất hiệu ứng.
   Lưu ý: .about-home__image đã có transform riêng để định vị (offset + căn giữa dọc) — hiệu
   ứng trượt vào (slide-in) được CỘNG THÊM vào biểu thức transform đó qua biến
   --about-reveal-x (0px sau khi hiện, dương trước khi hiện) thay vì khai báo transform mới
   đè lên, tránh ghi đè mất vị trí gốc của ảnh. */
.js-about-ready .about-home__shape {
	opacity: 0;
	transition: opacity 0.8s ease-out;
}

.js-about-ready .about-home__shape.is-visible {
	opacity: 1;
}

.js-about-ready .about-home__image {
	--about-reveal-x: 20px;
	opacity: 0;
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.js-about-ready .about-home__image.is-visible {
	--about-reveal-x: 0px;
	opacity: 1;
}

.js-about-ready .about-home__content {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.js-about-ready .about-home__content.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

	.js-about-ready .about-home__shape,
	.js-about-ready .about-home__image,
	.js-about-ready .about-home__content {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Mobile: vô hiệu hoá phần transform định vị/slide-in của Elevator (đã chuyển về luồng tài
   liệu bình thường) — đặt SAU khối animation để thắng đúng bằng thứ tự nguồn khi độ đặc
   hiệu (specificity) bằng nhau với các rule .is-visible ở trên. */
@media (max-width: 599px) {

	.js-about-ready .about-home__image,
	.js-about-ready .about-home__image.is-visible {
		transform: none;
	}
}