/*
 * Banner video trang chủ.
 *
 * NAMESPACE RIÊNG, CÓ CHỦ Ý. Không dùng lại một class nào của banner cũ
 * (`slider-wrapper`, `slider`, `hktCarousel`, `vietape-slider-home`,
 * `hero-style2`). Lý do không phải sạch sẽ mà là an toàn:
 *
 *  - `home.css` có gần 1300 dòng luật nhắm vào những class đó, phần lớn là để
 *    gỡ các lỗi của theme cha (mũi tên Owl, chiều cao slide, đệm 186/250px,
 *    nền sáng, chấm chỉ dẫn). Dùng lại class là kế thừa cả đống luật ấy rồi
 *    phải đi vô hiệu hoá từng cái.
 *  - `product-card.css:245` có `min-height: 620px !important` nhắm vào
 *    `.slider-wrapper.slider`. Markup mới không mang class đó nên luật kia
 *    không chạm tới — chiều cao mới khai được tự do, không phải đánh nhau.
 *  - Các luật `.slider-wrapper:not(.slider)` trong `home.css` phục vụ carousel
 *    tin tức và sản phẩm. Chúng PHẢI còn nguyên. Namespace riêng bảo đảm điều
 *    đó mà không cần nhớ.
 *
 * Hệ quả: banner cũ và banner mới không bao giờ tranh nhau một luật nào. Gỡ
 * module PHP ra là banner cũ trở lại đúng như trước, file CSS này thành vô
 * hại vì không selector nào khớp.
 */

/* --- Khung ---------------------------------------------------------------- */

.vietape-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	/*
	 * `min-height` CHỨ KHÔNG PHẢI `height`. Khác biệt này không phải chuộng
	 * cách viết: với `height` cố định cộng `align-items: center` cộng
	 * `overflow: hidden`, hộp chữ nào cao hơn khung sẽ tràn ĐỀU hai đầu rồi bị
	 * xén cả trên lẫn dưới — không thanh cuộn, không cảnh báo, không lỗi.
	 *
	 * Mà chiều cao hộp chữ KHÔNG do tôi quyết: tiêu đề lấy từ meta `hkt_slider`
	 * nên Long sửa dài ra lúc nào cũng được, và font Barlow tải bằng
	 * `display=swap` nên chữ đổi kích thước sau lần vẽ đầu. Hai nguồn thay đổi
	 * đó đều nằm ngoài file này.
	 *
	 * Với `min-height`, chữ dài thì khung tự cao lên. Xấu hơn một chút, nhưng
	 * đọc được — còn bị xén thì mất chữ mà không ai biết.
	 */
	/* Sàn 480px: `78vh` trên một cửa sổ thấp (laptop 13" đã mở sẵn thanh công cụ,
	 * hoặc cửa sổ chia đôi màn hình) cho ra khoảng 400px — lúc đó dải video mỏng
	 * tới mức không đọc ra chủ thể nữa. Khai hai lần: dòng đầu cho trình duyệt
	 * không hiểu `max()`, dòng sau đè lên ở mọi trình duyệt hiện đại. */
	min-height: 480px;
	min-height: max(480px, min(78vh, 700px));
	/* Nền đặc khi chưa có media nào, hoặc trong lúc poster đang về. Không để
	 * trong suốt: nền trắng của trang lộ ra thành một mảng trắng cao 700px, và
	 * chữ navy trên trắng thì đọc được nhưng trông như trang lỗi. */
	background: #0f1c2e;
}

/* VÌ SAO 700px CHỨ KHÔNG PHẢI 860px như banner cũ: nguồn sau khi cắt là
 * 1152x480. Ở khung 1920x700 thì `object-fit: cover` phóng 700/480 = 1,46x.
 * Ở 1920x860 phải phóng 1,79x — nhoè thấy rõ trên bề mặt kim loại có highlight,
 * mà nguồn chỉ có 720p nên không có bản nét hơn để bù. */

/* --- Lớp media ------------------------------------------------------------ */

