/*
 * Bổ sung nhỏ ngoài theme.json (G2).
 *
 * theme.json xử lý hầu hết style qua token, nhưng có 1 quy tắc responsive
 * (giãn dòng thân bài khác nhau máy tính/điện thoại — bo-thiet-ke-token.md
 * mục 4) chưa đưa vào theme.json ở bản này: cú pháp "responsive styling"
 * mới của WP 7.1 chưa được xác thực kỹ (mới công bố, tài liệu còn ít) nên
 * làm bằng CSS thường cho chắc, đúng tinh thần "chuẩn nghiên cứu chuyên
 * môn" — không đoán cú pháp khi chưa chắc.
 */

/* Giãn dòng thân bài: 1.7 máy tính (giá trị mặc định trong theme.json),
   1.6 trên điện thoại (đo thật: 390px ~41 ký tự/dòng cần giãn dòng hẹp hơn). */
@media (max-width: 599px) {
	:where(p, li) {
		line-height: 1.6;
	}
}

/* ink-faint chỉ đủ tương phản trên nền giấy/thẻ trắng (paper/raised).
   Trên nền tint (moss-tint/gold-tint/clay-tint) phải dùng ink-soft —
   quy tắc này ghi ở bo-thiet-ke-token.md, không ép được bằng CSS thuần,
   nhắc lại ở đây để ai chỉnh theme sau này biết mà tránh. */

/* === G3: skip link (parts/header.html) ===
   Ẩn ngoài màn hình mặc định, hiện rõ ràng khi được focus bằng bàn phím
   (Tab) — đây là phần tử focus ĐẦU TIÊN của trang, đặt trước cả <header>.
   Đích #main-content là anchor gắn trên thẻ <main> ở mọi template. */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	transform: translateY(-100%);
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--moss-deep);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--meta);
}

.skip-link:focus {
	transform: translateY(0);
}

/* === G3: cỡ chạm tối thiểu 44×44px cho menu header + link 7 kênh footer ===
   Mặc định padding của wp:navigation-link không đảm bảo đủ cao, ép rõ bằng
   CSS thay vì phụ thuộc mặc định (có thể đổi giữa các bản WordPress). */
.site-header .wp-block-navigation-item > a,
.site-footer .wp-block-navigation-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* Footer không dùng position sticky/fixed ở bất kỳ breakpoint nào — không
   thanh dính trên điện thoại (yêu cầu "Xong khi" của G3, so-tay-thi-cong.md). */
.site-footer {
	position: static;
}

/* === G4: trang chủ — hero 2 lối rẽ (templates/front-page.html) ===
   layout flex + flexWrap của core/group đã tự xếp lại theo chiều dọc khi
   hết chỗ — vì khối chữ (.hero-text) nằm TRƯỚC khối ảnh (.hero-image)
   trong HTML, trên điện thoại chữ luôn hiện trước, ảnh hiện sau, đúng yêu
   cầu "Xong khi" của G4. 2 nút CTA đã ép xếp dọc bằng thuộc tính
   orientation:vertical của core/buttons ngay trong block markup, không
   cần CSS riêng. */
.hero {
	padding: 2.5rem 0;
}

.hero-text {
	flex: 1 1 320px;
	min-width: 280px;
}

.hero-image {
	flex: 0 1 320px;
}

.hero-image img {
	max-width: 100%;
	height: auto;
}

.pillars {
	padding: 1rem 0 3rem;
}

/* === G15: icon cho 3 đầu mục "Ba mảng nhỏ" ở trang chủ ===
   Icon SVG thật lấy từ bộ "Material Symbols" của Google (miễn phí, giấy
   phép Apache 2.0), nhúng trực tiếp inline (không dùng icon-font/CDN
   ngoài — đúng nguyên tắc theme tự chứa, không phụ thuộc mạng ngoài lúc
   tải trang). Mỗi icon nằm trong khung tròn nền nhạt (*-tint) + icon màu
   đậm tương ứng, đổi màu theo bộ nhận diện thay vì màu mặc định của
   Google — mỗi mảng 1 màu riêng để dễ phân biệt bằng mắt:
   - Học Mà Ghi (edit_note) → gold: màu ấm, gợi "ghi chép/tri thức".
   - Chuyện Cây Cối (potted_plant) → moss: màu xanh, khớp nghĩa đen.
   - Dùng Rồi Mới Nói (reviews) → clay: màu đất nung, tách biệt rõ với
     2 icon còn lại, hợp giọng "nói thẳng, không tô hồng". */
