/*
Theme Name: Flatsome Child
Description: Child theme for Flatsome (hodaface)
Author: Hoda Media
Template: flatsome
Version: 1.1.0
Text Domain: flatsome-child
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Màu thương hiệu lấy từ logo: cam #FAA41A làm màu nhấn duy nhất. Chữ, xám, nền theo bảng màu apple.com
   (#1d1d1f / #6e6e73 / #f5f5f7). Cam dùng chữ tối để đủ tương phản. */
:root {
	--hf-orange: #FAA41A;
	--hf-ink: #1d1d1f;
	--hf-gray: #6e6e73;
	--hf-soft: #fff7ea;
	--hf-surface: #f5f5f7;
	--hf-orange-ink: #9a5b00; /* Cam đậm cho chữ trên nền sáng (đủ tương phản 4.5:1). */
	--hf-ease: 200ms ease-out;
}

/* Chữ toàn site kiểu apple.com: font hệ thống (theme.json), 17px, chữ hơi khít, tiêu đề đậm 600. */
body {
	color: var(--hf-ink);
	font-size: 17px;
	letter-spacing: -.01em;
	-webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4) {
	font-weight: 600;
	letter-spacing: -.015em;
}

/* Header kiểu thanh điều hướng Apple: nền trắng mờ kính, đường kẻ mảnh, chữ menu nhỏ. */
/* Thanh trên cùng (hotline): nền primary #1d1d1f trong theme.json, chữ nhỏ như dải thông báo của Apple. */
.fs-block-header .fs-block-header-row.has-primary-background {
	font-size: 12px;
}
.fs-block-header .fs-block-header-main {
	--fs-height: 72px;
	--sticky-height: 64px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
.fs-block-header-main .fs-nav > ul > li > a,
.fs-block-header-main .fs-nav-item > a {
	color: rgba(0, 0, 0, .8);
	font-size: 14px;
	font-weight: 400;
}
/* Nút cam trên header: bo tròn hẳn, chữ tối. */
.fs-block-header-main .fs-block-button a,
.fs-block-header-main .fs-button {
	border-radius: 980px !important;
	color: var(--hf-ink) !important;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

/* Landing trang chủ: assets/css/landing*.css (chỉ nạp ở trang chủ, xem functions.php). */

/* ---------- Form dùng thử (CF7), dùng ở trang chủ và trang Liên hệ ---------- */
/* Form CF7: 2 cột cho 4 ô đầu, ghi chú và nút chiếm trọn dòng. */
.hodaface-form > p {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 0;
}
.hodaface-form br {
	display: none;
}
.hodaface-form label {
	display: block;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}
.hodaface-form label:nth-of-type(5),
.hodaface-form .wpcf7-submit,
.hodaface-form .wpcf7-spinner {
	grid-column: 1 / -1;
}
.hodaface-form input:not([type="submit"]),
.hodaface-form select,
.hodaface-form textarea {
	width: 100%;
	min-height: 48px;
	margin: 6px 0 0;
	border: 1px solid #d2d2d7;
	border-radius: 12px;
	box-shadow: none;
	font-size: 16px;
	font-weight: 400;
}
.hodaface-form textarea {
	height: 84px;
}
.hodaface-form input:focus,
.hodaface-form select:focus,
.hodaface-form textarea:focus {
	border-color: var(--hf-orange-ink);
	box-shadow: 0 0 0 3px rgba(250, 164, 26, .25);
}
.hodaface-form .wpcf7-submit {
	width: 100%;
	min-height: 50px;
	margin: 4px 0 0;
	border-radius: 980px;
	background: var(--hf-orange);
	color: var(--hf-ink);
	font-size: 17px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
}
.hodaface-form .wpcf7-submit:hover {
	background: #ffb53d;
}
.hodaface-form .wpcf7-spinner {
	justify-self: center;
	margin: 0;
}

.hodaface-form :focus-visible {
	outline: 3px solid var(--hf-orange);
	outline-offset: 2px;
}
@media (max-width: 480px) {
	.hodaface-form > p {
		grid-template-columns: 1fr;
	}
}

/* ---------- Footer kiểu apple.com: nền xám nhạt, chữ nhỏ xám, link xám đậm gạch chân khi rê chuột ---------- */
/* Bỏ khoảng block gap 28px trên footer: không thì hở một dải trắng dưới khối nền đen cuối trang chủ. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}
.hodaface-footer {
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: -.01em;
}
.hodaface-footer p {
	margin: 0 0 12px;
}
.hodaface-footer a {
	color: #424245 !important;
	text-decoration: none;
}
.hodaface-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hodaface-footer__brand {
	color: var(--hf-ink);
	font-size: 17px;
	font-weight: 600;
}
.hodaface-footer__title {
	color: var(--hf-ink);
	font-size: 12px;
	font-weight: 600;
}
.hodaface-footer__copy {
	margin-top: 24px !important;
	padding-top: 16px;
	border-top: 1px solid #d2d2d7;
}

/* Thanh tiêu đề trang con (pattern page-header của Flatsome): nền màu đặt padding-inline = 0 nên tiêu đề dính mép trên điện thoại. */
.fs-block-section:has(.fs-block-post-title) {
	padding-inline: var(--wp--style--root--padding-left);
}

/* Bài viết: Simple Author Box đã hiển thị tác giả (có link trang tác giả), ẩn khối tác giả trùng của template single Flatsome. */
.single-post .fs-block-flex:has(> .wp-block-avatar):has(.wp-block-post-author-biography) {
	display: none;
}

/* Trang chuyên mục (templates/category.html, category-demo.html): H1 + đoạn giới thiệu, lưới thẻ bài.
   Demo đặt phần giới thiệu dài (mô tả chuyên mục) ở cuối trang, các chuyên mục khác đặt ở đầu. */
.hf-archive { padding: 40px 16px 60px; }
.hf-archive .hf-archive-title { margin: 0 0 12px; font-size: clamp(32px, 4.6vw, 48px); line-height: 1.12; }
/* Đoạn giới thiệu canh trái thẳng hàng tiêu đề (layout constrained tự canh giữa khối hẹp hơn contentSize). */
.hf-archive .hf-archive-intro { max-width: 820px; margin: 0 0 40px max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important; color: var(--hf-gray); font-size: 19px; line-height: 1.5; }
.hf-archive .hf-archive-intro p { margin: 0; }
.hf-archive .hf-archive-intro a { color: var(--hf-orange-ink); text-decoration: underline; text-underline-offset: 3px; }
.hf-card-grid { gap: 20px; }
/* Thẻ bài kiểu thẻ Apple Newsroom: bo 18px, không viền, bóng mềm, phóng nhẹ khi rê chuột. */
.hf-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0, 0, 0, .08); transition: box-shadow var(--hf-ease), transform var(--hf-ease); }
.hf-card:hover { box-shadow: 2px 8px 24px rgba(0, 0, 0, .14); transform: scale(1.01); }
.hf-card .wp-block-post-featured-image { margin: 0; }
.hf-card .wp-block-post-featured-image img { display: block; width: 100%; object-fit: cover; }
.hf-card .hf-card-title { margin: 18px 20px 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.hf-card .hf-card-title a { color: var(--hf-ink); text-decoration: none; }
.hf-card .hf-card-excerpt { margin: 8px 20px 20px; font-size: 15px; line-height: 1.5; color: var(--hf-gray); }
.hf-card .hf-card-excerpt p { margin: 0; }
.hf-card .wp-block-post-excerpt__more-text { margin: 10px 0 0; }
.hf-card .wp-block-post-excerpt__more-link { color: var(--hf-orange-ink); font-weight: 700; text-decoration: none; }
.hf-card .hf-card-meta { margin: 4px 20px 18px; font-size: 13px; color: var(--hf-gray); }
.hf-card .hf-card-meta p { margin: 0; }
.hf-card .hf-card-meta .wp-block-post-excerpt__more-text { display: none; }
.hf-archive-pages { margin-top: 36px; gap: 8px; }
/* Mô tả chuyên mục rộng bằng lưới thẻ (contentSize 1080px, thẳng hàng header), không thu hẹp riêng. */
.hf-archive .hf-archive-text { margin-top: 60px; }

/* Header dính khi cuộn: Flatsome để nền trắng 90% không làm mờ, chữ phía sau lộ rõ. Dùng kính mờ như thanh điều hướng Apple. */
.fs-block-header.is-stuck .fs-block-header-main {
	background: rgba(255, 255, 255, .8) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
/* Logo HodaFace dạng ngang (tỉ lệ ~5:1): rộng 250px để chữ đủ lớn (cao ~49px); điện thoại 170px (cao ~33px). */
.fs-block-header .fs-block-header-main {
	--logo-width: 250px !important;
	--sticky-logo-width: 210px !important;
}
@media (max-width: 849px) {
	.fs-block-header .fs-block-header-main {
		--logo-width: 170px !important;
		--sticky-logo-width: 160px !important;
	}
}
/* Màn hẹp: bỏ canh đều hai bên của style nội tuyến trong bài (tạo khoảng trắng lớn giữa các chữ). */
@media (max-width: 600px) {
	.noi-dung-bai-viet p,
	.noi-dung-bai-viet li {
		text-align: left !important;
	}
}

/* Mục lục thu gọn trên điện thoại (functions.php: hodaface_child_toc_toggle). */
.hf-toc-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0 !important;
	cursor: pointer;
}
.hf-toc-title::after {
	content: "+";
	font-size: 22px;
	line-height: 1;
}
.hf-toc-title[aria-expanded="true"] {
	margin-bottom: 15px !important;
}
.hf-toc-title[aria-expanded="true"]::after {
	content: "−";
}

/* Menu chính: tiêu đề nhóm trong mục Giải pháp (tools/site-src/build-menu.py). */
.fs-nav-submenu .hf-nav-heading {
	margin: 0;
	padding: 10px 0 4px;
	color: var(--hf-gray);
	font-size: 12px;
	font-weight: 600;
}
.fs-nav-submenu .fs-nav-item:has(.hf-nav-heading) ~ .fs-nav-item:has(.hf-nav-heading) .hf-nav-heading {
	margin-top: 8px;
	border-top: 1px solid #ececec;
	padding-top: 14px;
}
/* Desktop: 2 nhóm thành 2 cột (Theo sự kiện | Cho đối tác) để khung thả xuống thấp, dễ quét. */
@media (min-width: 850px) {
	.fs-nav-submenu__content:has(.hf-nav-heading) {
		display: grid;
		grid-template-rows: repeat(6, auto);
		grid-auto-flow: column;
		grid-auto-columns: minmax(200px, auto);
		column-gap: 8px;
	}
	.fs-nav-submenu .fs-nav-item:has(.hf-nav-heading) ~ .fs-nav-item:has(.hf-nav-heading) .hf-nav-heading {
		margin-top: 0;
		border-top: 0;
		padding-top: 10px;
	}
}
/* Ngăn kéo mobile: tiêu đề nhóm thẳng hàng với mục con; nút Dùng thử chữ tối trên nền cam cho dễ đọc. */
.fs-nav.is-accordion .hf-nav-heading {
	padding-inline: 16px;
}
.hf-drawer-cta,
.hf-drawer-cta .fs-button__text {
	color: #1f1f1f !important;
}