/*
Theme Name: CongNghe Base
Theme URI: https://example.com/congnghe-base
Author: NGÔ
Author URI: https://example.com
Description: Theme gốc hiện đại, tối giản, tải nhanh cho blog công nghệ/thủ thuật. Tối ưu Core Web Vitals, SEO schema, hỗ trợ quảng cáo. Dùng làm parent theme cho hệ thống site vệ tinh — mỗi site dùng một child theme biến thể màu sắc/font/layout.
Version: 0.2606021753
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: congnghe-base
Tags: blog, news, two-columns, right-sidebar, custom-menu, featured-images, translation-ready, threaded-comments
*/

/* ==========================================================================
   1. BIẾN MÀU & THIẾT KẾ — child theme chỉ cần override khối :root này
   ========================================================================== */
:root {
  /* Bảng màu */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-accent: #f59e0b;
  --color-text: #1f2937;
  --color-text-soft: #6b7280;
  --color-bg: #ffffff;
  --color-bg-soft: #f8fafc;
  --color-border: #e5e7eb;
  --color-header-bg: #ffffff;
  --color-header-text: #1f2937;
  --color-footer-bg: #0f172a;
  --color-footer-text: #cbd5e1;

  /* Font */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-base: clamp(16px, 0.95rem + 0.25vw, 18px); /* fluid type 2026 */
  --line-height-base: 1.7;

  /* Thang tiêu đề fluid (clamp) — type scale ~1.25 */
  --fs-h1: clamp(2rem, 1.55rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);

  /* Layout */
  --container-width: 1200px;
  --content-width: 760px;
  --gap: clamp(20px, 1.2rem + 1.2vw, 36px); /* fluid spacing */
  --radius: 14px;
  --radius-lg: 22px;

  /* Bóng đổ nhiều lớp, mềm (2026) */
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05);
  --shadow-hover: 0 8px 18px rgba(15,23,42,.08), 0 18px 40px rgba(15,23,42,.10);
  --shadow-ring: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);

  --transition: .22s cubic-bezier(.4, 0, .2, 1);

  /* Màu dẫn xuất bằng color-mix (không cần hardcode) */
  --primary-hover: color-mix(in oklab, var(--color-primary) 86%, #000);
  --primary-tint: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --surface-blur: saturate(180%) blur(12px);

  color-scheme: light dark;
  accent-color: var(--color-primary);

  /* COLOR TINT SYSTEM — 5 levels từ primary (dùng trong section bgs, hovers) */
  --primary-50:  color-mix(in srgb, var(--color-primary)  5%, var(--color-bg));
  --primary-100: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  --primary-200: color-mix(in srgb, var(--color-primary) 20%, var(--color-bg));
  --primary-300: color-mix(in srgb, var(--color-primary) 30%, var(--color-bg));
  --accent-50:   color-mix(in srgb, var(--color-accent, #f59e0b)  5%, var(--color-bg));
  --accent-100:  color-mix(in srgb, var(--color-accent, #f59e0b) 12%, var(--color-bg));

  /* ELEVATION SHADOWS — 3 levels */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1),  0 2px 6px rgba(0,0,0,.07);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);

  /* TYPOGRAPHY SCALE — fluid, dramatic hierarchy */
  --fs-display: clamp(2.4rem, 4vw, 3.6rem);
  --fs-h1-art:  clamp(1.9rem, 2.8vw, 2.8rem);
  --letter-tight: -0.03em;
  --letter-wide:   0.06em;
}

/* ==========================================================================
   2. RESET & CƠ BẢN
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, iframe, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.18;
  font-weight: 750;
  letter-spacing: -0.02em; /* tiêu đề biểu cảm 2026 */
  text-wrap: balance;       /* cân dòng tiêu đề */
  color: var(--color-text);
  margin: 1.4em 0 .6em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { text-wrap: pretty; }
p { margin: 0 0 1.2em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }
blockquote {
  margin: 1.5em 0; padding: .8em 1.2em;
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
pre { background: #0f172a; color: #e2e8f0; padding: 1em; border-radius: var(--radius); overflow-x: auto; }
code { background: var(--color-bg-soft); padding: .15em .4em; border-radius: 4px; font-size: .9em; }
pre code { background: none; padding: 0; }
table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
th, td { border: 1px solid var(--color-border); padding: .6em .8em; text-align: left; }
th { background: var(--color-bg-soft); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: 2em 0; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
/* .site-content không còn .container (xử lý per-template để hero/banner full-width) */
.site-content { padding-bottom: var(--gap); overflow-x: clip; }
.layout-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: var(--gap);
  align-items: start;
}
.no-sidebar .layout-grid { grid-template-columns: minmax(0,1fr); max-width: var(--content-width); margin: 0 auto; }

/* Skip link cho accessibility */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-primary); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.site-header {
  background: color-mix(in srgb, var(--color-header-bg) 78%, transparent);
  -webkit-backdrop-filter: var(--surface-blur);
  backdrop-filter: var(--surface-blur);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  position: sticky; top: 0; z-index: 100;
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--color-header-bg); }
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.site-branding .site-title { margin: 0; font-size: 1.5rem; }
.site-branding .site-title a { color: var(--color-header-text); }
.site-branding .site-description { margin: 0; font-size: .8rem; color: var(--color-text-soft); }
.site-logo img { max-height: 44px; width: auto; }

/* Menu */
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.main-navigation li { position: relative; }
.main-navigation a { display: block; padding: 10px 14px; color: var(--color-header-text); font-weight: 600; font-size: .95rem; border-radius: var(--radius); }
.main-navigation a:hover, .main-navigation .current-menu-item > a { background: var(--color-bg-soft); color: var(--color-primary); }
.main-navigation ul ul {
  position: absolute; top: 100%; left: 0; flex-direction: column; min-width: 200px;
  background: var(--color-bg); box-shadow: var(--shadow-hover); border-radius: var(--radius);
  padding: 6px; display: none; z-index: 200;
}
.main-navigation li:hover > ul { display: flex; }

/* Toggle mobile */
.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  display: block; width: 24px; height: 2px; background: var(--color-header-text); position: relative; transition: var(--transition);
}
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }

/* ==========================================================================
   5. BÀI VIẾT / CARD
   ========================================================================== */
.post-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition);
  display: flex; flex-direction: column;
}
.post-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.post-card .thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg-soft); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .thumb img { transform: scale(1.05); }
.post-card .card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card .cat-badge { align-self: flex-start; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary); }
.post-card h2, .post-card h3 { margin: 0; font-size: 1.15rem; line-height: 1.35; }
.post-card h2 a, .post-card h3 a { color: var(--color-text); }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--color-primary); }
.post-card .excerpt { color: var(--color-text-soft); font-size: .92rem; margin: 0; }
.post-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--color-text-soft); margin-top: auto; padding-top: 8px; }
.post-meta a { color: var(--color-text-soft); }

/* Lưới bài */
.posts-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); }
.posts-grid.is-list { grid-template-columns: 1fr; }
.posts-grid.is-list .post-card { flex-direction: row; }
.posts-grid.is-list .post-card .thumb { width: 260px; flex-shrink: 0; aspect-ratio: 16/10; }
@media (max-width: 768px) { .posts-grid.is-list .post-card { flex-direction: column; } .posts-grid.is-list .post-card .thumb { width: 100%; } }

/* Bài nổi bật trang chủ */
.hero-featured { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
/* EXPLICIT placement: hero-main luôn ở cột 1 (rộng, trái), hero-side ở cột 2 */
.hero-featured .hero-main { grid-column: 1; grid-row: 1; }
.hero-featured .hero-side { grid-column: 2; grid-row: 1; }
.hero-featured .hero-main .thumb { aspect-ratio: 16/10; }
.hero-featured .hero-side { display: flex; flex-direction: column; gap: 16px; }
.hero-featured .hero-side .post-card { flex-direction: row; }
.hero-featured .hero-side .thumb { width: 120px; flex-shrink: 0; aspect-ratio: 1; }

/* ==========================================================================
   6. BÀI VIẾT ĐƠN
   ========================================================================== */
.entry-header h1.entry-title { font-size: 2.1rem; margin-top: 0; }
.entry-featured { margin: 1.2em 0; border-radius: var(--radius); overflow: hidden; }
.entry-content { font-size: 1.05rem; }
.entry-content > * { max-width: 100%; }
.entry-content img { border-radius: var(--radius); margin: 1.2em auto; }
.entry-content figure { margin: 1.5em 0; }
.entry-content figcaption { text-align: center; font-size: .85rem; color: var(--color-text-soft); margin-top: .5em; }
.tags-links a {
  display: inline-block; font-size: .82rem; background: var(--color-bg-soft); padding: 4px 12px;
  border-radius: 20px; margin: 0 6px 6px 0; color: var(--color-text-soft);
}
.breadcrumbs { font-size: .85rem; color: var(--color-text-soft); margin-bottom: 1em; }
.breadcrumbs a { color: var(--color-text-soft); }
.breadcrumbs .sep { margin: 0 6px; }

/* Share buttons */
.share-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin: 2em 0; }
.share-buttons a { padding: 8px 16px; border-radius: var(--radius); color: #fff; font-size: .85rem; font-weight: 600; }
.share-fb { background: #1877f2; }
.share-x { background: #000; }
.share-tg { background: #229ed9; }
.share-copy { background: var(--color-text-soft); border: 0; cursor: pointer; }

/* Author box */
.author-box { display: flex; gap: 16px; background: var(--color-bg-soft); padding: 20px; border-radius: var(--radius); margin: 2.5em 0; }
.author-box img { width: 64px; height: 64px; border-radius: 50%; }
.author-box h4 { margin: 0 0 4px; }

/* Bài liên quan */
.related-posts { margin: 3em 0; }
.related-posts .posts-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ==========================================================================
   7. SIDEBAR & WIDGET
   ========================================================================== */
.widget { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; margin-bottom: 24px; }
.widget-title { font-size: 1rem; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--color-primary); }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: .92rem; }
.widget li:last-child { border-bottom: 0; }

/* ==========================================================================
   8. KHU QUẢNG CÁO (ad slots)
   ========================================================================== */
.ad-slot { margin: 24px auto; text-align: center; min-height: 90px; background: var(--color-bg-soft); border: 1px dashed var(--color-border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--color-text-soft); font-size: .8rem; }
.ad-slot.is-filled { background: none; border: 0; min-height: 0; }

/* ==========================================================================
   9. PHÂN TRANG, FORM, NÚT
   ========================================================================== */
.pagination { display: flex; gap: 6px; justify-content: center; margin: var(--gap) 0; flex-wrap: wrap; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); }
.pagination .page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination .page-numbers:hover:not(.current) { background: var(--color-bg-soft); }
.button, button, input[type="submit"] {
  display: inline-block; background: var(--color-primary); color: #fff; border: 0;
  padding: 10px 20px; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: background var(--transition);
}
.button:hover, button:hover, input[type="submit"]:hover { background: var(--primary-hover); color: #fff; }
input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: inherit; font-size: .95rem; background: var(--color-bg);
}
.search-form { display: flex; gap: 8px; }
.search-form input[type="submit"] { width: auto; }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: 48px 0 24px; margin-top: var(--gap); }
.site-footer a { color: var(--color-footer-text); }
.site-footer a:hover { color: #fff; }
.footer-widgets { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: 32px; }
.site-footer .widget { background: none; border: 0; padding: 0; }
.site-footer .widget-title { color: #fff; border-color: rgba(255,255,255,.2); }
.site-footer .widget li { border-color: rgba(255,255,255,.1); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 20px; text-align: center; font-size: .85rem; }

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
  .layout-grid,
  .sidebar-left .layout-grid { grid-template-columns: 1fr; }
  /* Mobile: sidebar luôn nằm SAU nội dung chính, dù cấu hình sidebar trái */
  .sidebar-left #secondary { order: initial; }
  .has-sticky-sidebar #secondary { position: static; }
  .hero-featured { grid-template-columns: 1fr; }
  .related-posts .posts-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-widgets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  :root { --font-size-base: 16px; --gap: 24px; }
  .menu-toggle { display: block; }
  .main-navigation { position: fixed; inset: 68px 0 auto 0; background: var(--color-bg); box-shadow: var(--shadow-hover); max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .main-navigation.is-open { max-height: 80vh; overflow-y: auto; }
  .main-navigation ul { flex-direction: column; gap: 0; padding: 8px; }
  .main-navigation ul ul { position: static; box-shadow: none; display: flex; padding-left: 16px; }
  .posts-grid { grid-template-columns: 1fr; }
  .hero-featured .hero-side .post-card { flex-direction: column; }
  .hero-featured .hero-side .thumb { width: 100%; aspect-ratio: 16/9; }
  .entry-header h1.entry-title { font-size: 1.6rem; }
}

/* ==========================================================================
   12. DARK MODE
   ========================================================================== */
[data-theme="dark"] {
  --color-text: #e5e7eb;
  --color-text-soft: #9ca3af;
  --color-bg: #0f172a;
  --color-bg-soft: #1e293b;
  --color-border: #334155;
  --color-header-bg: #111827;
  --color-header-text: #e5e7eb;
}
[data-theme="dark"] pre { background: #020617; }
[data-theme="dark"] .post-card,
[data-theme="dark"] .widget { background: var(--color-bg-soft); }
[data-theme="dark"] img { opacity: .92; }

/* CRITICAL FIX: bất kể child theme có hardcode color:#111 hay không,
   article headings PHẢI dùng light color trong dark mode */
[data-theme="dark"] .entry-content h2,
[data-theme="dark"] .entry-content h3,
[data-theme="dark"] .entry-content h4,
[data-theme="dark"] .single-article h2,
[data-theme="dark"] .single-article h3 {
  color: var(--color-text) !important;   /* #e5e7eb — luôn sáng */
}

/* FIX: hero-main overlay quá tối trong dark mode → giảm opacity */
[data-theme="dark"] .hero-featured .hero-main .card-body {
  background: linear-gradient(
    to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.50) 40%,
    rgba(0,0,0,.18) 65%,
    transparent 82%
  ) !important;
}
/* Hero image: không giảm opacity (đã có overlay) */
[data-theme="dark"] .hero-featured .hero-main .thumb img { opacity: 1 !important; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.theme-toggle { background: none; border: 0; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 6px; border-radius: var(--radius); }
.theme-toggle:hover { background: var(--color-bg-soft); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }

/* ==========================================================================
   13. BACK TO TOP
   ========================================================================== */
.back-to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-primary); color: #fff; font-size: 1.3rem; line-height: 1;
  box-shadow: var(--shadow-hover); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-primary-dark); }

/* ==========================================================================
   14. BIẾN THỂ BỐ CỤC (sidebar trái, sticky)
   ========================================================================== */
.sidebar-left .layout-grid { grid-template-columns: 320px minmax(0,1fr); }
.sidebar-left #secondary { order: -1; }
.has-sticky-sidebar #secondary { position: sticky; top: 88px; }
body:not(.has-sticky-header) .site-header { position: static; }

/* ==========================================================================
   15. WIDGET POSTS (bài xem nhiều / bài mới có ảnh)
   ========================================================================== */
.widget-posts { list-style: none; margin: 0; padding: 0; }
.widget-post { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); align-items: flex-start; }
.widget-post:last-child { border-bottom: 0; }
.widget-post .wp-thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; }
.widget-post .wp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.widget-post .wp-info { display: flex; flex-direction: column; gap: 4px; }
.widget-post .wp-title { font-size: .9rem; font-weight: 600; color: var(--color-text); line-height: 1.35; }
.widget-post .wp-title:hover { color: var(--color-primary); }
.widget-post .wp-date { font-size: .76rem; color: var(--color-text-soft); }

/* ==========================================================================
   16. SOCIAL FOLLOW
   ========================================================================== */
