/*
Theme Name: CongNghe - Thế Giới Công Nghệ
Template: congnghe-base
Author: NGÔ
Description: Biến thể giao diện cho thegioicongnghe.net (Thế Giới Công Nghệ). Child theme của CongNghe Base. Phong cách tạp chí tin tức, tông xanh dương đậm.
Version: 1.1.0
Text Domain: cn-thegioicongnghe
*/

/* ============================================================
 * TOKEN BIẾN GỐC — màu / font / layout
 * ============================================================ */
:root {
  --color-primary: #0284c7;
  --color-primary-dark: #0369a1;
  --color-accent: #f59e0b;
  --color-header-bg: #0c2340;
  --color-header-text: #e0f2fe;
  --color-footer-bg: #082f49;
  --color-footer-text: #bae6fd;
  --color-section-border: #0284c7;
  --color-ticker-bg: #0284c7;
  --color-ticker-label: #01538a;
  --color-ticker-text: #ffffff;
  --color-cat-nav-bg: #091d33;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --radius: 10px;
  --container-width: 1280px;
  --primary-hover: color-mix(in oklab, var(--color-primary) 84%, #000);
  --primary-tint: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* ============================================================
 * GOOGLE FONT
 * ============================================================ */
/* Font moved to functions.php for better performance */

/* ============================================================
 * HEADER — tạp chí tin tức, nền tối
 * ============================================================ */
.site-header {
  background: var(--color-header-bg) !important;
  border-bottom: 3px solid var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-branding .site-title a {
  color: #ffffff;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.site-description {
  color: rgba(224, 242, 254, 0.55);
  font-size: 0.75rem;
}

/* ============================================================
 * NAVIGATION — chữ nhạt, uppercase, hover subtle
 * ============================================================ */
.main-navigation ul {
  gap: 0;
}

.main-navigation ul li a {
  color: rgba(224, 242, 254, 0.85);
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a {
  color: #ffffff;
  border-top-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
 * BREAKING NEWS TICKER
 * ============================================================ */
.cn-ticker {
  background: var(--color-ticker-bg);
  color: var(--color-ticker-text);
}

.cn-ticker-label {
  background: var(--color-ticker-label);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
 * CATEGORY NAV THỨ 2 — nền tối hơn header một chút
 * ============================================================ */

.cn-cat-nav ul {
  padding-inline: 20px;
}



/* ============================================================
 * CATEGORY BADGE — xanh dương, border-radius 2px, uppercase tiny
 * ============================================================ */
.cat-badge {
  background: var(--color-primary);
  color: #ffffff !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 6px;
}

.cat-badge:hover {
  background: var(--color-primary-dark);
  color: #ffffff !important;
}

/* ============================================================
 * SECTION TITLE — border-left primary, uppercase, reset pseudo
 * ============================================================ */
.section-title,
h2.section-title {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  border-left: 4px solid var(--color-primary);
  padding-left: 10px;
  margin: 28px 0 16px;
  line-height: 1.2;
  display: block;
}

.section-title::before,
.section-title::after,
h2.section-title::before,

/* ============================================================
 * HERO MAIN — ảnh 400px, overlay gradient, tiêu đề trắng
 * ============================================================ */
.hero-featured {
  gap: 4px;
  margin-bottom: 32px;
}

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

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


.hero-main .card-body {
  position: absolute;
  inset: auto 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
  padding: 48px 24px 24px;
}

.hero-main .entry-title,
.hero-main h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.22;
  margin: 8px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.hero-main h2 a {
  color: inherit;
  text-decoration: none;
}

.hero-main h2 a:hover {
  color: #bae6fd;
}

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

/* ============================================================
 * HERO SIDE CARDS
 * ============================================================ */
.hero-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-side .post-card { flex: 1; }
.hero-side .post-card .card-body { padding: 12px; }
.hero-side .post-card h2,

/* ============================================================
 * POST CARDS
 * ============================================================ */
.post-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-soft);
  transition: transform 0.2s, box-shadow 0.2s;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.15);
}

.post-card .thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.post-card:hover .thumb img {
  transform: scale(1.04);
}

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

.post-card .entry-title,
.post-card h2,
.post-card h3 {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 6px 0 8px;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card h2 a,
.post-card h3 a {
  color: inherit;
  text-decoration: none;
}

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

/* ============================================================
 * POST META
 * ============================================================ */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--color-text-soft);
}

.meta-author {
  font-weight: 700;
  color: var(--color-primary);
}

.meta-reading {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary-dark);
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 600;
}

/* ============================================================
 * BÀI ĐƠN (single)
 * ============================================================ */
.single-article .entry-title {
  font-size: clamp(1.55rem, 3.5vw, 2.4rem);
  font-weight: 900;
  line-height: 1.2;
  margin: 10px 0 16px;
}

.single-article .entry-featured {
  margin: 0 0 24px;
  border-radius: var(--radius);
  overflow: hidden;
}

.single-article .entry-featured img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  display: block;
}


