/*
 * Trang chu (Mau 6, Mau 14): khoi noi bat, luoi bo suu tap, "Danh cho to chuc", o giu cho anh.
 * Chi nap o trang chu (health365_enqueue_assets). Mau chi dung bien --wp--preset--color--* (D-024).
 * Diem gay: 782px va 480px.
 */

/* ---------- O giu cho anh (T-025): nen mau nhat, bieu tuong anh mo ---------- */
.h365-ph {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	background: var(--wp--preset--color--tint);
}

.h365-ph::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 3rem;
	height: 3rem;
	margin: auto;
	background: var(--wp--preset--color--primary);
	opacity: 0.3;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 2v9.6l4-4 3.5 3.5 3-3L19 15.6V6H5zm4.5 4a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 2v9.6l4-4 3.5 3.5 3-3L19 15.6V6H5zm4.5 4a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Khoi video, anh dau trang (A1, T-080): khong co nguon thi khong in khoi, khong o giu cho ---------- */
.h365-hero-media {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--tint);
}

.h365-hero-media > .h365-hero-media__img,
.h365-hero-media > .h365-hero-media__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.h365-hero-media--cover > .h365-hero-media__img,
.h365-hero-media--cover > .h365-hero-media__video {
	object-fit: cover;
}

.h365-hero-media--contain > .h365-hero-media__img {
	object-fit: contain;
}

/* Video chong len anh poster, hien dan khi da chay (poster van la phan tu LCP). */
.h365-hero-media > .h365-hero-media__video {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.h365-hero-media.is-playing > .h365-hero-media__video {
	opacity: 1;
}

.h365-hero-media__toggle {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--touch-target);
	height: var(--wp--custom--touch-target);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.h365-hero-media__toggle[hidden] {
	display: none;
}

.h365-hero-media__toggle:hover {
	background: var(--wp--preset--color--contrast);
}

/* Bieu tuong tam dung (hai thanh) / phat (tam giac) tu CSS, khong them tep anh. */
.h365-hero-media__toggle-icon {
	display: block;
	width: 0.875rem;
	height: 0.875rem;
	background: linear-gradient(90deg, currentcolor 0 36%, transparent 36% 64%, currentcolor 64%);
}

.h365-hero-media__toggle[aria-pressed="true"] .h365-hero-media__toggle-icon {
	background: currentcolor;
	clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}

/* Dien thoai va che do giam chuyen dong: chi hien anh poster, khong video, khong nut (JS cung khong tai video). */
@media (max-width: 781px), (prefers-reduced-motion: reduce) {
	.h365-hero-media > .h365-hero-media__video,
	.h365-hero-media > .h365-hero-media__toggle {
		display: none;
	}
}

/* Bat phat video tren dien thoai (ban 720p, T-093): hien lai video va nut, tru khi giam chuyen dong. */
@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {
	.h365-hero-media--phone-video > .h365-hero-media__video {
		display: block;
	}

	.h365-hero-media--phone-video > .h365-hero-media__toggle:not([hidden]) {
		display: inline-flex;
	}
}

/* ---------- Toi da 6 khoi noi bat xen ke (D-092) ---------- */
.h365-home > .h365-home-spots {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
}

.h365-showcase--spotlight {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.h365-spot {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--surface);
}

.h365-spot--reverse {
	flex-direction: row-reverse;
}

/* Khoi ghim khong co anh (Y te tu xa, IoT): chi phan chu, rong day du. */
.h365-spot--text .h365-spot__body {
	flex: 1 1 100%;
}

.h365-spot__body {
	flex: 1 1 23.75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.875rem;
	padding: 3.25rem;
	box-sizing: border-box;
}

.h365-spot__body > * {
	margin: 0;
}

.h365-spot__tag {
	font-size: 0.75rem;
}

.h365-spot__title {
	font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: var(--wp--custom--tracking--title);
}

.h365-spot__text {
	max-width: 28.75rem;
	color: var(--wp--preset--color--body);
	line-height: 1.65;
}

/* Nut "Xem chi tiet" dung lop nut chung .h365-btn (theme.css): cung chieu cao, co chu, bo goc o moi khoi (T-091).
 * Truoc day dung .wp-block-button__link (height: 100% cua khoi loi) nen nut bi co gian theo luong chu cua tung khoi. */
.h365-spot .h365-spot__cta {
	flex: 0 0 auto;
	align-self: flex-start;
	min-width: 9.5rem;
	margin-top: 0.5rem;
}

.h365-spot__media {
	position: relative;
	flex: 1 1 23.75rem;
	min-height: 18.75rem;
	max-height: 26rem;
	margin: 1rem;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
}

.h365-spot__media > .h365-ph,
.h365-spot__media > .h365-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Anh san pham nen trang (A2, T-080): khung nen trang hien ngay khi anh chua tai, anh contain co le, khong cat san pham. */
.h365-spot__media > .h365-media__img {
	box-sizing: border-box;
	padding: clamp(1rem, 3vw, 2.25rem);
	object-fit: contain;
}

/* ---------- Luoi bo suu tap ---------- */
.h365-home > .h365-home-collection {
	padding-top: 3.5rem;
	padding-bottom: 1.5rem;
}

.h365-home-collection .h365-home-collection__title {
	margin: 0 0 1.5rem;
	font-size: 1.875rem;
	letter-spacing: -0.7px;
}

.h365-showcase--collection {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
	gap: 1.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.h365-collection__cell {
	margin: 0;
}

.h365-collection__item {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Anh o phu: ti le 4:3, ca san pham hien du tren nen trang; o "Tat ca san pham" khong anh co nen nhat va mui ten. */
.h365-collection__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--base);
}

.h365-collection__media > .h365-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0.875rem;
	object-fit: contain;
}

