/*
 * Các section của trang chủ.
 *
 * Mỗi khối ở đây khớp một layout Flexible Content của ACF — tên class trùng
 * tên layout để lúc chuyển sang PHP chỉ việc bê nguyên. Xem docs/PLAN.md §5.5.
 *
 * Phụ thuộc: tokens.css, base.css, components.css.
 */

/* ---------------------------------------------------------------
 * VIDEO HERO — layout `video_hero`
 * --------------------------------------------------------------- */

.video-hero {
	position: relative;
	min-height: clamp(420px, 78vh, 780px);
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--c-navy);
	color: var(--c-white);
	text-align: center;
}

.video-hero__media {
	position: absolute;
	inset: 0;
}

.video-hero__media img,
.video-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Lớp phủ tối để chữ trắng luôn đủ tương phản, bất kể ảnh nền sáng tối
 * thế nào. Không có nó thì tiêu đề trắng đặt trên ảnh mặt số sáng sẽ
 * không đọc nổi.
 */
.video-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(5, 28, 43, 0.35) 0%,
		rgba(5, 28, 43, 0.55) 60%,
		rgba(5, 28, 43, 0.72) 100%
	);
}

.video-hero__inner {
	position: relative;
	z-index: var(--z-base);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-5);
	padding-block: var(--sp-9);
	max-width: 780px;
}

.video-hero__title {
	color: var(--c-white);
	margin: 0;
}

.video-hero__lead {
	font-size: var(--fs-md);
	color: rgba(255, 255, 255, 0.86);
	max-width: 56ch;
}

.video-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-2);
}

/* ---------------------------------------------------------------
 * TRUST BADGES — layout `trust_badges`
 * --------------------------------------------------------------- */

.trust-badges {
	background: var(--c-mist);
	padding-block: var(--sp-6);
}

.trust-badges__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-5);
}

.trust-badge {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
}

.trust-badge__icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	color: var(--c-gold-ink);
}

.trust-badge__title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}

.trust-badge__note {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

@media (max-width: 960px) {
	.trust-badges__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.trust-badges__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-4);
	}
}

/*
 * IMAGE HERO nằm ở phần layout Flexible Content phía dưới file này —
 * bản cũ dùng min-height cố định đã gỡ để không đá với aspect-ratio.
 */

/* ---------------------------------------------------------------
 * OUR STORY — layout `rich_text`
 * --------------------------------------------------------------- */

.rich-text {
	padding-block: var(--sp-section);
}

.rich-text__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--sp-9);
}

.rich-text__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	max-width: var(--measure);
}

.rich-text__prose p + p {
	margin-top: var(--sp-4);
}

.rich-text__signature {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin-top: var(--sp-3);
}

.rich-text__signature img {
	max-width: 180px;
}

.rich-text__signature-name {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.rich-text__signature-role {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

@media (max-width: 960px) {
	.rich-text__inner {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}
}

/* ---------------------------------------------------------------
 * SERVICE GRID — layout `service_grid`
 * --------------------------------------------------------------- */

.service-grid__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-5);
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--sp-2);
	min-height: 300px;
	padding: var(--sp-5);
	overflow: hidden;
	background: var(--c-navy);
	color: var(--c-white);
	text-decoration: none;
}

.service-card__media {
	position: absolute;
	inset: 0;
}

.service-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.service-card:hover .service-card__media img {
	transform: scale(1.05);
}

.service-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(5, 28, 43, 0.1) 30%,
		rgba(5, 28, 43, 0.82) 100%
	);
}

