/* Trang giới thiệu (template page-landing, T-050, D-080). Dùng với khối lõi và pattern "Health365 – Trang giới thiệu". */

/* Trang tràn viền (T-066, T-081): khung main không giới hạn bề rộng; nội dung (post-content) giữ cột 1200 px như site cũ,
 * riêng khối alignfull (nhóm nền, video) trải hết chiều rộng màn hình. Nội dung bên trong nhóm alignfull căn theo cột 1200 px;
 * nhóm alignfull không có lề ngang để khối alignfull con (video) tràn viền, khối con khác tự giữ lề (xem bên dưới). */
.h365-tpl-landing {
	padding: 0;
	max-width: none;
}

.h365-landing {
	--wp--style--global--content-size: 1200px;
	--wp--style--global--wide-size: 1280px;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.h365-landing > * + * {
	margin-block-start: 0;
}

.h365-landing > .alignfull {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* Khối chữ nằm ngoài nhóm alignfull vẫn thẳng cột 1200 px và cách lề màn hình hẹp. */
.h365-landing > :where(:not(.alignfull)) {
	box-sizing: border-box;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

/* Các khối con xếp cách đều; nhóm toàn chiều rộng tự cách trên dưới */
.h365-landing .wp-block-group,
.h365-landing .wp-block-columns,
.h365-landing .wp-block-media-text,
.h365-landing .wp-block-gallery,
.h365-landing .wp-block-details,
.h365-landing .wp-block-table {
	margin-block: var(--wp--preset--spacing--40);
}

.h365-landing .wp-block-group.alignfull {
	margin-block: 0;
	padding-inline: 0;
}

/* Khối con của nhóm alignfull (không phải khối tràn viền) giữ lề ngang trên màn hình hẹp; cột 1200 px do layout constrained. */
.h365-landing .wp-block-group.alignfull > :where(:not(.alignfull)) {
	box-sizing: border-box;
	padding-inline: var(--wp--preset--spacing--30);
}

/* Khối tràn viền nằm trong khối tràn viền (video trong nhóm nền, khung tab): rộng đúng bằng khối cha, không kéo lề âm của layout. */
.h365-landing .alignfull .alignfull {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.h365-landing .wp-block-cover.alignfull,
.h365-landing > .wp-block-cover {
	margin-block: 0;
}

.h365-landing .wp-block-cover {
	text-align: center;
	color: var(--wp--preset--color--base);
	/* Nền tối dự phòng: video chưa tải hoặc khung hình sáng thì chữ trắng vẫn đọc được. */
	background-color: var(--wp--preset--color--contrast);
}

.h365-landing .wp-block-cover .wp-block-heading,
.h365-landing .wp-block-cover p,
.h365-landing .wp-block-cover li {
	color: inherit;
}

.h365-landing .wp-block-cover .wp-block-buttons {
	margin-block-start: 1rem;
}

.h365-landing .wp-block-cover .wp-block-list {
	text-align: left;
}

.h365-landing .wp-block-heading {
	line-height: 1.2;
	text-wrap: balance;
}

.h365-landing h1.wp-block-heading {
	font-size: var(--wp--preset--font-size--page-title);
}

.h365-landing h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--xx-large);
}

.h365-landing h3.wp-block-heading {
	font-size: var(--wp--preset--font-size--x-large);
}

.h365-landing .wp-block-image img,
.h365-landing .wp-block-gallery img {
	height: auto;
	max-width: 100%;
	border-radius: 16px;
}

.h365-landing .wp-block-image {
	text-align: center;
}

.h365-landing .wp-block-image.aligncenter,
.h365-landing .wp-block-image.size-large {
	margin-inline: auto;
}

.h365-landing .wp-block-columns {
	gap: var(--wp--preset--spacing--40);
}

.h365-landing .wp-block-column > * + * {
	margin-block-start: 0.75rem;
}

.h365-landing .wp-block-separator {
	max-width: 1200px;
	margin-inline: auto;
	border-color: var(--wp--preset--color--border);
}

.h365-landing .wp-block-cover .wp-block-cover__inner-container .has-background {
	text-align: left;
}

/* Nền tối (khối section dark của trang cũ): tiêu đề, đoạn, danh sách, bảng kế thừa màu chữ của nhóm (theme đặt màu tiêu đề riêng). */
.h365-landing .has-text-color a,
.h365-landing .has-text-color :is(.wp-block-heading, p, li, td, th, summary, figcaption) {
	color: inherit;
}

.h365-landing .has-text-color .wp-block-table td {
	border-bottom-color: color-mix(in srgb, currentColor 25%, transparent);
}

/* Bảng thông số / so sánh */
.h365-landing .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.h365-landing .wp-block-table td {
	padding: 0.65rem 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	vertical-align: top;
}

.h365-landing .wp-block-table td:first-child {
	width: 55%;
}

/* Video theo tỉ lệ gốc (T-081, A9): chiều cao do aspect-ratio (đặt trên khối, theo kích thước video), không đặt min-height,
 * nên khung không cắt video. Video tràn viền khi nằm ngoài cột (alignfull); trong cột (cặp 2 khối) bo góc. */
.h365-landing .wp-block-cover.h365-video-cover,
.h365-landing .wp-block-cover.h365-hero-video {
	min-height: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	max-width: none;
}

.h365-landing .wp-block-cover.h365-video-cover:not(.alignfull) {
	border-radius: 16px;
}

.h365-landing .wp-block-cover.h365-video-cover .wp-block-cover__video-background {
	object-fit: contain;
}

/* Video đầu trang (D-098): chạy một lần, giữ khung cuối. Lớp tối 50% và bóng chữ để chữ trắng đọc được trên khung cuối sáng.
 * Chiều cao tối đa bằng màn hình để không che khuất nội dung ở màn hình rộng. */
/* Hero (T-091, dòng 10): chữ và nút nằm phía trên, video bên dưới và hiện trọn khung 16:9, không bị chữ phủ lên (mọi độ rộng). */
.h365-landing .wp-block-cover.h365-hero-video {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	aspect-ratio: auto !important;
	max-height: none;
	padding: 0;
}

.h365-landing .wp-block-cover.h365-hero-video .wp-block-cover__inner-container {
	order: -1;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.h365-landing .wp-block-cover.h365-hero-video .wp-block-cover__video-background {
	position: static;
	display: block;
	order: 1;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
}

.h365-landing .wp-block-cover.h365-hero-video .wp-block-cover__background {
	display: none;
}

/* Hero ảnh của Kandao Meeting Pro, Meeting S (nhóm chữ + ảnh): chữ trên, ảnh camera bên dưới hiện trọn khung. */
.h365-landing .h365-kandao-hero {
	margin-block: 0;
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-align: center;
}

.h365-landing .h365-kandao-hero .wp-block-heading,
.h365-landing .h365-kandao-hero p,
.h365-landing .h365-kandao-hero li {
	color: inherit;
}

.h365-landing .h365-kandao-hero .wp-block-list {
	padding: 0;
	list-style: none;
	text-align: center;
}

.h365-landing .h365-kandao-hero .wp-block-buttons {
	margin-block: 1rem 0;
}

.h365-landing .h365-kandao-hero .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.h365-landing .h365-kandao-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--base);
	border: var(--wp--custom--border-width) solid currentcolor;
}

.h365-landing .h365-kandao-hero .wp-block-image {
	margin: var(--wp--preset--spacing--40) auto 0;
}

.h365-landing .h365-kandao-hero .wp-block-image img {
	display: block;
	width: 100%;
	max-width: 1200px;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
	border-radius: 0;
}

.h365-landing .wp-block-cover.h365-hero-video :is(.wp-block-heading, p) {
	text-shadow: 0 2px 14px color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent), 0 1px 3px color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
}