.pillar-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	margin-bottom: 0.75rem;
}

.pillar-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.pillar-icon--gold {
	background-color: var(--wp--preset--color--gold-tint);
	color: var(--wp--preset--color--gold);
}

.pillar-icon--moss {
	background-color: var(--wp--preset--color--moss-tint);
	color: var(--wp--preset--color--moss);
}

.pillar-icon--clay {
	background-color: var(--wp--preset--color--clay-tint);
	color: var(--wp--preset--color--clay);
}

/* === G5: lề trái/phải chung cho mọi trang (chuyên mục, tìm kiếm, 404,
   bài viết, trang tĩnh...) — tránh chữ dính sát mép màn hình điện thoại.
   Gộp về #main-content một chỗ duy nhất thay vì lặp lại padding trái/phải
   ở từng khối (.hero/.pillars/.archive-header chỉ còn giữ padding trên/dưới
   riêng của chúng, xem 2 rule ở trên đã bỏ padding trái/phải). */
#main-content {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.archive-header {
	padding: 2rem 0 1rem;
}

/* === G12: header không căn giữa theo cột nội dung trên máy tính ===
   Lỗi thật phát hiện khi lần đầu dựng WordPress thật để xem bằng mắt
   (trước giờ chỉ kiểm bằng lint/đếm thẻ, chưa từng render thật — xem
   NHẬT KÝ G12). parts/header.html trước đây dùng layout "flex" trực
   tiếp trên .site-header nên khối này KHÔNG được WordPress tự canh lề
   theo contentSize (40rem) như phần thân bài và footer — kết quả:
   header dính sát 2 mép màn hình trong khi nội dung nằm giữa, lệch
   nhau rất rõ trên màn hình rộng. Đã bọc .site-header bằng layout
   "constrained" (giống .site-footer vốn đã đúng từ đầu) và dồn hàng
   tiêu đề + menu vào .site-header__row (layout "flex" riêng, chỉ lo
   sắp xếp trái/phải, không lo canh lề). */
.site-header {
	padding-block: 1.5rem;
}

/* Không dùng mono cho câu tiếng Việt (bo-thiet-ke-token.md) — dòng phụ đề
   chuyên mục (term-description) là câu tiếng Việt nên giữ font thường,
   chỉ chỉnh màu dịu hơn tiêu đề để phân cấp thị giác. */
.archive-header .wp-block-term-description {
	color: var(--wp--preset--color--ink-soft);
}

/* Nút "Tìm" trong ô tìm kiếm (search.html, 404.html) là 1 control rời rạc
   nên vẫn tính vào yêu cầu 44px — khác với link chữ nằm giữa câu văn
   (không tính, theo đúng ngoại lệ "inline link" của WCAG 2.2 SC 2.5.8). */