.social-follow { display: flex; flex-wrap: wrap; gap: 8px; }
.social-link { padding: 8px 14px; border-radius: var(--radius); color: #fff; font-size: .85rem; font-weight: 600; }
.social-facebook { background: #1877f2; }
.social-youtube { background: #ff0000; }
.social-tiktok { background: #000; }
.social-x { background: #111; }
.social-telegram { background: #229ed9; }
.social-link:hover { color: #fff; opacity: .9; }

/* ==========================================================================
   17. BLOCK PATTERNS (hộp lưu ý/cảnh báo)
   ========================================================================== */
.congnghe-note, .congnghe-warning { border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5em 0; }
.congnghe-note { background: var(--color-bg-soft); }
.congnghe-warning { background: #fef2f2; }
[data-theme="dark"] .congnghe-warning { background: #2a1414; }
.congnghe-note p:last-child, .congnghe-warning p:last-child { margin-bottom: 0; }

/* Section title trang chủ */
.section-title { font-size: 1.4rem; margin: 1.5em 0 .8em; padding-bottom: .4em; border-bottom: 2px solid var(--color-border); }

/* ==========================================================================
   19. SEO/AEO: TL;DR, mục lục, FAQ
   ========================================================================== */
.cn-tldr {
  background: var(--primary-tint);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: var(--radius); padding: 16px 18px; margin: 0 0 1.5em;
}
.cn-tldr-label {
  display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--color-primary); margin-bottom: 6px;
}
.cn-tldr p:last-child { margin-bottom: 0; }

.cn-toc {
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 14px 18px; margin: 1.5em 0;
}
.cn-toc-title { font-weight: 700; margin-bottom: 8px; font-size: .95rem; }
.cn-toc ul { list-style: none; margin: 0; padding: 0; }
.cn-toc li { padding: 3px 0; font-size: .92rem; }
.cn-toc .cn-toc-h3 { padding-left: 18px; font-size: .88rem; }
.cn-toc a { color: var(--color-text-soft); }
.cn-toc a:hover { color: var(--color-primary); }

.cn-faq { margin: 2em 0; }
.cn-faq-title { font-size: 1.4rem; margin: 0 0 .6em; }
.cn-faq-item {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden; background: var(--color-bg);
}
.cn-faq-item summary {
  cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.cn-faq-item summary::-webkit-details-marker { display: none; }
.cn-faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--color-primary); transition: transform var(--transition); }
.cn-faq-item[open] summary::after { transform: rotate(45deg); }
.cn-faq-answer { padding: 0 18px 16px; color: var(--color-text-soft); }
.cn-faq-answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   18. CHUẨN 2026+ — tương tác, chuyển động, khả năng truy cập
   ========================================================================== */

/* Focus hiện đại: chỉ hiện vòng focus khi dùng bàn phím */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Selection mang màu thương hiệu */
::selection { background: color-mix(in srgb, var(--color-primary) 22%, transparent); }

/* Cuộn mượt + chừa chỗ cho header dính */
html { scroll-padding-top: 88px; }

/* Gạch chân động cho link menu (kinetic, tinh tế) */
.main-navigation a { position: relative; }
.main-navigation > div > ul > li > a::after,
.main-navigation > ul > li > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: var(--color-primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.main-navigation li:hover > a::after,
.main-navigation .current-menu-item > a::after { transform: scaleX(1); }

/* Card: nâng nhẹ + viền sáng theo màu thương hiệu khi hover */
.post-card { will-change: transform; }
.post-card:hover { box-shadow: var(--shadow-hover), var(--shadow-ring); }

/* Container queries: card tự thích ứng theo bề rộng vùng chứa */
@supports (container-type: inline-size) {
  .posts-grid, .hero-side { container-type: inline-size; }
}

/* Bento-style hero: bo góc lớn, nhịp hiện đại */
.hero-featured .hero-main { border-radius: var(--radius-lg); }
.hero-featured .hero-main .thumb { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* Reveal khi cuộn tới (scroll-driven, có guard) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .posts-grid > .post-card {
      animation: cn-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
  }
  @keyframes cn-reveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* View Transitions API: chuyển trang mượt giữa các bài */
@view-transition { navigation: auto; }

/* Tôn trọng người dùng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .post-card:hover { transform: none; }
}

/* ==========================================================================
   20. HOWTO, TÁC GIẢ, PROGRESS, BÌNH LUẬN, STICKY AD
   ========================================================================== */

/* HowTo các bước */
.cn-howto { margin: 2em 0; }
.cn-howto-title { font-size: 1.4rem; margin: 0 0 .6em; }
.cn-howto-steps { list-style: none; counter-reset: cnstep; margin: 0; padding: 0; }
.cn-step { position: relative; padding: 0 0 18px 52px; counter-increment: cnstep; }
.cn-step::before {
  content: counter(cnstep); position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cn-step:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px;
  background: var(--color-border);
}
.cn-step-title { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.cn-step-body p:last-child { margin-bottom: 0; }

/* Trang tác giả */
.author-profile {
  display: flex; gap: 20px; align-items: center;
  background: var(--color-bg-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 24px; margin-bottom: 1.5em;
}
.author-profile-avatar { border-radius: 50%; flex-shrink: 0; }
.author-profile-bio { color: var(--color-text-soft); margin: 6px 0; }
.author-profile-meta { display: flex; gap: 16px; font-size: .9rem; color: var(--color-text-soft); }
@media (max-width: 600px) { .author-profile { flex-direction: column; text-align: center; } }

/* Thanh tiến trình đọc */
.reading-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300;
  background: transparent; pointer-events: none;
}
.reading-progress-bar { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width .1s linear; }
body.has-sticky-header .reading-progress { top: 68px; }

/* Bình luận */
.comments-area { margin: 2.5em 0; }
.comments-title { font-size: 1.4rem; margin-bottom: .8em; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .comment { margin-bottom: 18px; }
.comment-list .children { list-style: none; margin: 14px 0 0; padding-left: 28px; border-left: 2px solid var(--color-border); }
.comment-body { background: var(--color-bg-soft); border-radius: var(--radius); padding: 14px 16px; }
.comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .fn { font-weight: 700; font-style: normal; }
.comment-author .says { display: none; }
.comment-metadata { font-size: .78rem; color: var(--color-text-soft); margin-bottom: 6px; }
.comment-metadata a { color: var(--color-text-soft); }
.comment-content p:last-child { margin-bottom: 0; }
.reply { font-size: .82rem; }
.comment-respond { margin-top: 1.5em; }
.comment-form { display: grid; gap: 12px; }
.comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url { margin: 0; }
.comment-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }

/* Quảng cáo sidebar dính */
.sidebar-ad-wrap.is-sticky-ad { position: sticky; top: 88px; }
@media (max-width: 992px) { .sidebar-ad-wrap.is-sticky-ad { position: static; } }

/* Utility */
.screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ==========================================================================
   21. CSS NÂNG CẤP GIAO DIỆN 2026
   ========================================================================== */

/* --- Placeholder ảnh khi chưa có featured image (class no-image thêm bởi PHP) --- */
.post-card .thumb.no-image {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.post-card .thumb.no-image::after {
  content: "\1F5BC";
  font-size: 2.5rem;
  opacity: .25;
}

/* --- Cat badge pill (thay vì chỉ màu chữ) --- */
.post-card .cat-badge {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  padding: 3px 10px;
  border-radius: 20px;
  color: var(--color-primary);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: background var(--transition);
}
.post-card .cat-badge:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* --- Card tiêu đề: giới hạn 3 dòng --- */
.post-card h2, .post-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* --- Excerpt giới hạn 2 dòng --- */
.post-card .excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Section header homepage nổi bật hơn --- */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 1.8em 0 1em;
  padding-bottom: 0;
  border-bottom: none;
}
.section-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.2em;
  background: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
  margin-left: 6px;
}

/* --- Post meta: icons nhỏ --- */
.post-meta .meta-date::before  { content: "📅 "; font-size: .75em; }
.post-meta .meta-author::before { content: "✍ "; font-size: .75em; }
.post-meta .meta-reading        { display: inline-flex; align-items: center; gap: 4px; }
.post-meta .meta-reading::before { content: "⏱"; font-size: .8em; }

/* --- Widget title cải thiện --- */
.widget-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.widget-title::before {
  content: "";
  display: inline-block; width: 3px; height: 1em;
  background: var(--color-primary); border-radius: 2px; flex-shrink: 0;
}

/* --- Pagination cải thiện --- */
.pagination .page-numbers {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); font-weight: 600;
  transition: background var(--transition), color var(--transition);
}

/* --- Tag links đẹp hơn --- */
.tags-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 1.2em 0; }
.tags-links a {
  font-size: .78rem; font-weight: 600;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  padding: 4px 12px; border-radius: 20px;
  color: var(--color-text-soft);
  transition: all var(--transition);
}
.tags-links a:hover {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

/* --- No-posts placeholder --- */
.no-posts {
  text-align: center; padding: 60px 24px;
  color: var(--color-text-soft);
}
.no-posts::before {
  content: "📭"; display: block; font-size: 3rem; margin-bottom: 16px;
}

/* --- Ảnh hero bài viết luôn đúng tỉ lệ --- */
.entry-featured img {
  width: 100%; max-height: 480px; object-fit: cover;
  border-radius: var(--radius);
}

/* ==========================================================================
   22. BREAKING NEWS TICKER
   Màu nền tự động lấy từ --color-primary của từng child theme.
   ========================================================================== */
.cn-ticker {
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  height: 36px;
  overflow: hidden;
  font-size: .8125rem;
  font-weight: 700;
  position: relative;
  z-index: 90;
}

.cn-ticker-label {
  flex-shrink: 0;
  background: color-mix(in srgb, var(--color-primary) 68%, #000);
  padding: 0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  gap: 6px;
}

.cn-ticker-label::before { content: "⚡"; }

.cn-ticker-track {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.cn-ticker-inner {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: cn-ticker-scroll 30s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cn-ticker-inner { animation: none; overflow-x: auto; }
}

.cn-ticker-inner a {
  color: #fff;
  text-decoration: none;
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,.25);
  line-height: 36px;
  font-weight: 500;
  transition: opacity .15s;
}

.cn-ticker-inner a:hover { text-decoration: underline; opacity: .85; }

@keyframes cn-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cn-ticker:hover .cn-ticker-inner { animation-play-state: paused; }

@media (max-width: 768px) {
  .cn-ticker { height: 32px; font-size: .75rem; }
  .cn-ticker-inner a { line-height: 32px; padding: 0 16px; }
}
@media (max-width: 479px) {
  .cn-ticker-label { padding: 0 10px; font-size: .7rem; }
}

/* ==========================================================================
   22. CATEGORY NAVIGATION BAR
   ========================================================================== */
.cn-cat-nav {
  background: color-mix(in srgb, var(--color-header-bg, #111827) 85%, #000);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 89;
}

.cn-cat-nav ul {
  display: flex;
  list-style: none;
  margin: 0 auto;
  padding: 0 20px;
  gap: 0;
  max-width: var(--container-width);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cn-cat-nav ul::-webkit-scrollbar { display: none; }

.cn-cat-nav ul li a {
  display: block;
  color: rgba(255,255,255,.7);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 9px 14px;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s;
  border-bottom: 2px solid transparent;
}

.cn-cat-nav ul li a:hover,
.cn-cat-nav ul li a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--color-primary);
}

@media (max-width: 768px) { .cn-cat-nav { display: none; } }

/* ==========================================================================
   24. CATEGORY BANNER — header chuyên mục nổi bật
   ========================================================================== */
.cat-banner {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    color-mix(in oklab, var(--color-primary) 70%, #000) 100%
  );
  color: #fff;
  padding: 36px 0 32px;
  position: relative;
  overflow: hidden;
}

/* Vân nền trang trí */
.cat-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events: none;
}

.cat-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}

.cat-banner-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255,255,255,.2);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.cat-banner-title {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 900;
  margin: 0 0 6px;
  color: #fff;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.cat-banner-desc {
  color: rgba(255,255,255,.82);
  font-size: .95rem;
  margin: 0 0 8px;
  max-width: 560px;
}

/* Breadcrumbs trong banner */
.cat-banner .breadcrumbs,
.cat-banner .breadcrumbs a,
.cat-banner .breadcrumbs .sep,
.cat-banner .rank-math-breadcrumb,
.cat-banner .rank-math-breadcrumb a {
  color: rgba(255,255,255,.7) !important;
  font-size: .82rem;
}
.cat-banner .breadcrumbs { margin-top: 6px; }

.cat-banner-stat {
  text-align: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  padding: 16px 24px;
  backdrop-filter: blur(8px);
  min-width: 100px;
}

.cat-banner-stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.cat-banner-stat span {
  font-size: .8rem;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Page header bar cho archive không phải category */
.page-header-bar {
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
}
.page-header-bar .page-title { font-size: var(--fs-h2); margin: 4px 0; }
.page-header-bar .archive-description { color: var(--color-text-soft); margin: 4px 0 0; }

@media (max-width: 600px) {
  .cat-banner { padding: 24px 0 20px; }
  .cat-banner-stat { display: none; }
  .cat-banner-title { font-size: 1.6rem; }
}

/* ==========================================================================
   25. TRENDING STRIP — danh sách compact bài đọc thêm
   ========================================================================== */
.trending-strip { margin: var(--gap) 0 0; }

.trending-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.trending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-bg);
  text-decoration: none;
  transition: background var(--transition);
}
.trending-item:hover { background: var(--color-bg-soft); }

.trending-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.trending-list .trending-item:nth-child(1) .trending-num { background: #f59e0b; }
.trending-list .trending-item:nth-child(2) .trending-num { background: #64748b; }
.trending-list .trending-item:nth-child(3) .trending-num { background: #b45309; }

.trending-info { flex: 1; min-width: 0; }

.trending-cat {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-primary);
  margin-bottom: 2px;
}

.trending-info h3 {
  margin: 0;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trending-item:hover .trending-info h3 { color: var(--color-primary); }

.trending-date {
  font-size: .72rem;
  color: var(--color-text-soft);
  margin-top: 3px;
  display: block;
}

.trending-thumb {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 8px;
  overflow: hidden;
}
.trending-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 640px) {
  .trending-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   26. SINGLE POST HERO — ảnh full-width với tiêu đề overlay
   ========================================================================== */
.single-hero {
  position: relative;
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  background: #0f172a;
}

.single-hero-img {
  width: 100%; max-width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  opacity: .75;
  transition: opacity .3s;
}

.single-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.1) 100%
  );
  display: flex;
  align-items: flex-end;
  padding-bottom: 32px;
}

.single-hero-overlay .container { width: 100%; }

.single-hero-overlay .breadcrumbs,
.single-hero-overlay .breadcrumbs a,
.single-hero-overlay .rank-math-breadcrumb,
.single-hero-overlay .rank-math-breadcrumb a {
  color: rgba(255,255,255,.65) !important;
  font-size: .82rem;
}
/* FIX: breadcrumb plugin có thể inject bg sáng → force transparent */
.single-hero-overlay .rank-math-breadcrumb,
.single-hero-overlay .breadcrumbs,
.single-hero-overlay nav[class*="breadcrumb"],
.single-hero-overlay [class*="breadcrumb"] {
  background: transparent !important;
  background-color: transparent !important;
}
.single-hero-overlay .breadcrumbs { margin-bottom: 8px; }

.single-hero-overlay .cat-badge {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  margin-bottom: 8px;
}

.single-hero-title {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 10px;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  text-wrap: balance;
  max-width: 800px;
}

.single-hero-overlay .post-meta {
  color: rgba(255,255,255,.82);
}
/* Hero overlay: meta chips → transparent bg + white text */
.single-hero-overlay .post-meta .meta-date,
.single-hero-overlay .post-meta .meta-author,
.single-hero-overlay .post-meta .meta-reading,
.single-hero-overlay .post-meta .post-view-count {
  color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.18);
}
.single-hero-overlay .post-meta .meta-author {
  background: rgba(255,255,255,.12) !important;
}
.single-hero-overlay .post-meta .meta-reading {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

/* Meta bar dưới hero (khi có ảnh, đã hiện trong hero rồi) */
.entry-meta-bar {
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .single-hero { max-height: 280px; }
  .single-hero-img { height: 280px; }
  .single-hero-title { font-size: 1.35rem; }
  .single-hero-overlay { padding-bottom: 16px; }
}
@media (max-width: 480px) {
  .single-hero { max-height: 220px; }
  .single-hero-img { height: 220px; }
}

/* ==========================================================================
   27. TRANG 404 — thiết kế đẹp
   ========================================================================== */
.error-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--gap) 0;
}

.error-404-inner {
  text-align: center;
  max-width: 480px;
}

.error-404-code {
  font-size: clamp(6rem, 20vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, #000));
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: .2em;
  letter-spacing: -.05em;
}

.error-404 h1 {
  font-size: var(--fs-h2);
  margin: 0 0 .5em;
}

.error-404 p {
  color: var(--color-text-soft);
  margin-bottom: 1.5em;
}

.error-404-search {
  margin: 0 0 1.2em;
}

.error-404-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   28. POLISH & TINH CHỈNH DỰA TRÊN PHÂN TÍCH BROWSER
   ========================================================================== */

/* Related posts — 3 cột trên desktop */
.related-posts { margin: 2.5em 0; }
.related-posts .section-title { margin-top: 0; }
.related-grid { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 768px) { .related-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 992px) and (min-width: 769px) { .related-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* Share buttons — label + icon đẹp hơn */
.share-buttons {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 2em 0;
  padding: 16px 0; border-top: 1px solid var(--color-border);
}
.share-buttons a, .share-buttons button {
  padding: 9px 18px; border-radius: 6px; font-size: .85rem;
  font-weight: 600; letter-spacing: .02em;
  transition: opacity .18s, transform .18s;
}
.share-buttons a:hover, .share-buttons button:hover { opacity: .88; transform: translateY(-1px); }

/* Search form cải thiện */
.search-form { gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.search-form input[type="search"] {
  border: 0; border-radius: 0; padding: 10px 14px;
}
.search-form input[type="submit"] {
  border-radius: 0; white-space: nowrap;
  padding: 10px 16px; font-size: .875rem;
}

/* Sidebar widget title cải thiện (đã có .widget-title::before) */
.widget-title { margin-bottom: 12px; font-size: .9rem; }
.sidebar-1 .widget { margin-bottom: 20px; }

/* Recent posts trong sidebar */
.widget_recent_entries ul li,
.widget_categories ul li,
.widget_archive ul li {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 0; border-bottom: 1px solid var(--color-border);
  font-size: .9rem;
}
.widget_recent_entries ul li:last-child,
.widget_categories ul li:last-child,
.widget_archive ul li:last-child { border-bottom: 0; }
.widget_categories ul li::before,
.widget_archive ul li::before { content: "#"; color: var(--color-primary); font-weight: 700; font-size: .8rem; }

/* Cat-nav container alignment */
.cn-cat-nav .container { max-width: var(--container-width); padding: 0 20px; }

/* Reading progress bar luôn hiển thị khi scroll */
.reading-progress { top: 68px; }
body.admin-bar .reading-progress { top: 100px; }

/* Post card — thumbnail aspect ratio rõ ràng hơn */
.post-card .thumb { border-radius: var(--radius) var(--radius) 0 0; }
.posts-grid.is-list .post-card .thumb { border-radius: var(--radius) 0 0 var(--radius); }

/* Footer navigation — không bullets, horizontal */
.footer-navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: center;
}
.footer-navigation ul li { padding: 0; border: 0; font-size: .88rem; }
.footer-navigation ul li a { color: rgba(255,255,255,.7); transition: color .2s; }
.footer-navigation ul li a:hover { color: #fff; }
.footer-navigation { margin-bottom: 16px; }

/* Footer widgets 2-col khi ít nội dung */
.footer-widgets { margin-bottom: 24px; }
.footer-col .widget { background: none; border: 0; padding: 0; margin-bottom: 20px; }
.footer-col .widget-title { color: rgba(255,255,255,.9); font-size: .85rem; letter-spacing: .06em; border-color: rgba(255,255,255,.2); margin-bottom: 12px; }
.footer-col .widget ul { list-style: none; margin: 0; padding: 0; }
.footer-col .widget ul li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .875rem; }
.footer-col .widget ul li:last-child { border-bottom: 0; }
.footer-col .widget ul li a { color: rgba(255,255,255,.65); }
.footer-col .widget ul li a:hover { color: #fff; }

/* Footer bottom bar */
.footer-bottom {
  margin-top: 24px; padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .82rem; color: rgba(255,255,255,.5);
  text-align: center;
}

/* Back-to-top: luôn dùng màu primary */
.back-to-top { font-size: 1.1rem; }

/* Site-content padding-top */
.site-content { padding-top: var(--gap); }

/* Trang chủ: ad slot header trong container */
.site-content .ad-slot { max-width: var(--container-width); margin-inline: auto; }

/* ==========================================================================
   29. TYPOGRAPHY & READING EXPERIENCE — tối ưu tiếng Việt
   ========================================================================== */

/* Typography tiếng Việt: hyphens + orphan control */
.entry-content p {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  orphans: 3;
  widows: 3;
}

/* Blockquote đẹp hơn */
.entry-content blockquote {
  position: relative;
  font-style: italic;
  font-size: 1.08em;
  color: var(--color-text-soft);
}
.entry-content blockquote::before {
  content: "\201C";
  position: absolute;
  top: -.3em; left: -.1em;
  font-size: 4em;
  color: var(--color-primary);
  opacity: .2;
  font-family: Georgia, serif;
  line-height: 1;
}

/* TOC (Nội dung chính) — styling đẹp hơn */
.rank-math-toc-widget-box, .rank-math-block-toc,
.wp-block-rank-math-toc-block, .rank-math-toc {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 1.5em 0;
}

/* Inline code đẹp hơn */
.entry-content code {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-soft));
  color: var(--color-primary);
  padding: .2em .5em;
  border-radius: 4px;
  font-size: .88em;
  font-weight: 500;
}

/* Entry content img caption */
.entry-content .wp-caption-text,
.entry-content figcaption {
  text-align: center;
  font-size: .82rem;
  color: var(--color-text-soft);
  font-style: italic;
  margin-top: .4em;
}

/* ==========================================================================
   30. CARD & GRID REFINEMENTS
   ========================================================================== */

/* Card ảnh placeholder khi đang load */
.post-card .thumb { position: relative; }
.post-card .thumb img {
  background: var(--color-bg-soft);
  /* Fade-in khi ảnh load xong */
  transition: opacity .3s ease, transform .4s ease;
}

/* Card excerpt: chỉ 2 dòng */
.post-card .excerpt {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}

/* Card meta spacing */
.post-card .post-meta { font-size: .78rem; gap: 8px; }

/* List-style card: border bottom giữa các bài */
.posts-grid.is-list .post-card {
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 2px;
}

/* Grid — gap chuẩn hơn trên mobile */
@media (max-width: 640px) {
  .posts-grid { gap: 16px; }
  .trending-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   31. HEADER STICKY + SCROLL STATES
   ========================================================================== */

/* Admin bar offset cho sticky header */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .cn-ticker { padding-top: 0; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* Header border accent */
.site-header {
  border-bottom-width: 2px;
  border-bottom-color: var(--color-primary);
}

/* ==========================================================================
   32. BREADCRUMBS CẢI THIỆN
   ========================================================================== */
.breadcrumbs, .rank-math-breadcrumb {
  font-size: .8rem;
  color: var(--color-text-soft);
  margin-bottom: .8em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.breadcrumbs a, .rank-math-breadcrumb a {
  color: var(--color-text-soft);
  transition: color .15s;
}
.breadcrumbs a:hover, .rank-math-breadcrumb a:hover { color: var(--color-primary); }
.breadcrumbs .sep, .rank-math-breadcrumb .separator { color: var(--color-border); margin: 0 2px; }

/* ==========================================================================
   33. HÀNG THEO CHUYÊN MỤC — trang chủ kiểu tạp chí 2026
   "Curated rows by topic": mỗi chuyên mục nổi bật là một hàng bài riêng.
   ========================================================================== */
.cat-section { margin-top: 1.4em; }

.cat-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 1.6em 0 1em;
}
.cat-section-head .section-title { margin: 0; flex: 1; min-width: 0; }
.cat-section-head .section-title a { color: inherit; }
.cat-section-head .section-title a:hover { color: var(--color-primary); }

.cat-section-more {
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}
.cat-section-more::after { content: " →"; }
.cat-section-more:hover { text-decoration: underline; }

/* auto-fit: 2 thẻ tự giãn cân đối, 3 thẻ thành 3 cột, mobile 1 cột */
.cat-section-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* ==========================================================================
   34. POLISH EDITORIAL 2026 — nhịp đọc, lead, pull-quote, byline
   ========================================================================== */

/* Đoạn mở đầu (lead) to & rõ hơn — chuẩn editorial */
.single-article .entry-content > p:first-of-type {
  font-size: 1.12em;
  line-height: 1.7;
  color: var(--color-text);
}

/* Tiêu đề trong bài có khoảng thở tốt hơn + scroll-margin cho anchor mục lục */
.entry-content h2, .entry-content h3 { scroll-margin-top: 96px; }
.entry-content h2 { margin-top: 1.8em; }

/* Pull-quote nổi bật (dùng cho blockquote có class is-style-large hoặc .cn-pullquote) */
.entry-content .cn-pullquote,
.entry-content blockquote.is-style-large {
  border-left: 0;
  border-top: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  background: none;
  text-align: center;
  font-size: 1.35em;
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
  padding: .8em 1em;
  margin: 1.8em 0;
  color: var(--color-text);
}
.entry-content .cn-pullquote::before,
.entry-content blockquote.is-style-large::before { content: none; }

/* Byline + avatar nhỏ trong meta bài (E-E-A-T) */
.post-meta .meta-author-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  vertical-align: middle; margin-right: 6px;
  object-fit: cover; display: inline-block;
}

/* Ảnh nội dung — bo góc + bóng nhẹ cho cảm giác hiện đại */
.single-article .entry-content > figure img,
.single-article .entry-content > img {
  box-shadow: var(--shadow);
}

/* Danh sách trong bài: marker mang màu thương hiệu */
.entry-content ul > li::marker { color: var(--color-primary); }
.entry-content ol > li::marker { color: var(--color-primary); font-weight: 700; }

/* Liên kết trong thân bài: gạch chân tinh tế, dày lên khi hover */
.entry-content a:not(.button):not(.cat-badge) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--transition);
}
.entry-content a:not(.button):not(.cat-badge):hover {
  text-decoration-color: var(--color-primary);
}

/* ==========================================================================
   35. PLACEHOLDER "NO-IMAGE" CÓ THƯƠNG HIỆU
   Thay placeholder xám + emoji bằng nền gradient theo màu thương hiệu + nhãn
   chuyên mục. Hoạt động tốt cả trên card nền sáng (parent) lẫn nền tối (child).
   ========================================================================== */
.post-card .thumb.no-image {
  position: relative;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--color-primary) 28%, transparent), transparent 58%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-soft)) 0%,
      var(--color-bg-soft) 100%);
}
/* bỏ emoji 🖼 của Section 21 */
.post-card .thumb.no-image::after { content: none; }
/* lưới chấm trang trí mờ */
.post-card .thumb.no-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--color-primary) 16%, transparent) 1px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: .55;
}
.post-card .thumb.no-image .ni-label {
  position: relative;
  z-index: 1;
  max-width: 82%;
  text-align: center;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.25;
  color: color-mix(in srgb, var(--color-primary) 88%, #000);
  padding: 6px 14px;
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #fff 62%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* list-style: placeholder dùng cùng tỉ lệ với thumb ảnh */
.posts-grid.is-list .post-card .thumb.no-image { min-height: 100%; }

/* ==========================================================================
   41. SEARCH PAGE — kết quả tìm kiếm đẹp hơn
   ========================================================================== */
.search-results-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.4em;
  padding-bottom: .8em;
  border-bottom: 2px solid var(--color-border);
}
.search-results-title {
  font-size: var(--fs-h2);
  margin: 0;
  font-weight: 800;
}
.search-results-title span {
  color: var(--color-primary);
  font-style: italic;
}
.search-results-count {
  font-size: .88rem;
  color: var(--color-text-soft);
  white-space: nowrap;
}
/* Highlight từ khóa trong kết quả tìm kiếm */
.search-highlight { background: color-mix(in srgb,var(--color-primary) 15%,transparent); border-radius: 3px; padding: 0 3px; }

/* ==========================================================================
   42. RESPONSIVE TABLE — bảng cuộn ngang trên mobile
   ========================================================================== */
.entry-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  white-space: nowrap;
}
.entry-content table th,
.entry-content table td {
  white-space: normal;
  min-width: 80px;
}
.entry-content table thead th {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-soft));
  color: var(--color-text);
  font-weight: 700;
  font-size: .9rem;
}
.entry-content table tbody tr:nth-child(even) {
  background: var(--color-bg-soft);
}
.entry-content table tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
}
/* Wrapper tự động cho bảng lớn */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: 1.5em 0;
}
.table-scroll-wrapper table { margin: 0; display: table; }

