/* =============================================================================
   main.css — token, nền, layout, và các class dùng chung mọi section.
   CSS riêng của từng section nằm ở sections.css.

   Giá trị màu và cỡ lấy nguyên từ bản dựng tĩnh (src/theme/assets/css/), vốn lấy
   từ design/ban-do-hanh-phuc-website.dc.html.
   ========================================================================== */

/* ============ 1. TOKEN ============

   Dùng TÊN biến của Site Kit (--cba-*) chứ không phải tên của bản tĩnh
   (--rose, --plum...). Lý do: mu-plugin Site Kit in thêm một khối
   <style id="cba-design-tokens"> ở wp_head priority 20 — tức SAU file này — để
   đè ba màu thương hiệu bằng giá trị chủ site nhập trong CBA → Thông tin khách
   hàng. Đặt đúng tên thì chủ site đổi màu được ngay trong admin; đặt tên khác
   thì mất hẳn tính năng đó.

   BA BIẾN KHÔNG ĐƯỢC ĐẶT TAY: --cba-mist, --cba-primary-soft, --cba-line.
   design-tokens.php:52-55 TÍNH chúng từ màu thương hiệu rồi đè lên. Khai tay ở
   đây thì lúc mu-plugin bật/tắt tông nền sẽ nhảy.

   --cba-paper THÌ ĐẶT ĐƯỢC. Đã kiểm: design-tokens.php không inject biến này —
   nó chỉ dùng hằng PHP '#FBF9F5' để tính fallback tĩnh cho mist/line. Khối
   @supports của nó tính lại bằng var(--cba-paper) nên bám đúng giá trị dưới đây.
   Chỉ trình duyệt không hỗ trợ color-mix mới lệch, và #FBF9F5 với #fcf7f3 gần
   như không phân biệt được bằng mắt.                                        */

:root {
	/* Ba màu thương hiệu — chủ site đổi được trong admin. */
	--cba-primary: #b85068;   /* hồng rose: nút, liên kết, nhãn nhỏ */
	--cba-secondary: #8f3a52; /* mận: chân trang, dải nền đậm */
	--cba-accent: #8f3a52;    /* từ nhấn in nghiêng trong tiêu đề */

	/* Nền và mực. */
	--cba-paper: #fcf7f3;
	--cba-surface: #fff;
	--cba-ink: #2e2328;
	--cba-muted: #6b585d;
	--cba-muted-soft: #5c4b50;

	/* Sắc độ đỡ. Không suy ra từ màu thương hiệu mà giữ đúng giá trị thiết kế,
	   vì bản thiết kế đã được duyệt theo từng mã màu cụ thể. Đánh đổi: chủ site
	   đổi màu chủ đạo thì các sắc độ này không đi theo. */
	--cba-blush: #f3e1e5;
	--cba-rose-soft: #e6c7ce;
	--cba-rose-pale: #f0d3da;
	--cba-border-soft: #d9c3c7;
	--cba-hairline: #efe1dd;

	--cba-footer-text: #f0cdd5;
	--cba-footer-link: #fbeef1;
	--cba-footer-meta: #e0b3bd;
	--cba-footer-legal: #e6bcc5;

	/* Đổ bóng — bản tĩnh viết cứng 13 giá trị rải khắp file, gom lại ở đây.
	   Tên theo công dụng chứ không theo số đo, để chỗ dùng đọc ra ý đồ. */
	--cba-shadow-media: 0 16px 32px rgba(143, 58, 82, 0.16);
	--cba-shadow-card: 0 18px 40px rgba(143, 58, 82, 0.1);
	--cba-shadow-lift: 0 22px 44px rgba(143, 58, 82, 0.18);
	--cba-shadow-hero: 0 26px 52px rgba(143, 58, 82, 0.2);
	--cba-shadow-badge: 0 14px 30px rgba(0, 0, 0, 0.13);
	--cba-shadow-embed: 0 18px 36px rgba(0, 0, 0, 0.16);
	--cba-shadow-overlay: 0 24px 50px rgba(0, 0, 0, 0.3);
	--cba-shadow-featured: 0 18px 40px rgba(184, 80, 104, 0.16);

	/* Hình khối và bề ngang. */
	--cba-radius-card: 18px;
	--cba-radius-field: 12px;
	--cba-radius-pill: 999px;
	--cba-container: 1180px;
	--cba-gutter: 32px;

	/* Chữ. Site Kit cũng inject hai biến này theo lựa chọn font trong admin. */
	--cba-font-display: "Lora", Georgia, serif;
	--cba-font-body: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
	/* Cỡ đọc chính — đoạn văn / thẻ / danh sách. UI chrome (nav, meta) nhỏ hơn. */
	--cba-text: 15.5px;
	--cba-text-ui: 14.5px;
}