.wp-block-search__button {
	min-height: 44px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* === G6: kbd (phím tắt) trong template "Bài học kỹ thuật" ===
   Dùng thẻ <kbd> ngữ nghĩa — định dạng "Bàn phím" có sẵn trong thanh công
   cụ block editor của WordPress lõi (More > Keyboard input), không cần
   block/plugin riêng nào để tạo ra thẻ này. */
kbd {
	display: inline-block;
	padding: 0.1rem 0.4rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 0.875em;
	line-height: 1.4;
	background: var(--wp--preset--color--sunken);
	/* G9: đổi viền từ line-strong (2,80:1 trên nền sunken) sang ink-soft
	   (6,1:1) — line-strong không đủ 3:1 theo WCAG 1.4.11 (Non-text
	   Contrast) khi dùng làm viền có ý nghĩa (hình dạng phím bấm), phát
	   hiện lúc đo lại contrast toàn bộ ở G9. */
	border: 1px solid var(--wp--preset--color--ink-soft);
	border-radius: 0.2rem;
	box-shadow: 0 1px 0 var(--wp--preset--color--ink-soft);
}

/* === G6: mục lục tự động (templates/single-ky-thuat.html + assets/js/toc.js) ===
   JS chỉ nạp trên bài dùng template "Bài học kỹ thuật" (điều kiện enqueue
   trong functions.php) — quét thẻ h2 trong nội dung bài, tự gắn id và
   điền link vào #muc-luc. Bài không có JS (hoặc không có h2 nào) thì
   khối #muc-luc rỗng tự ẩn, không để lại khoảng trắng xấu. */
.toc__list:empty {
	display: none;
}

.toc__list ol {
	margin: 0;
	padding-left: 1.25rem;
}

.toc__list a {
	/* G9: ép đủ 44px — đây là link điều hướng thật (nhảy tới mục), không
	   phải link nằm giữa câu văn, nên không thuộc ngoại lệ "inline link"
	   của WCAG 2.2 SC 2.5.8 (đúng cách phân loại đã áp dụng nhất quán từ
	   G3: menu/nút = 44px, link giữa câu văn = miễn). */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.25rem 0;
}

/* === G6: nhãn series (patterns/series-label.php) === */
.series-label {
	display: inline-flex;
	width: fit-content;
	padding: 0.25rem 0.75rem;
	background: var(--wp--preset--color--moss-tint);
	color: var(--wp--preset--color--moss-deep);
	border-radius: 999px;
}

/* === G6: điều hướng series (patterns/series-navigation.php) — link tự
   viết bằng PHP (không phải block core) nên ép 44px riêng, cùng quy tắc
   với điều hướng menu header/footer ở G3. */
.series-navigation__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.series-navigation__link--next {
	margin-left: auto;
	text-align: right;
}

/* === G8: khối lưu ý (callout) — patterns/callout.php === */
.callout {
	background: var(--wp--preset--color--gold-tint);
	border-left: 3px solid var(--wp--preset--color--gold);
	border-radius: 0.25rem;
	padding: 1rem 1.25rem;
}

.callout p:last-child {
	margin-bottom: 0;
}

/* === G8: dải số liệu công khai (patterns/dai-so-lieu.php) ===
   Mặc định 5 ô tự xuống dòng 2-2-1 trên điện thoại nhờ flex-wrap, không
   cần code riêng thêm. `.stat-item--hide-mobile` là lớp CSS TUỲ CHỌN —
   user tự gắn cho đúng 1 ô (qua "Lớp CSS bổ sung" trong Site Editor) nếu
   muốn ép gọn về đúng 2×2 mỗi quý, tuỳ ô nào ít quan trọng nhất quý đó;
   xem ghi chú đầy đủ trong pattern PHP. */
.stats-strip {
	gap: 1.5rem;
}

.stat-item {
	flex: 1 1 140px;
}

.stat-item__value {
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--moss-deep);
}

.stat-item__label {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 599px) {
	.stat-item {
		flex: 0 1 calc(50% - 0.75rem);
	}

	.stat-item--hide-mobile {
		display: none;
	}
}

/* === G9: .screen-reader-text (tiêu chí #18 trong bộ 18 tiêu chí
   accessibility, `nen-tang-theme-wordpress.md`) — đoạn CSS chuẩn của
   WordPress (dùng lại nguyên văn từ theme chuẩn _s/Twenty Twenty-Three),
   chỉ đổi màu sang token của theme. Nhiều block lõi (nút mở menu di
   động, nút "Trước/Sau" của phân trang khi chỉ có icon...) tự dùng lớp
   này cho chữ chỉ dành cho trình đọc màn hình — theme PHẢI khai lớp này
   thì các chữ đó mới thật sự bị ẩn đúng cách, không hiện đè lên giao
   diện. Trước G9 theme chưa khai lớp này — lỗ hổng thật, đã sửa. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--paper);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* === G9: báo trước link mở tab mới (tiêu chí #14) — patterns/dùng ở
   parts/footer.html (7 kênh, opensInNewTab từ G3). core/navigation-link
   không hỗ trợ chèn chữ ẩn riêng trong "label" (đã tra mã nguồn lõi để
   chắc, không đoán), nên dùng nội dung CSS ::after, tự ẩn bằng kỹ thuật
   giống .screen-reader-text — có kèm thuộc tính "title" (tooltip) làm
   lớp bổ trợ. GHI CHÚ THÀNH THẬT: hỗ trợ đọc nội dung ::after của trình
   đọc màn hình không đồng đều 100% giữa mọi trình duyệt/AT — cần thử
   bằng trình đọc màn hình thật trước khi xem đây là đã xong hẳn (ghi ở
   phần "chưa kiểm được" của NHẬT KÝ G9). */