/* ==========================================================================
   43. PRINT STYLESHEET — tối ưu in ấn cho bài viết
   ========================================================================== */
@media print {
  .site-header, .site-footer, .sidebar, .widget-area,
  .cn-ticker, .cn-cat-nav, .back-to-top, .cn-float-share,
  .share-buttons, .related-posts, .cn-newsletter, .ad-slot,
  .reading-progress, .menu-toggle, .comments-area,
  .breadcrumbs, .tags-links, .author-box,
  nav { display: none !important; }

  body { font-size: 12pt; line-height: 1.6; color: #000; background: #fff; }
  .layout-grid { display: block !important; }
  #primary { width: 100% !important; max-width: 100%; }
  .entry-content { font-size: 11pt; }
  .entry-content h2 { font-size: 16pt; page-break-after: avoid; }
  .entry-content h3 { font-size: 14pt; page-break-after: avoid; }
  .entry-content img { max-width: 100% !important; page-break-inside: avoid; }
  .entry-content a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
  .entry-content a[href^="#"]::after { content: ""; }
  pre, code { font-size: 9pt; background: #f5f5f5; border: 1px solid #ddd; }
  .single-hero { display: none; }
  .entry-title { font-size: 20pt; margin-bottom: .5em; }
  .post-meta { font-size: 9pt; color: #666; margin-bottom: 1em; }
}

/* ==========================================================================
   44. SKELETON LOADING — placeholder trước khi ảnh load
   ========================================================================== */
@keyframes cn-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.post-card .thumb img {
  background: linear-gradient(90deg, var(--color-bg-soft) 25%, color-mix(in srgb, var(--color-border) 60%, var(--color-bg-soft)) 50%, var(--color-bg-soft) 75%);
  background-size: 200% 100%;
}
.post-card .thumb img:not([src]),
.post-card .thumb img[src=""] {
  animation: cn-shimmer 1.6s ease infinite;
}

/* ==========================================================================
   45. READING WIDTH — giới hạn độ rộng đọc tối ưu
   ========================================================================== */
.single-article .entry-content {
  max-width: 72ch;       /* ~680px — ngưỡng đọc thoải mái nhất */
}
.single-article .entry-content table,
.single-article .entry-content pre,
.single-article .entry-content img,
.single-article .entry-content figure { max-width: 100%; }

/* ==========================================================================
   46. FOCUS STATES CẢI THIỆN — keyboard navigation
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.post-card:focus-within {
  box-shadow: var(--shadow-hover), 0 0 0 2px var(--color-primary);
}

/* ==========================================================================
   47. CONTENT-VISIBILITY — render off-screen sections lazily (INP/LCP boost)
   Sections dưới fold không render cho tới khi gần viewport → giảm TBT đáng kể.
   ========================================================================== */
.trending-strip,
.cat-section,
.related-posts,
.cn-newsletter,
.comments-area,
.error-404-suggestions {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px; /* estimated height — tránh layout shift */
}

/* ==========================================================================
   48. CSS CONTAINMENT — giới hạn repaint/reflow scope (INP improvement)
   ========================================================================== */
.post-card { contain: layout style; }
.widget    { contain: layout style; }
.site-header { contain: layout; }

/* ==========================================================================
   49. SAFE AREA INSETS — hỗ trợ iOS notch & Dynamic Island & Android nav bar
   ========================================================================== */
.site-header {
  padding-left:  env(safe-area-inset-left,  0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.container {
  padding-left:  max(20px, env(safe-area-inset-left,  20px));
  padding-right: max(20px, env(safe-area-inset-right, 20px));
}
/* Floating share bar và back-to-top tránh home indicator */
.cn-float-share {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}
.back-to-top {
  right:  max(20px, env(safe-area-inset-right,  20px));
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
}
@media (max-width: 992px) {
  .back-to-top { bottom: max(76px, calc(76px + env(safe-area-inset-bottom, 0px))); }
}

/* ==========================================================================
   50. TOUCH TARGETS — WCAG 2.2 / Apple HIG minimum 44×44px
   ========================================================================== */
/* Menu items */
.main-navigation a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
/* Pagination */
.pagination .page-numbers {
  min-width: 44px;
  min-height: 44px;
}
/* Share buttons */
.share-buttons a,
.share-buttons button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Back to top */
.back-to-top { width: 48px; height: 48px; }
/* Theme toggle */
.theme-toggle { min-width: 44px; min-height: 44px; }
/* Tag links */
.tags-links a { min-height: 36px; display: inline-flex; align-items: center; }

/* ==========================================================================
   51. FONT LOADING OPTIMIZATION — giảm FOUT / layout shift
   ========================================================================== */
/* Font display swap đã set ở Google Fonts URL (&display=swap) */
/* Thêm font-synthesis: none để tránh fake bold/italic gây CLS */
body { font-synthesis: none; }
/* Smooth font rendering */
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Ưu tiên system fonts cho UI elements (nhanh hơn, không FOUT) */
.post-meta,
.breadcrumbs,
.widget-title,
.cat-badge,
.section-title,
.pagination {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   52. INTERACTION STATES — hover/active/visited chuẩn 2026
   ========================================================================== */
/* Visited links trong entry content — subtle differentiation */
.entry-content a:visited:not(.button):not(.cat-badge) {
  color: color-mix(in srgb, var(--color-primary) 70%, #6b7280);
}
/* Active state cho links */
.entry-content a:active { opacity: .8; }

/* Smooth hover cho images (không layout shift) */
.post-card .thumb { overflow: hidden; }
.post-card .thumb img {
  will-change: transform;
  transform: translateZ(0); /* promote to own layer */
}

/* Scroll snap cho trending strip trên mobile */
@media (max-width: 640px) {
  .trending-list {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .trending-list .trending-item {
    scroll-snap-align: start;
    flex: 0 0 85%;
    display: flex;
  }
}

/* ==========================================================================
   53. WCAG 2.2 — Color contrast improvements
   ========================================================================== */
/* text-soft trên nền trắng: #6b7280 đạt 4.6:1 (AA) — đã OK */
/* Đảm bảo disabled state vẫn readable */
[disabled], [aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}
/* High contrast mode support */
@media (forced-colors: active) {
  .post-card { border: 1px solid ButtonText; }
  .site-header { border-bottom-color: ButtonText; }
  .cat-badge { background: ButtonText; color: ButtonFace; }
}

/* ==========================================================================
   54. SUBGRID & CONTAINER QUERIES — tối ưu layout thích ứng (2026 native)
   ========================================================================== */
/* Card grid dùng subgrid để align content vertically */
@supports (grid-template-rows: subgrid) {
  .posts-grid {
    align-items: stretch;
  }
  .posts-grid .post-card {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* Container query cho widget — thích ứng khi sidebar thay đổi chiều rộng */
@supports (container-type: inline-size) {
  .sidebar .widget {
    container-type: inline-size;
    container-name: sidebar-widget;
  }
  @container sidebar-widget (max-width: 240px) {
    .widget-post { flex-direction: column; }
    .widget-post .wp-thumb { width: 100%; height: 100px; }
  }
}

/* ==========================================================================
   55. LAYER — CSS Cascade Layers để tránh specificity wars (2026 best practice)
   ========================================================================== */
/* Note: @layer đặt ở đây chỉ có tác dụng nếu import trước.
   Sử dụng cho future-proofing và documentation. */

/* ==========================================================================
   56. TYPOGRAPHY NÂNG CAO — tiếng Việt 2026
   ========================================================================== */

/* Hanging punctuation — dấu câu ra ngoài lề, chuẩn typography chuyên nghiệp */
.entry-content p,
.entry-content li,
.entry-content blockquote {
  hanging-punctuation: first last;
}

/* text-size-adjust: none — ngăn iOS/Android tự zoom font size */
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Orphan/widow control đã có — thêm balance cho các block ngắn */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Initial letter (drop cap nâng cao) — dùng khi browser hỗ trợ */
@supports (initial-letter: 3) {
  .single-article .entry-content > p:first-of-type::first-letter {
    initial-letter: 3;
    /* Tắt float-based drop cap khi dùng initial-letter */
    float: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    color: var(--color-primary);
    font-weight: 800;
  }
}

/* font-size-adjust — giữ x-height ổn định khi font fallback */
body {
  font-size-adjust: from-font;
}

/* ==========================================================================
   57. OVERSCROLL BEHAVIOR — scroll containment
   ========================================================================== */

/* Ngăn scroll chaining từ modal/overlay sang body */
.main-navigation.is-open,
.cn-float-share,
.sidebar,
.widget-area {
  overscroll-behavior: contain;
}

/* Snap scroll cho gallery/card strips */
.trending-list {
  overscroll-behavior-x: contain;
}

/* ==========================================================================
   58. @STARTING-STYLE — smooth element appearance (Chrome 117+, Firefox 129+)
   ========================================================================== */

@supports (animation-timeline: view()) {
  @starting-style {
    .post-card {
      opacity: 0;
      transform: translateY(16px);
    }
    .cn-newsletter {
      opacity: 0;
      transform: scale(0.98);
    }
  }
}

/* Transition cho elements mới xuất hiện */
.post-card {
  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow var(--transition),
    border-color var(--transition);
}

/* ==========================================================================
   59. CARET & ACCENT — form inputs mang màu thương hiệu
   ========================================================================== */

input, textarea, select {
  caret-color: var(--color-primary);
  accent-color: var(--color-primary);
}

/* ==========================================================================
   60. LOGICAL PROPERTIES — RTL-ready (tương lai hỗ trợ đa ngôn ngữ)
   ========================================================================== */

/* Thay left/right bằng logical properties ở các nơi phù hợp */
.breadcrumbs { padding-inline-start: 0; }
.widget ul   { padding-inline-start: 0; }
.tags-links  { gap: 6px; }

/* margin-block cho vertical rhythm tốt hơn */
.entry-content h2,
.entry-content h3 {
  margin-block-start: 1.8em;
  margin-block-end: 0.6em;
}

/* ==========================================================================
   61. CSS SCROLL-DRIVEN ANIMATIONS nâng cao (Chrome 115+)
   ========================================================================== */

@supports (animation-timeline: scroll()) {
  /* Header shadow tăng dần khi scroll xuống */
  @keyframes header-elevate {
    from { box-shadow: none; }
    to   { box-shadow: 0 4px 20px rgba(0,0,0,.12); }
  }
  .site-header {
    animation: header-elevate linear both;
    animation-timeline: scroll();
    animation-range: 0px 100px;
  }
}

/* ==========================================================================
   62. COLOR-SCHEME & SYSTEM INTEGRATION
   ========================================================================== */

/* Inform browser về dark mode capability */
:root { color-scheme: light dark; }

/* Selection color cải thiện */
::selection {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: inherit;
}
::-moz-selection {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: inherit;
}

/* Scrollbar styling (Chromium) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-soft); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ==========================================================================
   63. CONTAINER SIZE QUERIES — responsive theo kích thước vùng chứa thực
   ========================================================================== */

@supports (container-type: size) {
  .layout-grid {
    container-type: inline-size;
    container-name: main-layout;
  }

  @container main-layout (max-width: 700px) {
    .posts-grid { grid-template-columns: 1fr; }
    .hero-featured { grid-template-columns: 1fr; }
  }
}

/* ==========================================================================
   64. PERFORMANCE: will-change KIỂM SOÁT
   GPU compositing chỉ khi thực sự cần — tránh memory leak
   ========================================================================== */

/* Chỉ promote khi hover để tránh waste GPU memory */
.post-card:hover { will-change: transform; }
.post-card:not(:hover) { will-change: auto; }

/* Reading progress sử dụng transform để tránh layout */
.reading-progress-bar {
  will-change: width;
  transform: translateZ(0);
}

/* ==========================================================================
   65. PROGRESSIVE ENHANCEMENT INDICATORS
   ========================================================================== */

/* Noscript: ẩn các element JS-only */
.noscript-warning { display: none; }

/* Loading state cho async content */
.is-loading {
  opacity: .6;
  pointer-events: none;
  cursor: wait;
}
.is-loading::after {
  content: "";
  display: block;
  width: 20px; height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 12px auto 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   80. FEATURED CARD — first card in cat-section gets featured treatment
   Bài đầu tiên mỗi hàng chuyên mục = full-width với ảnh trái, text phải.
   ========================================================================== */

/* Featured: full-width row layout */
.cat-section-grid .post-card:first-child {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  min-height: 200px;
}
.cat-section-grid .post-card:first-child .thumb {
  width: 45%;
  flex-shrink: 0;
  aspect-ratio: unset;
  min-height: 200px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.cat-section-grid .post-card:first-child .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius) 0 0 var(--radius);
}
.cat-section-grid .post-card:first-child .card-body {
  flex: 1;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cat-section-grid .post-card:first-child h3,
.cat-section-grid .post-card:first-child h2 {
  font-size: var(--fs-h3);
  -webkit-line-clamp: 4;
  line-clamp: 4;
  font-weight: 800;
}
.cat-section-grid .post-card:first-child .excerpt {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: .95rem;
}
/* On mobile: collapse to normal card */
@media (max-width: 640px) {
  .cat-section-grid .post-card:first-child {
    grid-column: span 1;
    flex-direction: column;
    min-height: auto;
  }
  .cat-section-grid .post-card:first-child .thumb {
    width: 100%;
    aspect-ratio: 16/9;
    min-height: auto;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .cat-section-grid .post-card:first-child .thumb img {
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

/* ==========================================================================
   81. TYPOGRAPHY DEPTH — dramatic hierarchy per content type
   ========================================================================== */

/* Hero titles: display size */
.hero-featured .hero-main .single-hero-title,
.hero-featured .hero-main h2 {
  font-size: var(--fs-h1-art) !important;
  letter-spacing: var(--letter-tight);
}

/* Single article: larger entry title */
.single-article .entry-title {
  font-size: var(--fs-h1-art);
  letter-spacing: var(--letter-tight);
  line-height: 1.15;
}

/* Entry content: improved rhythm */
.entry-content h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  letter-spacing: var(--letter-tight);
  margin-top: 2em;
}
.entry-content h3 {
  font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  margin-top: 1.6em;
}

/* Author name: more prominent */
.author-profile-name {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: var(--letter-tight);
}

/* ==========================================================================
   82. COLOR TINT APPLICATION — use the tint system in UI
   ========================================================================== */

/* Category sections: richer tint backgrounds */
.cat-section:nth-child(odd)  { background: var(--primary-50); }
.cat-section:nth-child(even) { background: transparent; }

/* Widget: subtle primary-50 bg */
.sidebar-1 .widget { background: var(--primary-50); }
[data-theme="dark"] .sidebar-1 .widget { background: var(--color-bg-soft); }

/* Search form focus: accent tint */
input[type="search"]:focus,
input[type="text"]:focus {
  background: var(--primary-50);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Newsletter bg: accent-100 as fallback bg */
.cn-newsletter {
  min-height: 140px;
}

/* ==========================================================================
   83. LIST SITES — improved image-text ratio
   ========================================================================== */

/* List cards: wider thumbnail for better balance */
.posts-grid.is-list .post-card .thumb {
  width: 280px;
  min-height: 160px;
}
.posts-grid.is-list .post-card .card-body {
  padding: 16px 20px;
}

/* List first card: full-width featured */
.posts-grid.is-list .post-card:first-child {
  flex-direction: column;
}
.posts-grid.is-list .post-card:first-child .thumb {
  width: 100%;
  height: 300px;
  aspect-ratio: unset;
  border-radius: var(--radius) var(--radius) 0 0;
}
.posts-grid.is-list .post-card:first-child h3,
.posts-grid.is-list .post-card:first-child h2 {
  font-size: var(--fs-h2);
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.posts-grid.is-list .post-card:first-child .excerpt {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 1rem;
}
@media (max-width: 768px) {
  .posts-grid.is-list .post-card .thumb { width: 100%; aspect-ratio: 16/9; }
  .posts-grid.is-list .post-card:first-child .thumb { height: 220px; }
}

/* ==========================================================================
   84. GRID SITES — first card featured in homepage grid
   ========================================================================== */

.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child {
  grid-column: span 2;
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child .thumb {
  aspect-ratio: 2/1;
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child h3 {
  font-size: var(--fs-h3);
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
@media (max-width: 640px) {
  .posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child {
    grid-column: span 1;
  }
}

/* ==========================================================================
   85. ELEVATION SYSTEM — unified shadow depth
   ========================================================================== */
.post-card { box-shadow: var(--shadow-sm); }
.post-card:hover { box-shadow: var(--shadow-lg); }
.widget { box-shadow: var(--shadow-sm); }
.author-profile-card { box-shadow: var(--shadow-md); }
.cn-newsletter { box-shadow: var(--shadow-md); }
.cat-banner-stat { box-shadow: var(--shadow-sm); }

/* ==========================================================================
   86. BLOCKQUOTE PULLQUOTE — improved editorial treatment
   ========================================================================== */
.entry-content blockquote {
  border-left: 4px solid var(--color-primary);
  background: var(--primary-100);
  padding: 1.2em 1.6em;
  font-size: 1.08em;
  font-style: italic;
  border-radius: 0 var(--radius) var(--radius) 0;
  position: relative;
  margin: 2em 0;
}
.entry-content blockquote::before {
  content: "\201C";
  font-size: 5em;
  line-height: 1;
  color: var(--color-primary);
  opacity: .15;
  position: absolute;
  top: -.1em;
  left: .1em;
  font-family: Georgia, serif;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite {
  display: block;
  margin-top: .8em;
  font-size: .85em;
  font-style: normal;
  font-weight: 600;
  color: var(--color-primary);
}
[data-theme="dark"] .entry-content blockquote { background: var(--color-bg-soft); }

/* ==========================================================================
   140. PREV/NEXT ARTICLE NAVIGATION — full-width cards at article bottom
   ========================================================================== */

.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 2.5em 0;
  border-top: 2px solid color-mix(in srgb, var(--color-primary) 15%, var(--color-border));
  padding-top: 1.5em;
}
@media (max-width: 600px) {
  .post-navigation { grid-template-columns: 1fr; }
}

/* Navigation card */
.post-navigation a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--color-bg-soft);
  transition: border-color var(--transition), background var(--transition), transform .15s ease;
  min-height: 80px;
  position: relative;
  overflow: hidden;
}
.post-navigation a::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity var(--transition);
}
.post-navigation .nav-previous a::before { left: 0; }
.post-navigation .nav-next     a::before { right: 0; left: auto; }
.post-navigation a:hover {
  border-color: var(--color-primary);
  background: var(--primary-50, color-mix(in srgb,var(--color-primary) 5%,var(--color-bg)));
  transform: translateY(-2px);
}
.post-navigation a:hover::before { opacity: 1; }

/* Direction label */
.nav-direction {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-previous .nav-direction::before { content: "←"; }
.nav-next     .nav-direction::after  { content: "→"; }
.nav-next     .nav-direction         { justify-content: flex-end; }

/* Article title */
.nav-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}
.post-navigation a:hover .nav-title { color: var(--color-primary); }

/* Category label */
.nav-cat {
  font-size: .7rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

/* Thumbnail in nav */
.nav-thumb {
  width: 56px; height: 42px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.nav-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Next article: align right */
.nav-next a { text-align: right; align-items: flex-end; }

/* Dark mode */
[data-theme="dark"] .post-navigation a {
  background: var(--color-bg-soft);
  border-color: var(--color-border);
}

/* ==========================================================================
   141. ARTICLE VIEW COUNT BADGE — social proof
   ========================================================================== */

.post-view-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-text-soft);
  background: var(--color-bg-soft);
  padding: 2px 8px;
  border-radius: 20px;
}
.post-view-count::before { content: "👁"; font-size: .8em; }
.post-view-count.is-popular { color: var(--color-primary); background: var(--primary-100,color-mix(in srgb,var(--color-primary) 10%,var(--color-bg-soft))); }

/* ==========================================================================
   142. STICKY MINI HEADER — mobile article reading
   ========================================================================== */

.cn-sticky-art-header {
  display: none;
}
@media (max-width: 992px) {
  .cn-sticky-art-header {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 150;
    background: color-mix(in srgb, var(--color-header-bg, var(--color-bg)) 95%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    /* Hidden by default, JS shows on scroll */
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
    pointer-events: none;
  }
  .cn-sticky-art-header.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .cn-sticky-art-header .mini-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width .1s linear;
  }
  .cn-sticky-art-header .mini-title {
    flex: 1;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cn-sticky-art-header .mini-cat {
    font-size: .68rem;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
    background: var(--primary-100,color-mix(in srgb,var(--color-primary) 10%,var(--color-bg-soft)));
    padding: 2px 8px;
    border-radius: 12px;
  }
}

/* ==========================================================================
   143. TAG PAGE — styled per-persona archive
   ========================================================================== */

.tax-post_tag .page-header-bar,
.tag .page-header-bar {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent, #f59e0b) 15%, var(--color-bg-soft)),
    var(--color-bg-soft)
  );
  border-left: 4px solid var(--color-accent, #f59e0b);
  padding: 20px 24px;
}
.tag .page-title { font-size: var(--fs-h2); margin: 0; }
.tag .page-title::before {
  content: "🏷 ";
  font-size: .8em;
}
.tag .archive-description {
  color: var(--color-text-soft);
  margin: 6px 0 0;
  font-size: .9rem;
}

/* Tag cloud in sidebar: styled */
.widget_tag_cloud .tagcloud a {
  font-size: .78rem !important;
}

/* ==========================================================================
   144. ARTICLE SUMMARY BOX — [cn_summary] shortcode
   ========================================================================== */

.cn-summary-box {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-soft)),
    var(--color-bg-soft)
  );
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin: 1.5em 0 2em;
}
.cn-summary-box-title {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cn-summary-box-title::before { content: "📋"; }
.cn-summary-box ul {
  margin: 0; padding-left: 1.2em; list-style: none;
}
.cn-summary-box ul li {
  padding: 4px 0;
  position: relative;
  font-size: .9rem;
  line-height: 1.5;
}
.cn-summary-box ul li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: 800;
  position: absolute;
  left: -1.2em;
}

/* ==========================================================================
   145. ARTICLE HEADER — enhanced entry-header no-hero
   ========================================================================== */

/* Better header when no featured image */
.single-article:not(:has(.single-hero)) .entry-header {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-soft)),
    var(--color-bg-soft)
  ) !important;
  border-left: 5px solid var(--color-primary) !important;
  padding: 28px 28px 24px !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 1.8em !important;
}
.single-article .entry-title {
  margin-top: 0;
  font-size: var(--fs-h1-art, clamp(1.8rem,3vw,2.8rem));
  letter-spacing: -.03em;
  line-height: 1.18;
}

/* ==========================================================================
   135. MICRO UX — tinh tế nhất, thường bị bỏ qua
   ========================================================================== */

/* 1. Smooth page scroll indicator (top bar reinforced) */
html { scroll-behavior: smooth; }

/* 2. Article: inline link hover underline slide */
.entry-content a:not(.button):not(.cat-badge) {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  transition: border-color var(--transition), color var(--transition);
}
.entry-content a:not(.button):not(.cat-badge):hover {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* 3. Page load progress: thin top bar animation */
@keyframes page-load {
  from { width: 0; opacity: 1; }
  to   { width: 100%; opacity: 0; }
}
.site-header::before {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  height: 3px;
  background: var(--color-primary);
  width: 0;
  /* Removed: would animate on every render. Kept as placeholder for JS */
}

/* 4. Card: thumbnail skeleton loading state */
.post-card .thumb {
  background: linear-gradient(
    90deg,
    var(--color-bg-soft) 0%,
    color-mix(in srgb, var(--color-border) 40%, var(--color-bg-soft)) 50%,
    var(--color-bg-soft) 100%
  );
  background-size: 200% 100%;
}
.post-card .thumb img.loaded { animation: none; }

/* 5. Back to top button: gradient ring */
.back-to-top {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb,var(--color-primary) 70%,var(--color-accent,#f59e0b)));
  border: 2px solid rgba(255,255,255,.2);
  font-size: 1rem;
  font-weight: 800;
}

/* 6. Input focus: smooth glow transition */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
  outline: none;
  border-color: var(--color-primary);
}

/* 7. Reading time: book icon */
.meta-reading { gap: 4px; }
.meta-reading::before { content: "📖"; font-size: .8em; }

/* 8. Date: calendar icon */
.meta-date time::before { content: "📅 "; font-size: .8em; }

/* 9. Author: person icon in byline */
.meta-author::before { content: "✍️ "; font-size: .8em; }

/* 10. Post count in widget categories: cleaner */
.widget_categories li .post-count {
  float: right;
  font-size: .72rem;
  background: var(--primary-100,color-mix(in srgb,var(--color-primary) 10%,var(--color-bg-soft)));
  color: var(--color-primary);
  padding: 1px 8px;
  border-radius: 20px;
  font-weight: 800;
  min-width: 24px;
  text-align: center;
}

/* 11. Tag cloud per persona */
.wp-block-tag-cloud a,
.tag-cloud-link {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
  color: var(--color-primary);
  font-size: .78rem !important;
  font-weight: 700;
  text-decoration: none;
  margin: 3px;
  transition: all var(--transition);
}
.wp-block-tag-cloud a:hover,
.tag-cloud-link:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* 12. Article: first H2 after intro: larger */
.entry-content > p:first-of-type + h2,
.entry-content > p:first-of-type + p + h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.95rem);
  margin-top: 2.2em;
}

/* 13. Newsletter CTA: form focus highlight */
.cn-nl-form input[type="email"]:focus {
  outline: none;
  border: 2px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}

/* 14. Hero section: gradient fade at very bottom edge */
.hero-featured {
  padding-bottom: 2px;
  background: linear-gradient(to bottom, transparent 90%, color-mix(in srgb, var(--color-bg) 60%, transparent));
}

/* 15. Section dots separator: per-persona color */
.cat-section + .cat-section::before {
  color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

/* ==========================================================================
   130. BLOCKQUOTE VARIANTS — 4 styles: standard, pullquote, info, warning, tip
   ========================================================================== */

/* Standard blockquote — already in Section 86, reinforce */
.entry-content blockquote:not([class]) {
  border-left: 4px solid var(--color-primary);
  background: var(--primary-100, color-mix(in srgb,var(--color-primary) 8%,var(--color-bg-soft)));
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2em 1.5em;
  margin: 2em 0;
  font-style: italic;
  position: relative;
}
.entry-content blockquote:not([class])::before {
  content: "\201C";
  font-size: 4.5em; line-height: .8;
  color: var(--color-primary); opacity: .18;
  font-family: Georgia,serif;
  position: absolute; top: .05em; left: .12em;
}
.entry-content blockquote cite {
  display: block; margin-top: .6em; font-size: .82em;
  font-style: normal; font-weight: 700; color: var(--color-primary);
}
.entry-content blockquote cite::before { content: "— "; }

/* Large pullquote style */
.entry-content blockquote.is-style-large,
.entry-content .wp-block-quote.is-style-large {
  border: 0;
  border-top: 3px solid var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  background: none;
  text-align: center;
  font-size: 1.35em;
  font-weight: 600;
  font-style: normal;
  color: var(--color-text);
  padding: 1em 1.5em;
  margin: 2.5em 0;
}
.entry-content blockquote.is-style-large::before { content: none; }

/* Info box — [info] shortcode or .cn-info */
.entry-content .cn-info,
.entry-content blockquote.cn-info {
  border-left: 4px solid #3b82f6;
  background: color-mix(in srgb, #3b82f6 8%, var(--color-bg-soft));
  padding: 1.1em 1.3em 1.1em 3.2em;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.6em 0; font-style: normal;
  position: relative;
}
.entry-content .cn-info::before {
  content: "ℹ"; position: absolute; left: 1em; top: 1.1em;
  font-size: 1.1rem; color: #3b82f6;
}
.entry-content .cn-info::after { content: none; }

/* Warning box — .cn-warning */
.entry-content .cn-warning,
.entry-content blockquote.cn-warning {
  border-left: 4px solid #f59e0b;
  background: color-mix(in srgb, #f59e0b 8%, var(--color-bg-soft));
  padding: 1.1em 1.3em 1.1em 3.2em;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.6em 0; font-style: normal; position: relative;
}
.entry-content .cn-warning::before {
  content: "⚠"; position: absolute; left: 1em; top: 1.1em;
  font-size: 1.1rem; color: #f59e0b;
}

/* Tip / success box — .cn-tip */
.entry-content .cn-tip,
.entry-content blockquote.cn-tip {
  border-left: 4px solid #10b981;
  background: color-mix(in srgb, #10b981 8%, var(--color-bg-soft));
  padding: 1.1em 1.3em 1.1em 3.2em;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.6em 0; font-style: normal; position: relative;
}
.entry-content .cn-tip::before {
  content: "✓"; position: absolute; left: 1em; top: 1.1em;
  font-size: 1.1rem; color: #10b981; font-weight: 800;
}

/* Dark mode info/warning/tip */
[data-theme="dark"] .entry-content .cn-info  { background: color-mix(in srgb,#3b82f6 10%,var(--color-bg-soft)); }
[data-theme="dark"] .entry-content .cn-warning { background: color-mix(in srgb,#f59e0b 10%,var(--color-bg-soft)); }
[data-theme="dark"] .entry-content .cn-tip   { background: color-mix(in srgb,#10b981 10%,var(--color-bg-soft)); }

/* ==========================================================================
   131. TABLE — per-persona compatible, striped, responsive
   ========================================================================== */

/* Already wrapped in .table-scroll-wrapper from v1.6 */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.entry-content table thead tr {
  background: var(--color-primary);
  color: #fff;
}
.entry-content table thead th {
  padding: 10px 14px;
  font-weight: 700;
  text-align: left;
  border: 0;
  font-size: .85rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.entry-content table tbody tr:nth-child(odd) {
  background: var(--primary-50, color-mix(in srgb,var(--color-primary) 4%,var(--color-bg)));
}
.entry-content table tbody tr:nth-child(even) { background: var(--color-bg); }
.entry-content table tbody tr:hover {
  background: var(--primary-100, color-mix(in srgb,var(--color-primary) 8%,var(--color-bg)));
  transition: background .15s;
}
.entry-content table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.entry-content table td:first-child { font-weight: 600; }

/* Scroll indicator on table wrapper */
.table-scroll-wrapper {
  position: relative;
}
.table-scroll-wrapper::after {
  content: "← cuộn →";
  display: none;
  font-size: .7rem;
  color: var(--color-text-soft);
  text-align: center;
  padding: 4px;
  background: var(--color-bg-soft);
}
@media (max-width: 640px) {
  .table-scroll-wrapper::after { display: block; }
}

/* Dark mode table */
[data-theme="dark"] .entry-content table thead tr { background: color-mix(in srgb, var(--color-primary) 80%, #000); }
[data-theme="dark"] .entry-content table tbody tr:nth-child(odd) { background: var(--color-bg-soft); }

/* ==========================================================================
   132. IMAGE GALLERY — WordPress blocks + custom gallery
   ========================================================================== */

/* Block gallery */
.wp-block-gallery .wp-block-image,
.entry-content .gallery-item { position: relative; overflow: hidden; border-radius: var(--radius); }
.wp-block-gallery .wp-block-image img,
.entry-content .gallery-item img {
  transition: transform .35s ease, filter .35s ease;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.wp-block-gallery .wp-block-image:hover img,
.entry-content .gallery-item:hover img {
  transform: scale(1.07);
  filter: brightness(1.05);
}
/* Overlay on gallery image hover */
.wp-block-gallery .wp-block-image::after {
  content: "🔍";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  font-size: 2rem;
  background: rgba(0,0,0,.5);
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease;
  pointer-events: none;
}
.wp-block-gallery .wp-block-image:hover::after { transform: translate(-50%,-50%) scale(1); }

/* Gallery caption */
.wp-block-gallery figcaption,
.gallery-caption {
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
  color: #fff;
  font-size: .78rem;
  padding: 6px 10px;
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Single image caption */
.entry-content .wp-element-caption,
.entry-content figcaption {
  font-size: .8rem;
  color: var(--color-text-soft);
  font-style: italic;
  text-align: center;
  margin-top: .5em;
  padding: .4em 0;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   133. 404 PAGE — dramatic design với persona-aware colors
   ========================================================================== */

/* 404 page: full-screen centered */
.error-404 {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap) 0;
  position: relative;
  overflow: hidden;
}

/* Background pattern */
.error-404::before {
  content: "404";
  position: absolute;
  font-size: clamp(15rem, 40vw, 28rem);
  font-weight: 900;
  color: color-mix(in srgb, var(--color-primary) 5%, transparent);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  letter-spacing: -.05em;
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.error-404-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 520px;
  width: 100%;
  padding: 0 20px;
}

/* 404 number: animated gradient */
.error-404-code {
  font-size: clamp(5rem, 15vw, 9rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb,var(--color-primary) 60%, var(--color-accent,#f59e0b)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .2em;
  letter-spacing: -.04em;
  animation: pulse-scale 3s ease infinite;
}
@keyframes pulse-scale {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .error-404-code { animation: none; }
}

/* 404 title */
.error-404 h1 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  margin: .4em 0 .6em;
  letter-spacing: -.02em;
}

/* 404 description */
.error-404 > .error-404-inner > p {
  color: var(--color-text-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.4em;
}

/* 404 persona message box */
.error-404-persona-msg {
  display: inline-block;
  background: var(--primary-100,color-mix(in srgb,var(--color-primary) 10%,var(--color-bg-soft)));
  border: 1px solid color-mix(in srgb,var(--color-primary) 25%,transparent);
  border-radius: var(--radius-lg);
  padding: 10px 20px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1.5em;
}

/* 404 search: centered */
.error-404-search { width: 100%; max-width: 400px; margin: 0 auto 1.2em; }

/* 404 actions */
.error-404-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.error-404-actions .button {
  padding: 12px 24px;
  font-size: .9rem;
  font-weight: 700;
  border-radius: var(--radius);
}

/* 404 suggestions section */
.error-404-suggestions {
  max-width: var(--container-width);
  margin: 2em auto 0;
  padding: 0 20px;
}
.error-404-suggestions .section-title { font-size: 1rem; }

/* ==========================================================================
   134. SEARCH PAGE — keyword highlight + enhanced results
   ========================================================================== */

/* Search header */
.search-results-header {
  padding: 1.5em 0 1em;
  margin-bottom: .5em;
}
.search-results-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 .3em;
}
.search-results-title span.search-term {
  color: var(--color-primary);
  font-style: italic;
  position: relative;
}
.search-results-title span.search-term::after {
  content: "";
  position: absolute;
  bottom: 2px; left: 0; right: 0;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  opacity: .4;
}

/* Search result count */
.search-results-count {
  font-size: .88rem;
  color: var(--color-text-soft);
  font-weight: 500;
}
.search-results-count strong {
  color: var(--color-primary);
  font-weight: 800;
  font-size: 1rem;
}

/* Keyword highlight in results */
.search-highlight {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-accent,#f59e0b) 12%);
  color: var(--color-text);
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 700;
  font-style: normal;
}

/* Search: sort bar like category */
.search-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 1.2em;
  padding-bottom: .8em;
  border-bottom: 1px solid var(--color-border);
}

/* No results state */
.search-no-results {
  text-align: center;
  padding: 4em 1em;
}
.search-no-results-icon {
  font-size: 4rem;
  margin-bottom: .4em;
  display: block;
  filter: grayscale(.3);
}
.search-no-results h2 {
  font-size: 1.4rem;
  margin-bottom: .4em;
}
.search-no-results p { color: var(--color-text-soft); margin-bottom: 1.2em; }
.search-suggestions-list {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1em;
}
.search-suggestions-list a {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.search-suggestions-list a:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   120. MỚI / HOT BADGES — visual freshness indicators
   ========================================================================== */

/* "MỚI" badge — bài < 7 ngày */
.post-card[data-new="1"]::before,
.post-card.is-new::before {
  content: "MỚI";
  position: absolute;
  top: 8px; left: 8px;
  z-index: 10;
  background: #16a34a;
  color: #fff;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 3px;
  line-height: 1.6;
  text-transform: uppercase;
  animation: badge-pulse 2s ease infinite;
}
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
  50%      { box-shadow: 0 0 0 4px rgba(22,163,74,0); }
}

/* "HOT" badge — bài có lượt xem cao */
.post-card[data-hot="1"]::before,
.post-card.is-hot::before {
  content: "🔥 HOT";
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 2px 8px rgba(239,68,68,.4);
  animation: none;
}

/* POST card position relative for badges */
.post-card { position: relative; }

/* Thumb keeps overflow hidden for badge */
.post-card > .thumb { overflow: hidden; position: relative; }

/* ==========================================================================
   121. CODE BLOCKS — language labels + enhanced styling
   ========================================================================== */

/* Code block wrapper position */
.entry-content pre {
  position: relative;
  border-radius: var(--radius);
  overflow-x: auto;
  background: #0d1117 !important;
  color: #e6edf3 !important;
  padding: 2.8em 1.2em 1.2em;
  font-size: .875rem;
  line-height: 1.7;
  border: 1px solid #30363d;
  margin: 1.8em 0;
}

/* Language label: JS detects class and injects data-lang */
.entry-content pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0; left: 0;
  background: color-mix(in srgb, var(--color-primary) 85%, #000);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius) 0 var(--radius) 0;
  line-height: 1.8;
}

/* Generic label when no lang detected */
.entry-content pre:not([data-lang])::before {
  content: "code";
  position: absolute;
  top: 0; left: 0;
  background: #30363d;
  color: #7d8590;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius) 0 var(--radius) 0;
  line-height: 1.8;
}

/* Copy button: more prominent */
.cn-copy-btn {
  top: 4px !important;
  right: 6px !important;
  font-size: .68rem !important;
  background: rgba(255,255,255,.08) !important;
  color: #7d8590 !important;
  border-color: #30363d !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.cn-copy-btn:hover { background: rgba(255,255,255,.15) !important; color: #e6edf3 !important; }
.cn-copy-btn.copied { background: #16a34a !important; color: #fff !important; border-color: #16a34a !important; }

/* Inline code: richer styling */
.entry-content code:not([class]) {
  background: #161b22;
  color: #79c0ff;
  border: 1px solid #30363d;
  padding: .12em .45em;
  border-radius: 4px;
  font-size: .88em;
}

/* ==========================================================================
   122. CATEGORY PAGE ENHANCEMENTS — sort + filter
   ========================================================================== */

/* Sort/filter bar */
.archive-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1.2em;
  padding-bottom: .8em;
  border-bottom: 1px solid var(--color-border);
}
.archive-sort-label {
  font-size: .8rem;
  color: var(--color-text-soft);
  font-weight: 600;
}
.archive-sort-pills {
  display: flex;
  gap: 6px;
}
.archive-sort-pill {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-soft);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}
.archive-sort-pill.active,
.archive-sort-pill:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Category page: result count */
.archive-count {
  font-size: .82rem;
  color: var(--color-text-soft);
  font-weight: 500;
}
.archive-count strong { color: var(--color-primary); font-weight: 800; }

/* ==========================================================================
   123. MOBILE READING OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
  /* Larger body text on mobile for readability */
  .entry-content { font-size: 1.06rem; line-height: 1.82; }

  /* H2/H3 comfortable on small screens */
  .entry-content h2 { font-size: clamp(1.3rem, 5vw, 1.6rem); margin-top: 1.8em; }
  .entry-content h3 { font-size: clamp(1.1rem, 4vw, 1.3rem); margin-top: 1.5em; }

  /* Paragraph spacing mobile */
  .entry-content p { margin-bottom: 1.4em; }

  /* Code blocks mobile: smaller font */
  .entry-content pre { font-size: .8rem; padding: 2.4em 1em 1em; }

  /* TOC mobile: smaller */
  .cn-toc, .rank-math-toc-widget-box {
    padding: 12px 14px;
    font-size: .88rem;
  }

  /* Share buttons: wrap nicely */
  .share-buttons { gap: 8px; }
  .share-fb, .share-x, .share-tg, .share-copy {
    padding: 8px 14px !important;
    font-size: .8rem !important;
  }

  /* Related posts: single column on mobile */
  .related-grid { grid-template-columns: 1fr !important; }
  .related-grid .post-card:first-child { grid-column: span 1; flex-direction: column; min-height: auto; }
  .related-grid .post-card:first-child .thumb { width: 100%; min-height: auto; aspect-ratio: 16/9; }
}

/* ==========================================================================
   124. DARK MODE TOC — better contrast
   ========================================================================== */

[data-theme="dark"] .cn-toc,
[data-theme="dark"] .rank-math-toc-widget-box,
[data-theme="dark"] .rank-math-block-toc {
  background: color-mix(in srgb, var(--color-primary) 6%, #0d1117);
  border-color: color-mix(in srgb, var(--color-primary) 30%, #30363d);
}
[data-theme="dark"] .cn-toc a,
[data-theme="dark"] .rank-math-toc-widget-box a {
  color: color-mix(in srgb, var(--color-text-soft) 85%, #fff) !important;
}
[data-theme="dark"] .cn-toc a:hover,
[data-theme="dark"] .rank-math-toc-widget-box a:hover,
[data-theme="dark"] .cn-toc a.is-active,
[data-theme="dark"] .rank-math-toc-widget-box a.is-active {
  color: color-mix(in srgb, var(--color-primary) 90%, #fff) !important;
  border-left-color: var(--color-primary) !important;
}

/* ==========================================================================
   125. ARTICLE IMAGE ZOOM HINT
   ========================================================================== */

.entry-content figure img,
.entry-content .wp-block-image img,
.entry-content > img {
  cursor: zoom-in;
  transition: transform .3s ease, box-shadow .3s ease;
}
.entry-content figure img:hover,
.entry-content .wp-block-image img:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   126. HERO FEATURED — "EDITOR'S PICK" label on hero main
   ========================================================================== */

.hero-featured .hero-main::after {
  content: "NỔI BẬT";
  position: absolute;
  top: 0; right: 0;
  background: var(--color-primary);
  color: #fff;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0 0 0 var(--radius);
  z-index: 5;
}

/* ==========================================================================
   127. CATEGORY PAGE — breadcrumb + description area
   ========================================================================== */

/* Cat-banner: taller with more content */
.cat-banner { padding: 40px 0 36px; }
.cat-banner-inner { gap: 16px; }

/* Description clamped at 2 lines */
.cat-banner-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Archive main: when very few articles, center grid */
.archive .posts-grid:has(.post-card:only-child),
.archive .posts-grid:has(.post-card:nth-child(2):last-child) {
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

/* ==========================================================================
   128. WIDGET — Popular posts view count indicator
   ========================================================================== */

.widget-post .wp-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  color: var(--color-text-soft);
}
.widget-post .wp-date::before { content: "📅"; font-size: .72em; }

/* Widget categories: count badge */
.widget_categories ul li .post-count,
.widget_categories ul li a + span {
  background: var(--primary-100, color-mix(in srgb,var(--color-primary) 10%,var(--color-bg-soft)));
  color: var(--color-primary);
  font-size: .65rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 20px;
  margin-left: auto;
}

/* ==========================================================================
   110. DARK MODE POLISH — comprehensive dark theme improvements
   ========================================================================== */

/* Images: reduce brightness slightly, prevent blinding white */
[data-theme="dark"] img {
  opacity: .92;
  filter: brightness(.96) contrast(1.02);
}
/* But not featured/hero images - keep them vivid */
[data-theme="dark"] .single-hero-img,
[data-theme="dark"] .hero-main img,
[data-theme="dark"] .thumb img {
  opacity: 1;
  filter: none;
}

/* Dark card: subtle border glow on hover */
[data-theme="dark"] .post-card {
  border-color: color-mix(in srgb, var(--color-border) 60%, transparent);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
[data-theme="dark"] .post-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent),
    0 8px 24px rgba(0,0,0,.4);
}

/* Dark: card body background match */
[data-theme="dark"] .post-card .card-body {
  background: var(--color-bg-soft);
}

/* Dark sidebar: more depth */
[data-theme="dark"] .widget-area .widget {
  background: var(--color-bg-soft);
  border-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
}
[data-theme="dark"] .widget-title { color: var(--color-text); }

/* Dark cat-nav: visible separation */
[data-theme="dark"] .cn-cat-nav {
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, rgba(255,255,255,.05));
}

/* Dark section backgrounds */
[data-theme="dark"] .cat-section:nth-child(odd) {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-soft));
}
[data-theme="dark"] .cat-section:nth-child(even) {
  background: transparent;
}
[data-theme="dark"] .trending-strip {
  background: color-mix(in srgb, var(--color-bg-soft) 85%, var(--color-primary));
}

/* Dark hero featured side cards */
[data-theme="dark"] .hero-featured .hero-side .post-card {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-soft));
}

/* Dark TOC */
[data-theme="dark"] .cn-toc,
[data-theme="dark"] .rank-math-toc-widget-box {
  background: var(--color-bg-soft);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

/* Dark blockquote */
[data-theme="dark"] .entry-content blockquote {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-soft));
  color: var(--color-text);
}

/* Dark selection */
[data-theme="dark"] ::selection {
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* ==========================================================================
   111. MOBILE NAV OVERLAY — polished slide-in
   ========================================================================== */

/* Backdrop overlay when menu open */
@media (max-width: 768px) {
  body.menu-is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fade-in .2s ease;
  }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

  .main-navigation {
    position: fixed;
    top: 0; right: -100%; bottom: 0;
    left: auto;
    width: min(85vw, 320px);
    max-height: none !important;
    overflow-y: auto;
    background: var(--color-bg);
    box-shadow: -4px 0 24px rgba(0,0,0,.25);
    z-index: 200;
    padding: 70px 0 20px;
    transition: right .3s cubic-bezier(.4,0,.2,1) !important;
    border-left: 3px solid var(--color-primary);
  }
  .main-navigation.is-open {
    right: 0;
    max-height: none !important;
  }
  .main-navigation ul {
    flex-direction: column !important;
    padding: 8px 0;
    gap: 0;
  }
  .main-navigation li a {
    padding: 14px 24px;
    border-radius: 0;
    border-left: 3px solid transparent;
    font-size: 1rem;
  }
  .main-navigation li a:hover,
  .main-navigation .current-menu-item > a {
    background: var(--primary-50, color-mix(in srgb,var(--color-primary) 6%,var(--color-bg)));
    border-left-color: var(--color-primary);
  }
}

/* ==========================================================================
   112. FOOTER REDESIGN — richer layout
   ========================================================================== */

/* Footer widgets: 3-column (description + links + categories) */
.footer-widgets {
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: var(--gap);
}
@media (max-width: 992px) {
  .footer-widgets { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 580px) {
  .footer-widgets { grid-template-columns: 1fr !important; }
}

/* Footer site info block */
.footer-site-info {
  margin-bottom: 20px;
}
.footer-site-info .footer-logo img {
  max-height: 40px;
  width: auto;
  opacity: .85;
  filter: brightness(2);
  margin-bottom: 12px;
}
.footer-site-info .footer-tagline {
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
  max-width: 260px;
}

/* Footer social mini */
.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.footer-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8) !important;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.footer-social a:hover {
  background: var(--color-primary);
  color: #fff !important;
}

/* ==========================================================================
   113. SCROLL REVEAL ANIMATIONS — per-card reveal
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* Base reveal — cards reveal from below */
  .post-card[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s ease, transform .4s ease;
  }
  .post-card[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Category section reveal */
  .cat-section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .cat-section.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Widget animate in */
  .widget {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .4s ease, transform .4s ease;
  }
  .widget.revealed {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   114. CARD HOVER MICRO-INTERACTIONS
   ========================================================================== */

/* Category badge on hover: pop scale */
.post-card:hover .cat-badge {
  transform: scale(1.05);
  transition: transform var(--transition);
}

/* Hero main image: stronger zoom */
.hero-featured .hero-main:hover .thumb img {
  transform: scale(1.06);
}

/* Section title "Xem tất cả" button: arrow moves right */
.cat-section-more:hover::after { content: " →→"; }

/* ==========================================================================
   115. HOMEPAGE ENHANCEMENTS
   ========================================================================== */

/* Between sections: visual separator dots */
.cat-section + .cat-section::before {
  content: "· · ·";
  display: block;
  text-align: center;
  color: var(--color-border);
  font-size: 1.2rem;
  letter-spacing: .4em;
  margin-bottom: var(--gap);
}

/* Hero featured: gap between main and side */
.hero-featured {
  gap: 12px;
  margin-bottom: calc(var(--gap) + 8px);
}

/* ==========================================================================
   100. TOC — Table of Contents nâng cấp
   ========================================================================== */

/* Base TOC: card feel, branded */
.cn-toc,
.rank-math-toc-widget-box,
.wp-block-rank-math-toc-block {
  background: var(--primary-50, color-mix(in srgb, var(--color-primary) 5%, var(--color-bg)));
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 1.8em 0;
  position: relative;
}

/* TOC title */
.cn-toc-title,
.rank-math-toc-widget-box h4,
.rank-math-toc-widget-box .widget-title {
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-primary) !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cn-toc-title::before { content: "≡"; font-size: 1rem; }

/* TOC links */
.cn-toc a,
.rank-math-toc-widget-box a {
  color: var(--color-text-soft) !important;
  font-size: .88rem;
  text-decoration: none;
  transition: color .15s;
  display: block;
  padding: 2px 0;
  border-left: 2px solid transparent;
  padding-left: 8px;
  margin-left: -8px;
}
.cn-toc a:hover,
.rank-math-toc-widget-box a:hover,
.cn-toc a.is-active,
.rank-math-toc-widget-box a.is-active {
  color: var(--color-primary) !important;
  border-left-color: var(--color-primary);
}

/* TOC H3 (sub-items) */
.cn-toc .cn-toc-h3,
.rank-math-toc-widget-box .toc-list-item.level-2 {
  padding-left: 24px;
  font-size: .82rem;
}

/* ==========================================================================
   101. SHARE BUTTONS — visual nâng cấp với icons Unicode
   ========================================================================== */

.share-buttons {
  padding: 18px 0;
  border-top: 2px solid color-mix(in srgb, var(--color-primary) 15%, var(--color-border));
  border-bottom: 1px solid var(--color-border);
  margin: 2em 0;
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Share label */
.share-buttons::before {
  content: "Chia sẻ:";
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-soft);
  margin-right: 4px;
  flex-shrink: 0;
}

.share-buttons a,
.share-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: transform .15s, opacity .15s;
  min-height: 38px;
}
.share-buttons a:hover,
.share-buttons button:hover { opacity: .88; transform: translateY(-1px); }

/* Platform colors + icon prefix */
.share-fb::before  { content: "f "; }
.share-x::before   { content: "𝕏 "; }
.share-tg::before  { content: "✈ "; }
.share-copy::before { content: "🔗 "; }

/* ==========================================================================
   102. RELATED POSTS — visual nâng cấp
   ========================================================================== */

.related-posts { margin: 2.5em 0; }

/* Related section header */
.related-posts .section-title {
  margin-bottom: 1.2em;
  padding-bottom: .6em;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
}

/* First related card: featured treatment */
.related-grid .post-card:first-child {
  grid-column: span 3;
  flex-direction: row;
  min-height: 160px;
}
.related-grid .post-card:first-child .thumb {
  width: 40%;
  min-height: 160px;
  flex-shrink: 0;
  aspect-ratio: unset;
  border-radius: var(--radius) 0 0 var(--radius);
}
.related-grid .post-card:first-child .thumb img {
  height: 100%;
  border-radius: var(--radius) 0 0 var(--radius);
}
.related-grid .post-card:first-child h3 {
  font-size: 1.05rem !important;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.related-grid .post-card:first-child .excerpt {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: .9rem;
}

@media (max-width: 768px) {
  .related-grid .post-card:first-child {
    grid-column: span 1;
    flex-direction: column;
    min-height: auto;
  }
  .related-grid .post-card:first-child .thumb {
    width: 100%;
    aspect-ratio: 16/9;
    min-height: auto;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .related-grid .post-card:first-child .thumb img {
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

/* ==========================================================================
   103. BREADCRUMBS — enhanced visual
   ========================================================================== */

.breadcrumbs,
.rank-math-breadcrumb {
  font-size: .8rem;
  color: var(--color-text-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 1.2em;
  padding: 6px 10px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  border-left: 3px solid var(--color-primary);
}
.breadcrumbs a,
.rank-math-breadcrumb a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover { opacity: .75; }

.breadcrumbs .sep,
.rank-math-breadcrumb .separator { color: var(--color-border); }

/* ==========================================================================
   104. READING PROGRESS BAR — enhanced
   ========================================================================== */

.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
}
.reading-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-primary) 70%, var(--color-accent, #f59e0b)) 50%,
    var(--color-accent, #f59e0b) 100%
  );
  transition: width .1s linear;
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

/* ==========================================================================
   105. ARTICLE NO-HERO FALLBACK — entry-header khi không có ảnh
   ========================================================================== */

/* Khi bài không có featured image: header đẹp hơn */
.single-article:not(:has(.single-hero)) .entry-header {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-soft)),
    var(--color-bg-soft)
  );
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  margin-bottom: 1.5em;
  border-left: 5px solid var(--color-primary);
}

/* ==========================================================================
   106. TAGS — pill colored display
   ========================================================================== */

.tags-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 1.5em 0 1em;
}
.tags-links a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  background: var(--primary-100, color-mix(in srgb,var(--color-primary) 10%,var(--color-bg-soft)));
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.tags-links a:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ==========================================================================
   107. CATEGORY PAGE ENHANCEMENTS
   ========================================================================== */

/* Archive description */
.cat-banner-desc {
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  max-width: 600px;
  margin-bottom: 0;
}

/* Page header bar for non-category archives */
.page-header-bar {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-soft)),
    var(--color-bg-soft)
  );
  border-left: 4px solid var(--color-primary);
  padding: 20px 24px;
}

/* Archive: when only 1-2 articles, don't look empty */
.archive .posts-grid .post-card:only-child,
.archive .posts-grid .post-card:first-child:last-child {
  grid-column: 1 / -1;
  max-width: 600px;
  margin: 0 auto;
}

/* ==========================================================================
   108. ARTICLE CONTENT — final polish
   ========================================================================== */

/* Strong/b: colored */
.entry-content strong,
.entry-content b {
  color: var(--color-text);
  font-weight: 800;
}

/* Link in content: underline decoration */
.entry-content a:not(.button):not(.cat-badge):not(.tag) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
  text-underline-offset: .15em;
}
.entry-content a:not(.button):not(.cat-badge):not(.tag):hover {
  text-decoration-color: var(--color-primary);
}

/* Image: full-bleed trong bài */
.entry-content .wp-block-image.alignfull img,
.entry-content .alignfull img {
  width: 100%;
  border-radius: 0;
}

/* ==========================================================================
   90. SIDEBAR RANKED WIDGET — numbered ranking visual
   ========================================================================== */

/* Widget-post: auto counter for ranking */
.widget-posts { counter-reset: widget-rank; }
.widget-post {
  counter-increment: widget-rank;
  position: relative;
  padding-left: 32px !important;
  align-items: flex-start;
}
.widget-post::before {
  content: counter(widget-rank);
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--color-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
/* Top 3: gold/silver/bronze */
.widget-post:nth-child(1)::before { background: linear-gradient(135deg,#f59e0b,#d97706); }
.widget-post:nth-child(2)::before { background: linear-gradient(135deg,#94a3b8,#64748b); }
.widget-post:nth-child(3)::before { background: linear-gradient(135deg,#b45309,#92400e); }

/* Widget title: more prominent */
.widget-title {
  font-size: .85rem !important;
  letter-spacing: .06em;
}

/* Widget thumbnail: fixed ratio */
.widget-post .wp-thumb { border-radius: 6px; overflow: hidden; }
.widget-post .wp-thumb img { border-radius: 6px; transition: transform .3s ease; }
.widget-post:hover .wp-thumb img { transform: scale(1.06); }

/* Widget post title: tighter */
.widget-post .wp-title {
  font-size: .87rem;
  line-height: 1.35;
  font-weight: 600;
}
.widget-post .wp-date { font-size: .7rem; color: var(--color-text-soft); }
.widget-post:hover .wp-title { color: var(--color-primary); }

/* ==========================================================================
   91. CAT-NAV BAR — enhanced active state + hover
   ========================================================================== */

.cn-cat-nav ul li { position: relative; }

/* Active indicator */
.cn-cat-nav ul li a[aria-current="page"] {
  color: #fff !important;
  border-bottom-color: var(--color-primary) !important;
  font-weight: 700;
}
.cn-cat-nav ul li a[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 10%; right: 10%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

/* Hover: smooth underline grow */
.cn-cat-nav ul li a::before {
  content: "";
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--color-primary);
  transition: left .2s ease, right .2s ease;
}
.cn-cat-nav ul li a:hover::before { left: 10%; right: 10%; }

/* ==========================================================================
   92. POST META — improved legibility
   ========================================================================== */

.post-meta {
  font-size: .78rem;
  font-weight: 500;
  gap: 10px;
  color: var(--color-text-soft);
}

/* Date chip */
.post-meta .meta-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg-soft);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-text-soft);
}

/* Author chip */
.post-meta .meta-author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--color-primary);
}

/* Reading time chip */
.post-meta .meta-reading {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-soft));
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Single article meta: slightly larger */
.entry-meta-bar .post-meta,
.single-hero-overlay .post-meta { font-size: .82rem; gap: 12px; }

/* ==========================================================================
   93. HERO SIDE CARDS — improved thumbnail ratio
   ========================================================================== */

.hero-featured .hero-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-featured .hero-side .post-card {
  flex-direction: row;
  gap: 10px;
  align-items: center;
  border-radius: var(--radius);
  padding: 10px;
  background: color-mix(in srgb, var(--color-bg-soft) 90%, var(--color-primary) 10%);
  border: 1px solid var(--color-border);
  flex: 1;
  min-height: unset;
}
.hero-featured .hero-side .post-card .thumb {
  width: 110px;
  height: 82px;
  flex-shrink: 0;
  aspect-ratio: unset;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
}
.hero-featured .hero-side .post-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  transition: transform .4s ease;
}
.hero-featured .hero-side .post-card:hover .thumb img {
  transform: scale(1.06);
}
.hero-featured .hero-side .post-card .card-body {
  padding: 0;
  gap: 4px;
}
.hero-featured .hero-side .post-card h3,
.hero-featured .hero-side .post-card h2 {
  font-size: .86rem !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin: 0;
  font-weight: 700;
}
.hero-featured .hero-side .post-card .cat-badge {
  font-size: .6rem;
}
.hero-featured .hero-side .post-card .excerpt { display: none; }

/* ==========================================================================
   94. ARTICLE CONTENT HEADINGS — stronger contrast
   ========================================================================== */

.entry-content h2 {
  color: var(--color-text);
  padding-bottom: .4em;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
}
.entry-content h3 {
  color: var(--color-text);
  padding-left: .8em;
  border-left: 3px solid var(--color-primary);
}
.entry-content h4 {
  color: var(--color-primary);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ==========================================================================
   95. CAT-SECTION HEAD — more prominent "Xem tất cả"
   ========================================================================== */

.cat-section-more {
  padding: 5px 14px;
  background: var(--color-primary);
  color: #fff !important;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background var(--transition), transform var(--transition);
}
.cat-section-more::after { content: " →"; }
.cat-section-more:hover {
  background: var(--primary-hover);
  transform: translateX(2px);
  text-decoration: none;
}

/* ==========================================================================
   96. PAGINATION — improved visual
   ========================================================================== */

.pagination .page-numbers {
  min-width: 42px;
  height: 42px;
  border-radius: 50%;
  font-weight: 700;
  font-size: .9rem;
  transition: all var(--transition);
}
.pagination .page-numbers:hover:not(.current) {
  background: var(--primary-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.pagination .prev,
.pagination .next {
  border-radius: var(--radius);
  padding: 0 16px;
  width: auto;
  min-width: unset;
  font-size: .82rem;
}

/* ==========================================================================
   97. SINGLE ARTICLE — reading experience polish
   ========================================================================== */

/* First paragraph: slightly larger lead text */
.entry-content > p:first-of-type {
  font-size: 1.1em;
  line-height: 1.75;
  font-weight: 400;
  color: var(--color-text);
}

/* In-content images: subtle caption treatment */
.entry-content figure.wp-block-image figcaption,
.entry-content .wp-caption-text {
  font-style: italic;
  font-size: .82rem;
  color: var(--color-text-soft);
  text-align: center;
  margin-top: .5em;
  border-top: 1px solid var(--color-border);
  padding-top: .4em;
}

/* Code inline: primary tint background */
.entry-content code:not([class]) {
  background: var(--primary-100, color-mix(in srgb,var(--color-primary) 8%,var(--color-bg-soft)));
  color: var(--color-primary);
  padding: .18em .5em;
  border-radius: 4px;
  font-size: .88em;
  font-weight: 500;
}

/* Numbered list: primary color numbers */
.entry-content ol { counter-reset: ol-counter; list-style: none; padding-left: 0; }
.entry-content ol > li {
  counter-increment: ol-counter;
  padding-left: 2.2em;
  position: relative;
  margin-bottom: .6em;
}
.entry-content ol > li::before {
  content: counter(ol-counter) ".";
  position: absolute; left: 0;
  color: var(--color-primary);
  font-weight: 800;
  font-size: .95em;
}

/* ==========================================================================
   70. SECTION RHYTHM — alternating backgrounds cho visual rhythm
   Áp dụng toàn bộ 19 site, per-site override qua child theme.
   ========================================================================== */

/* Odd sections: very subtle primary tint */
.cat-section:nth-child(odd) {
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg));
  padding: var(--gap) 0;
  margin: 0 calc(-1 * max(20px, env(safe-area-inset-left, 20px)));
  padding-left: max(20px, env(safe-area-inset-left, 20px));
  padding-right: max(20px, env(safe-area-inset-right, 20px));
  border-radius: var(--radius-lg);
}
.cat-section:nth-child(even) {
  padding: calc(var(--gap) * 0.5) 0;
}

/* Trending strip: slightly different background */
.trending-strip {
  background: color-mix(in srgb, var(--color-bg-soft) 80%, var(--color-primary) 20%);
  padding: var(--gap);
  border-radius: var(--radius-lg);
  margin-top: var(--gap);
}

/* ==========================================================================
   71. CARD VISUAL DEPTH — universal card improvements
   ========================================================================== */

/* Card image: stronger scale + brightness on hover */
.post-card:hover .thumb img {
  transform: scale(1.07);
  filter: brightness(1.05);
}

/* Card body gradient at bottom (fade to bg on long titles) */
.post-card .card-body {
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    color-mix(in srgb, var(--color-bg) 96%, var(--color-primary)) 100%
  );
}

/* Featured post card (hero-main) — stronger overlay */
.hero-featured .hero-main .card-body {
  background: linear-gradient(
    to top,
    rgba(0,0,0,.96) 0%,
    rgba(0,0,0,.65) 45%,
    rgba(0,0,0,.15) 75%,
    transparent 100%
  );
}

/* ==========================================================================
   72. SECTION TITLE SYSTEM — unified visual treatment
   ========================================================================== */

/* Animated underline draw-in effect on section title */
@media (prefers-reduced-motion: no-preference) {
  .section-title::before {
    transition: width .4s ease;
  }
  .section-title:hover::before {
    width: 6px;
  }
}

/* Cat-section head: more breathing room */
.cat-section-head {
  padding-bottom: .6em;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  margin-bottom: 1.2em;
}

/* ==========================================================================
   73. FOOTER VISUAL DEPTH
   ========================================================================== */

.site-footer {
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--color-accent, #f59e0b) 8%, transparent) 0%, transparent 50%),
    var(--color-footer-bg, #0f172a);
  position: relative;
}

/* Decorative top border */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-primary) 30%,
    var(--color-accent, #f59e0b) 70%,
    transparent 100%
  );
}

/* ==========================================================================
   74. HERO IMAGE QUALITY — better image rendering
   ========================================================================== */

.single-hero-img,
.hero-featured .hero-main .thumb img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Single article hero: cinematic crop */
.single-hero {
  max-height: 560px;
}
.single-hero-img {
  height: 560px;
}

/* ==========================================================================
   75. TRENDING STRIP AESTHETIC — numbered ranking visual
   ========================================================================== */

/* Top-3 badge: gold/silver/bronze */
.trending-list .trending-item:nth-child(1) .trending-num {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 8px rgba(245,158,11,.4);
}
.trending-list .trending-item:nth-child(2) .trending-num {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  box-shadow: 0 2px 8px rgba(100,116,139,.3);
}
.trending-list .trending-item:nth-child(3) .trending-num {
  background: linear-gradient(135deg, #b45309, #92400e);
  box-shadow: 0 2px 8px rgba(180,83,9,.3);
}

/* Items 4+ use primary color */
.trending-list .trending-item:nth-child(n+4) .trending-num {
  background: var(--color-primary);
}

/* ==========================================================================
   76. WIDGET VISUAL ENHANCEMENT
   ========================================================================== */

/* Widget: accent left glow */
.widget {
  position: relative;
  overflow: hidden;
}
.widget::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  opacity: .6;
}

/* Popular widget post rank number */
.widget-post .wp-thumb {
  position: relative;
}

/* ==========================================================================
   77. CAT BANNER — category page header drama
   ========================================================================== */

.cat-banner {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    color-mix(in oklab, var(--color-primary) 60%, #000 40%) 60%,
    color-mix(in oklab, var(--color-primary) 40%, #000 60%) 100%
  );
  position: relative;
  overflow: hidden;
}

/* Animated shimmer line across banner */
.cat-banner::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.06),
    transparent
  );
  animation: banner-shine 4s ease infinite;
}
@keyframes banner-shine {
  0%   { left: -100%; }
  50%  { left: 150%;  }
  100% { left: 150%;  }
}
@media (prefers-reduced-motion: reduce) {
  .cat-banner::after { animation: none; }
}

/* ==========================================================================
   66. AUTHOR PROFILE CARD — E-E-A-T 2026 nâng cao
   ========================================================================== */
.author-profile-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 2em;
}

.author-profile-avatar-wrap {
  flex-shrink: 0;
}
.author-profile-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
  box-shadow: var(--shadow);
}
.author-profile-name {
  font-size: var(--fs-h2);
  font-weight: 800;
  margin-bottom: .3em;
  color: var(--color-text);
}
.author-profile-bio {
  color: var(--color-text-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: .6em 0;
}
.author-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: .88rem;
  color: var(--color-text-soft);
  margin-top: .8em;
}
.author-post-count strong {
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 800;
}
.author-website { color: var(--color-primary); }
.author-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: .8em;
}
.author-social-links .social-link {
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 600px) {
  .author-profile-card { flex-direction: column; align-items: center; text-align: center; }
  .author-profile-meta { justify-content: center; }
  .author-social-links { justify-content: center; }
}

/* Dark mode */
[data-theme="dark"] .author-profile-card {
  background: var(--color-bg-soft);
  border-color: var(--color-border);
  border-left-color: var(--color-primary);
}

/* ==========================================================================
   67. EXTERNAL LINK INDICATOR — visual cue cho links ra ngoài
   ========================================================================== */
.entry-content a[rel~="nofollow"][href^="http"]:not([href*="<?php echo esc_js( $_SERVER['HTTP_HOST'] ?? '' ); ?>"])::after {
  content: " ↗";
  font-size: .75em;
  opacity: .6;
  vertical-align: super;
}

/* ==========================================================================
   68. HOMEPAGE GRID/LIST SITES — thêm section "Bài mới nhất"
   ========================================================================== */
.home-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
}
.home-grid-header .section-title { margin: 0; }
.home-view-all {
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.home-view-all::after { content: " →"; }
.home-view-all:hover { text-decoration: underline; }

/* Trang chủ grid: 2 cột trên desktop */
.home-posts-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .home-posts-grid { grid-template-columns: 1fr; } }

/* Fix: grid cards (non-list) — constrain thumb so card-body/title is always visible.
   The .posts-grid parent is display:grid; card uses contain:layout which prevents
   intrinsic row sizing from expanding → title gets clipped. Fix: explicit thumb height.
   Applies to home-grid (.is-grid, .home-grid) but NOT is-list, cat-section-grid, related. */
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  overflow: hidden;
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card .thumb {
  height: 160px;
  aspect-ratio: unset !important;
  flex-shrink: 0;
  overflow: hidden;
}
/* First (featured/full-width) card gets taller image */
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child .thumb {
  height: 220px;
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card .card-body {
  flex: 1;
  min-height: 90px;
}

/* ==========================================================================
   36. NEWSLETTER CTA — khối "Đăng ký nhận tin" sau bài viết (engagement 2026)
   ========================================================================== */
.cn-newsletter {
  margin: 2.5em 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--color-primary) 38%, transparent), transparent 55%),
    linear-gradient(135deg, var(--color-primary) 0%, color-mix(in oklab, var(--color-primary) 62%, #000) 100%);
}
.cn-nl-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding: 26px 28px;
}
.cn-nl-text { flex: 1 1 280px; }
.cn-nl-title { color: #fff; margin: 0 0 4px; font-size: 1.3rem; line-height: 1.2; }
.cn-nl-text p { margin: 0; color: rgba(255,255,255,.85); font-size: .92rem; }
.cn-nl-form { display: flex; gap: 8px; flex: 1 1 320px; max-width: 460px; }
.cn-nl-form input[type="email"] {
  flex: 1; min-width: 0; border: 0; border-radius: var(--radius);
  padding: 12px 14px; font-size: .95rem; background: rgba(255,255,255,.96); color: var(--color-text);
}
.cn-nl-form button {
  flex-shrink: 0; background: #fff; color: var(--color-primary);
  border: 0; border-radius: var(--radius); padding: 12px 22px;
  font-weight: 800; cursor: pointer;
  transition: transform var(--transition), color var(--transition);
}
.cn-nl-form button:hover { transform: translateY(-1px); color: var(--primary-hover); }
.cn-nl-note { width: 100%; margin: 4px 0 0; font-weight: 700; color: #fff; }
@media (max-width: 560px) {
  .cn-nl-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cn-nl-form { max-width: none; }
}

/* ==========================================================================
   37. DROP CAP + READING EXPERIENCE — bài viết đơn
   ========================================================================== */
/* Drop cap đoạn đầu tiên — chữ to, màu primary */
/* NOTE: Drop cap is a static visual, NOT animation — no motion media query needed */
.single-article .entry-content > p:first-of-type::first-letter {
  font-size: 3.8em;
  font-weight: 900;
  line-height: .78;
  float: left;
  margin: .06em .12em -.02em 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  text-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* H2/H3 anchor indicator — hiện khi hover */
.entry-content h2[id]:hover::after,
.entry-content h3[id]:hover::after {
  content: " #";
  font-size: .62em;
  font-weight: 400;
  color: var(--color-text-soft);
  opacity: .55;
  vertical-align: middle;
  text-decoration: none;
}

/* TOC active highlight (JS thêm .is-active) */
.cn-toc a.is-active,
.rank-math-toc-widget-box a.is-active,
.rank-math-block-toc a.is-active {
  color: var(--color-primary) !important;
  font-weight: 700;
}

/* 404 suggestions grid */
.error-404-suggestions {
  max-width: var(--container-width);
  margin: 3em auto var(--gap);
  padding: 0 20px;
}

/* ==========================================================================
   38. CODE BLOCK — copy button + padding cải thiện
   ========================================================================== */
.entry-content pre { padding-top: 2.4em; position: relative; }

.cn-copy-btn {
  position: absolute; top: 6px; right: 8px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: .72rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  line-height: 1.4;
  z-index: 1;
  font-family: inherit;
}
.cn-copy-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.cn-copy-btn.copied { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ==========================================================================
   39. FLOATING MOBILE SHARE BAR
   ========================================================================== */
.cn-float-share { display: none; }

@media (max-width: 992px) {
  .cn-float-share {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0; z-index: 250;
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border-top: 1px solid var(--color-border);
    padding: 8px max(16px, env(safe-area-inset-left));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    gap: 8px;
    justify-content: center;
    align-items: center;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .cn-float-share.is-visible { transform: translateY(0); }

  .cn-float-share a,
  .cn-float-share button {
    flex: 1; max-width: 80px; min-width: 44px;
    padding: 10px 6px;
    border-radius: var(--radius);
    font-size: .85rem; font-weight: 700;
    text-align: center;
    border: 0; cursor: pointer;
    color: #fff; text-decoration: none;
    line-height: 1;
  }
  .cn-float-share .share-fb  { background: #1877f2; }
  .cn-float-share .share-tg  { background: #229ed9; }
  .cn-float-share .share-x   { background: #111; }
  .cn-float-share .share-copy {
    background: var(--color-bg-soft); color: var(--color-text);
    border: 1px solid var(--color-border);
  }

  /* Đẩy back-to-top lên khỏi share bar */
  .back-to-top { bottom: 76px; }
  /* Tránh nội dung bị che bởi share bar */
  .single-article { padding-bottom: 68px; }
}

/* ==========================================================================
   v2.8.0 — AESTHETIC DEEP POLISH
   Tiêu chí thiết kế nghiêm ngặt nhất: ngôn ngữ thiết kế, thẩm mỹ, giác quan
   ========================================================================== */

/* ── 1. SECTION TITLES — elevated editorial weight ─────────────────────── */
.section-title {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-primary) 30%, transparent) 35%,
    transparent 70%
  );
}
/* Home grid header — remove duplicate margin */
.home-grid-header .section-title { padding-bottom: 0; margin-bottom: 0; }
.home-grid-header .section-title::after { display: none; }

/* ── 2. CARD THUMBNAIL — branded skeleton while loading ────────────────── */
.post-card .thumb,
.thumb {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-soft)) 0%,
    var(--color-bg-soft) 60%,
    color-mix(in srgb, var(--color-primary) 3%, var(--color-bg-soft)) 100%
  );
}
/* Skeleton animation for unloaded images */
.post-card .thumb:not(.no-image) img[loading] {
  opacity: 0;
  transition: opacity .4s ease;
}
.post-card .thumb:not(.no-image) img.entered,
.post-card .thumb:not(.no-image) img[data-ll-status="loaded"],
.post-card .thumb:not(.no-image) img.litespeed-loaded {
  opacity: 1;
}

/* ── 3. HERO SIDE CARDS — adapt properly in dark contexts ──────────────── */
.hero-featured .hero-side .post-card {
  background: color-mix(in srgb, var(--color-bg) 94%, var(--color-primary));
  border-color: var(--color-border);
  border-radius: var(--radius);
  padding: 10px;
  transition: background .2s ease, border-color .2s ease;
}
.hero-featured .hero-side .post-card:hover {
  background: color-mix(in srgb, var(--color-bg) 88%, var(--color-primary));
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
[data-theme="dark"] .hero-featured .hero-side .post-card {
  background: color-mix(in srgb, var(--color-bg-soft) 85%, var(--color-primary));
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}

/* ── 4. SIDEBAR WIDGET TITLES — bolder editorial hierarchy ─────────────── */
.sidebar-1 .widget-title,
#secondary .widget-title {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  margin-bottom: 14px;
}
.sidebar-1 .widget-title::before,
#secondary .widget-title::before {
  content: '';
  width: 4px;
  height: 1.1em;
  background: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}

/* ── 5. WIDGET POST ITEMS — tighter, more editorial ─────────────────────── */
.widget-post {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  align-items: flex-start;
}
.widget-post:last-child { border-bottom: 0; padding-bottom: 0; }
.widget-post .wp-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 48px;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  display: block;
}
.widget-post .wp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.widget-post .wp-info {
  flex: 1;
  min-width: 0;
}
.widget-post .wp-title {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}
.widget-post .wp-title:hover { color: var(--color-primary); }
.widget-post .wp-date {
  font-size: .72rem;
  color: var(--color-text-soft);
  display: block;
}

/* ── 6. CAT SECTION — stronger visual rhythm ────────────────────────────── */
.cat-section {
  padding: 24px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  margin-bottom: 0;
}
.cat-section:last-of-type { border-bottom: 0; }
.cat-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 15%, var(--color-border));
}
.cat-section-head .section-title { padding-bottom: 0; margin-bottom: 0; }
.cat-section-head .section-title::after { display: none; }

/* ── 7. CAT-SECTION-GRID — better featured card ─────────────────────────── */
.cat-section-grid .post-card:first-child .card-body {
  padding: 20px 20px 22px;
}
.cat-section-grid .post-card:first-child h2,
.cat-section-grid .post-card:first-child h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.3;
  font-weight: 800;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ── 8. HOME GRID FEATURED CARD — stronger first impression ─────────────── */
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child {
  box-shadow: var(--shadow-hover);
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.28;
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child .excerpt {
  display: block !important;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

/* ── 9. TRENDING STRIP — elevated magazine visual ──────────────────────── */
.trending-strip {
  border-radius: var(--radius);
  padding: 16px 20px 18px;
  margin-block: 28px;
}
.trending-strip .widget-title {
  font-size: .78rem;
  margin-bottom: 12px;
}
.trending-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
  list-style: none;
  margin: 0; padding: 0;
}
@media (max-width: 640px) { .trending-list { grid-template-columns: 1fr; } }
.trending-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
}
.trending-item:last-child,
.trending-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.trending-num {
  font-size: .65rem;
  font-weight: 900;
  line-height: 1;
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--color-primary);
  color: #fff;
  margin-top: 2px;
}
.trending-num.rank-top { background: var(--color-primary); }
.trending-num.rank-mid { background: color-mix(in srgb, var(--color-primary) 60%, #888); }
.trending-num.rank-low { background: color-mix(in srgb, var(--color-primary) 30%, #888); }
.trending-title {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trending-title:hover { color: var(--color-primary); text-decoration: none; }

/* ── 10. POST META — refined chip system ─────────────────────────────────── */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.post-meta .meta-date,
.post-meta .meta-author,
.post-meta .meta-reading,
.post-meta .post-view-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .76rem;
  line-height: 1.4;
}
.post-meta .meta-date { color: var(--color-text-soft); }
.post-meta .meta-author { font-weight: 600; color: var(--color-primary); }
.post-meta .meta-reading {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-soft));
  color: var(--color-primary);
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .01em;
}

/* ── 11. PAGINATION — cleaner, more modern ──────────────────────────────── */
.pagination, .nav-links {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 32px 0;
  flex-wrap: wrap;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  transition: all .18s ease;
  text-decoration: none;
}
.page-numbers:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.page-numbers.current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  cursor: default;
}
.page-numbers.dots {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

/* ── 12. CATEGORY ARCHIVE HEADER — magazine feel ──────────────────────── */
.cat-banner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  padding: 32px 36px;
  margin-bottom: 28px;
}
.cat-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.cat-banner-content { position: relative; z-index: 1; }

/* ── 13. SEARCH HIGHLIGHT — more visible ─────────────────────────────────── */
mark.search-highlight {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-primary);
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}

/* ── 14. ARTICLE LEAD PARAGRAPH — distinct first para ─────────────────── */
.entry-content > p:first-of-type {
  font-size: clamp(1.05rem, 1.1rem + .1vw, 1.15rem);
  line-height: 1.75;
  color: var(--color-text);
  font-weight: 400;
}

/* ── 15. RELATED POSTS — grid more balanced ─────────────────────────────── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}
.related-grid .post-card .thumb {
  height: 140px;
  aspect-ratio: unset;
}

/* ── 16. ARTICLE META BAR (below hero) — cleaner ────────────────────────── */
.entry-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}

/* ── 17. DARK MODE REFINEMENTS — hero side + cat sections ───────────────── */
[data-theme="dark"] .cat-section {
  border-bottom-color: color-mix(in srgb, var(--color-border) 40%, transparent);
}
[data-theme="dark"] .widget-post {
  border-bottom-color: color-mix(in srgb, var(--color-border) 40%, transparent);
}
[data-theme="dark"] .page-numbers {
  background: var(--color-bg-soft);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* ── 18. SMOOTH SCROLL + FOCUS RING quality ──────────────────────────────── */
html { scroll-behavior: smooth; }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── 19. CAT-NAV REFINEMENT — better indicator ───────────────────────────── */
.cn-cat-nav a {
  position: relative;
}
.cn-cat-nav a.current-cat::after,
.cn-cat-nav a[aria-current]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* ── 20. BACK-TO-TOP — refined visual ────────────────────────────────────── */
.back-to-top {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 40%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 150;
  opacity: 0;
  transform: translateY(8px);
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

/* ── RESPONSIVE POLISH ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cat-section { padding: 18px 0; }
  .trending-list { grid-template-columns: 1fr; }
  .cat-banner { padding: 22px 20px; }
}

/* ==========================================================================
   v2.8.1 — SENSORY REFINEMENTS: Newsletter, Blockquote, Interactions
   ========================================================================== */

/* ── NEWSLETTER CTA — elevated visual engagement ────────────────────────── */
.cn-newsletter {
  position: relative;
  overflow: hidden;
}
.cn-newsletter::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-primary) 20%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.cn-newsletter > * { position: relative; z-index: 1; }
.cn-newsletter h3 {
  font-size: clamp(1.2rem, 1.5rem + .5vw, 1.7rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 8px;
}
.cn-newsletter p {
  font-size: .95rem;
  opacity: .85;
  margin-bottom: 16px;
  max-width: 480px;
}
.cn-nl-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
  flex-wrap: wrap;
}
.cn-nl-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 2px solid color-mix(in srgb, #fff 30%, transparent);
  background: color-mix(in srgb, #fff 15%, transparent);
  color: #fff;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
}
.cn-nl-form input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.cn-nl-form input[type="email"]:focus {
  border-color: rgba(255,255,255,.7);
  background: color-mix(in srgb, #fff 20%, transparent);
}
.cn-nl-form button {
  padding: 10px 24px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.5);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(4px);
}
.cn-nl-form button:hover {
  background: rgba(255,255,255,.3);
  border-color: #fff;
  transform: translateY(-1px);
}

/* ── BLOCKQUOTE — dramatic pull-quote ────────────────────────────────────── */
.entry-content blockquote:not(.wp-block-quote) {
  position: relative;
  border-left: 4px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-soft));
  padding: 20px 24px 20px 28px;
  margin: 28px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  font-size: clamp(1rem, 1.05rem + .1vw, 1.1rem);
  line-height: 1.7;
}
.entry-content blockquote:not(.wp-block-quote)::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 16px;
  font-size: 5rem;
  color: var(--color-primary);
  opacity: .15;
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
[data-theme="dark"] .entry-content blockquote:not(.wp-block-quote) {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-soft));
}

/* ── LINK HOVER — underline reveal animation ────────────────────────────── */
.entry-content a:not([class]) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .2s, color .2s;
}
.entry-content a:not([class]):hover {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
}

/* ── CARD INTERACTION — elevation system ────────────────────────────────── */
.post-card {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.post-card:hover {
  transform: translateY(-3px);
}
/* Reset for list-style cards */
.posts-grid.is-list .post-card:hover {
  transform: none;
  box-shadow: inset 3px 0 0 var(--color-primary), 0 2px 12px rgba(0,0,0,.06) !important;
}

/* ── CAT BADGE — consistent refined style ───────────────────────────────── */
.cat-badge {
  transition: background .15s, color .15s, transform .15s;
}
.cat-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* ── READING PROGRESS BAR — smooth and visible ──────────────────────────── */
.reading-progress,
.reading-progress-bar {
  height: 3px;
  border-radius: 0;
}

/* ── WIDGET POSTS — hover highlight ─────────────────────────────────────── */
.widget-post {
  transition: background .15s;
}
.widget-post:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  border-radius: var(--radius);
  padding-left: 4px;
  padding-right: 4px;
}
.widget-post:hover .wp-title {
  color: var(--color-primary) !important;
}

/* ── IMAGE ZOOM on card — smooth ────────────────────────────────────────── */
.post-card:hover .thumb img {
  transform: scale(1.04);
  transition: transform .5s cubic-bezier(.25, .46, .45, .94);
}
.post-card .thumb img {
  transition: transform .5s cubic-bezier(.25, .46, .45, .94), opacity .4s ease;
}

/* ── ENTRY CONTENT — refined typography ─────────────────────────────────── */
.entry-content strong, .entry-content b {
  font-weight: 700;
  color: color-mix(in srgb, var(--color-text) 90%, var(--color-primary));
}
.entry-content em { font-style: italic; }
.entry-content ul li, .entry-content ol li {
  padding-bottom: 4px;
  line-height: 1.7;
}
.entry-content > * + * { margin-top: 1.1em; }
.entry-content > * + h2,
.entry-content > * + h3 { margin-top: 2em; }

/* ── INLINE CODE — distinctive ──────────────────────────────────────────── */
.entry-content code:not(pre code) {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-soft));
  color: var(--color-primary);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .88em;
  font-family: 'IBM Plex Mono', 'Consolas', 'Monaco', monospace;
}
[data-theme="dark"] .entry-content code:not(pre code) {
  background: color-mix(in srgb, var(--color-primary) 15%, var(--color-bg-soft));
}