/* ============ 2. NỀN ============ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--cba-paper);
	font-family: var(--cba-font-body);
	font-size: 16px;
	color: var(--cba-ink);
	line-height: 1.65;
}

h1,
h2,
h3,
h4 {
	font-family: var(--cba-font-display);
	font-weight: 500;
	margin: 0 0 0.5em;
	line-height: 1.2;
}

p {
	margin: 0 0 1em;
	font-size: var(--cba-text);
	line-height: 1.75;
}

a {
	color: var(--cba-primary);
	text-decoration: none;
}

a:hover {
	color: var(--cba-secondary);
}

img {
	max-width: 100%;
	display: block;
}

ul,
ol {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

input,
select,
textarea,
button {
	font-family: inherit;
	font-size: inherit;
}

::selection {
	background: var(--cba-blush);
}

/* Vòng nét khi đi bằng bàn phím — thiết kế tĩnh không có, nhưng bỏ hẳn thì
   người dùng bàn phím lạc mất vị trí. */
:focus-visible {
	outline: 2px solid var(--cba-primary);
	outline-offset: 2px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============ 3. LAYOUT ============ */

.container {
	max-width: var(--cba-container);
	margin: 0 auto;
	padding: 0 var(--cba-gutter);
}

/* .cba-section là thẻ gốc mà MỌI section phải mang — Site Kit và các helper
   dựng sẵn đều trông vào nó. */
.cba-section {
	padding: 60px 0;
}

.cba-section--tight {
	padding: 40px 0;
}

.cba-section--blush {
	background: var(--cba-blush);
}

.cba-section--plum {
	background: var(--cba-secondary);
	color: #fff;
}

.cba-section--surface {
	background: var(--cba-surface);
}

.grid {
	display: grid;
	gap: 22px;
}

.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.split {
	display: grid;
	gap: 44px;
	align-items: center;
}

/* ============ 4. CLASS DÙNG CHUNG MỌI SECTION ============

   Sáu thứ dưới đây là hợp đồng với Site Kit: hàm cba_section_head() và
   cba_section_unavailable_notice() của mu-plugin in ra đúng những class này,
   nên theme buộc phải tạo hình cho chúng.                                    */

.cba-section-head {
	text-align: center;
	margin-bottom: 38px;
}

.cba-section-head__title {
	font-size: 32px;
	margin: 0 0 8px;
}

.cba-section-head__subtitle {
	color: var(--cba-muted);
	font-size: var(--cba-text);
	margin: 0;
	max-width: 640px;
	margin-inline: auto;
}

.cba-eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cba-primary);
	border: 1px solid var(--cba-rose-soft);
	border-radius: var(--cba-radius-pill);
	padding: 7px 16px;
	margin-bottom: 22px;
}

/* Biến thể không viền, dùng ở dải nền ảnh nơi viền bo trông nặng. */
.cba-eyebrow--plain {
	border: 0;
	padding: 0;
	margin-bottom: 14px;
}

.cba-btn {
	display: inline-block;
	padding: 15px 30px;
	border-radius: var(--cba-radius-pill);
	font-weight: 500;
	font-size: 15px;
	border: 1px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cba-btn--primary {
	background: var(--cba-primary);
	color: #fff;
}

.cba-btn--primary:hover {
	background: var(--cba-secondary);
	color: #fff;
}

.cba-btn--ghost {
	border-color: var(--cba-border-soft);
	color: var(--cba-muted-soft);
	background: transparent;
}

.cba-btn--ghost:hover {
	border-color: var(--cba-primary);
	color: var(--cba-primary);
}

/* Trên nền đậm (dải mận, dải có ảnh phủ) nút viền mảnh chìm mất. */
.cba-btn--light {
	background: #fff;
	color: var(--cba-secondary);
	font-weight: 600;
}

.cba-btn--block {
	display: block;
	width: 100%;
}

.cba-btn--sm {
	padding: 11px 22px;
	font-size: 14px;
}

/* Site Kit in class này khi thiếu plugin mà section cần (Fluent Forms, Tutor).
   Chỉ người có quyền sửa trang mới thấy. */
.cba-section-notice {
	background: var(--cba-blush);
	border: 1px dashed var(--cba-border-soft);
	border-radius: var(--cba-radius-field);
	padding: 16px 20px;
	font-size: 14px;
	color: var(--cba-muted-soft);
}

/* ============ 5. MẢNH GHÉP DÙNG LẠI NHIỀU SECTION ============ */

.card {
	background: var(--cba-surface);
	border: 1px solid var(--cba-hairline);
	border-radius: var(--cba-radius-card);
	padding: 28px;
}

.card__title {
	font-size: 20px;
	margin: 0 0 8px;
}

.card__text {
	font-size: var(--cba-text);
	line-height: 1.7;
	color: var(--cba-muted);
	margin: 0;
}

.media {
	border-radius: var(--cba-radius-card);
	overflow: hidden;
	box-shadow: var(--cba-shadow-media);
}

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

.embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--cba-radius-card);
}

.embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ticks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}

.ticks li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--cba-muted-soft);
}

.ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cba-primary);
}

/* Từ nhấn trong tiêu đề.
   cba_heading() của Site Kit bọc *từ* thành <em> TRẦN — không gắn class — nên
   phải nhắm theo ngữ cảnh chứ không theo class. Giới hạn trong tiêu đề để <em>
   thường trong thân bài vẫn chỉ nghiêng, không đổi màu. */
h1 em,
h2 em,
h3 em,
.cba-section-head__title em,
.accent {
	color: var(--cba-accent);
	font-style: italic;
}

/* ============ 6. TRƯỜNG NHẬP LIỆU ============

   Fluent Forms dựng markup riêng của nó, nhưng thừa hưởng các quy tắc dưới đây
   khi nằm trong .cba-section — nhờ vậy form nhúng không lạc tông với thiết kế. */

.cba-section input[type="text"],
.cba-section input[type="email"],
.cba-section input[type="tel"],
.cba-section input[type="url"],
.cba-section input[type="number"],
.cba-section input[type="password"],
.cba-section select,
.cba-section textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--cba-hairline);
	border-radius: var(--cba-radius-field);
	background: var(--cba-surface);
	color: var(--cba-ink);
}

.cba-section textarea {
	min-height: 120px;
	resize: vertical;
}

.form-field {
	margin-bottom: 18px;
}

.form-field__label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--cba-muted-soft);
	margin-bottom: 7px;
}

.form-note,
.static-notice {
	font-size: 13.5px;
	color: var(--cba-muted);
	background: var(--cba-blush);
	border-radius: var(--cba-radius-field);
	padding: 12px 16px;
	margin: 16px 0 0;
}

/* ============ 7. ĐẦU TRANG ============ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(252, 247, 243, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--cba-hairline);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	padding-bottom: 16px;
}

.brand {
	font-family: var(--cba-font-display);
	font-weight: 600;
	font-size: 23px;
	letter-spacing: 0.2px;
	color: var(--cba-secondary);
	line-height: 1;
}

.brand em {
	font-style: italic;
}

/* ul.site-nav + .site-header__actions nằm cạnh nhau — thiếu flex thì
   Tài khoản / Đặt lịch rơi xuống hàng dưới (đúng lỗi trên LAN live). */
.site-header__nav {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: nowrap;
}

.site-nav {
	display: flex;
	gap: 26px;
	align-items: center;
	font-size: 14.5px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	position: relative;
	padding: 4px 0;
	color: var(--cba-muted-soft);
}

.site-nav a:hover {
	color: var(--cba-primary);
}

/* WordPress tự gắn các class current-* cho mục đang xem. */
.site-nav .current-menu-item > a::after,
.site-nav .current-menu-ancestor > a::after,
.site-nav .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	background: var(--cba-primary);
	border-radius: 2px;
}

/* Menu con của mục "Chia sẻ". */
.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--cba-surface);
	border: 1px solid var(--cba-hairline);
	border-radius: var(--cba-radius-field);
	box-shadow: var(--cba-shadow-card);
	padding: 8px 0;
	margin: 0;
	list-style: none;
	display: none;
	z-index: 60;
}

.site-nav li {
	position: relative;
}

.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
	display: block;
}

.site-nav .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.site-header__account {
	font-size: 14.5px;
	color: var(--cba-muted-soft);
}

.nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--cba-border-soft);
	border-radius: var(--cba-radius-field);
	padding: 10px 11px;
	cursor: pointer;
	color: var(--cba-muted-soft);
}

/* Ba vạch dựng từ MỘT phần tử: vạch giữa là chính nó, hai vạch ngoài là
   ::before và ::after. Ít thẻ hơn trong markup, mà vẫn ra đúng biểu tượng. */
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentcolor;
	border-radius: 2px;
}