a[target="_blank"]::after {
	content: " (mở tab mới)";
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* === G10: video facade (patterns/video-facade.php + assets/js/video-facade.js)
   Nút play vẽ bằng ::after trên .video-facade__play (span con), CỐ TÌNH
   không đặt ::after trực tiếp lên thẻ <a> — thẻ <a> ở đây có
   target="_blank" nên ::after của nó đã bị chiếm bởi rule "báo trước mở
   tab mới" ngay phía trên (G9); 2 rule ::after không thể cùng tồn tại
   trên 1 phần tử, tách ra 1 span riêng để cả hai đều chạy được. */
.video-facade {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0.25rem;
	margin: 0;
}

.video-facade a {
	display: block;
	position: relative;
	height: 100%;
}

.video-facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.video-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--paper);
	opacity: 0.9;
}

.video-facade__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(50% + 4px);
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--wp--preset--color--moss-deep);
}

/* Sau khi JS thay thế bằng iframe thật (video-facade.js) — bỏ khung bo góc
   cha (aspect-ratio/overflow) đã lo, iframe chỉ cần lấp đầy khung có sẵn. */
.video-facade__iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.video-facade__caption {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--ink-soft);
}

/* === G10: bộ lọc portfolio theo thể loại (patterns/portfolio-filter.php)
   Link chữ thường, không phải nút bấm ẩn/hiện — mỗi thể loại có URL
   riêng (điều hướng trang thật), nên vẫn tính vào yêu cầu 44px giống
   menu header/footer (đây LÀ điều hướng, không phải link giữa câu văn). */
.portfolio-filter {
	gap: 0.5rem;
	padding: 0.5rem 0 1.5rem;
}

.portfolio-filter__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--sunken);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.portfolio-filter__link.is-active {
	background: var(--wp--preset--color--moss-deep);
	color: var(--wp--preset--color--paper);
}

/* === G10: lưới thẻ dự án (templates/archive-portfolio.html,
   taxonomy-portfolio_category.html) — 1 cột điện thoại, 2 cột máy tính
   bảng, 3 cột màn hình rộng. wp:post-template lõi tự in ra <ul>, đã có
   list-style:none từ CSS lõi WordPress, chỉ cần thêm grid ở đây. */
.portfolio-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding: 0;
	margin: 0;
}