.service-card__body {
	position: relative;
	z-index: var(--z-base);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.service-card__title {
	font-family: var(--f-head);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
	margin: 0;
}

.service-card__note {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------
 * PARTNER LOGOS — layout `partner_logos`
 * --------------------------------------------------------------- */

.partner-logos {
	padding-block: var(--sp-8);
	border-block: 1px solid var(--c-line-soft);
}

.partner-logos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	align-items: center;
	gap: var(--sp-6);
}

/*
 * Logo đối tác đủ màu sẽ làm rối dải này. Chuyển xám, chỉ hiện màu khi
 * rê chuột — cách LWC xử lý và cũng là cách giữ nhịp thị giác.
 */
.partner-logos__item img {
	margin-inline: auto;
	max-height: 44px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.partner-logos__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ---------------------------------------------------------------
 * SCROLLING CONTENT — layout `scrolling_content`
 *
 * Dải chữ chạy ngang. Dùng animation thuần CSS, nhân đôi nội dung để
 * vòng lặp liền mạch. prefers-reduced-motion đã tắt animation ở base.css,
 * lúc đó dải đứng yên và vẫn đọc được.
 * --------------------------------------------------------------- */

.marquee {
	overflow: hidden;
	background: var(--c-navy);
	color: var(--c-white);
	padding-block: var(--sp-4);
}

/*
 * KHÔNG đặt `gap` trên dải, đặt trên nhóm.
 *
 * Keyframe dịch `-50%`, tức đúng một nửa bề rộng dải. Nếu khoảng cách nằm
 * giữa hai nhóm thì bề rộng dải là `2 × nhóm + gap`, và một nửa của nó là
 * `nhóm + gap/2` — thiếu nửa khoảng cách, dải nhích một cái mỗi vòng lặp.
 *
 * Cho khoảng cách vào trong nhóm, cộng `padding-right` bằng đúng khoảng cách
 * đó, thì bề rộng nhóm đã bao gồm dấu ngăn với nhóm sau. Dải thành đúng
 * `2 × nhóm`, và `-50%` rơi chính xác vào điểm nối.
 */
.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee 42s linear infinite;
}

.marquee__group {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	padding-right: var(--sp-8);
}

/*
 * Dừng khi rê chuột hoặc khi tiêu điểm bàn phím rơi vào trong dải.
 *
 * WCAG 2.2.2 đòi hỏi mọi nội dung tự chuyển động quá 5 giây phải có cách
 * dừng lại. `:hover` không đủ — người dùng bàn phím không rê chuột được.
 */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
	animation-play-state: paused;
}

.marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	white-space: nowrap;
}

.marquee__item::after {
	content: '';
	width: 5px;
	height: 5px;
	background: var(--c-gold);
	border-radius: var(--r-pill);
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/*
 * Người dùng chọn giảm chuyển động thì dải đứng yên — đây đúng là loại
 * chuyển động mà tuỳ chọn đó sinh ra để tắt.
 *
 * Nhưng đứng yên KHÔNG được phép nghĩa là mất chữ. Dải rộng hơn khung chứa
 * và khung có `overflow: hidden`, nên phần đuôi bị cắt và không có cách nào
 * đọc tới. Đo được: dải 1641px trong khung 1359px — mất gần một phần năm nội
 * dung. Bỏ `width: max-content` và cho xuống dòng thì mọi mục đều đọc được.
 */
@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		width: auto;
		animation: none;
	}

	.marquee__group {
		flex-wrap: wrap;
		justify-content: center;
		padding-right: 0;
		gap: var(--sp-4) var(--sp-8);
	}

	/*
	 * Trừ khi chủ site bật "Luôn chạy" trong ACF. `!important` là bắt buộc ở
	 * đây: khối reset giảm chuyển động ở base.css dùng `*` kèm `!important`,
	 * nên không có cách nào thắng bằng độ ưu tiên selector.
	 */
	.marquee--force .marquee__track {
		width: max-content;
		animation: marquee 42s linear infinite !important;
		animation-duration: 42s !important;
		animation-iteration-count: infinite !important;
	}

	.marquee--force .marquee__group {
		flex-wrap: nowrap;
		padding-right: var(--sp-8);
		gap: var(--sp-8);
	}
}