/*
 * Poster và video nằm CHỒNG KHÍT nhau, cùng một hộp tuyệt đối, cùng
 * `object-fit`/`object-position`. Đây không phải tiện tay mà là điều kiện bắt
 * buộc: từ Chrome 116 thẻ <video> cũng là ứng viên LCP và không có cờ nào loại
 * nó ra. Cách duy nhất giữ LCP ở ảnh poster là không cho video vẽ ra một vùng
 * lớn hơn vùng ảnh đã vẽ trước đó.
 */
.vietape-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.vietape-hero__poster,
.vietape-hero__poster img,
.vietape-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 38% chứ không phải 50%: chủ thể (ngàm kẹp và mẫu thử) nằm hơi trên giữa
	 * khung. Cắt từ giữa là mất ngàm ở các bề ngang hẹp. */
	object-position: 50% 38%;
	display: block;
}

/*
 * Video khởi đầu trong suốt và chỉ hiện khi JS xác nhận nó ĐANG CHẠY THẬT.
 * Không dùng `display` hay `visibility`: cả hai làm mất hộp, mà mất hộp thì
 * lập luận về LCP ở trên sụp. Đổi `opacity` giữ nguyên hộp.
 *
 * 220ms đủ để không giật, đủ ngắn để không ai kịp thấy poster "mờ dần".
 */
.vietape-hero__video {
	opacity: 0;
	transition: opacity .22s linear;
	z-index: 1;
}

.vietape-hero.is-dang-chay .vietape-hero__video {
	opacity: 1;
}

/* --- Lớp phủ -------------------------------------------------------------- */

/*
 * Gradient TRẮNG mờ từ trái. Thuần thẩm mỹ: làm mép trái hộp chữ trắng không
 * chọi gắt vào phim.
 *
 * KHÔNG dựa vào lớp này để bảo đảm tương phản chữ. Tương phản do hộp trắng đặc
 * phía dưới chữ lo — đó là hằng số, không phụ thuộc khung hình nào đang chiếu.
 * Đây là chỗ nhiều hero video làm sai: phủ gradient rồi đặt chữ trắng lên, và
 * tương phản đổi theo từng giây của video.
 */
.vietape-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .18) 34%, rgba(255, 255, 255, 0) 58%);
}

/* --- Hộp chữ -------------------------------------------------------------- */

.vietape-hero__lop {
	position: relative;
	z-index: 3;
	width: 100%;
}

.vietape-hero__hop {
	background: #fff;
	border-top: 4px solid #0b5cab;
	box-shadow: 0 18px 46px rgba(16, 42, 67, .20);
	padding: 34px 38px 36px;
	width: min(620px, 48%);
}

/*
 * HỘP TRẮNG CHỮ NAVY, KHÔNG PHẢI HỘP NAVY CHỮ TRẮNG.
 *
 * 3M và tesa đều dùng hộp màu đặc đè lên phim, và cả hai đều có biến thể hộp
 * trắng. Chọn bản trắng vì nó giữ được HÌNH THÁI của họ mà không đảo ngược
 * quyết định "banner nền sáng" đã chốt ngày 10/09 kèm lý do viết rõ ở
 * home.css. Đổi sang navy là tự lật lại việc mình vừa làm hôm nay.
 *
 * Tương phản #16283d trên #ffffff = 14,95:1, và nó là HẰNG SỐ — không đổi theo
 * khung hình đang chiếu.
 */

.vietape-hero__nhan {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: #0b5cab;
}

.vietape-hero__tieude {
	margin: 0;
	font-size: clamp(28px, 2.9vw, 44px);
	line-height: 1.14;
	font-weight: 700;
	color: #16283d;
}

.vietape-hero__phu {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: #3d5470;
	max-width: 48ch;
}

.vietape-hero__cta {
	margin-top: 24px;
}

.vietape-hero__nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border: 2px solid #0b5cab;
	border-radius: 3px;
	background: #0b5cab;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease;
}

.vietape-hero__nut:hover,
.vietape-hero__nut:focus {
	/* CẤM hover sang #08A6D9. Trắng trên cyan chỉ đạt 2,81:1 — trượt cả ngưỡng
	 * chữ lớn. Đã ghi cùng lý do ở home.css khi sửa nút của banner cũ. */
	background: #0038b8;
	border-color: #0038b8;
	color: #fff;
	text-decoration: none;
}

.vietape-hero__nut:focus-visible {
	outline: 3px solid #16283d;
	outline-offset: 3px;
}