@media (min-width: 600px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.portfolio-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* === G12: thẻ portfolio chưa có hình khối "thẻ" thật ===
   Lỗi thật phát hiện cùng đợt với header (xem ghi chú G12 ở trên) —
   .portfolio-card trước đây chỉ có "gap", không có nền/viền/bo góc nên
   khi render thật, mỗi dự án trông y hệt một đoạn văn bản thường, mất
   hết chủ đích "khác biệt với bài viết" của khối portfolio. Thêm nền
   "raised" (trắng, token đã có sẵn — dùng cho card nổi trên nền "paper")
   + viền "line" + bo góc, đúng tinh thần thẻ dùng ở nơi khác trong theme. */
.portfolio-card {
	gap: 0.5rem;
	padding: 1rem;
	background: var(--wp--preset--color--raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
}

.portfolio-card .wp-block-post-terms {
	color: var(--wp--preset--color--ink-soft);
}

/* === G10: khối kêu gọi liên hệ cuối trang portfolio (archive/taxonomy/
   single) — đúng yêu cầu BC4 "đúng một hành động rõ ràng: cách liên hệ"
   (`ra-soat-ke-hoach-va-bo-cuc-web.md`), lặp lại y hệt ở cả 3 template
   để dù khách vào từ đâu (kho, lọc theo thể loại, hay thẳng 1 dự án)
   cũng luôn thấy cùng 1 lời mời liên hệ. */
.portfolio-cta {
	padding: 2.5rem 0;
	text-align: center;
	background: var(--wp--preset--color--moss-tint);
	border-radius: 0.25rem;
}

/* === G13: cột phụ (sidebar) — trang chủ + 3 mẫu bài viết ===
   Quyết định đảo lại "1 cột, bỏ sidebar" của G4/G12 theo yêu cầu rõ ràng
   của bạn (khác với quyết định "chưa muốn thêm cột phụ" trước đó — đây
   là thay đổi hướng có chủ ý, không phải đi ngược quyết định cũ ngoài ý
   muốn). Cột phụ chỉ áp dụng cho trang chủ + single.html/single-ky-thuat
   .html/single-tam-su.html — KHÔNG áp dụng cho trang chuyên mục/Portfolio
   (đúng phạm vi bạn chọn).

   Cột chính không bị ép width cứng — layout "constrained" sẵn có bên
   trong <article>/post-content (contentSize 46rem, hoặc 32rem riêng ở
   "Bài tâm sự") tự canh giữa + giới hạn độ rộng đọc, bất kể khung flex
   bên ngoài rộng bao nhiêu — nên không cần đặt lại contentSize ở đây,
   tránh trùng 2 nơi cùng quyết định 1 giá trị.

   Cột phụ cố định 20rem (320px), không co giãn theo cột chính — đủ rộng
   đọc tên bài liên quan/mục lục mà không chiếm quá nhiều so với cột
   chính. Dưới 900px (ngưỡng đã dùng sẵn cho lưới Portfolio 3 cột — dùng
   lại thay vì bày thêm mốc mới): xếp chồng, cột phụ luôn XUỐNG DƯỚI cột
   chính (đúng thứ tự trong HTML, không cần JS/CSS reorder) — đọc bài
   trước, gợi ý liên quan sau, đúng thứ tự tự nhiên trên điện thoại. */
.with-sidebar {
	align-items: flex-start;
	gap: 2.5rem;
}

.with-sidebar__main {
	flex: 1 1 28rem;
	min-width: 0;
}

.with-sidebar__aside {
	flex: 0 0 20rem;
	max-width: 20rem;
}

@media (max-width: 899px) {
	.with-sidebar__main,
	.with-sidebar__aside {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Hình thức "thẻ" dùng chung cho từng khối trong cột phụ (mục lục, bài
   liên quan...) — tái dùng đúng ngôn ngữ thị giác đã có ở .portfolio-card
   /.callout (nền "raised", viền "line", bo góc 0.5rem), để cột phụ có
   ranh giới rõ ràng, không lẫn vào cột chính. */
.sidebar-card {
	padding: 1.25rem;
	background: var(--wp--preset--color--raised);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
}

.sidebar-card + .sidebar-card {
	margin-top: 1.5rem;
}

/* Khối "Bài liên quan" (patterns/related-posts.php) — cùng quy tắc 44px
   cho link điều hướng thật đã dùng nhất quán từ G3 (menu/nút) và G6
   (.toc__list a). */
.related-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.related-posts__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.25rem 0;
}

/* === G14: nội dung thật cho cột phụ trang chủ — "Số liệu hành trình" +
   "Thành tích" (thay khối placeholder viền nét đứt của G13, giờ đã có
   nội dung thật cần hiện). ===

   `.stats-strip`/`.stat-item` (patterns/dai-so-lieu.php) vốn thiết kế
   cho cột nội dung RỘNG (dùng trong bài/trang, xem G8) — 5 ô xếp hàng
   ngang, tự bọc 2-2-1 khi hẹp. Nhồi nguyên bản vào cột phụ 20rem sẽ ép
   quá chật (2 ô 140px + khoảng cách đã vượt độ rộng khung 20rem trừ
   padding thẻ). Ép riêng thành 1 CỘT DỌC chỉ khi nằm trong cột phụ —
   không đụng gì tới cách hiển thị ở nơi khác (bài viết, trang "Về
   Trọng"...) đang dùng đúng bản ngang gốc. */
.with-sidebar__aside .stats-strip {
	flex-direction: column;
	gap: 1rem;
}

.with-sidebar__aside .stat-item {
	flex: 1 1 auto;
	width: 100%;
}

/* Khối "Thành tích" (patterns/thanh-tich.php) — danh sách gọn, không
   phải link điều hướng nên không cần quy tắc 44px như .toc__list/
   .related-posts__list, chỉ căn lề giống .toc__list ol cho đồng bộ. */
.achievements__list {
	margin: 0;
	padding-left: 1.25rem;
}