/*
Theme Name: CongNghe - Blog Công Nghệ
Template: congnghe-base
Author: NGÔ
Description: Biến thể giao diện cho blogcongnghe.net — Blog Công Nghệ. Phong cách kỹ thuật/developer sạch, tông teal-amber. Child theme của CongNghe Base.
Version: 1.1.0
Text Domain: cn-blogcongnghe
*/

/* ==========================================================================
   TOKEN GỐC — override toàn bộ bảng màu + font + layout của parent
   ========================================================================== */
/* Font moved to functions.php for better performance */

:root {
  /* Màu thương hiệu */
  --color-primary:       #14b8a6;
  --color-primary-dark:  #0d9488;
  --color-accent:        #f59e0b;
  --color-footer-bg:     #134e4a;
  --color-footer-text:   #99f6e4;

  /* Nền / text / border */
  --color-text:          #0f2027;
  --color-text-soft:     #4b6a6e;
  --color-bg:            #ffffff;
  --color-bg-soft:       #f0fdf9;
  --color-border:        #d1fae5;
  --color-header-bg:     #ffffff;
  --color-header-text:   #0f2027;

  /* Font */
  --font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Layout */
  --container-width: 1180px;
  --radius:          8px;
  --radius-lg:       12px;

  /* Tints động từ màu brand */
  --primary-tint:  color-mix(in srgb, var(--color-primary) 10%, transparent);
  --primary-hover: color-mix(in oklab, var(--color-primary) 84%, #000);
  --shadow-ring:   0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* ==========================================================================
   HEADER — nền trắng sạch, border-bottom 3px primary, clean tech feel
   ========================================================================== */
.site-header {
  background: var(--color-header-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 3px solid var(--color-primary);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Site title: primary, 700, letter-spacing -.01em */
.site-branding .site-title a {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: -.01em;
}

.site-branding .site-title a:hover {
  color: var(--color-primary-dark);
}

.site-branding .site-description {
  color: var(--color-text-soft);
  font-size: .78rem;
  letter-spacing: .01em;
}

/* ==========================================================================
   NAVIGATION — background pill hover, .875rem, weight 600
   ========================================================================== */
.main-navigation a {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-header-text);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  background: var(--primary-tint);
  color: var(--color-primary);
}

/* Tắt gạch chân kinetic của parent, thay bằng pill */
.main-navigation > div > ul > li > a::after,
.main-navigation > ul > li > a::after {
  display: none;
}

/* Submenu */
.main-navigation ul ul {
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-primary);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ==========================================================================
   CAT BADGE — solid primary bg, trắng, border-radius 4px, uppercase tiny
   ========================================================================== */
.post-card .cat-badge {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  transition: background var(--transition);
}

.post-card .cat-badge:hover {
  background: var(--color-primary-dark);
  color: #fff;
  border-color: transparent;
}

/* ==========================================================================
   POST CARD — hover shadow đậm, NO transform
   ========================================================================== */
.post-card {
  border-color: var(--color-border);
  border-radius: var(--radius);
  transition: box-shadow var(--transition);
}


/* Giữ ảnh không scale khi hover (dev vibe — stable) */
.post-card:hover .thumb img {
  transform: none;
}

/* List card — image 240px fixed */
.posts-grid.is-list .post-card .thumb {
  width: 240px;
  flex-shrink: 0;
}

/* ==========================================================================
   SECTION TITLE — dot accent ::before (circle 8px primary), NO ::after line
   ========================================================================== */
.section-title {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1.8em 0 1em;
  padding-bottom: 0;
  border-bottom: none;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tắt ::after line từ parent */
.section-title::after {
  display: none;
}

/* ==========================================================================
   CODE ELEMENTS — tech/developer feel
   ========================================================================== */
/* Inline code: primary-tint bg, primary color, SFMono */
.entry-content code,
.entry-content :not(pre) > code {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary-dark);
  font-family: var(--font-mono);
  padding: .18em .45em;
  border-radius: 4px;
  font-size: .875em;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Pre/code block: border-left 3px primary */
.entry-content pre,
pre {
  border-left: 3px solid var(--color-primary);
  background: #0a1a18;
  color: #b2f5ea;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-mono);
}

.entry-content pre code {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font-size: 1em;
}

/* ==========================================================================
   WIDGET
   ========================================================================== */
.widget {
  border-color: var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.widget-title {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.widget-title::before {
  background: var(--color-primary);
}

.widget li {
  border-bottom-color: var(--color-border);
  font-size: .9rem;
}

/* ==========================================================================
   ENTRY CONTENT — bài đơn
   ========================================================================== */
.entry-content blockquote {
  border-left-color: var(--color-primary);
  background: var(--color-bg-soft);
}

.cn-tldr {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.cn-tldr-label {
  color: var(--color-primary);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  border-top: 3px solid var(--color-primary);
}

.site-footer a {
  color: var(--color-footer-text);
}

.site-footer a:hover {
  color: #ffffff;
}

.site-footer .widget-title {
  color: #ffffff;
  border-bottom-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.site-footer .widget li {
  border-bottom-color: rgba(255, 255, 255, .08);
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, .12);
  color: color-mix(in srgb, var(--color-footer-text) 80%, transparent);
  font-size: .82rem;
}

/* ==========================================================================
   DARK MODE — GitHub dark palette
   ========================================================================== */
[data-theme="dark"] {
  --color-text:        #e6edf3;
  --color-text-soft:   #7d8590;
  --color-bg:          #0d1117;
  --color-bg-soft:     #161b22;
  --color-border:      #30363d;
  --color-header-bg:   #0d1117;
  --color-header-text: #e6edf3;
}

[data-theme="dark"] .site-header {
  background: var(--color-header-bg);
  border-bottom-color: var(--color-primary);
  box-shadow: 0 1px 0 rgba(20, 184, 166, .12);
}

[data-theme="dark"] .post-card,
[data-theme="dark"] .widget {
  background: var(--color-bg-soft);
  border-color: var(--color-border);
}

[data-theme="dark"] pre,
[data-theme="dark"] .entry-content pre {
  background: #010409;
  color: #b2f5ea;
  border-left-color: var(--color-primary);
}

[data-theme="dark"] .entry-content code,
[data-theme="dark"] .entry-content :not(pre) > code {
  background: color-mix(in srgb, var(--color-primary) 12%, #161b22);
  color: #5eead4;
  border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

[data-theme="dark"] .cn-tldr {
  background: color-mix(in srgb, var(--color-primary) 8%, #161b22);
  border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

[data-theme="dark"] .main-navigation a:hover,
[data-theme="dark"] .main-navigation .current-menu-item > a {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: #5eead4;
}

[data-theme="dark"] img {
  opacity: .92;
}

/* ==========================================================================
   TICKER & CAT NAV (nếu có)
   ========================================================================== */
.cn-ticker-label {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius) 0 0 var(--radius);
}

.cn-cat-nav a {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text-soft);
  border-radius: var(--radius);
  padding: 6px 12px;
}

.cn-cat-nav a:hover,

/* ==========================================================================
   NEWSLETTER WIDGET
   ========================================================================== */
.cn-newsletter {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-radius: var(--radius);
}

.cn-newsletter input[type="email"] {
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: var(--radius) 0 0 var(--radius);
}

.cn-newsletter input[type="email"]:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.cn-newsletter button,
.cn-newsletter input[type="submit"] {
  background: var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.cn-newsletter button:hover,
.cn-newsletter input[type="submit"]:hover {
  background: var(--color-primary-dark);
}

/* ==========================================================================
   FOCUS & SELECTION — màu thương hiệu
   ========================================================================== */
:focus-visible {
  outline-color: var(--color-primary);
}


/* ==========================================================================
   NÚT / PAGINATION — primary teal
   ========================================================================== */
.button,
button,
input[type="submit"] {
  background: var(--color-primary);
  border-radius: var(--radius);
}

.button:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--color-primary-dark);
}

.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination .page-numbers:hover:not(.current) {
  background: var(--color-bg-soft);
  color: var(--color-primary);
}

/* ==========================================================================
   HERO MAIN — border-radius chuẩn với parent
   ========================================================================== */
.hero-featured .hero-main {
  border-radius: var(--radius-lg);
}

.hero-featured .hero-main .thumb {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ==========================================================================
   READING PROGRESS BAR — teal
   ========================================================================== */

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.back-to-top {
  background: var(--color-primary);
  border-radius: var(--radius);
}

.back-to-top:hover {
  background: var(--color-primary-dark);
}

/* ==========================================================================
   RESPONSIVE FALLBACK — đảm bảo list card hợp lý trên mobile
   ========================================================================== */
@media (max-width: 768px) {
  .posts-grid.is-list .post-card .thumb {
    width: 100%;
  }
}

/* === DEEP PER-SITE: BADGE COLORS + DARK MODE + HERO ===
* =============================================================
   cn-blogcongnghe — PERSONA E ADDITIONS (append)
   GitHub-dark technical feel
   ============================================================= */

/* === PHẦN 1: CATEGORY BADGE COLORS === */

.cat-badge[data-cat="dien-thoai-di-dong"],
.post-card .cat-badge[data-cat="dien-thoai-di-dong"],
.single-hero-overlay .cat-badge[data-cat="dien-thoai-di-dong"] {
  background: #0891b2 !important;
  border-color: #0891b2 !important;
  color: #fff !important;
}

.cat-badge[data-cat="game"],
.post-card .cat-badge[data-cat="game"],
.single-hero-overlay .cat-badge[data-cat="game"] {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

.cat-badge[data-cat="huong-dan"],
.post-card .cat-badge[data-cat="huong-dan"],
.single-hero-overlay .cat-badge[data-cat="huong-dan"] {
  background: #14b8a6 !important;
  border-color: #14b8a6 !important;
  color: #fff !important;
}

.cat-badge[data-cat="kien-thuc"],
.post-card .cat-badge[data-cat="kien-thuc"],
.single-hero-overlay .cat-badge[data-cat="kien-thuc"] {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}

.cat-badge[data-cat="may-tinh"],
.post-card .cat-badge[data-cat="may-tinh"],
.single-hero-overlay .cat-badge[data-cat="may-tinh"] {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

.cat-badge[data-cat="phan-mem"],
.post-card .cat-badge[data-cat="phan-mem"],
.single-hero-overlay .cat-badge[data-cat="phan-mem"] {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}

/* Persona E: monospace hint on all badges */
.cat-badge {
  border-radius: 4px;
  letter-spacing: .04em;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* === PHẦN 2: DARK MODE — PERSONA E (GitHub dark) === */

[data-theme="dark"] {
  --color-bg:        #0d1117;
  --color-bg-soft:   #161b22;
  --color-border:    #30363d;
}


[data-theme="dark"] .widget,
[data-theme="dark"] .widget-area .widget {
  background: #161b22;
  border-color: #30363d;
}

/* Header — GitHub dark, solid */
[data-theme="dark"] .site-header {
  background: #0d1117;
  border-bottom-color: #30363d;
}

/* Newsletter block */
[data-theme="dark"] .cn-newsletter {
  background: linear-gradient(135deg, #0d1117 0%, #010409 100%);
  border-color: #30363d;
}

/* Code blocks */
[data-theme="dark"] pre,
[data-theme="dark"] code,
[data-theme="dark"] .wp-block-code {
  background: #010409;
  border-color: #30363d;
  color: #e6edf3;
}

/* === PHẦN 3: HERO HEIGHT TINH CHỈNH === */

.hero-featured .hero-main .thumb {
  height: 380px;
}

.hero-featured .hero-main .thumb img {
  height: 380px;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 768px) {
  .hero-featured .hero-main .thumb,
  .hero-featured .hero-main .thumb img {
    height: 240px;
  }
}

/* === AESTHETIC DEEP UPGRADE: cn-blogcongnghe === */

/* == 1. SECTION BACKGROUNDS == */
.cat-section:nth-child(odd) {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  padding-left: 1rem;
  border-radius: 4px;
}

.cat-section:nth-child(even) {
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
  padding: 1rem;
  border-radius: 4px;
}

.trending-strip {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface, #f8f8f8));
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85em;
  letter-spacing: 0.03em;
}

/* == 2. CARD PERSONALITY — Persona E: monospace meta, code-comment date, subtle hover == */
.post-card {
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: 4px;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.post-card:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface, #fff));
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.post-card .post-meta,
.post-card .entry-meta {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78em;
  color: color-mix(in srgb, var(--color-primary) 70%, currentColor);
  letter-spacing: 0.02em;
}

.post-card .post-date::before,
.post-card .entry-date::before {
  content: "// ";
  color: color-mix(in srgb, var(--color-primary) 60%, transparent);
  font-family: 'Courier New', Courier, monospace;
}

.post-card .cat-badge,
.post-card .category-label {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  padding: 2px 8px;
  border-radius: 2px;
}

/* == 3. HERO DRAMA — Persona E: scanline subtle overlay, technical feel == */
.hero-section,
.site-hero {
  position: relative;
  overflow: hidden;
}

.hero-section::after,
.site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    color-mix(in srgb, var(--color-primary) 4%, transparent) 2px,
    color-mix(in srgb, var(--color-primary) 4%, transparent) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.hero-section .hero-overlay,
.site-hero .overlay {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-primary) 85%, #000) 0%,
    color-mix(in srgb, var(--color-primary) 30%, transparent) 45%,
    transparent 70%
  );
}

/* == 4. SECTION TITLES — Persona E: monospace, code-comment prefix == */
.section-title,
.widget-title,
.cat-section-title {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  padding-bottom: 6px;
  margin-bottom: 1rem;
}

.section-title::before,
.cat-section-title::before {
  content: "// ";
  color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

/* == 5. FOOTER DEPTH == */
.site-footer {
  background: linear-gradient(
    160deg,
    #134e4a 0%,
    color-mix(in srgb, #134e4a 85%, #000) 100%
  );
  border-top: 3px solid var(--color-primary);
  position: relative;
}

.site-footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--color-primary),
    var(--color-accent),
    var(--color-primary)
  );
  margin-bottom: 1.5rem;
}

.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  padding-top: 1rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

/* == 6. VISUAL ACCENTS — Persona E: ASCII-art style dividers == */
.section-divider,
hr.styled,
.cat-section + .cat-section::before {
  content: "/* -------------------------------- */";
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.7em;
  color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  text-align: center;
  letter-spacing: 0.05em;
  margin: 1.5rem auto;
  border: none;
  height: auto;
}

/* Category color coding — grid breadth of coverage */
.post-card[data-category="ai"] .cat-badge,
.post-card[data-category="ai"] .category-label { background: color-mix(in srgb, #8b5cf6 15%, transparent); border-color: #8b5cf6; color: #8b5cf6; }
.post-card[data-category="mobile"] .cat-badge,
.post-card[data-category="mobile"] .category-label { background: color-mix(in srgb, #3b82f6 15%, transparent); border-color: #3b82f6; color: #3b82f6; }
.post-card[data-category="pc"] .cat-badge,
.post-card[data-category="pc"] .category-label { background: color-mix(in srgb, var(--color-accent) 15%, transparent); border-color: var(--color-accent); color: var(--color-accent); }
.post-card[data-category="review"] .cat-badge,
.post-card[data-category="review"] .category-label { background: color-mix(in srgb, #10b981 15%, transparent); border-color: #10b981; color: #10b981; }

/* Grid layout fine-tuning */
@media (min-width: 768px) {
  .post-grid,
  .posts-grid {
    gap: 1.25rem;
  }
  .post-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .cat-section:nth-child(odd) {
    background: color-mix(in srgb, var(--color-primary) 8%, #111);
  }
  .cat-section:nth-child(even) {
    background: color-mix(in srgb, var(--color-primary) 5%, #111);
  }
  .post-card {
    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  }
  .post-card:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, #1a1a1a);
  }
  .trending-strip {
    background: color-mix(in srgb, var(--color-primary) 10%, #111);
  }
}

/* === LAYOUT+COLOR DEPTH: cn-blogcongnghe === */

/* ── GRID LAYOUT DEPTH ───────────────────────────────────────────────────── */

/* 2-column grid with 24 px gap; first card spans both columns */
@media (min-width: 768px) {
  .posts-grid:not(.is-list) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  /* First card: full-width featured treatment */
  .posts-grid:not(.is-list) .post-card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
  }

  .posts-grid:not(.is-list) .post-card:first-child .thumb {
    border-radius: 0;
    height: 100%;
    min-height: 260px;
  }

  .posts-grid:not(.is-list) .post-card:first-child .thumb img {
    height: 100%;
    object-fit: cover;
  }

  .posts-grid:not(.is-list) .post-card:first-child .card-body {
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }

  .posts-grid:not(.is-list) .post-card:first-child .post-title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
  }
}

/* Category badge in grid: dark background, uppercase, strong contrast */
.posts-grid .post-card .cat-badge {
  background: var(--color-primary);
  color: #fff;
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 3px 9px;
  border-radius: 3px;
  border: none;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* ── MICRO COLOR SYSTEM ──────────────────────────────────────────────────── */

/* 3-level section tints */
.home-section--primary {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
}
.home-section--secondary {
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg));
}
.home-section--neutral {
  background: color-mix(in srgb, var(--color-primary) 2%, var(--color-bg));
}

/* Global hover via color-mix (applied in specific contexts above;
   here as a utility layer for anchors within content) */
.entry-content a:hover,
.widget a:hover {
  color: color-mix(in oklab, var(--color-primary) 80%, #000);
}

/* Focus rings — primary 20 % opacity outline */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Selection */
::selection {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-text);
}

/* Persona E — technical dark section tint */
.cat-section,
.widget-area {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
}

/* ── TYPOGRAPHY REFINEMENT ───────────────────────────────────────────────── */

/* Site title: Nunito Sans 800, optical tight spacing */
.site-branding .site-title {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Section title: monospace prefix already present; refine size hierarchy */

/* Meta — smaller, lighter, subdued */
.post-meta,
.entry-meta,
.post-date,
.entry-date {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-soft);
}

/* ── FOOTER COLOR DEPTH ──────────────────────────────────────────────────── */

/* 3-stop gradient: deep teal → darker mid → near-black base */
.site-footer {
  background: linear-gradient(
    170deg,
    #134e4a 0%,
    #0a3532 55%,
    #030f0e 100%
  );
}

/* Top accent: 3 px teal→amber→teal gradient (replaces flat border) */
.site-footer {
  border-top: none;
  padding-top: 0;
}

.site-footer::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--color-primary) 0%,
    var(--color-accent) 50%,
    var(--color-primary) 100%
  );
  flex-shrink: 0;
}

/* ── DARK MODE REFINEMENT ────────────────────────────────────────────────── */

/* Cards: deep GitHub dark, teal-tinted border */
[data-theme="dark"] .post-card {
  background: #161b22;
  border-color: color-mix(in srgb, var(--color-primary) 18%, #30363d);
}

[data-theme="dark"] .post-card:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, #161b22);
  border-color: color-mix(in srgb, var(--color-primary) 38%, #30363d);
}

/* Section tint adapts in dark mode */
[data-theme="dark"] .cat-section,
[data-theme="dark"] .home-section--primary,
[data-theme="dark"] .home-section--secondary,
[data-theme="dark"] .home-section--neutral,
[data-theme="dark"] .widget-area {
  background: color-mix(in srgb, var(--color-primary) 6%, #0d1117);
}

/* Focus ring contrast in dark */
[data-theme="dark"] *:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

/* Badge readability in dark: keep solid bg, soften slightly */
[data-theme="dark"] .posts-grid .post-card .cat-badge {
  background: color-mix(in srgb, var(--color-primary) 85%, #000);
  color: #fff;
}

/* === END LAYOUT+COLOR DEPTH: cn-blogcongnghe === */


/* === DEEP FIX v2.2: cn-blogcongnghe === */

/* == 1. ARTICLE HEADING CONTRAST (entry-content) == */
.entry-content h2 {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--color-text);
  margin-top: 2rem;
}
.entry-content h2::before {
  content: "// ";
  color: color-mix(in srgb, var(--color-accent) 80%, transparent);
  font-family: var(--font-mono);
  font-weight: 400;
}
.entry-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
}
.entry-content h4 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-soft);
}

/* == 2. CAT-NAV PER PERSONA == */
.cn-cat-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 92%, transparent 100%);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-soft));
  border-radius: var(--radius);
  padding: 6px 10px;
}
.cn-cat-nav::-webkit-scrollbar { display: none; }
.cn-cat-nav a {
  scroll-snap-align: start;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .78rem;
  padding: 5px 12px;
  border-radius: 3px;
  color: var(--color-text-soft);
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.cn-cat-nav a:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); color: var(--color-primary); }
.cn-cat-nav a.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  border-color: var(--color-primary);
  border-radius: 3px;
}

/* == 3. HERO SIDE CARDS — compact editorial mini == */
.hero-side-card,
.hero-featured .hero-side .post-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, var(--color-border));
  border-radius: 6px;
  padding: 10px;
}
.hero-side-card .thumb,
.hero-featured .hero-side .post-card .thumb {
  width: 88px;
  height: 82px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
}
.hero-side-card .thumb img,
.hero-featured .hero-side .post-card .thumb img {
  width: 88px;
  height: 82px;
  object-fit: cover;
  border-radius: 6px;
}
.hero-side-card .card-body,
.hero-featured .hero-side .post-card .card-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.hero-side-card .post-title,
.hero-featured .hero-side .post-card .post-title {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-side-card .post-excerpt,
.hero-featured .hero-side .post-card .post-excerpt { display: none; }
.hero-side-card .post-date,
.hero-featured .hero-side .post-card .post-date {
  font-size: .68rem;
  font-family: var(--font-mono);
  color: var(--color-text-soft);
  margin-left: auto;
  align-self: flex-end;
}

/* == 4. SIDEBAR WIDGET RANKING == */
.widget-posts .widget-post { position: relative; padding-left: 2.4rem; }
.widget-posts .widget-post::before {
  counter-increment: widget-rank;
  content: counter(widget-rank, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-primary);
  background: 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: 2px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.widget-posts { counter-reset: widget-rank; }

/* == 5. POST META CHIPS == */
.post-meta .meta-date,
.entry-meta .meta-date {
  font-family: var(--font-mono);
  font-size: .7rem;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-soft));
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 3px;
  padding: 2px 7px;
  color: var(--color-text-soft);
}
.post-meta .meta-author,
.entry-meta .meta-author { color: var(--color-primary); font-weight: 700; font-size: .78rem; }
.post-meta .meta-reading-time,
.entry-meta .meta-reading-time {
  font-size: .72rem;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 3px;
  padding: 2px 7px;
  color: var(--color-primary-dark);
}

/* == 6. XEM TẤT CẢ BUTTON == */
.view-all-link,
a.xem-tat-ca,
.cat-section .more-link,
.section-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  padding: 5px 14px;
  background: transparent;
  transition: background .15s, color .15s;
}
.view-all-link:hover,
a.xem-tat-ca:hover,
.cat-section .more-link:hover,
.section-more-link:hover {
  background: var(--color-primary);
  color: #fff;
}
/* === END DEEP FIX v2.2: cn-blogcongnghe === */


/* === ARTICLE POLISH v2.3: cn-blogcongnghe === */

/* == 1. TOC (Table of Contents) per-persona == */
.cn-toc,
.rank-math-toc-widget-box {
  border: 1px solid color-mix(in srgb, #14b8a6 30%, transparent);
  background: color-mix(in srgb, #14b8a6 6%, var(--color-bg, #fff));
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}

.cn-toc .cn-toc-title,
.rank-math-toc-widget-box .rank-math-toc-title {
  color: #14b8a6;
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .75rem;
}

.cn-toc a,
.rank-math-toc-widget-box a {
  color: var(--color-text-soft, #4b6a6e);
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.6;
  display: block;
  transition: color .15s, border-left-color .15s;
}

.cn-toc a:hover,
.rank-math-toc-widget-box a:hover {
  color: #14b8a6;
}

.cn-toc a.active,
.rank-math-toc-widget-box a.active {
  border-left: 3px solid #14b8a6;
  padding-left: .5rem;
  color: #14b8a6;
  font-weight: 600;
}

/* Sub-items (h3 level) */
.cn-toc ol ol a,
.cn-toc ul ul a,
.rank-math-toc-widget-box ol ol a,
.rank-math-toc-widget-box ul ul a {
  padding-left: 1.1rem;
  font-size: .82rem;
  color: var(--color-text-soft, #4b6a6e);
}

/* == 2. SHARE BUTTONS per-persona: teal solid, amber text == */
.share-fb,
.share-x,
.share-tg,
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #14b8a6;
  color: #f59e0b;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  min-height: 40px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .18s ease, transform .18s ease;
}

.share-fb:hover,
.share-x:hover,
.share-tg:hover,
.share-copy:hover {
  opacity: .85;
  transform: translateY(-1px);
  color: #f59e0b;
}

/* == 3. ARTICLE READING EXPERIENCE == */
.entry-content {
  font-size: 1.06rem;
  line-height: 1.78;
}

.entry-content p {
  margin-bottom: 1.3em;
}

.entry-content h2 {
  margin-top: 2.2rem;
  margin-bottom: .75rem;
}

.entry-content h3 {
  margin-top: 1.75rem;
  margin-bottom: .6rem;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.3em;
}

.entry-content li {
  margin-bottom: .45em;
  line-height: 1.7;
}

.entry-content code,
.entry-content :not(pre) > code {
  font-family: var(--font-mono, 'SFMono-Regular', Consolas, monospace);
  font-size: .92em;
  padding: .2em .5em;
  border-radius: 4px;
}

/* == 4. READING PROGRESS BAR: teal → amber gradient == */
.reading-progress-bar {
  background: linear-gradient(
    to right,
    #14b8a6 0%,
    #f59e0b 100%
  ) !important;
}

/* == 5. ENTRY HEADER (no-hero fallback) == */
.single-entry-header.no-featured-image,
.entry-header:not(:has(.post-thumbnail)):not(:has(.wp-post-image)),
.entry-header.no-thumbnail {
  background: color-mix(in srgb, #14b8a6 6%, var(--color-bg, #fff));
  border-left: 5px solid #14b8a6;
  padding: 1.5rem 1.5rem 1.5rem 1.25rem;
  border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
  margin-bottom: 1.75rem;
}

/* === END ARTICLE POLISH v2.3: cn-blogcongnghe === */

/* === v2.5 DARK+MOBILE+BADGES: cn-blogcongnghe === */

/* == 1. DARK MODE PER-PERSONA DEEP == */
[data-theme="dark"] body { background: #020f0d; }
[data-theme="dark"] { --color-bg: #020f0d; --color-border: #083430; }
[data-theme="dark"] .post-card { background: #041a18; border-color: #083430; }
[data-theme="dark"] .widget { background: #041a18; border-color: #083430; }
[data-theme="dark"] .cn-toc,
[data-theme="dark"] .rank-math-toc-widget-box {
  background: color-mix(in srgb, #14b8a6 8%, #041a18);
  border-color: color-mix(in srgb, #14b8a6 30%, #083430);
}
[data-theme="dark"] .cn-toc a { color: color-mix(in srgb, #fff 70%, #14b8a6) !important; }
[data-theme="dark"] .cn-toc a:hover,
[data-theme="dark"] .cn-toc a.is-active {
  color: #14b8a6 !important;
  border-left-color: #14b8a6 !important;
}
[data-theme="dark"] .cat-section:nth-child(odd) { background: color-mix(in srgb, #14b8a6 5%, #041a18); }
[data-theme="dark"] .section-title { color: color-mix(in srgb, #fff 85%, #14b8a6); }
[data-theme="dark"] .post-card:hover {
  border-color: color-mix(in srgb, #14b8a6 50%, #083430);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .cn-newsletter {
  background: linear-gradient(135deg, color-mix(in srgb, #14b8a6 70%, #000), color-mix(in srgb, #14b8a6 40%, #000)) !important;
}
[data-theme="dark"] .share-buttons { border-color: #083430; }

/* == 2. MỚI/HOT BADGE PER-PERSONA COLORS == */
.post-card.is-new::before {
  background: #14b8a6 !important;
  font-family: monospace;
  letter-spacing: 0.12em;
  border-radius: 2px;
}
.post-card.is-hot::before {
  background: linear-gradient(135deg, #14b8a6, #f59e0b) !important;
  font-family: monospace;
  letter-spacing: 0.12em;
  border-radius: 2px;
}

/* == 3. CODE BLOCK ACCENT COLOR == */
.entry-content pre { border-left: 3px solid #2dd4bf; }
.entry-content pre[data-lang]::before { background: #2dd4bf; }
.entry-content code:not([class]) { color: #2dd4bf; }

/* == 4. MOBILE TYPOGRAPHY PER-PERSONA == */
@media (max-width: 768px) {
  .entry-content { font-size: 1.06rem; }
  .entry-content h2 { font-size: 1.38rem; }
}

/* === END v2.5 DARK+MOBILE+BADGES: cn-blogcongnghe === */


/* === v2.6 404+BLOCKQUOTE+SEARCH: cn-blogcongnghe === */
.entry-content blockquote:not([class]) { border-left:4px solid #14b8a6; background:rgba(20,184,166,0.07); }
.entry-content blockquote:not([class])::before { color:#14b8a6; }
.entry-content blockquote cite { color:#14b8a6; }
.entry-content table thead tr { background:#14b8a6; }
.entry-content table thead th { color:#fff; }
.error-404::before { color:color-mix(in srgb,#14b8a6 4%,transparent); }
.error-404 { background:radial-gradient(ellipse at 50% 0%,rgba(20,184,166,0.1),transparent 70%); }
.error-404-persona-msg { background:color-mix(in srgb,#14b8a6 10%,var(--color-bg-soft)); border-color:color-mix(in srgb,#14b8a6 25%,transparent); color:#14b8a6; }
.error-404-actions .button { background:#14b8a6; }
.error-404-actions .button:hover { background:color-mix(in oklab,#14b8a6 85%,#000); }
.search-highlight { background:rgba(20,184,166,0.2); border-radius:3px; }
.search-results-title span.search-term { color:#14b8a6; }
.search-results-title span.search-term::after { background:#14b8a6; }
.archive-sort-pill.active { background:#14b8a6; border-color:#14b8a6; }
.search-suggestions-list a { color:#14b8a6; }
.search-suggestions-list a:hover { background:#14b8a6; color:#fff; }


/* === v2.7 NAV+TAG: cn-blogcongnghe === */
.post-navigation a {
  background: color-mix(in srgb, #14b8a6 5%, var(--color-bg-soft));
  border-color: color-mix(in srgb, #14b8a6 18%, var(--color-border));
}
.post-navigation a:hover {
  background: color-mix(in srgb, #14b8a6 10%, var(--color-bg-soft));
  border-color: #14b8a6;
}
.post-navigation a::before { background: #14b8a6; }
.nav-direction { color: #14b8a6; }
.post-navigation a:hover .nav-title { color: #14b8a6; }

.tag .page-header-bar {
  background: linear-gradient(135deg, color-mix(in srgb,#14b8a6 10%,var(--color-bg-soft)), var(--color-bg-soft));
  border-left: 4px solid #14b8a6;
}
.cn-summary-box {
  border-left-color: #14b8a6;
  background: linear-gradient(135deg, color-mix(in srgb,#14b8a6 5%,var(--color-bg-soft)), var(--color-bg-soft));
}
.cn-summary-box-title { color: #14b8a6; }
.cn-summary-box ul li::before { color: #14b8a6; }
[data-theme="dark"] .post-navigation a { background: color-mix(in srgb,#14b8a6 8%,var(--color-bg-soft)); border-color: color-mix(in srgb,#14b8a6 20%,var(--color-border)); }
[data-theme="dark"] .post-navigation a:hover { border-color: #14b8a6; }



/* === v2.8 PERSONA REFINEMENT: Persona E — Tech Precision === */
.section-title {
  font-size: .85rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.post-card {
  border-radius: 6px !important;
  border-top: 2px solid var(--color-primary) !important;
}
.cat-badge {
  font-family: monospace, monospace;
  font-size: .65rem;
  letter-spacing: .06em;
}
.entry-content pre {
  border-left: 3px solid var(--color-primary);
  border-radius: 0 6px 6px 0;
}
.cat-section {
  border-top: 1px solid var(--color-border);
  border-left: none;
  padding-left: 0;
}
.cat-section:first-child { border-top: none; }
.post-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08) !important;
}