/* ── SCROLLBAR — branded subtle ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-soft); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-primary) 65%, var(--color-border));
}

/* ── SELECTION — branded highlight ──────────────────────────────────────── */
::selection {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-text);
}

/* ── FINAL RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cn-nl-form { flex-direction: column; }
  .cn-nl-form input[type="email"],
  .cn-nl-form button { width: 100%; }
}

/* ==========================================================================
   v2.9.0 — POLISH ROUND 2: Author page, Homepage, Detail refinements
   ========================================================================== */

/* ── AUTHOR AVATAR — gradient ring, looks premium even with default gravatar ── */
.author-profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.author-profile-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-primary) 60%, #a855f7) 50%,
    var(--color-accent, #f59e0b) 100%
  );
  z-index: 0;
}
.author-profile-avatar {
  position: relative;
  z-index: 1;
  border: 3px solid var(--color-bg-soft) !important;
  background: var(--color-bg-soft);
}

/* ── AUTHOR CARD — elevated look ──────────────────────────────────────────── */
.author-profile-card {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.author-profile-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-primary) 10%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.author-profile-name {
  background: linear-gradient(90deg, var(--color-text), color-mix(in srgb, var(--color-text) 70%, var(--color-primary)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── HERO FEATURED — stronger visual impact ──────────────────────────────── */
.hero-featured {
  position: relative;
}
.hero-featured::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,.12), transparent);
  pointer-events: none;
}