/* ---------------------------------------------------------------
 * NÚT TẠM DỪNG
 *
 * Do JavaScript chèn vào, không đặt sẵn trong PHP: nút chỉ có nghĩa khi dải
 * thật sự đang chạy. Không có JS thì dải cũng không nhân bản được và không
 * chạy, lúc đó một nút "tạm dừng" là lời nói dối.
 * --------------------------------------------------------------- */

.marquee {
	position: relative;
}

.marquee__toggle {
	position: absolute;
	top: 50%;
	right: var(--gutter);
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--c-line-invert);
	background: transparent;
	color: var(--c-white);
	cursor: pointer;
	opacity: 0;
	transition:
		opacity var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

/*
 * Nút mờ đi khi không dùng tới, nhưng LUÔN hiện khi có tiêu điểm bàn phím.
 * Ẩn hẳn bằng `display: none` rồi chỉ hiện lúc hover sẽ khiến người dùng
 * bàn phím không bao giờ tab tới được nó — tức là mất luôn cách dừng dải.
 */
.marquee:hover .marquee__toggle,
.marquee__toggle:focus-visible {
	opacity: 1;
}

.marquee__toggle:hover {
	border-color: var(--c-gold);
}

.marquee__toggle svg {
	width: 12px;
	height: 12px;
}

/* Đang dừng thì nút hiện thường trực — nếu không sẽ không còn gì để bấm tiếp. */
.marquee.is-paused .marquee__toggle {
	opacity: 1;
}

.marquee.is-paused .marquee__track {
	animation-play-state: paused !important;
}

/* ---------------------------------------------------------------
 * NEWSLETTER — layout `newsletter`
 * --------------------------------------------------------------- */

.newsletter {
	padding-block: var(--sp-9);
	background: var(--c-mist);
}

.newsletter__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
	text-align: center;
	max-width: 620px;
	margin-inline: auto;
}

.newsletter__form {
	width: 100%;
	margin-top: var(--sp-2);
}

.newsletter__note {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

/* ---------------------------------------------------------------
 * SOCIAL PROMO — layout `social_promo`
 * Hai banner YouTube / TikTok, section 04 của LWC.
 * --------------------------------------------------------------- */

.social-promo__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-5);
}

.social-promo__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	min-height: 180px;
	padding: var(--sp-6);
	overflow: hidden;
	background: var(--c-navy);
	color: var(--c-white);
	text-decoration: none;
}

.social-promo__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(5, 28, 43, 0.85), rgba(5, 28, 43, 0.35));
}

.social-promo__media {
	position: absolute;
	inset: 0;
}

.social-promo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.social-promo__body {
	position: relative;
	z-index: var(--z-base);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

@media (max-width: 960px) {
	.social-promo__grid {
		grid-template-columns: 1fr;
	}
}

/* ===============================================================
 * LAYOUT FLEXIBLE CONTENT
 *
 * Mười layout bám theo cấu trúc THẬT của trang chủ LWC, đo bằng
 * DevTools ở khung 1521px:
 *
 *   video_hero        460px, có ảnh nền + nút xem video
 *   trust_row          66px, dải mỏng 3–4 mục, icon 32px
 *   product_carousel  560px
 *   banner            357px, ảnh tràn viền 1521×357, không chữ
 *   promo_grid        356px, HAI ô 688×276
 *   image_hero        856px, ảnh tràn viền, chữ tuỳ chọn
 *   rich_text         221px kiểu gọn / 1059px kiểu đầy đủ
 *   custom_html       tuỳ nội dung
 *
 * Tỉ lệ dùng aspect-ratio thay vì chiều cao cứng, để tự co theo
 * bề rộng màn hình mà vẫn giữ đúng dáng.
 * =============================================================== */

/* ---------------------------------------------------------------
 * DẢI CAM KẾT — mỏng, icon 32px, nằm ngay dưới hero
 * --------------------------------------------------------------- */

.trust-row {
	border-bottom: 1px solid var(--c-line-soft);
}

/*
 * Lưới, không phải flex-wrap.
 *
 * Bản cũ dùng `flex-wrap: wrap` kèm `justify-content: center`. Các mục có bề
 * rộng khác nhau vì độ dài chữ khác nhau, nên khi xuống hàng, hàng cuối bị
 * căn giữa và không thẳng hàng với hàng trên. Đo trên trang Về Kronos: ba mục
 * xuống thành 2 + 1, và ba icon nằm ở ba toạ độ khác nhau — 459px, 958px và
 * 751px. Càng hẹp màn hình càng lệch nhiều.
 *
 * `auto-fit` + `minmax` cho ra các cột RỘNG BẰNG NHAU và tự giảm số cột theo
 * bề ngang: 4 cột trên desktop, 2 cột trên tablet, 1 cột trên điện thoại.
 * Mọi mục bắt đầu ở cùng một mép trái, nên icon thẳng hàng ở mọi kích thước.
 */
.trust-row__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	align-items: start;
	gap: var(--sp-5) var(--sp-8);
	min-height: 66px;
	padding-block: var(--sp-4);
	margin: 0;
	list-style: none;
}