/* --- Nút dừng ------------------------------------------------------------- */

/*
 * WCAG 2.2.2. Kích thước 44x44 đạt luôn 2.5.5 (AAA), không chỉ 24x24 của
 * 2.5.8 (AA).
 *
 * Nền đặc + viền trắng + quầng tối: ba lớp bù nhau nên luôn còn ít nhất một
 * lớp đạt >= 3:1 với bất kỳ khung hình nào phía sau. Nút nằm trên video nên
 * không thể giả định màu nền.
 *
 * LUÔN HIỆN, không phải rê chuột mới hiện — người dùng bàn phím và người dùng
 * cảm ứng không có trạng thái hover.
 */
.vietape-hero__dung {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 4;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #0a1b33;
	box-shadow: 0 0 0 1px rgba(10, 27, 51, .55);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hai vạch dọc = biểu tượng tạm dừng. Vẽ bằng CSS để không thêm một request
 * nào cho một icon 44px. */
.vietape-hero__dung-icon {
	display: block;
	width: 12px;
	height: 14px;
	border-left: 4px solid #fff;
	border-right: 4px solid #fff;
}

/* Khi đã dừng thì đổi thành tam giác phát. `clip-path` rẻ hơn thêm một phần tử. */
.vietape-hero.is-tam-dung .vietape-hero__dung-icon {
	width: 0;
	height: 0;
	border: 0;
	border-left: 14px solid #fff;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	margin-left: 4px;
}

.vietape-hero__dung:focus-visible {
	/* Nút cách mép 20px, vòng focus rộng 6px — nên `overflow: hidden` của
	 * section không cắt mất nó. Đã tính, không phải may. */
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(10, 27, 51, .75);
}

/* --- Màn hình hẹp --------------------------------------------------------- */

@media (max-width: 991px) {
	/*
	 * Xếp dọc: media ở trên, hộp chữ ở dưới. KHÔNG dùng đơn vị `vh` ở đây —
	 * thanh địa chỉ của Safari iOS co giãn khi cuộn, và `vh` sẽ làm khung nhảy
	 * theo. Dùng `aspect-ratio` cho phần media là chiều cao ổn định.
	 */
	.vietape-hero {
		display: block;
		height: auto;
		min-height: 0;
	}

	.vietape-hero__media {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 24 / 10;
	}

	.vietape-hero__scrim {
		display: none;
	}

	/*
	 * Nền trắng cho TOÀN dải chữ, không chỉ cho hộp.
	 *
	 * Hộp chữ nằm trong `.container` của Bootstrap, mà container có đệm 12px mỗi
	 * bên. Hộp `width: 100%` nên nó dừng ở mép trong của đệm — 12px còn lại mỗi
	 * bên để lộ `background: #0f1c2e` của section, thành hai vạch xanh đen dọc
	 * kèm hai bên hộp trắng. Nhìn như lỗi tràn.
	 *
	 * Tô trắng lớp bọc là hết, và không phải đụng vào đệm của Bootstrap — thứ
	 * còn dùng cho mọi khối khác trên trang.
	 */
	.vietape-hero__lop {
		background: #fff;
	}

	.vietape-hero__hop {
		width: 100%;
		padding: 26px 20px 28px;
		box-shadow: none;
	}

	.vietape-hero__dung {
		right: 12px;
		/* Nút phải nằm trong vùng media, mà vùng media giờ ở trên. Neo theo mép
		 * trên thay vì mép dưới. */
		bottom: auto;
		top: calc(100vw * 10 / 24 - 56px);
	}
}

/* --- Giảm chuyển động ----------------------------------------------------- */

/*
 * CSS ở đây chỉ là lớp bảo hiểm thứ hai. Lớp thứ nhất nằm ở JS: nó không gắn
 * `src` cho thẻ video, nên không byte video nào được tải. Chỉ dùng CSS là
 * không đủ — `display: none` một thẻ video vẫn có thể để nó tải xong rồi mới
 * bị ẩn.
 */
@media (prefers-reduced-motion: reduce) {
	.vietape-hero__video {
		display: none;
	}

	.vietape-hero__nut,
	.vietape-hero__video {
		transition: none;
	}
}