/* ── POST CARD EXCERPT — improved readability ────────────────────────────── */
.post-card .excerpt {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--color-text-soft);
  margin-top: 4px;
}

/* ── CAT-SECTION "XEM TẤT CẢ" button — more polished ────────────────────── */
.cat-section-more {
  font-size: .75rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 99px;
  background: var(--color-primary);
  color: #fff !important;
  text-decoration: none !important;
  transition: opacity .15s, transform .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.cat-section-more:hover {
  opacity: .88;
  transform: translateX(2px);
  text-decoration: none !important;
}
.cat-section-more::after { content: ' →'; }

/* ── ARTICLE ENTRY TITLE — slightly larger for impact ────────────────────── */
.single-article .entry-title {
  font-size: clamp(1.7rem, 2rem + 1.5vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: -.03em;
  font-weight: 900;
  text-wrap: balance;
}

/* ── HOME-GRID SECTION TITLE — stronger weight ──────────────────────────── */
.section-title {
  font-weight: 900 !important;
  font-size: clamp(.85rem, .9rem + .2vw, 1rem) !important;
}

/* ── FOOTER IMPROVEMENTS ────────────────────────────────────────────────── */
.site-footer .widget-title {
  font-size: .78rem;
  letter-spacing: .1em;
  font-weight: 800;
  text-transform: uppercase;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer .widget ul li a {
  transition: color .15s, padding-left .15s;
  padding-left: 0;
}
.site-footer .widget ul li a:hover {
  padding-left: 4px;
  color: #fff;
}
.footer-bottom {
  font-size: .78rem;
  letter-spacing: .03em;
}

/* ── READING EXPERIENCE — fine-tune ────────────────────────────────────────── */
.single-article .entry-content {
  font-size: clamp(1rem, .98rem + .12vw, 1.08rem);
}
.single-article .entry-content p {
  margin-bottom: 1.35em;
}
.single-article .entry-content ul,
.single-article .entry-content ol {
  margin-bottom: 1.35em;
  padding-left: 1.6em;
}
.single-article .entry-content li {
  margin-bottom: .45em;
}

/* ── DARK MODE AUTHOR CARD ──────────────────────────────────────────────── */
[data-theme="dark"] .author-profile-avatar {
  border-color: var(--color-bg) !important;
}
[data-theme="dark"] .author-profile-name {
  background: linear-gradient(90deg, var(--color-text), color-mix(in srgb, var(--color-text) 75%, var(--color-primary)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── FINAL MOBILE ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .author-profile-avatar-wrap::before { inset: -2px; }
  .single-article .entry-title { font-size: clamp(1.5rem, 2rem, 2.2rem); }
}

/* ==========================================================================
   v2.9.1 — MICRO-REFINEMENTS: Sidebar, Typography, Interactions
   ========================================================================== */

/* ── SIDEBAR WIDGET THUMBNAILS — slightly larger for clarity ────────────── */
.widget-post .wp-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 54px;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
}
.widget-post .wp-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.widget-post:hover .wp-thumb img {
  transform: scale(1.06);
}

/* ── SIDEBAR RANKING — using existing widget-rank counter (defined line 4130) ── */
/* NOTE: do NOT add counter-reset here as it would override the existing widget-rank counter */

/* ── WIDGET POST INFO — better hierarchy ────────────────────────────────── */
.widget-post .wp-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.widget-post .wp-title {
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -.01em;
}
.widget-post .wp-date {
  font-size: .7rem;
  opacity: .65;
}

/* ── CAT-NAV BAR — refined indicator ────────────────────────────────────── */
.cn-cat-nav {
  position: relative;
}
.cn-cat-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 30%, transparent) 70%,
    transparent 100%
  );
  opacity: .4;
}

/* ── TRENDING STRIP NUMBERS — more distinctive ────────────────────────────── */
.trending-num {
  font-size: .72rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* ── HERO FEATURED — shadow for visual separation ───────────────────────── */
.hero-main {
  transition: box-shadow var(--transition);
}
.hero-main:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}

/* ── ARTICLE IMAGES — better styling ────────────────────────────────────── */
.entry-content img:not(.wp-smiley):not(.emoji) {
  border-radius: var(--radius);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em auto;
}
.entry-content figure {
  margin: 1.8em 0;
}
.entry-content figcaption {
  font-size: .82rem;
  color: var(--color-text-soft);
  text-align: center;
  font-style: italic;
  margin-top: .5em;
  padding: 0 16px;
}

/* ── ARTICLE INTRO SUMMARY — key takeaway box ───────────────────────────── */
.entry-content .cn-summary-box {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-soft));
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 20px;
  margin: 1.8em 0;
}
.entry-content .cn-summary-box .cn-summary-box-title {
  font-weight: 800;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.entry-content .cn-summary-box ul {
  margin: 0;
  padding-left: 1.2em;
}
.entry-content .cn-summary-box ul li {
  margin-bottom: .4em;
  font-size: .94rem;
}

/* ── PAGINATION — active state more visible ──────────────────────────────── */
.page-numbers.current {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* ── BACK TO TOP — refined ─────────────────────────────────────────────── */
.back-to-top {
  font-size: 1rem;
  line-height: 1;
}

/* ── META CHIPS — micro-improvement ─────────────────────────────────────── */
.post-meta .meta-date::before { content: '📅 '; font-size: .85em; }
.post-meta .meta-author::before { content: '✍ '; font-size: .85em; }
.post-meta .meta-reading::before { content: '⏱ '; font-size: .85em; }

/* ── ARTICLE HIGHLIGHTS — within entry content ───────────────────────────── */
.entry-content mark,
.entry-content .highlight {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: color-mix(in srgb, var(--color-primary) 80%, var(--color-text));
  padding: 1px 4px;
  border-radius: 3px;
}

/* ── RESPONSIVE FINAL ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .widget-post .wp-thumb { width: 60px; height: 45px; }
  .hero-main:hover { box-shadow: none; }
  .post-meta .meta-date::before,
  .post-meta .meta-author::before,
  .post-meta .meta-reading::before { display: none; }
}

/* ==========================================================================
   v2.9.2 — FINAL QUALITY PASS: Depth, polish, coherence
   ========================================================================== */

/* ── READING PROGRESS BAR — slightly more visible ────────────────────── */
.reading-progress { height: 4px; }
.reading-progress-bar {
  background: linear-gradient(
    to right,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 60%, #f59e0b)
  );
  box-shadow: 0 1px 6px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

/* ── SECTION TITLE — stronger visual rhythm ─────────────────────────── */
.section-title {
  padding-bottom: 12px;
  margin-bottom: 18px;
}

/* ── HERO FEATURED — smooth scale on main image ─────────────────────── */
.hero-main .thumb { overflow: hidden; }
.hero-main .thumb img {
  transition: transform .5s cubic-bezier(.25, .46, .45, .94) !important;
}
.hero-main:hover .thumb img { transform: scale(1.03); }

/* ── POST CARD BADGE — position refinement ───────────────────────────── */
.post-card .cat-badge {
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
}

/* ── ARTICLE TOC TITLE — more distinctive ────────────────────────────── */
.cn-toc .cn-toc-title,
.rank-math-toc-widget-box .rank-math-toc-widget-title {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cn-toc .cn-toc-title::before,
.rank-math-toc-widget-box .rank-math-toc-widget-title::before {
  content: '≡';
  font-size: 1em;
  opacity: .7;
}

/* ── ARTICLE H4 styling — more distinctive ─────────────────────────── */
.entry-content h4 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  padding-bottom: 4px;
  margin-top: 1.6em;
  margin-bottom: .7em;
}

/* ── SHARE BUTTONS — more polished ──────────────────────────────────── */
.share-buttons {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 0;
  margin: 24px 0;
}
.share-buttons::before {
  content: 'Chia sẻ:';
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-soft);
  display: block;
  margin-bottom: 10px;
}

/* ── ARTICLE FEATURED IMAGE — more impactful ─────────────────────────── */
.single-article .entry-featured {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.single-article .entry-featured img {
  border-radius: var(--radius-lg);
  transition: transform .5s ease;
}
.single-article .entry-featured:hover img { transform: scale(1.02); }

/* ── CAT-SECTION IMPROVEMENTS ─────────────────────────────────────────── */
.cat-section-head {
  gap: 12px;
}
.cat-section-more {
  letter-spacing: .04em;
  font-size: .78rem;
}

/* ── WIDGET POST — improved spacing ─────────────────────────────────── */
.widget-post {
  gap: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
}
.widget-post:first-child { padding-top: 0; }
.widget-post .wp-title {
  font-size: .83rem;
  line-height: 1.4;
}

/* ── HERO SIDE CARD TITLE — visibility ──────────────────────────────── */
.hero-featured .hero-side .post-card h3,
.hero-featured .hero-side .post-card .entry-title {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
}

/* ── DARK MODE FINAL ─────────────────────────────────────────────────── */
[data-theme="dark"] .share-buttons {
  border-color: var(--color-border);
}
[data-theme="dark"] .share-buttons::before {
  color: var(--color-text-soft);
}
[data-theme="dark"] .single-article .entry-featured {
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .share-buttons { gap: 6px; }
  .hero-featured .hero-side .post-card h3 { font-size: .82rem; }
}

/* ==========================================================================
   v2.9.3 — LIGHT MODE UNIVERSAL QUALITY PASS
   Applies to all 19 sites — better depth in light mode
   ========================================================================== */

/* ── CARDS — clean white with shadows ─────────────────────────────────── */
.post-card {
  background: #fff;
}
.post-card:not([class*="hero"]) {
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
}

/* ── SIDEBAR WIDGETS — light mode depth ──────────────────────────────── */
.sidebar-1 .widget,
#secondary .widget {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ── HERO FEATURED — clear separation ────────────────────────────────── */
.hero-featured {
  margin-bottom: 2.5rem;
}

/* ── CAT-SECTION — subtle bg variation ──────────────────────────────── */
.cat-section:nth-of-type(even) {
  background: color-mix(in srgb, var(--color-primary) 2%, var(--color-bg-soft));
}

/* ── SECTION TITLE UNDERLINE — more visible ─────────────────────────── */
.section-title::after {
  opacity: .75;
  height: 2px;
}

/* ── WIDGET TITLE — more prominent ──────────────────────────────────── */
.sidebar-1 .widget-title,
#secondary .widget-title {
  letter-spacing: .09em;
  margin-bottom: 16px;
}

/* ── HERO SIDE CARD — universal light mode border ────────────────────── */
.hero-featured .hero-side .post-card {
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 55%, var(--color-border)) !important;
}

/* ── DARK MODE: reverse all light-mode overrides ─────────────────────── */
[data-theme="dark"] .post-card {
  background: var(--color-bg-soft);
}
[data-theme="dark"] .post-card:not([class*="hero"]) {
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
[data-theme="dark"] .sidebar-1 .widget,
[data-theme="dark"] #secondary .widget {
  background: var(--color-bg-soft);
  box-shadow: none;
}
[data-theme="dark"] .section-title::after {
  opacity: .9;
}
[data-theme="dark"] .cat-section:nth-of-type(even) {
  background: rgba(0,0,0,.18);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-featured { margin-bottom: 1.5rem; }
}

/* ==========================================================================
   v2.9.6 — FINAL UX POLISH
   ========================================================================== */

/* ── CARD HOVER — consistent lift across all cards ───────────────────── */
.post-card:hover {
  transform: translateY(-3px) !important;
}
/* Exception: is-list cards just show shadow */
.posts-grid.is-list .post-card:hover {
  transform: translateX(2px) !important;
}

/* ── ARTICLE LAST PARAGRAPH — nice closing ─────────────────────────── */
.entry-content > p:last-of-type {
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  margin-bottom: 2em;
}

/* ── CAT-BADGE CONSISTENCY ───────────────────────────────────────────── */
.cat-badge {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  vertical-align: middle;
}

/* ── TRENDING STRIP — better visual ──────────────────────────────────── */
.trending-strip {
  border-radius: var(--radius);
  overflow: hidden;
}
.trending-strip .widget-title {
  font-weight: 900;
  color: var(--color-primary);
}

/* ── WIDGET — compact but rich ───────────────────────────────────────── */
.sidebar-1 .widget-title,
#secondary .widget-title {
  font-size: .78rem;
  padding-bottom: 8px;
}