.entry-content h2 {
  font-size: 1.35rem;
  font-weight: 800;
  border-left: 4px solid var(--color-primary);
  padding-left: 12px;
  margin: 32px 0 14px;
}

.entry-content h3 {
  font-size: 1.12rem;
  font-weight: 700;
  margin: 22px 0 10px;
}


/* ============================================================
 * WIDGET
 * ============================================================ */
.widget {
  margin-bottom: 28px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  padding: 20px;
}

.widget-title {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  border-left: 3px solid var(--color-accent);
  padding-left: 10px;
  margin-bottom: 16px;
  display: block;
}

.widget-title::before,

/* ============================================================
 * NEWSLETTER / CTA
 * ============================================================ */
.cn-newsletter {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius);
  padding: 32px 24px;
  color: #ffffff;
}

.cn-newsletter h3 {
  color: #ffffff;
  font-weight: 900;
  margin: 0 0 8px;
}

.cn-newsletter input[type="email"] {
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: calc(var(--radius) - 2px);
}

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

.cn-newsletter button,
.cn-newsletter input[type="submit"] {
  background: var(--color-accent);
  color: #1c1917;
  font-weight: 800;
  border-radius: calc(var(--radius) - 2px);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.cn-newsletter button:hover,
.cn-newsletter input[type="submit"]:hover {
  opacity: 0.88;
}

/* ============================================================
 * FOOTER
 * ============================================================ */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 48px 0 0;
}

.site-footer .widget-title {
  color: #ffffff;
  border-left: 3px solid var(--color-accent);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-left: 10px;
  margin-bottom: 14px;
  display: block;
}

.site-footer .widget-title::before,
.site-footer .widget-title::after {
  display: none;
  content: none;
}

.site-footer a {
  color: rgba(186, 230, 253, 0.75);
}

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

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

.footer-bottom {
  background: rgba(0, 0, 0, 0.35);
  padding: 14px 0;
  margin-top: 32px;
  font-size: 0.78rem;
  text-align: center;
  color: rgba(186, 230, 253, 0.45);
}

/* ============================================================
 * SHARE BUTTONS
 * ============================================================ */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.share-buttons a,