/* Hàng cột mà khối đầu mỗi cột đều là ảnh (cặp 2 ảnh, thẻ 3 ảnh): khung ảnh cùng tỉ lệ nên các cột không lệch cao thấp (T-081).
 * Hai cột: khung vuông (ảnh gốc gần vuông); từ ba cột: khung 3:2. Ảnh lấp đầy khung (object-fit: cover). */
.h365-landing .wp-block-columns:not(:has(> .wp-block-column > :first-child:not(.wp-block-image))) .wp-block-column > .wp-block-image:first-child {
	margin: 0;
}

/* Cặp ảnh thẳng hàng (T-091, dòng 9): các cột có ảnh ở đầu cột căn theo mép trên, không căn giữa theo chiều dọc; nếu căn giữa
 * thì cột có đoạn chữ ngắn hơn bị đẩy ảnh xuống, hai ảnh lệch nhau. Chỉ áp từ máy tính bảng trở lên (điện thoại xếp 1 cột). */
@media (min-width: 782px) {
	.h365-landing .wp-block-columns:not(:has(> .wp-block-column > :first-child:not(.wp-block-image))) {
		align-items: flex-start;
	}

	.h365-landing .wp-block-columns:not(:has(> .wp-block-column > :first-child:not(.wp-block-image))) > .wp-block-column {
		align-self: flex-start;
	}
}