/*
 * `align-items: flex-start` chứ không phải `center`.
 *
 * Ghi chú của mỗi mục dài ngắn khác nhau nên có mục xuống hai dòng, có mục
 * một dòng. Căn giữa theo chiều dọc thì icon của mục hai dòng tụt xuống thấp
 * hơn icon của mục một dòng — lại lệch, chỉ là lệch theo trục khác.
 */
.trust-row__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 40px;
	text-decoration: none;
	color: var(--c-text);
	transition: color var(--dur) var(--ease);
}

.trust-row__item:hover {
	color: var(--c-gold-ink);
}

/*
 * Kéo icon lên cho tâm của nó ngang với dòng chữ ĐẦU TIÊN, không ngang với
 * cả khối chữ. Icon cao 32px, dòng tiêu đề cao 14px — chênh nhau 9px mỗi bên.
 */
.trust-row__icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin-top: -9px;
	color: var(--c-gold-ink);
}

/*
 * Dưới desktop thì chỉ định thẳng số cột, không phó mặc `auto-fit`.
 *
 * `auto-fit` chia theo bề ngang nên ở khoảng 900px nó cho 3 cột, và bốn mục
 * thành 3 + 1 — vẫn thẳng hàng nhưng nhìn lệch. Hai cột ở tablet cho ra 2 + 2
 * cân đối; một cột trên điện thoại vì 240px là quá hẹp cho tiêu đề kèm ghi
 * chú tiếng Việt có dấu.
 */
@media (max-width: 960px) {
	.trust-row__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.trust-row__list {
		grid-template-columns: 1fr;
		gap: var(--sp-4);
        margin-top: 15px;
    }
}

.trust-row__title {
	display: block;
	font-size: var(--fs-sm);
	line-height: var(--lh-14);
	font-weight: var(--fw-medium);
}

.trust-row__note {
	display: block;
	font-size: var(--fs-xs);
	line-height: var(--lh-12);
	color: var(--c-text-muted);
}

@media (max-width: 960px) {
	.trust-row__list {
		justify-content: flex-start;
		gap: var(--sp-4) var(--sp-6);
	}
}

/* ---------------------------------------------------------------
 * BANNER TRÀN VIỀN
 *
 * LWC: 1521×357 → tỉ lệ 4,26:1. Trên di động tỉ lệ đó quá dẹt,
 * ảnh gần như thành một vạch, nên đổi sang 2:1.
 * --------------------------------------------------------------- */

.banner {
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--c-mist);
}

.banner__media {
	aspect-ratio: 1521 / 357;
}

.banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

a.banner:hover .banner__media img {
	transform: scale(1.02);
}

@media (max-width: 960px) {
	.banner__media {
		aspect-ratio: 2 / 1;
	}
}

/* ---------------------------------------------------------------
 * LƯỚI HAI Ô
 *
 * LWC: hai ô 688×276 → tỉ lệ 2,49:1, cách nhau bởi gutter.
 * --------------------------------------------------------------- */