.h365-collection__media--plain {
	background: var(--wp--preset--color--tint);
}

.h365-collection__media--plain::after {
	content: "\2192";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	color: var(--wp--preset--color--primary);
}

.h365-collection__text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.375rem;
	padding: 1rem 1.25rem 1.25rem;
}

.h365-collection__item:hover {
	background: var(--wp--preset--color--tint);
}

.h365-collection__name {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.h365-collection__sub {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- Danh cho to chuc ---------- */
.h365-home > .h365-org {
	margin-block-start: 3.5rem;
	padding: 3.5rem;
	gap: 1.75rem;
	border-radius: var(--wp--custom--radius--large);
	box-sizing: border-box;
}

.h365-org .h365-org__text {
	flex: 1 1 26rem;
	max-width: 40rem;
	gap: 0.625rem;
}

.h365-org__text > * {
	margin: 0;
}

.h365-org .h365-org__eyebrow {
	color: var(--wp--preset--color--accent);
}

.h365-org .h365-org__title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	letter-spacing: -0.8px;
}

.h365-org .h365-org__actions .wp-block-button__link {
	padding: 1rem 1.875rem;
}

.h365-org :focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

.h365-showcase--solutions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.h365-solutions__link {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--wp--custom--touch-target);
	padding: 0.5rem 1rem;
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--line-dark);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.h365-solutions__link:hover {
	border-color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Dien thoai, may tinh bang (Mau 14) ---------- */
@media (max-width: 781px) {
	.h365-home > .h365-home-spots {
		padding-top: 1.75rem;
		padding-bottom: 0.5rem;
	}

	.h365-showcase--spotlight {
		gap: 1.25rem;
	}

	.h365-spot,
	.h365-spot--reverse {
		flex-direction: column;
		border-radius: var(--wp--custom--radius--medium);
	}

	.h365-spot__body {
		flex: 0 0 auto;
		gap: 0.625rem;
		padding: 1.5rem 1.375rem 1.75rem;
	}

	.h365-spot__media {
		flex: 0 0 auto;
		order: -1;
		width: calc(100% - 1.5rem);
		min-height: 0;
		max-height: none;
		margin: 0.75rem 0.75rem 0;
		aspect-ratio: 4 / 3;
		border-radius: var(--wp--custom--radius--small);
	}

	.h365-spot__media > .h365-media__img {
		padding: 1rem;
	}

	.h365-spot .h365-spot__cta {
		align-self: stretch;
		min-height: 3.375rem;
	}

	.h365-home > .h365-home-collection {
		padding-top: 2rem;
		padding-bottom: 0.5rem;
	}

	.h365-home-collection .h365-home-collection__title {
		margin-bottom: 0.875rem;
		font-size: 1.25rem;
		letter-spacing: var(--wp--custom--tracking--tight);
	}

	.h365-showcase--collection {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.h365-collection__item {
		border-radius: 18px;
	}

	.h365-collection__text {
		padding: 0.875rem 1rem 1rem;
	}

	.h365-collection__name {
		font-size: 1rem;
	}

	.h365-home > .h365-org {
		flex-direction: column;
		align-items: stretch;
		margin-block-start: 1.5rem;
		padding: 1.75rem 1.375rem;
		gap: 1.25rem;
		border-radius: var(--wp--custom--radius--medium);
	}

	.h365-org .h365-org__text {
		flex: 0 0 auto;
		gap: 0.75rem;
	}

	.h365-org .h365-org__title {
		font-size: 1.5rem;
		line-height: 1.2;
		letter-spacing: var(--wp--custom--tracking--tight);
	}

	.h365-org .h365-org__lead {
		font-size: var(--wp--preset--font-size--small);
	}

	.h365-org .h365-org__actions .wp-block-button__link {
		padding: 0.9375rem 1.75rem;
		font-size: 0.9375rem;
	}
}

@media (max-width: 480px) {
	.h365-showcase--collection {
		gap: 0.75rem;
	}

	.h365-collection__text {
		padding: 0.75rem 0.875rem 0.875rem;
	}
}