.nav-toggle__bar {
	position: relative;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bar::before {
	top: -6px;
}

.nav-toggle__bar::after {
	top: 6px;
}

/* ============ 8. CHÂN TRANG ============ */

.site-footer {
	background: var(--cba-secondary);
	color: var(--cba-footer-text);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 44px;
	padding-top: 60px;
	padding-bottom: 32px;
}

/* Chưa có bài viết nào thì chân trang chỉ còn hai cột — xem footer.php. */
.site-footer__inner--compact {
	grid-template-columns: 1.3fr 1fr;
}

.site-footer__brand-name {
	font-family: var(--cba-font-display);
	font-weight: 600;
	font-size: 22px;
	color: #fff;
	margin-bottom: 10px;
}

.site-footer__tagline {
	font-size: var(--cba-text);
	line-height: 1.7;
	color: var(--cba-footer-text);
	margin: 0 0 20px;
	max-width: 320px;
}

.site-footer__social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--cba-footer-link);
	font-size: 13px;
}

.site-footer__title {
	font-family: var(--cba-font-display);
	font-size: 16px;
	color: #fff;
	margin: 0 0 16px;
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	font-size: 14px;
}

.site-footer__list a {
	color: var(--cba-footer-link);
}

.site-footer__meta {
	display: block;
	color: var(--cba-footer-meta);
	font-size: 12.5px;
	margin-top: 3px;
}

.site-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding: 20px 0 28px;
	font-size: 13px;
	color: var(--cba-footer-legal);
	text-align: center;
}

/* ============ 9. RESPONSIVE ============

   Ba mốc, theo đúng bản thiết kế đã duyệt: 1024 / 900 / 768. Lệch với quy ước
   hai mốc (900/680) của Site Kit, và lệch có chủ ý — theme này phục vụ một bản
   thiết kế cụ thể đã nghiệm thu, không phải là section đóng góp ngược vào core.
   Mốc 900 chỉ dùng cho một việc: giấu ảnh chân dung ở hero trang Webinar, đúng
   như bản gốc (site cũ dùng class hide-for-small).                          */

@media (max-width: 1024px) {
	:root {
		--cba-gutter: 24px;
	}

	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
	}

	.cba-section-head__title {
		font-size: 28px;
	}
}

@media (max-width: 768px) {
	:root {
		--cba-gutter: 18px;
	}

	.cba-section {
		padding: 40px 0;
	}

	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr;
	}

	.split {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.cba-section-head__title {
		font-size: 25px;
	}

	.site-header__inner {
		position: relative;
	}

	/* Menu gập lại sau nút. */
	.nav-toggle {
		display: inline-block;
		order: 2;
	}

	/* Ở bề ngang này thanh đầu trang chỉ đủ chỗ cho thương hiệu, nút menu và một
	   nút hành động. Liên kết Tài khoản vẫn nằm trong menu gập, nên ẩn nó ở đây
	   là giấu bớt chứ không cắt mất đường đi. */
	.site-header__account {
		display: none;
	}

	/* contents: đưa ul + actions lên làm con của __inner để CTA đứng cạnh
	   nút hamburger; JS gắn site-nav--open lên #site-nav (wrapper). */
	.site-header__nav {
		display: contents;
	}

	.site-header__actions {
		order: 1;
		gap: 10px;
	}

	.brand {
		font-size: 20px;
	}

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--cba-surface);
		border-bottom: 1px solid var(--cba-hairline);
		box-shadow: 0 16px 30px rgba(46, 35, 40, 0.12);
		padding: 8px var(--cba-gutter) 16px;
		z-index: 60;
	}

	.site-header__nav.site-nav--open .site-nav {
		display: flex;
	}

	.site-nav a {
		padding: 12px 0;
	}

	/* Trên di động menu con hiện thẳng, không cần rê chuột. */
	.site-nav .sub-menu {
		display: block;
		position: static;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 16px;
		background: transparent;
	}
}

/* ============ 10. TRANG ĐƠN VÀ 404 ============ */

.cba-singular__title {
	font-size: 32px;
	margin: 0 0 24px;
}

.cba-singular__content {
	font-size: var(--cba-text);
	line-height: 1.75;
}

.cba-singular__content > :last-child {
	margin-bottom: 0;
}

.error-page {
	text-align: center;
	padding: 40px 0 20px;
}

.error-page__code {
	font-family: var(--cba-font-display);
	font-size: 72px;
	line-height: 1;
	color: var(--cba-rose-pale);
	margin: 0 0 8px;
}

.error-page__title {
	font-size: 30px;
	margin: 0 0 12px;
}

.error-page__lead {
	color: var(--cba-muted);
	max-width: 520px;
	margin: 0 auto 28px;
}