.share-buttons button {
  flex-shrink: 0;
  padding: 7px 18px;
  border-radius: var(--radius);
  font-size: 0.83rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.share-buttons a:hover,
.share-buttons button:hover { opacity: 0.82; }

.share-fb  { background: #1877f2; color: #fff !important; }
.share-x   { background: #000000; color: #fff !important; }
.share-tg  { background: #229ed9; color: #fff !important; }
.share-copy { background: var(--color-bg-soft); color: var(--color-text); border: 1px solid var(--color-border); }

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 767px) {
  .hero-main .thumb img { height: 230px; }
  .hero-main h2 { font-size: 1.2rem; }
  .single-article .entry-title { font-size: 1.45rem; }
}

/* ============================================================
 * DARK MODE — giữ nguyên màu primary xanh dương
 * ============================================================ */
[data-theme="dark"] {
  --color-primary: #0284c7;
  --color-primary-dark: #0369a1;
  --color-accent: #f59e0b;
  --color-section-border: #0284c7;
}


[data-theme="dark"] .widget {
  background: color-mix(in srgb, var(--color-header-bg) 60%, #1e293b);
}

[data-theme="dark"] .widget-title {
  color: #e0f2fe;
}

[data-theme="dark"] .section-title,

/* === DEEP PER-SITE: BADGE COLORS + DARK MODE + HERO ===
* =============================================================
   cn-thegioicongnghe — PHẦN BỔ SUNG (persona A: báo điện tử, sắc nét)
   Append vào cuối style.css — KHÔNG chỉnh sửa phần trên
   ============================================================= */

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

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

.cat-badge[data-cat="ai-cong-nghe"],
.post-card .cat-badge[data-cat="ai-cong-nghe"],
.single-hero-overlay .cat-badge[data-cat="ai-cong-nghe"] {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
  border-radius: 2px;
}

.cat-badge[data-cat="android"],
.post-card .cat-badge[data-cat="android"],
.single-hero-overlay .cat-badge[data-cat="android"] {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
  border-radius: 2px;
}

.cat-badge[data-cat="apple"],
.post-card .cat-badge[data-cat="apple"],
.single-hero-overlay .cat-badge[data-cat="apple"] {
  background: #374151 !important;
  border-color: #374151 !important;
  color: #fff !important;
  border-radius: 2px;
}

.cat-badge[data-cat="dien-thoai"],
.post-card .cat-badge[data-cat="dien-thoai"],
.single-hero-overlay .cat-badge[data-cat="dien-thoai"] {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #fff !important;
  border-radius: 2px;
}

.cat-badge[data-cat="internet"],
.post-card .cat-badge[data-cat="internet"],
.single-hero-overlay .cat-badge[data-cat="internet"] {
  background: #0891b2 !important;
  border-color: #0891b2 !important;
  color: #fff !important;
  border-radius: 2px;
}

/* === PHẦN 2: DARK MODE — PERSONA A === */

[data-theme="dark"] {
  --color-bg: #020c18;
  --color-bg-soft: #071829;
  --color-border: #0c2e4a;
}

[data-theme="dark"] .post-card {
  background: #071829;
  border-color: #0c2e4a;
}

[data-theme="dark"] .widget,
[data-theme="dark"] .sidebar .widget {
  background: #071829;
  border-color: #0c2e4a;
}

/* Persona A: header giữ rất tối */
[data-theme="dark"] #site-header,
[data-theme="dark"] .site-header {
  background: #0d0a0a;
  border-bottom-color: #1a1212;
}

/* Section title giữ màu primary, text sang light */
[data-theme="dark"] .section-title {
  color: var(--color-primary);
}

[data-theme="dark"] .section-title .title-text {
  color: #f1f5f9;
}

/* Newsletter gradient sâu hơn trong dark */
[data-theme="dark"] .cn-newsletter {
  background: linear-gradient(135deg, #020c18 0%, #071829 60%, #0c2e4a 100%);
  border-color: #0c2e4a;
}

/* Code block trong dark — persona A */
[data-theme="dark"] pre,
[data-theme="dark"] code,
[data-theme="dark"] .wp-block-code {
  background: #020617;
  border-color: #0c2e4a;
  color: #e2e8f0;
}

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

.hero-featured .hero-main .thumb {
  height: 440px;
  overflow: hidden;
}

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

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

/* === KẾT THÚC PHẦN BỔ SUNG cn-thegioicongnghe === */

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

/* ── 1. SECTION BACKGROUNDS — alternating visual rhythm ── */
.cat-section {
  border-left: 4px solid var(--color-primary);
  background: rgba(0, 0, 0, 0.03);
  padding-left: 12px;
  margin-bottom: 36px;
}


.trending-strip {
  border-left: 4px solid var(--color-primary);
  background: rgba(0, 0, 0, 0.03);
  padding: 16px 12px;
  margin-bottom: 28px;
}



[data-theme="dark"] .trending-strip {
  background: color-mix(in srgb, var(--color-primary) 8%, #020c18);
}

/* ── 2. CARD PERSONALITY — Persona A: top border + headline hover red-like ── */

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

.post-card .entry-title a,
.post-card h2 a,
.post-card h3 a {
  transition: color 0.22s ease;
}


/* ── 3. HERO DRAMA — cinematic overlay Persona A ── */

.hero-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 18%, transparent) 0%,
    transparent 55%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-main .card-body {
  z-index: 2;
}

.hero-main .thumb img {
  transition: transform 0.6s ease, filter 0.4s ease;
}

.hero-main:hover .thumb img {
  transform: scale(1.05);
  filter: brightness(0.9);
}

/* Breaking line trước hero — Persona A signature */
.hero-featured::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  margin-bottom: 8px;
}

/* ── 4. SECTION TITLES ART — accent vàng + uppercase sharp ── */
.section-title,

.section-title .title-text,

.section-title::after,

.section-title .title-accent,
h2.section-title .title-accent {
  color: var(--color-accent);
  font-weight: 900;
}

/* Widget title accent line */
.widget-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.widget-title::after {
  content: "";
  display: block;
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* ── 5. FOOTER DEPTH ── */
.site-footer {
  background: linear-gradient(
    180deg,
    var(--color-footer-bg) 0%,
    color-mix(in srgb, var(--color-footer-bg) 82%, #000) 100%
  ) !important;
  border-top: 3px solid linear-gradient(90deg, var(--color-primary), var(--color-accent));
  position: relative;
}



/* ── 6. VISUAL ACCENTS — Persona A specifics ── */

/* Post meta date — newspaper compact style */

/* Entry content first paragraph slight indent — newspaper feel */
.entry-content > p:first-of-type {
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.82;
  color: var(--color-text);
}

/* Trending section visual separator */
.trending-strip + .cat-section,
.cat-section + .cat-section {
  padding-top: 8px;
}

/* Read progress bar accent */
#cn-read-progress {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-accent) 100%
  ) !important;
  height: 3px;
}

/* Mobile tightening */
@media (max-width: 767px) {
  .cat-section {
    border-left-width: 3px;
    padding-left: 8px;
  }

  .hero-main::before {
    display: none;
  }

}

/* === KẾT THÚC AESTHETIC DEEP UPGRADE: cn-thegioicongnghe === */


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

/* ── MICRO COLOR SYSTEM — primary #0284c7 tints ── */
:root {
  --p-tint-3:  color-mix(in srgb, #0284c7  3%, transparent);
  --p-tint-5:  color-mix(in srgb, #0284c7  5%, transparent);
  --p-tint-10: color-mix(in srgb, #0284c7 10%, transparent);
  --p-tint-20: color-mix(in srgb, #0284c7 20%, transparent);
  --p-hover:   color-mix(in oklab, #0284c7 82%, #000);
  --a-deep:    color-mix(in oklab, #f59e0b 88%, #000);   /* richer gold */
  --focus-ring: 0 0 0 3px color-mix(in srgb, #0284c7 22%, transparent);
}

::selection {
  background: var(--p-tint-20);
  color: #0c2340;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── HERO CINEMATIC 440 px — override all prior heights ── */
.hero-featured .hero-main .thumb,
.hero-main .thumb {
  height: 440px;
  overflow: hidden;
}

.hero-featured .hero-main .thumb img,
.hero-main .thumb img {
  height: 440px;
  width: 100%;
  object-fit: cover;
  object-position: center 25%;
}

/* Cinematic overlay: darker bottom 40 %, subtle blue tint top-left */
.hero-main .card-body {
  background: linear-gradient(
    to top,
    rgba(4, 10, 20, 0.96) 0%,
    rgba(4, 10, 20, 0.72) 28%,
    rgba(4, 10, 20, 0.18) 58%,
    transparent 72%
  ) !important;
  padding: 72px 32px 30px;
}

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

/* ── HERO SIDE CARDS — compact, 2-line title ── */
.hero-side {
  gap: 6px;
}


.hero-side .post-card .thumb img {
  aspect-ratio: 16 / 7;
  height: auto;
}


.hero-side .post-card .entry-title,
.hero-side .post-card h2,

.hero-side .post-meta {
  font-size: 0.72rem;
  gap: 5px;
}

/* ── FEATURED CAT-SECTION CARD — padding + felt ── */
.cat-section .featured-card,
.cat-section > .post-card:first-child {
  padding: 0;
  background: var(--p-tint-3);
  border-top: 3px solid var(--color-primary);
}

.cat-section .featured-card .card-body,
.cat-section > .post-card:first-child .card-body {
  padding: 18px 20px 20px;
}

/* ── HOMEPAGE SECTION RHYTHM ── */
.cat-section {
  background: color-mix(in srgb, #000 3%, transparent);
  padding: 20px 16px 20px;
  margin-bottom: 40px;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.cat-section:nth-child(even) {
  background: var(--p-tint-5);
  border-left-color: var(--a-deep);
}

.cat-section + .cat-section {
  margin-top: 0;
}

/* ── ALL CARDS: border-top primary ── */
.post-card {
  border-top: 3px solid var(--color-primary);
}

/* Hover: use color-mix for lifted tint box-shadow */

/* ── SECTION TITLES — accent vàng đậm hơn ── */
.section-title,
h2.section-title {
  border-left: 4px solid var(--a-deep);
  color: var(--color-text);
  font-size: 1.0rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 0 4px 12px;
  margin: 32px 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* Accent stripe — right-fade gold line */
.section-title::after,
h2.section-title::after {
  content: "" !important;
  display: block !important;
  flex: 1;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--a-deep) 0%,
    color-mix(in srgb, #f59e0b 30%, transparent) 60%,
    transparent 100%
  );
  margin-left: 10px;
}

/* Span inside section title gets gold treatment */
.section-title .title-text,
h2.section-title .title-text {
  color: var(--a-deep);
  font-weight: 900;
}

/* ── SITE TITLE — Lato 900 CNN-scale ── */
.site-branding .site-title a {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── POST META — smaller, lighter ── */
.post-meta {
  font-size: 0.73rem;
  font-weight: 400;
  gap: 6px;
  color: var(--color-text-soft);
}



/* ── BLOCKQUOTE — navy left border ── */
.entry-content blockquote {
  border-left: 4px solid #0c2340;
  background: var(--p-tint-5);
  padding: 16px 22px;
  margin: 24px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--color-text-soft);
  position: relative;
}

.entry-content blockquote::before {
  content: "\201C";
  position: absolute;
  top: -4px;
  left: 14px;
  font-size: 2.8rem;
  color: color-mix(in srgb, #0284c7 30%, transparent);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

/* ── FOOTER — 3-stop gradient deep navy→black ── */
.site-footer {
  background: linear-gradient(
    180deg,
    #082f49 0%,
    #051a2c 50%,
    #020d18 100%
  ) !important;
  position: relative;
  padding-top: 52px;
}

/* Top border: 3px gold→blue→gold gradient */
.site-footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--a-deep) 0%,
    #0284c7 40%,
    #0369a1 70%,
    var(--a-deep) 100%
  );
  position: absolute;
  top: 0;
  left: 0;
}

.footer-bottom {
  background: rgba(0, 0, 0, 0.45);
  border-top: 1px solid color-mix(in srgb, #0284c7 18%, transparent);
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

/* ── SECTION BACKGROUNDS: interactive focus/hover tints ── */
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 3px;
}

.cat-badge:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ── DARK MODE — adapted tints ── */
[data-theme="dark"] {
  --p-tint-3:  color-mix(in srgb, #0284c7  4%, #020c18);
  --p-tint-5:  color-mix(in srgb, #0284c7  7%, #020c18);
  --p-tint-10: color-mix(in srgb, #0284c7 12%, #020c18);
  --p-tint-20: color-mix(in srgb, #0284c7 20%, #020c18);
}

[data-theme="dark"] .post-card {
  background: #071829;
  border-top-color: var(--color-primary);
}


[data-theme="dark"] .cat-section:nth-child(even) {
  background: color-mix(in srgb, #f59e0b 5%, #071829);
  border-left-color: var(--a-deep);
}

[data-theme="dark"] .section-title,
[data-theme="dark"] h2.section-title {
  color: #e0f2fe;
  border-left-color: var(--a-deep);
}

[data-theme="dark"] .section-title .title-text,
[data-theme="dark"] h2.section-title .title-text {
  color: var(--a-deep);
}

[data-theme="dark"] .entry-content blockquote {
  border-left-color: color-mix(in srgb, #0284c7 60%, #0c2340);
  background: var(--p-tint-5);
}

[data-theme="dark"] ::selection {
  background: color-mix(in srgb, #0284c7 28%, #020c18);
  color: #e0f2fe;
}

/* === KẾT THÚC LAYOUT+COLOR DEPTH: cn-thegioicongnghe === */


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

/* ── 1. ARTICLE HEADING CONTRAST (entry-content) ── */
.entry-content h2 {
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  font-weight: 800;
  border-left: 4px solid #0284c7;
  border-bottom: none;
  padding-left: 12px;
  margin: 32px 0 14px;
  line-height: 1.25;
}

.entry-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 24px 0 10px;
  border-left: none;
  padding-left: 0;
}

.entry-content h4 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 18px 0 8px;
}

/* ── 2. CAT-NAV PER PERSONA — ultra-dark, uppercase, fade edges on mobile ── */
.cn-cat-nav {
  background: #0c2340;
  position: relative;
}

.cn-cat-nav ul li a {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(224, 242, 254, 0.72);
  padding: 9px 14px;
  display: block;
  border-bottom: 3px solid transparent;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.cn-cat-nav ul li a:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.06);
}

.cn-cat-nav ul li.current-cat > a,
.cn-cat-nav ul li.active > a {
  color: #ffffff;
  background: #0284c7;
  border-bottom-color: #f59e0b;
  font-weight: 900;
}

@media (max-width: 767px) {
  .cn-cat-nav ul {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 92%, transparent 100%);
  }
  .cn-cat-nav ul::-webkit-scrollbar { display: none; }
  .cn-cat-nav ul li { flex-shrink: 0; }
}

/* ── 3. HERO SIDE CARDS — compact editorial mini ── */
.hero-side .post-card {
  background: color-mix(in srgb, #0284c7 8%, var(--color-bg-soft, #f8fafc));
  border: 1px solid color-mix(in srgb, #0284c7 15%, transparent);
  border-top: 3px solid #0284c7;
  border-radius: 6px;
  overflow: hidden;
}

.hero-side .post-card .thumb img {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.hero-side .post-card .card-body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
}

.hero-side .post-card .entry-title,
.hero-side .post-card h2,
.hero-side .post-card h3 {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  margin: 0 0 4px;
  flex: 1;
}

.hero-side .post-card .post-meta {
  font-size: 0.68rem;
  justify-content: flex-end;
  margin-top: 2px;
}

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

/* ── 4. SIDEBAR WIDGET RANKING — square red number badge ── */
.widget-post {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}

.widget-post::before {
  content: counter(widget-rank);
  counter-increment: widget-rank;
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: #e11d48;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  line-height: 22px;
  border-radius: 2px;
  letter-spacing: 0;
}

.widget-posts-list,
.cn-ranking-list {
  counter-reset: widget-rank;
}

/* ── 5. POST META CHIPS — accent/small-caps treatment ── */
.post-meta .meta-date {
  background: color-mix(in srgb, #e11d48 12%, transparent);
  color: #be123c;
  font-size: 0.7rem;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: lowercase;
}

.post-meta .meta-author {
  color: #0284c7;
  font-weight: 700;
  font-size: 0.75rem;
}

.post-meta .meta-reading {
  background: color-mix(in srgb, #0284c7 8%, transparent);
  color: #0369a1;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}

/* ── 6. XEM TẤT CẢ button — pill, solid primary ── */
.view-all-link,
a.view-all,
.cat-section .view-all,
.cat-section .xem-tat-ca,
.section-footer .view-all {
  display: inline-block;
  background: #0284c7;
  color: #ffffff !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 20px;
  border-radius: 99px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s;
}

.view-all-link:hover,
a.view-all:hover,
.cat-section .view-all:hover,
.cat-section .xem-tat-ca:hover,
.section-footer .view-all:hover {
  background: #0369a1;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* === END DEEP FIX v2.2: cn-thegioicongnghe === */


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

/* === 1. TOC (Table of Contents) === */
.cn-toc,
.rank-math-toc-widget-box {
    background: #0f172a;
    border: 1px solid #0284c7;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    color: #e2e8f0;
}

.cn-toc .cn-toc-title,
.rank-math-toc-widget-box .rank-math-toc-title {
    color: #f59e0b;
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.cn-toc ol,
.cn-toc ul,
.rank-math-toc-widget-box ol,
.rank-math-toc-widget-box ul {
    margin: 0;
    padding-left: 1.2rem;
}

.cn-toc a,
.rank-math-toc-widget-box a {
    color: #93c5fd;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 0.93rem;
    line-height: 1.7;
    display: block;
    padding: 2px 0 2px 6px;
    border-left: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.cn-toc a:hover,
.rank-math-toc-widget-box a:hover {
    color: #0284c7;
    border-left-color: #0284c7;
}

.cn-toc a.active,
.rank-math-toc-widget-box a.active {
    color: #f59e0b;
    border-left-color: #0284c7;
    font-weight: 600;
}

.cn-toc li li a,
.rank-math-toc-widget-box li li a {
    padding-left: 18px;
    font-size: 0.86rem;
    color: #94a3b8;
}

.cn-toc li li a:hover,
.rank-math-toc-widget-box li li a:hover {
    color: #0284c7;
}

/* === 2. SHARE BUTTONS === */
.share-fb,
.share-x,
.share-tg,
.share-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    min-height: 40px;
    border-radius: 6px;
    font-family: 'Lato', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.share-fb {
    background: #0284c7;
    color: #fff;
}

.share-x {
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid #334155;
}

.share-tg {
    background: #0369a1;
    color: #fff;
}

.share-copy {
    background: #f59e0b;
    color: #0f172a;
}

.share-fb:hover,
.share-x:hover,
.share-tg:hover,
.share-copy:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

/* === 3. ARTICLE READING EXPERIENCE === */
.entry-content {
    font-family: 'Lato', sans-serif;
    font-size: 1.06rem;
    line-height: 1.78;
    color: var(--color-text) /* was #1e293b */;
}

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

.entry-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0284c7;
    border-bottom: 2px solid #f59e0b;
    padding-bottom: 0.35rem;
    margin-top: 2.2rem;
    margin-bottom: 1rem;
}

.entry-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.8rem;
    margin-bottom: 0.75rem;
}

.entry-content blockquote {
    border-left: 4px solid #0284c7;
    background: #eff6ff;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 0 6px 6px 0;
    color: #1e40af;
    font-style: italic;
}

.entry-content img {
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(2, 132, 199, 0.12);
}

/* === 4. READING PROGRESS BAR === */
.reading-progress-bar {
    background: linear-gradient(90deg, #0284c7 0%, #f59e0b 100%);
    height: 3px;
}

/* === 5. ENTRY HEADER (no-hero fallback) === */
.entry-header.no-thumbnail {
    background: rgba(2, 132, 199, 0.06);
    border-left: 5px solid #0284c7;
    padding: 1.5rem 1.75rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
}

.entry-header.no-thumbnail .entry-title {
    color: #0f172a;
    font-family: 'Lato', sans-serif;
    font-weight: 800;
    margin-top: 0;
}


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

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

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

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

/* == 4. MOBILE TYPOGRAPHY per-persona == */
@media (max-width: 768px) {
  .entry-content { font-size: 1.05rem; }
  .entry-content h2 { font-size: 1.35rem; }
}

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

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

/* == 1. BLOCKQUOTE per-persona == */
.entry-content blockquote:not([class]) {
  border-left: 4px solid #0284c7;
  background: rgba(2,132,199,0.06);
}
.entry-content blockquote:not([class])::before {
  color: #0284c7;
}
.entry-content blockquote cite { color: #0284c7; }

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

/* == 3. 404 PAGE per-persona == */
.error-404::before { color: color-mix(in srgb, #0284c7 4%, transparent); }
.error-404 { background: radial-gradient(ellipse at 50% 0%,rgba(2,132,199,0.12),transparent 70%); }
.error-404-persona-msg {
  background: color-mix(in srgb, #0284c7 10%, var(--color-bg-soft));
  border-color: color-mix(in srgb, #0284c7 25%, transparent);
  color: #0284c7;
}
.error-404-actions .button { background: #0284c7; }
.error-404-actions .button:hover { background: color-mix(in oklab, #0284c7 85%, #000); }
.error-404-search input[type="search"]:focus { border-color: #0284c7; }
.error-404-suggestions .section-title { color: #0284c7; }

/* == 4. SEARCH per-persona == */
.search-highlight {
  background: rgba(2,132,199,0.2);
  border-radius: 3px;
}
.search-results-title span.search-term { color: #0284c7; }
.search-results-title span.search-term::after { background: #0284c7; }
.archive-sort-pill.active { background: #0284c7; border-color: #0284c7; }
.search-suggestions-list a { color: #0284c7; border-color: color-mix(in srgb, #0284c7 25%, var(--color-border)); }
.search-suggestions-list a:hover { background: #0284c7; color: #fff; }

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

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



/* === v2.8 PERSONA REFINEMENT: Persona A — Bao chi do === */
/* Typography: cinematic newspaper */
.section-title {
  font-size: .875rem !important;
  letter-spacing: .12em !important;
  font-weight: 900 !important;
}
.cat-section {
  border-left: 3px solid #dc2626;
  padding-left: 16px;
  border-bottom: 1px solid rgba(220,38,38,.12);
}
.post-card:hover {
  box-shadow: 0 8px 28px rgba(220,38,38,.22), 0 2px 8px rgba(0,0,0,.15) !important;
}
[data-theme="dark"] .cat-section {
  border-left-color: rgba(220,38,38,.5);
  background: color-mix(in srgb, #dc2626 3%, var(--color-bg));
}
[data-theme="dark"] .section-title::after {
  background: linear-gradient(to right, #dc2626, transparent);
}

/* === v2.9.2 LIGHT MODE DEPTH: cn-thegioicongnghe === */
/* Hero-side cards: distinctive in light mode */
.hero-featured .hero-side .post-card {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, #e5e7eb);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.hero-featured .hero-side .post-card:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 14%, transparent);
  transform: translateX(2px);
}

/* Cards light mode: cleaner depth */
.home-grid .post-card,
.posts-grid:not(.is-list) .post-card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
}
.home-grid .post-card:hover,
.posts-grid:not(.is-list) .post-card:hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 12%, transparent), 0 2px 6px rgba(0,0,0,.08) !important;
}

/* Widget light mode */
.sidebar-1 .widget {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-left: 3px solid var(--color-primary) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Dark mode: keep existing */
[data-theme="dark"] .hero-featured .hero-side .post-card {
  background: color-mix(in srgb, var(--color-bg-soft) 88%, var(--color-primary));
  border-color: color-mix(in srgb, var(--color-primary) 15%, var(--color-border));
  border-left-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
  box-shadow: none;
  transform: none;
}
[data-theme="dark"] .home-grid .post-card,
[data-theme="dark"] .posts-grid:not(.is-list) .post-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
[data-theme="dark"] .sidebar-1 .widget {
  border-left-color: var(--color-primary) !important;
}