.h365-landing .wp-block-columns:not(:has(> .wp-block-column > :first-child:not(.wp-block-image))) .wp-block-column > .wp-block-image:first-child img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.h365-landing .wp-block-columns:not(:has(> .wp-block-column > :first-child:not(.wp-block-image))):has(> .wp-block-column:nth-child(3)) .wp-block-column > .wp-block-image:first-child img {
	aspect-ratio: 3 / 2;
}

/* Nhóm "chế độ thảo luận" thành lưới thẻ (T-091, dòng 13; landing-modes.mjs): máy tính từ 1024 px 3 cột (5–6 chế độ) hoặc
 * 2 cột (4 chế độ), máy tính bảng 2 cột, điện thoại 1 cột. Mỗi thẻ xếp ảnh, chữ, ảnh theo chiều dọc. */
.h365-landing .h365-modes {
	/* Nằm trong nhóm chữ 760 px: rộng ra đến 1200 px, canh giữa theo cột chứa. */
	width: min(1200px, calc(100vw - 2 * var(--wp--custom--gutter)));
	max-width: none !important; /* thắng quy tắc layout constrained của WordPress (!important). */
	margin-right: 0 !important;
	margin-left: 50% !important;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.h365-landing .h365-modes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.h365-landing .h365-modes:not(.h365-modes--4) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.h365-landing .h365-mode {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-radius: 16px;
}

.h365-landing .h365-mode .wp-block-columns {
	flex-direction: column;
	gap: 0.75rem;
	margin-block: 0;
}

.h365-landing .h365-mode .wp-block-column {
	flex-basis: auto !important;
	width: 100%;
}

.h365-landing .h365-mode .wp-block-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	text-align: left;
}

.h365-landing .h365-mode .wp-block-image img {
	width: 100%;
}

/* Nhóm video dạng thanh tab (thay mục gập, A10): landing.js tạo thanh tab (role=tablist) từ tiêu đề của từng khung;
 * khi chưa có JS các khung xếp dọc, mỗi khung có tiêu đề. */
.h365-landing .h365-tabs {
	margin-block: var(--wp--preset--spacing--40);
}

.h365-landing .h365-tab-panel__title {
	margin: 0 0 0.75rem;
	text-align: center;
}

.h365-landing .h365-tab-panel {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.h365-landing .h365-tabs.is-enhanced .h365-tab-panel__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.h365-landing .h365-tabs.is-enhanced .h365-tab-panel {
	margin-block: 0;
}

.h365-landing .h365-tabs.is-enhanced .h365-tab-panel[hidden] {
	display: none;
}

.h365-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0 auto var(--wp--preset--spacing--40);
	padding: 0 var(--wp--preset--spacing--30);
	max-width: 1200px;
}

.h365-tablist__tab {
	min-height: 44px;
	padding: 0 1.25rem;
	border: 2px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.h365-tablist__tab:hover {
	border-color: var(--wp--preset--color--border);
}

.h365-tablist__tab[aria-selected="true"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.h365-tablist__tab:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Nhóm tab trong nền tối: viền sáng, nút chọn nền sáng. */
.h365-landing .has-text-color .h365-tablist__tab[aria-selected="true"] {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Khối kêu gọi: Yêu cầu báo giá, Gọi, Zalo (health365/landing-cta) */
.h365-landing > .h365-landing-cta {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--wp--custom--gutter));
	max-width: 1200px;
	margin-inline: auto;
}

.h365-landing-cta {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--tint);
	border-radius: 24px;
	text-align: center;
}

.h365-landing-cta__title {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--xx-large);
}

.h365-landing-cta__text {
	margin: 0 auto 1rem;
	max-width: 640px;
}

.h365-landing-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1rem;
}

.h365-landing-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.h365-landing-cta__btn--buy {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.h365-landing-cta__btn--call {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.h365-landing-cta__btn--zalo {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
	.h365-landing h1.wp-block-heading {
		font-size: 2.25rem;
	}

	/* Video đầu trang: chữ nằm dưới video (không đè lên), video giữ tỉ lệ 16:9 (A9, không còn min-height ép khung gần vuông). */
	.h365-landing .wp-block-cover.h365-hero-video .wp-block-cover__inner-container {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.h365-tablist {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.25rem;
	}

	.h365-tablist__tab {
		flex: 0 0 auto;
		padding: 0 1rem;
	}

	.h365-landing-cta__btn {
		width: 100%;
	}
}