.promo-grid__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-5);
	list-style: none;
}

.promo-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 688 / 276;
	overflow: hidden;
	background: var(--c-navy);
	text-decoration: none;
}

.promo-tile__media {
	position: absolute;
	inset: 0;
}

.promo-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.promo-tile:hover .promo-tile__media img {
	transform: scale(1.04);
}

/*
 * Lớp phủ chuyển sắc thay vì phủ đều: giữ được chi tiết ảnh ở nửa
 * trên, vẫn đủ tối ở dưới cho chữ trắng đọc rõ trên bất kỳ ảnh nào.
 */
.promo-tile__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(5, 28, 43, 0.15) 35%,
		rgba(5, 28, 43, 0.78) 100%
	);
}

.promo-tile__body {
	position: relative;
	z-index: var(--z-base);
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	padding: var(--sp-6);
	color: var(--c-white);
}

.promo-tile__title {
	font-family: var(--f-ui);
	font-size: var(--fs-sm);
	line-height: var(--lh-14);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	margin: 0;
}

.promo-tile__note {
	font-size: var(--fs-xs);
	line-height: var(--lh-12);
	color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 700px) {
	.promo-grid__list {
		grid-template-columns: 1fr;
		gap: var(--sp-4);
	}

	.promo-tile {
		aspect-ratio: 16 / 9;
	}
}

/* ---------------------------------------------------------------
 * HERO ẢNH LỚN
 *
 * LWC: 1521×856 → tỉ lệ 1,78:1, đúng 16:9. Chữ là tuỳ chọn: nhiều
 * lần họ để ảnh trần, không phủ gì.
 * --------------------------------------------------------------- */

.image-hero {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	max-height: 856px;
	overflow: hidden;
	background: var(--c-navy);
	color: var(--c-white);
	text-align: center;
	max-width: 100%;
    width: 100%;
}

.image-hero__media {
	position: absolute;
	inset: 0;
}

.image-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Chỉ phủ tối khi thật sự có chữ đè lên. */
.image-hero--has-text .image-hero__scrim {
	position: absolute;
	inset: 0;
	background: rgba(5, 28, 43, 0.45);
}

.image-hero__inner {
	position: relative;
	z-index: var(--z-base);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-8) var(--gutter);
	max-width: 680px;
}

@media (max-width: 700px) {
	.image-hero {
		aspect-ratio: 4 / 3;
	}
}

/* ---------------------------------------------------------------
 * KHỐI CHỮ — hai kiểu
 * --------------------------------------------------------------- */

.rich-text--compact .rich-text__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	padding-block: var(--sp-8);
}

.rich-text--full .rich-text__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--sp-9);
}

.rich-text--full.rich-text--no-image .rich-text__inner {
	grid-template-columns: 1fr;
	max-width: var(--container-text);
	margin-inline: auto;
	text-align: center;
}

@media (max-width: 960px) {
	.rich-text--full .rich-text__inner {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}
}

/* ---------------------------------------------------------------
 * HTML TỰ DO
 *
 * Nội dung do người quản trị dán vào nên không kiểm soát được bề
 * rộng — bắt buộc tự cuộn ngang trong khung của nó.
 * --------------------------------------------------------------- */

.custom-html {
	max-width: 100%;
	overflow-x: auto;
}

.custom-html img,
.custom-html iframe,
.custom-html video {
	max-width: 100%;
}

/* ---------------------------------------------------------------
 * CHỮ ĐÈ TRÊN HERO ẢNH
 *
 * Trước đây màu đặt bằng style nội tuyến ngay trong template. Style nội tuyến
 * có độ ưu tiên cao hơn mọi selector class nên không ai đè lại được — kể cả
 * khi cần, ví dụ khi làm bản nền sáng. Đưa về class để hệ thiết kế còn kiểm
 * soát được.
 * --------------------------------------------------------------- */

.image-hero__title {
	color: #fff;
}

.image-hero__text {
	color: rgba(255, 255, 255, 0.85);
}