/* ── POST META LINK — override hover ────────────────────────────────── */
.post-meta a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* ── ARCHIVE HEADER — polished ───────────────────────────────────────── */
.page-header-bar {
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}

/* ── HOME GRID VIEW-ALL ──────────────────────────────────────────────── */
.home-view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  letter-spacing: .04em;
}

/* ── DARK MODE FINAL ─────────────────────────────────────────────────── */
[data-theme="dark"] .cat-badge {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
[data-theme="dark"] .trending-strip .widget-title {
  color: var(--color-primary);
}

/* ── ACCESSIBLE FOCUS ────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── SMOOTH TRANSITIONS ──────────────────────────────────────────────── */
.cat-badge, .post-card, .widget-post, .cat-section-more {
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* ── FINAL RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-header-bar { padding: 20px 16px; }
  .post-card:hover { transform: translateY(-2px) !important; }
  .hero-featured .hero-side .post-card .thumb { width: 80px; height: 60px; }
}

/* ==========================================================================
   v0.2606020637 — DAY 2 IMPROVEMENTS
   Hero-side thumbnails, grid layout depth, typography, cat-section polish
   ========================================================================== */

/* ── HERO SIDE CARD — better layout with larger thumb ─────────────────── */
.hero-featured .hero-side .post-card {
  gap: 10px;
}
.hero-featured .hero-side .post-card h3,
.hero-featured .hero-side .post-card .entry-title {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── GRID LAYOUT SITES — featured card visual depth ──────────────────── */
/* Sites using 'grid' homepage style: no hero-featured, just grid */
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child .thumb {
  height: 280px;
  border-radius: 0;
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.2;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child .card-body {
  padding: 20px 22px 24px;
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child .excerpt {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: .92rem;
}

/* ── CAT-SECTION RHYTHM — tighter alternating bg ─────────────────────── */
.cat-section + .cat-section {
  margin-top: 24px;
}
.cat-section-head {
  align-items: center;
  padding-bottom: 12px;
}

/* ── BREAKING TICKER — more visual impact ────────────────────────────── */
.cn-ticker {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.cn-ticker-label {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 0 14px;
}

/* ── ARTICLE ENTRY TITLE — on list layout ────────────────────────────── */
.posts-grid.is-list .post-card h3,
.posts-grid.is-list .post-card .entry-title {
  font-size: clamp(1.05rem, 1.15rem + .2vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.32;
}
.posts-grid.is-list .post-card:first-child h3,
.posts-grid.is-list .post-card:first-child .entry-title {
  font-size: clamp(1.4rem, 1.8vw, 2rem);
  font-weight: 900;
  -webkit-line-clamp: 3;
}

/* ── CARD META — better spacing ─────────────────────────────────────────── */
.post-card .post-meta {
  margin-top: auto;
  padding-top: 6px;
  gap: 8px 12px;
}

/* ── EXCERPT — better readability ────────────────────────────────────── */
.post-card .excerpt {
  color: var(--color-text-soft);
  font-size: .88rem;
  line-height: 1.55;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:not(:first-child) .excerpt {
  display: block;
}

/* ── WIDGET-POST — refined list item ─────────────────────────────────── */
.widget-post .wp-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 54px;
}

/* ── SECTION SEPARATOR — visual rhythm ──────────────────────────────── */
.home-grid-header {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
}

/* ── NEWSLETTER — better description ────────────────────────────────── */
.cn-newsletter p {
  max-width: 500px;
  opacity: .88;
}

/* ── DARK MODE ────────────────────────────────────────────────────────── */
[data-theme="dark"] .home-grid-header {
  border-bottom-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-header-bar { padding: 20px 16px; }
  .post-card:hover { transform: translateY(-2px) !important; }
  .posts-grid:not(.is-list):not(.cat-section-grid):not(.related-grid) .post-card:first-child .thumb { height: 200px; }
}

/* ==========================================================================
   v0.2606021306 — BUG FIX + IMPROVEMENTS
   All hero-side thumbnails standardized + content quality fixes
   ========================================================================== */

/* ── HERO-SIDE CARD — refined height for consistency ──────────────────── */
.hero-featured .hero-side .post-card .thumb {
  width: 110px !important;
  height: 82px !important;
  flex-shrink: 0 !important;
  overflow: hidden;
}
.hero-featured .hero-side .post-card .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* ── CAT-SECTION — improved card grid for sites with many posts ────────── */
.cat-section-grid {
  gap: var(--gap);
}
.cat-section-grid .post-card:first-child {
  border-radius: var(--radius-lg);
}

/* ── WIDGET-POST — compact when many items ────────────────────────────── */
.widget-post + .widget-post {
  padding-top: 8px;
}

/* ── ARTICLE — better spacing for code blocks ───────────────────────────── */
.entry-content pre + p,
.entry-content p + pre {
  margin-top: 1.4em;
}

/* ── ARTICLE LAST PARA — subtle close marker ────────────────────────────── */
.entry-content > p:last-of-type::after {
  content: ' ∎';
  opacity: .25;
  font-size: .8em;
}

/* ── SEARCH — result count styling ──────────────────────────────────────── */
.search-result-count {
  font-size: .85rem;
  color: var(--color-text-soft);
  margin-left: auto;
}

/* ── FOOTER — subtle separator ───────────────────────────────────────────── */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ── DARK MODE: hero-side uniform ────────────────────────────────────────── */
[data-theme="dark"] .hero-featured .hero-side .post-card {
  background: color-mix(in srgb, var(--color-bg-soft) 90%, var(--color-primary));
}

/* ── RESPONSIVE FINAL ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-featured .hero-side .post-card .thumb {
    width: 80px !important;
    height: 60px !important;
  }
}
}