/*
Theme Name: CongNghe - Thủ Thuật Plus
Template: congnghe-base
Author: NGÔ
Description: Biến thể giao diện cho thuthuatplus.net (Thủ Thuật Plus). Child theme của CongNghe Base — phong cách công nghệ hiện đại, glassmorphism, tông tím indigo.
Version: 1.1.0
Text Domain: cn-thuthuatplus
*/

/* ============================================================
 * TOKEN BIẾN GỐC — màu / font / layout / bán kính
 * ============================================================ */
:root {
  --color-primary:      #4f46e5;
  --color-primary-dark: #4338ca;
  --color-accent:       #06b6d4;
  --color-footer-bg:    #1e1b4b;
  --color-header-bg:    rgba(15, 13, 40, 0.72);
  --color-header-text:  #f0f0ff;

  --font-body:    "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius:          12px;
  --radius-sm:        8px;
  --container-width: 1220px;

  /* Màu dẫn xuất persona B */
  --primary-tint:    color-mix(in srgb, var(--color-primary) 10%, transparent);
  --primary-border:  color-mix(in srgb, var(--color-primary) 30%, transparent);
  --primary-glow:    0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent),
                     0 8px 28px color-mix(in srgb, var(--color-primary) 22%, transparent);
  --card-surface:    color-mix(in srgb, var(--color-primary) 5%, #f8f9ff);
  --card-border:     color-mix(in srgb, var(--color-primary) 12%, transparent);
  --glass-bg:        color-mix(in srgb, #0f0d2a 72%, transparent);
  --glass-blur:      saturate(200%) blur(16px);
}

/* Google Font — Rubik */
/* Font moved to functions.php for better performance */

/* ============================================================
 * HEADER — glassmorphism backdrop, gradient subtle, viền primary
 * ============================================================ */
.site-header {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1.5px solid var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 100;
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: #1e1b4b; }
}

/* Site title — gradient text primary → accent */
.site-branding .site-title a {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: -.02em;
}

.site-branding .site-description {
  color: rgba(200, 200, 255, .55);
  font-size: .78rem;
}

/* Menu — trên nền glass */
.main-navigation a {
  color: rgba(240, 240, 255, .88);
  font-weight: 600;
  font-size: .9rem;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  color: #fff;
}

/* Gạch chân kinetic — màu accent cho persona B */
.main-navigation > div > ul > li > a::after,
.main-navigation > ul > li > a::after {
  background: var(--color-accent);
}

/* ============================================================
 * TICKER — tông indigo
 * ============================================================ */
.cn-ticker {
  background: linear-gradient(90deg, var(--color-primary) 0%, #6366f1 100%);
  color: #fff;
}

.cn-ticker-label {
  background: var(--color-primary-dark);
}

/* ============================================================
 * NAV CHUYÊN MỤC
 * ============================================================ */
.cn-cat-nav {
  background: color-mix(in srgb, var(--color-primary) 8%, #0f0d28);
  border-bottom: 1px solid var(--primary-border);
}

/* ============================================================
 * HERO MAIN — ảnh 380px, overlay tối, h2 trắng 800
 * ============================================================ */
.hero-featured {
  margin-bottom: 32px;
}

.hero-main {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.hero-main .thumb img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.hero-main:hover .thumb img {
  transform: scale(1.04);
}

.hero-main .card-body {
  position: absolute;
  inset: auto 0 0;
  background: linear-gradient(to top, rgba(10, 8, 40, .92) 0%, rgba(10, 8, 40, .55) 55%, transparent 100%);
  padding: 52px 24px 24px;
}

.hero-main h2,
.hero-main .entry-title {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.22;
  margin: 8px 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.hero-main h2 a { color: inherit; }
.hero-main h2 a:hover { color: var(--color-accent); }

.hero-main .excerpt {
  color: rgba(255, 255, 255, .82);
  font-size: .93rem;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
 * CAT BADGE — indigo tint, viền subtle, radius nhỏ hơn
 * ============================================================ */
.cat-badge {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: var(--radius-sm);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 6px;
  transition: background .2s, border-color .2s;
}

.cat-badge:hover {
  background: color-mix(in srgb, var(--color-primary) 24%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  color: var(--color-primary-dark) !important;
}

/* ============================================================
 * POST CARD — surface tối nhẹ, border subtle, hover glow primary
 * ============================================================ */
.post-card {
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}

.post-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  box-shadow: var(--primary-glow);
}

.post-card .card-body {
  padding: 16px 18px 20px;
}

.post-card h2 a,
.post-card h3 a {
  color: var(--color-text, #1f2937);
}

.post-card h2 a:hover,
.post-card h3 a:hover {
  color: var(--color-primary);
}

/* ============================================================
 * SECTION TITLE — gradient text primary→accent, fw 900
 * ============================================================ */
.section-title,
h2.section-title {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  border-bottom: 2px solid var(--primary-border);
  padding-bottom: .35em;
  margin: 1.6em 0 .8em;
}

/* ============================================================
 * WIDGET
 * ============================================================ */
.widget {
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 24px;
}

.widget-title {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 8px;
  margin-bottom: 14px;
  color: var(--color-primary);
}

/* ============================================================
 * NEWSLETTER CTA — gradient sâu theo primary
 * ============================================================ */
.cn-newsletter {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 90%, #000) 0%,
    color-mix(in srgb, var(--color-accent) 70%, var(--color-primary)) 100%);
  border-radius: var(--radius);
  padding: 36px 28px;
  color: #fff;
  text-align: center;
}

.cn-newsletter h2,
.cn-newsletter .cn-newsletter-title {
  color: #fff;
  font-weight: 800;
  margin-top: 0;
}

.cn-newsletter input[type="email"] {
  border: 1.5px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-radius: var(--radius);
}

.cn-newsletter input[type="email"]::placeholder {
  color: rgba(255, 255, 255, .6);
}

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

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

/* ============================================================
 * FOOTER — indigo đậm
 * ============================================================ */
.site-footer {
  background: var(--color-footer-bg);
  color: rgba(200, 200, 255, .72);
}

.site-footer a { color: rgba(200, 200, 255, .7); }
.site-footer a:hover { color: #fff; }

.site-footer .widget-title {
  color: #fff;
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .28);
  padding: 16px 0;
  font-size: .82rem;
  color: rgba(200, 200, 255, .42);
  text-align: center;
}

/* ============================================================
 * DARK MODE — card surface tối hơn, giữ màu primary
 * ============================================================ */
[data-theme="dark"] {
  --card-surface:  color-mix(in srgb, var(--color-primary) 8%, #1a1830);
  --card-border:   color-mix(in srgb, var(--color-primary) 18%, transparent);
  --color-primary: #6366f1;
  --color-accent:  #22d3ee;
}




[data-theme="dark"] .cat-badge {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: #a5b4fc !important;
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 767px) {
  .hero-main .thumb img { height: 240px; }
  .hero-main h2 { font-size: 1.25rem; }
  .main-navigation {
    background: #1e1b4b;
  }
}

/* === DEEP PER-SITE: BADGE COLORS + DARK MODE + HERO ===
* ============================================================
 * PHẦN BỔ SUNG — cn-thuthuatplus (Persona B)
 * Append vào cuối style.css — KHÔNG sửa phần trên
 * ============================================================ */

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

/* Persona B: pill-ish (border-radius: 8px), tint bg + primary border, primary text */
.cat-badge[data-cat] {
  border-radius: 8px !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: color-mix(in srgb, #4f46e5 15%, transparent) !important;
  border-color: color-mix(in srgb, #4f46e5 45%, transparent) !important;
  color: #4f46e5 !important;
}

.cat-badge[data-cat="meo-hay"],
.post-card .cat-badge[data-cat="meo-hay"],
.single-hero-overlay .cat-badge[data-cat="meo-hay"] {
  background: color-mix(in srgb, #7c3aed 15%, transparent) !important;
  border-color: color-mix(in srgb, #7c3aed 45%, transparent) !important;
  color: #7c3aed !important;
}

.cat-badge[data-cat="review"],
.post-card .cat-badge[data-cat="review"],
.single-hero-overlay .cat-badge[data-cat="review"] {
  background: color-mix(in srgb, #059669 15%, transparent) !important;
  border-color: color-mix(in srgb, #059669 45%, transparent) !important;
  color: #059669 !important;
}

.cat-badge[data-cat="thu-thuat"],
.post-card .cat-badge[data-cat="thu-thuat"],
.single-hero-overlay .cat-badge[data-cat="thu-thuat"] {
  background: color-mix(in srgb, #0891b2 15%, transparent) !important;
  border-color: color-mix(in srgb, #0891b2 45%, transparent) !important;
  color: #0891b2 !important;
}

.cat-badge[data-cat="ung-dung"],
.post-card .cat-badge[data-cat="ung-dung"],
.single-hero-overlay .cat-badge[data-cat="ung-dung"] {
  background: color-mix(in srgb, #d97706 15%, transparent) !important;
  border-color: color-mix(in srgb, #d97706 45%, transparent) !important;
  color: #d97706 !important;
}

/* === PHẦN 2: DARK MODE PER PERSONA B === */

[data-theme="dark"] {
  --color-bg:      #06041a;
  --color-bg-soft: #0e0b30;
  --color-border:  #1c1960;
}

/* Post card — glassmorphism dark surface với border glow nhẹ */
[data-theme="dark"] .post-card {
  background: color-mix(in srgb, #4f46e5 8%, #110e38) !important;
  border: 1px solid color-mix(in srgb, #4f46e5 28%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #4f46e5 18%, transparent),
              0 4px 24px color-mix(in srgb, #4f46e5 14%, transparent) !important;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
}

/* Widget background */
[data-theme="dark"] .widget {
  background: #110e38 !important;
  border-color: var(--color-border) !important;
}

/* Header: persona B = glass dark giữ phong cách glassmorphism */
[data-theme="dark"] .site-header {
  background: color-mix(in srgb, #0f0d2a 80%, transparent) !important;
  border-bottom-color: color-mix(in srgb, #4f46e5 50%, transparent) !important;
}

/* Section title gradient vẫn hoạt động trong dark */
[data-theme="dark"] .section-title,
[data-theme="dark"] .widget-title {
  background: linear-gradient(135deg, #818cf8 0%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Newsletter gradient sâu hơn trong dark */

/* Code block trong dark */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: #020617 !important;
  border-color: #1c1960 !important;
}

/* Cat badge trong dark — nâng độ tương phản nhẹ */
[data-theme="dark"] .cat-badge[data-cat="huong-dan"] { color: #a5b4fc !important; }
[data-theme="dark"] .cat-badge[data-cat="meo-hay"]   { color: #c4b5fd !important; }
[data-theme="dark"] .cat-badge[data-cat="review"]    { color: #6ee7b7 !important; }
[data-theme="dark"] .cat-badge[data-cat="thu-thuat"] { color: #67e8f9 !important; }
[data-theme="dark"] .cat-badge[data-cat="ung-dung"]  { color: #fcd34d !important; }

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

.hero-featured .hero-main .thumb       { height: 400px; }
.hero-featured .hero-main .thumb img   { height: 400px; object-fit: cover; }

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

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

/* ============================================================
 * 1. SECTION BACKGROUNDS — alternating glass tint rhythm
 * ============================================================ */
.cat-section {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 4%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 2%, transparent) 100%
  );
  border-radius: var(--radius);
  padding: 24px 0;
  position: relative;
}

.cat-section:nth-of-type(even) {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent) 4%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 3%, transparent) 100%
  );
}

.trending-strip {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary) 6%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 4%, transparent) 100%
  );
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ============================================================
 * 2. CARD PERSONALITY — Persona B: gradient border + neon glow
 * ============================================================ */
.post-card {
  position: relative;
  background: var(--card-surface);
  border: none !important;
  isolation: isolate;
}

.post-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 60%, transparent),
    color-mix(in srgb, var(--color-accent) 50%, transparent)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity .3s;
}

.post-card:hover::before {
  opacity: 1;
}

.post-card:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--color-accent) 55%, transparent),
    0 8px 32px color-mix(in srgb, var(--color-primary) 30%, transparent),
    0 0 20px color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
}

.post-card:hover h2 a,
.post-card:hover h3 a {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
 * 3. HERO DRAMA — overlay sâu hơn + neon accent strip
 * ============================================================ */
.hero-main .card-body {
  background: linear-gradient(
    to top,
    rgba(6, 4, 26, 0.95) 0%,
    rgba(10, 8, 40, 0.72) 40%,
    rgba(15, 10, 50, 0.25) 65%,
    transparent 100%
  ) !important;
}

.hero-main::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-accent) 50%,
    var(--color-primary) 100%
  );
  background-size: 200% 100%;
  animation: hero-neon-sweep 4s linear infinite;
}

@keyframes hero-neon-sweep {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes hero-neon-sweep { to { background-position: 0% 0%; } }
}

/* ============================================================
 * 4. SECTION TITLES ART — gradient text, fw 900, no border
 * ============================================================ */
.section-title,
h2.section-title {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-accent) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.01em !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  position: relative;
  display: inline-block;
}

.section-title::after,
h2.section-title::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 6px;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-accent),
    transparent
  );
  border-radius: 2px;
}

/* ============================================================
 * 5. FOOTER DEPTH — gradient + grain texture + neon top border
 * ============================================================ */
.site-footer {
  background: linear-gradient(
    180deg,
    var(--color-footer-bg) 0%,
    color-mix(in srgb, var(--color-footer-bg) 85%, #000) 100%
  ) !important;
  position: relative;
  overflow: hidden;
}


.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.08) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}

.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  position: relative;
  z-index: 1;
}

/* ============================================================
 * 6. VISUAL ACCENTS — Persona B: subtle grain + neon dividers
 * ============================================================ */
.cat-section + .cat-section::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  margin-bottom: 28px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--color-primary) 35%, transparent) 30%,
    color-mix(in srgb, var(--color-accent) 40%, transparent) 50%,
    color-mix(in srgb, var(--color-primary) 35%, transparent) 70%,
    transparent 100%
  );
}

.site-content > .wrapper > *:not(:last-child)::after {
  display: none;
}

/* Grain overlay trên header (glass noise) */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
  border-radius: inherit;
}

/* ============================================================
 * DARK MODE EXTENSIONS — reinforce depth on dark surfaces
 * ============================================================ */

[data-theme="dark"] .post-card::before {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #818cf8 70%, transparent),
    color-mix(in srgb, #22d3ee 60%, transparent)
  );
  opacity: 0.65;
}


[data-theme="dark"] .section-title,
[data-theme="dark"] h2.section-title {
  background: linear-gradient(135deg, #818cf8 0%, #22d3ee 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme="dark"] .trending-strip {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #818cf8 8%, #06041a) 0%,
    color-mix(in srgb, #22d3ee 5%, #06041a) 100%
  );
}

/* ============================================================
 * RESPONSIVE ADJUSTMENTS
 * ============================================================ */
@media (max-width: 767px) {
  .cat-section {
    border-radius: var(--radius-sm);
    padding: 16px 0;
  }

  .hero-main::after {
    height: 2px;
  }

  .section-title::after,
  h2.section-title::after {
    margin-top: 4px;
  }
}


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

/* ============================================================
 * MICRO COLOR SYSTEM — dẫn xuất từ #4f46e5
 * ============================================================ */
:root {
  --primary-tint-3:  color-mix(in srgb, #4f46e5  3%, transparent);
  --primary-tint-5:  color-mix(in srgb, #4f46e5  5%, transparent);
  --primary-tint-8:  color-mix(in srgb, #4f46e5  8%, transparent);
  --primary-tint-12: color-mix(in srgb, #4f46e5 12%, transparent);
  --primary-hover:   color-mix(in srgb, #4f46e5 80%, #3730a3);
  --accent-hover:    color-mix(in srgb, #06b6d4 80%, #0e7490);
  --focus-ring:      0 0 0 3px color-mix(in srgb, #4f46e5 22%, transparent);
  --focus-ring-accent: 0 0 0 3px color-mix(in srgb, #06b6d4 20%, transparent);
}

/* Selection color */
::selection {
  background: color-mix(in srgb, #4f46e5 22%, transparent);
  color: inherit;
}

/* Focus rings */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Input focus glow */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: #4f46e5 !important;
  box-shadow: var(--focus-ring) !important;
  outline: none;
}

/* ============================================================
 * HERO — darker purple overlay + side cards compact
 * ============================================================ */

/* Override hero overlay to deeper purple (darker than existing) */
.hero-featured .hero-main .card-body {
  background: linear-gradient(
    to top,
    rgba(4,  2, 20, 0.97) 0%,
    rgba(8,  5, 38, 0.82) 38%,
    rgba(15, 8, 55, 0.38) 62%,
    transparent 100%
  ) !important;
}

/* Hero main thumb: enforce 400px as required */
.hero-featured .hero-main .thumb,
.hero-featured .hero-main .thumb img {
  height: 400px;
  object-fit: cover;
}

/* Hero-side cards: compact — limit title to 2 lines, reduce padding */
.hero-side .post-card .card-body {
  padding: 10px 12px 12px;
}

.hero-side .post-card h2,
.hero-side .post-card h3,
.hero-side .post-card .entry-title {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 6px;
}

.hero-side .post-card .thumb img {
  height: 100px;
  object-fit: cover;
}

.hero-side .post-card .excerpt {
  display: none;
}

.hero-side .post-card .entry-meta {
  font-size: .72rem;
}

/* ============================================================
 * SECTION BACKGROUNDS — indigo tint rhythm
 * ============================================================ */
.home .cat-section:nth-of-type(odd) {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, #4f46e5 5%, transparent) 0%,
    color-mix(in srgb, #4f46e5 2%, transparent) 100%
  );
  border-radius: 14px;
  padding: 28px 16px;
  margin-bottom: 8px;
}

.home .cat-section:nth-of-type(even) {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, #06b6d4 4%, transparent) 0%,
    color-mix(in srgb, #4f46e5 3%, transparent) 100%
  );
  border-radius: 14px;
  padding: 28px 16px;
  margin-bottom: 8px;
}

/* ============================================================
 * HOMEPAGE RHYTHM — clear section spacing
 * ============================================================ */
.home .cat-section {
  margin-top: 40px;
  margin-bottom: 40px;
}

.home .hero-featured {
  margin-bottom: 44px;
}

.home .trending-strip {
  margin-top: 24px;
  margin-bottom: 36px;
}

/* Cat-section featured card: extra breathing room */
.cat-section .featured-card .card-body,
.cat-section .post-card--featured .card-body {
  padding: 20px 22px 24px;
}

.cat-section .featured-card .entry-title,
.cat-section .post-card--featured .entry-title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.28;
  margin-bottom: 8px;
}

/* ============================================================
 * TYPOGRAPHY REFINEMENT — Rubik specific
 * ============================================================ */

/* Site title sizing/spacing for Rubik */
.site-branding .site-title {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: -.025em;
  line-height: 1.1;
}

.site-branding .site-title a {
  font-weight: 800;
  letter-spacing: -.03em;
}

/* Section title: Rubik 900 + tight tracking, unique left accent bar */
.section-title,
h2.section-title {
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.025em;
  font-size: 1.25rem;
  padding-left: 14px;
  position: relative;
}

.section-title::before,
h2.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  bottom: .1em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #4f46e5 0%, #06b6d4 100%);
}

/* Meta — smaller, lighter, spaced */
.entry-meta,
.post-card .entry-meta,
.post-meta {
  font-size: .73rem;
  font-weight: 400;
  letter-spacing: .01em;
  color: color-mix(in srgb, currentColor 55%, transparent);
}

/* ============================================================
 * FOOTER COLOR DEPTH — 3-stop gradient deep indigo/purple
 * ============================================================ */
.site-footer {
  background: linear-gradient(
    180deg,
    #1e1b4b              0%,
    #16144a              45%,
    color-mix(in srgb, #1e1b4b 70%, #000) 100%
  ) !important;
}

/* Top border: 3px accent gradient */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    #4f46e5 0%,
    #06b6d4 50%,
    #4f46e5 100%
  );
  z-index: 2;
}

/* Footer widget area: slight tint separation */
.footer-widgets {
  border-bottom: 1px solid color-mix(in srgb, #4f46e5 20%, transparent);
  padding-bottom: 32px;
  margin-bottom: 0;
}

/* ============================================================
 * DARK MODE REFINEMENT — palette-aware card & section surfaces
 * ============================================================ */
[data-theme="dark"] {
  --card-surface:  color-mix(in srgb, #4f46e5 7%, #0d0b2a);
  --card-border:   color-mix(in srgb, #4f46e5 20%, transparent);
  --primary-tint-5: color-mix(in srgb, #4f46e5 7%, #06041a);
}

[data-theme="dark"] .home .cat-section:nth-of-type(odd) {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, #4f46e5 7%, #06041a) 0%,
    color-mix(in srgb, #4f46e5 3%, #06041a) 100%
  );
}

[data-theme="dark"] .home .cat-section:nth-of-type(even) {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, #06b6d4 5%, #06041a) 0%,
    color-mix(in srgb, #4f46e5 4%, #06041a) 100%
  );
}

[data-theme="dark"] .post-card {
  background: var(--card-surface) !important;
  border-color: var(--card-border) !important;
}

[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, #818cf8 28%, transparent);
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] textarea:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #818cf8 22%, transparent) !important;
}

[data-theme="dark"] ::selection {
  background: color-mix(in srgb, #818cf8 28%, transparent);
}

/* ============================================================
 * RESPONSIVE — mobile adjustments for depth additions
 * ============================================================ */
@media (max-width: 767px) {
  .home .cat-section {
    padding: 18px 10px;
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: var(--radius-sm);
  }

  .section-title,
  h2.section-title {
    font-size: 1.1rem;
    padding-left: 12px;
  }

  .hero-featured .hero-main .thumb,
  .hero-featured .hero-main .thumb img {
    height: 240px;
  }
}


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

/* == 1. ARTICLE HEADING CONTRAST == */

/* == 2. CAT-NAV PER PERSONA == */
.cat-nav {
  background: color-mix(in srgb, var(--color-bg-soft, #f1f5f9) 85%, #4f46e5 15%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  mask: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav a {
  white-space: nowrap;
  padding: 0.5rem 1rem;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.cat-nav a.active,
.cat-nav a[aria-current="page"] {
  color: #4f46e5;
  background: color-mix(in srgb, #4f46e5 12%, transparent);
  border-radius: 6px;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 #06b6d4;
}

/* == 3. HERO SIDE CARDS == */
.hero-side-card {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: color-mix(in srgb, #4f46e5 4%, white);
  border: 1px solid color-mix(in srgb, #4f46e5 15%, var(--color-border, #e2e8f0));
  border-radius: 8px;
  padding: 0.5rem;
}
.hero-side-card .card-thumb {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.hero-side-card .card-body { flex: 1; min-width: 0; }
.hero-side-card .card-title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 0.3rem;
}
.hero-side-card .card-date {
  font-size: 0.68rem;
  color: var(--color-muted, #64748b);
  text-align: right;
  display: block;
}

/* == 4. SIDEBAR WIDGET RANKING == */
.widget-post {
  position: relative;
  padding-left: 2.4rem;
}
.widget-post::before {
  content: counter(widget-rank);
  counter-increment: widget-rank;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  border-radius: 6px;
}
.widget-ranking-list { counter-reset: widget-rank; }

/* == 5. POST META CHIPS == */
.post-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.post-meta .meta-date {
  font-size: 0.7rem;
  background: color-mix(in srgb, #4f46e5 10%, white);
  color: #4f46e5;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #4f46e5 20%, transparent);
}
.post-meta .meta-author {
  font-size: 0.75rem;
  font-weight: 700;
  color: #4f46e5;
  font-family: 'Rubik', sans-serif;
}
.post-meta .meta-reading-time {
  font-size: 0.7rem;
  background: color-mix(in srgb, #4f46e5 8%, white);
  color: #4f46e5;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

/* == 6. XEM TAT CA BUTTON == */
.view-all-btn,
a.xem-tat-ca,
.cat-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Rubik', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  padding: 0.45rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px color-mix(in srgb, #4f46e5 40%, transparent);
  transition: box-shadow 0.2s, transform 0.2s;
}
.view-all-btn:hover,
a.xem-tat-ca:hover,
.cat-view-all:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, #4f46e5 55%, transparent);
  transform: translateY(-1px);
}


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

/* ============================================================
 * 1. TOC (Table of Contents) — indigo tint, cyan accent border
 * ============================================================ */
.cn-toc,
.rank-math-toc-widget-box {
  background: color-mix(in srgb, #4f46e5 6%, transparent);
  border: 1.5px solid color-mix(in srgb, #06b6d4 55%, transparent);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 1.8em 0;
}

.cn-toc-title,
.rank-math-toc-widget-box .rank-math-toc-title {
  color: #4f46e5;
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.cn-toc a,
.rank-math-toc-widget-box a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 3px 0 3px 4px;
  border-left: 2px solid transparent;
  transition: color .18s, border-color .18s, background .18s;
  border-radius: 0 4px 4px 0;
  font-size: .9rem;
}

.cn-toc a:hover,
.rank-math-toc-widget-box a:hover {
  color: #4f46e5;
  border-left-color: #4f46e5;
  background: color-mix(in srgb, #4f46e5 7%, transparent);
}

.cn-toc a.active,
.rank-math-toc-widget-box a.active {
  color: #4f46e5;
  border-left-color: #4f46e5;
  font-weight: 700;
}

/* Sub-items (h3 level) */
.cn-toc li li a,
.rank-math-toc-widget-box li li a {
  padding-left: 16px;
  font-size: .83rem;
  opacity: .82;
}

/* ============================================================
 * 2. SHARE BUTTONS — indigo solid, cyan hover lift
 * ============================================================ */
.share-fb,
.share-x,
.share-tg,
.share-copy {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 8px 18px;
  min-height: 40px;
  border-radius: var(--radius, 12px);
  font-family: "Rubik", system-ui, sans-serif;
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: #4f46e5;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s, opacity .2s;
}

.share-fb:hover,
.share-x:hover,
.share-tg:hover,
.share-copy:hover {
  background: #06b6d4;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, #06b6d4 38%, transparent);
  opacity: .96;
  color: #fff;
}

.share-fb:active,
.share-x:active,
.share-tg:active,
.share-copy:active {
  transform: translateY(0);
  opacity: .9;
}

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

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

/* h2: gradient text primary → accent */
.entry-content h2 {
  background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  line-height: 1.25;
  margin-top: 1.8em;
  margin-bottom: .5em;
}

/* h3: cyan italic */
.entry-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  font-style: italic;
  color: #06b6d4;
  margin-top: 1.5em;
  margin-bottom: .4em;
}

/* h4: indigo uppercase small */
.entry-content h4 {
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #4f46e5;
  margin-top: 1.3em;
  margin-bottom: .35em;
}

/* ============================================================
 * 4. READING PROGRESS BAR — primary → accent gradient
 * ============================================================ */
.reading-progress-bar {
  background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%) !important;
}

/* ============================================================
 * 5. ENTRY HEADER — no-hero fallback (indigo tint + border-left)
 * ============================================================ */
.entry-header:not(.has-post-thumbnail),
.single-article-header:not(.has-post-thumbnail) {
  background: color-mix(in srgb, #4f46e5 6%, transparent);
  border-left: 5px solid #4f46e5;
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  padding: 22px 24px 20px 20px;
  margin-bottom: 1.6em;
}

/* Fallback using :not([class*="thumbnail"]) if theme uses class not attribute */
.entry-header.no-thumbnail,
.post-header.no-thumbnail {
  background: color-mix(in srgb, #4f46e5 6%, transparent);
  border-left: 5px solid #4f46e5;
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  padding: 22px 24px 20px 20px;
  margin-bottom: 1.6em;
}

/* Dark mode article adjustments */
[data-theme="dark"] .cn-toc,

[data-theme="dark"] .cn-toc-title,
[data-theme="dark"] .rank-math-toc-widget-box .rank-math-toc-title {
  color: #818cf8;
}

[data-theme="dark"] .cn-toc a:hover,
[data-theme="dark"] .rank-math-toc-widget-box a:hover,
[data-theme="dark"] .cn-toc a.active,
[data-theme="dark"] .rank-math-toc-widget-box a.active {
  color: #818cf8;
  border-left-color: #818cf8;
  background: color-mix(in srgb, #818cf8 10%, transparent);
}

[data-theme="dark"] .share-fb,
[data-theme="dark"] .share-x,
[data-theme="dark"] .share-tg,
[data-theme="dark"] .share-copy {
  background: color-mix(in srgb, #4f46e5 80%, #818cf8);
}

[data-theme="dark"] .share-fb:hover,
[data-theme="dark"] .share-x:hover,
[data-theme="dark"] .share-tg:hover,
[data-theme="dark"] .share-copy:hover {
  background: #22d3ee;
  box-shadow: 0 6px 18px color-mix(in srgb, #22d3ee 38%, transparent);
}

[data-theme="dark"] .entry-content h3 {
  color: #22d3ee;
}

[data-theme="dark"] .entry-content h4 {
  color: #818cf8;
}

[data-theme="dark"] .entry-header:not(.has-post-thumbnail),
[data-theme="dark"] .single-article-header:not(.has-post-thumbnail),
[data-theme="dark"] .entry-header.no-thumbnail,
[data-theme="dark"] .post-header.no-thumbnail {
  background: color-mix(in srgb, #4f46e5 10%, #0d0b2a);
  border-left-color: #818cf8;
}


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

/* == 1. DARK MODE per-persona DEEP == */
[data-theme="dark"] body { background: #06041a; }
[data-theme="dark"] .post-card { background: #110e38; border-color: #1c1960; }
[data-theme="dark"] .widget { background: #110e38; border-color: #1c1960; }
[data-theme="dark"] .cn-toc,
[data-theme="dark"] .rank-math-toc-widget-box {
  background: color-mix(in srgb, #4f46e5 8%, #110e38);
  border-color: color-mix(in srgb, #4f46e5 30%, #1c1960);
}
[data-theme="dark"] .cn-toc a { color: color-mix(in srgb, #fff 70%, #4f46e5) !important; }
[data-theme="dark"] .cn-toc a:hover,
[data-theme="dark"] .cn-toc a.is-active {
  color: #4f46e5 !important;
  border-left-color: #4f46e5 !important;
}
[data-theme="dark"] .cat-section:nth-child(odd) { background: color-mix(in srgb, #4f46e5 5%, #110e38); }
[data-theme="dark"] .section-title { color: color-mix(in srgb, #fff 85%, #4f46e5); }
[data-theme="dark"] .post-card:hover {
  border-color: color-mix(in srgb, #4f46e5 50%, #1c1960);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
/* Persona B specific dark */
[data-theme="dark"] .site-header { background: color-mix(in srgb, #06041a 85%, transparent) !important; }

/* == 2. MỚI/HOT BADGE per-persona colors == */
.post-card.is-new::before { background: #4f46e5 !important; }
.post-card.is-hot::before { background: linear-gradient(135deg, #4f46e5, #06b6d4) !important; }

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

/* == 4. MOBILE TYPOGRAPHY per-persona == */
@media (max-width: 768px) {
  .entry-content { font-size: 1.06rem; }
  .entry-content h2 { font-size: 1.35rem; }
  .entry-content h2 {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--color-text);
  }
}

/* == 5. DARK MODE: newsletter + share in dark == */
[data-theme="dark"] .cn-newsletter {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #4f46e5 70%, #000),
    color-mix(in srgb, #4f46e5 40%, #000)
  ) !important;
}
[data-theme="dark"] .share-buttons { border-color: #1c1960; }


/* === v2.6 404+BLOCKQUOTE+SEARCH: cn-thuthuatplus === */

/* == 1. BLOCKQUOTE per-persona == */
.entry-content blockquote:not([class]) {
  border-left: 4px solid #4f46e5;
  background: rgba(79,70,229,0.07);
}
.entry-content blockquote:not([class])::before {
  color: #4f46e5;
}
/* Cite color */
.entry-content blockquote cite { color: #4f46e5; }

/* == 2. TABLE HEADER per-persona == */
.entry-content table thead tr { background: #4f46e5; }

/* == 3. 404 PAGE per-persona == */
.error-404::before { color: color-mix(in srgb, #4f46e5 4%, transparent); }
.error-404 { background: radial-gradient(ellipse at 50% 0%,rgba(79,70,229,0.12),transparent); }
/* 404 persona message box */
.error-404-persona-msg {
  background: color-mix(in srgb, #4f46e5 10%, var(--color-bg-soft));
  border-color: color-mix(in srgb, #4f46e5 25%, transparent);
  color: #4f46e5;
}
/* 404 "Về trang chủ" button */
.error-404-actions .button { background: #4f46e5; }
.error-404-actions .button:hover { background: color-mix(in oklab, #4f46e5 85%, #000); }
/* 404 search form: primary color */
.error-404-search input[type="search"]:focus { border-color: #4f46e5; }
.error-404-suggestions .section-title { color: #4f46e5; }

/* == 4. SEARCH per-persona == */
/* Keyword highlight color */
.search-highlight {
  background: rgba(79,70,229,0.2);
  border-radius: 3px;
}
/* Search term underline in title */
.search-results-title span.search-term { color: #4f46e5; }
.search-results-title span.search-term::after { background: #4f46e5; }
/* Sort pills active */
.archive-sort-pill.active { background: #4f46e5; border-color: #4f46e5; }
/* Category suggestion pills */
.search-suggestions-list a { color: #4f46e5; border-color: color-mix(in srgb, #4f46e5 25%, var(--color-border)); }
.search-suggestions-list a:hover { background: #4f46e5; color: #fff; }

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

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



/* === v2.8 PERSONA REFINEMENT: Persona B — Glassmorphism === */
.post-card {
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}
.section-title {
  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #a855f7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-left: 4px solid var(--color-primary) !important;
}
.section-title::after {
  background: linear-gradient(to right, var(--color-primary), color-mix(in srgb, var(--color-primary) 40%, #a855f7), transparent) !important;
}
.cat-section {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-soft)) 0%, var(--color-bg-soft) 100%);
  border-radius: var(--radius);
  padding: 20px 16px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
}
.post-card:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent), 0 12px 32px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}
[data-theme="dark"] .cat-section {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, #05041a) 0%, #05041a 100%);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}