/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

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

/* Font toàn site: Roboto, self-host (frank-quyet-dinh.md, "Font toàn site:
 * Roboto", Tiger chỉ định 2026-08-14 tối) — thay Lato mặc định Flatsome vì
 * không tối ưu tiếng Việt. 2 file woff2 lấy đúng subset "vietnamese" +
 * "latin" nguồn Google Fonts API (KHÔNG gọi CDN Google lúc runtime — đã
 * tải file .woff2 thật về, tự host tại assets/fonts/). 2 subset này BỔ
 * SUNG cho nhau (không trùng glyph): "vietnamese" thiếu ă/â/đ/ê/ô/ơ/ư
 * dạng đơn không dấu vì đã có sẵn trong "latin" (Latin-1), "latin" thiếu
 * toàn bộ khối tổ hợp 2 dấu (ẮẰẲẴẶ, ẤẦẨẪẬ, Ế/Ề/Ể/Ễ/Ệ...) vì nằm ở khối
 * Vietnamese mở rộng U+1EA0-1EF9 chỉ có trong "vietnamese" — bắt buộc
 * nạp CẢ HAI file mới đủ bảng chữ tiếng Việt, đã verify bằng fonttools
 * (hợp cmap 2 file phủ đủ toàn bộ chữ cái + dấu tiếng Việt, xem nhật ký).
 * Cả 2 subset đều là font biến thiên (variable font) — cùng 1 file phục
 * vụ đúng 2 weight 400/700 qua 2 khai báo @font-face trỏ chung 1 URL,
 * đúng cách chính Google Fonts API tự sinh (không phải lỗi trùng lặp).
 */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/roboto-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/roboto-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/roboto-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/roboto-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}Connection to 143.198.204.225 closed.


/*
 * SEOM11 — CSS bổ sung cho Flatsome Child (task #16, Theo).
 * Ported từ buiducliem-child/assets/seom11.css (child theme Twenty
 * Twenty-Five cũ, không dùng nữa sau khi đổi nền Flatsome) + bổ sung mới
 * cho featured card trang chủ và nút email trang Liên hệ.
 * Không thêm font ngoài, không thêm JS nặng — giữ ngân sách CWV.
 */

.seom11-breadcrumb {
	font-size: 0.875rem;
	margin-bottom: 1.5rem;
	opacity: 0.75;
}
.seom11-breadcrumb a {
	text-decoration: underline;
	color: inherit;
}
.seom11-breadcrumb .sep {
	margin: 0 0.35em;
}

/* CTA nổi bật trong menu header + nút CTA thân trang (dòng 3 ma trận Leo) */
.wp-block-button.seom11-cta .wp-block-button__link,
#Main_Nav .seom11-cta > a,
#Mobile_Nav .seom11-cta > a {
	background: #111;
	color: #fff;
	border-radius: 999px;
	padding: 0.5em 1.3em;
}
#Main_Nav .seom11-cta > a:hover,
#Mobile_Nav .seom11-cta > a:hover {
	background: #333;
	color: #fff;
}

.seom11-avatar-monogram,
.seom11-avatar-monogram-lg,
.seom11-author-avatar.seom11-avatar-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #111;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.03em;
	border-radius: 50%;
}
.seom11-avatar-monogram-lg {
	width: 120px;
	height: 120px;
	font-size: 1.75rem;
	aspect-ratio: 1 / 1;
}

.seom11-author-box {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #ddd;
}
.seom11-author-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex: none;
	aspect-ratio: 1 / 1;
	font-size: 0.9rem;
}
.seom11-author-name {
	font-weight: 700;
	text-decoration: none;
	color: inherit;
}
.seom11-author-role,
.seom11-author-exp {
	margin: 0.15em 0 0;
	font-size: 0.9rem;
	opacity: 0.8;
}

.seom11-doc-them ul {
	padding-left: 1.2rem;
}

.seom11-disclosure {
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

.seom11-coming-soon {
	opacity: 0.65;
}
.seom11-coming-soon em {
	font-style: italic;
	font-size: 0.85em;
}

/* Khối nổi bật trang chủ -> Trụ A (dòng 6 ma trận Leo) */
a.seom11-featured-card {
	display: block;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 1.5rem 1.75rem;
	margin: 1.5rem 0 2rem;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.seom11-featured-card:hover {
	border-color: #111;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
a.seom11-featured-card h2 {
	margin-top: 0;
}
.seom11-featured-card__cta {
	display: inline-block;
	margin-top: 0.75rem;
	font-weight: 700;
	text-decoration: underline;
}

/* Nút email trang Liên hệ — trạng thái trước khi JS gán href (không href =
   không phải link, không dead "#") */
a.seom11-contact-mail {
	display: inline-block;
	background: #111;
	color: #fff;
	border-radius: 6px;
	padding: 0.7em 1.4em;
	text-decoration: none;
	font-weight: 700;
	cursor: pointer;
}
a.seom11-contact-mail:hover {
	background: #333;
}

/* Bảng trong bài Trụ A — dùng lại style mặc định wp-block-table của core,
   chỉ chỉnh khoảng cách/viền cho dễ đọc trên nền Flatsome.
   .seom11-table-scroll: task #21, dựng layout UX Builder — bảng chuyển
   từ <figure class="wp-block-table"> sang <div class="seom11-table-scroll"
   style="overflow-x:auto"> (aria-uxbuilder-layout.md dòng 248,
   aria-uiux-flatsome.md dòng 70, chống tràn ngang bảng nhiều cột trên
   mobile) — thêm selector song song để không mất style cũ. */
.wp-block-table table,
.seom11-table-scroll table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table th,
.wp-block-table td,
.seom11-table-scroll th,
.seom11-table-scroll td {
	border: 1px solid #ddd;
	padding: 0.6em 0.8em;
	text-align: left;
	vertical-align: top;
}
.wp-block-table th,
.seom11-table-scroll th {
	background: #f7f7f7;
}

/* FAQ dạng <details> trong Trụ A */
#content details {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 0.9em 1.1em;
	margin-bottom: 0.75rem;
}
#content details summary {
	font-weight: 700;
	cursor: pointer;
}
#content details p {
	margin: 0.6em 0 0;
}

/* Task #21 — dựng layout UX Builder (aria-uxbuilder-layout.md).
   Avatar About bo tròn — class do Aria chỉ định ở [ux_image class=
   "seom11-avatar-round"], Flatsome đặt class này lên div .img bọc ngoài,
   không lên chính thẻ <img>. */
.img.seom11-avatar-round,
.img.seom11-avatar-round .img-inner,
.img.seom11-avatar-round img {
	border-radius: 50%;
	overflow: hidden;
}

/* Hero mỗi trang — khoảng cách dưới cho ảnh đại diện/OG khi xếp chồng
   trên mobile (span__sm="12"), tránh ảnh dính sát khối bên dưới. */
.seom11-hero .col + .col {
	margin-top: 0;
}
@media (max-width: 549px) {
	.seom11-hero .row > .col {
		margin-bottom: 1.5rem;
	}
	.seom11-hero .row > .col:last-child {
		margin-bottom: 0;
	}
}