/* ============================================================
   CiCC Platform v4.0.0 — CONTENT & SECTION STANDARD
   Fix mọi class section/content thiếu CSS định nghĩa.
   Đảm bảo chữ RÕ trên mọi nền, cả light & dark mode.
   Contrast chuẩn WCAG AA (≥4.5:1 text thường, ≥3:1 lớn).
   ============================================================ */

/* === GENERIC SECTION / CONTAINER === */
.section { padding: var(--space-4xl) 0; }
.section-title { font-size: var(--text-3xl); font-weight: 800; color: var(--text-primary); margin-bottom: var(--space-lg); }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); }

/* === PAGE HEADER (archive/course) === */
.page-header {
  padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-2xl);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  text-align: center; color: #ffffff;
}
.page-header h1 { color: #ffffff; font-size: var(--text-4xl); margin: var(--space-md) 0 0; }
.page-header p { color: rgba(255,255,255,0.85); font-size: var(--text-lg); margin-top: var(--space-sm); }

/* === PHAN HE ARCHIVE === */
.phan-he-archive-hero {
  padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #ffffff; text-align: center;
}
.phan-he-archive-hero h1 { color: #ffffff; font-size: var(--text-4xl); margin: var(--space-md) 0; }
.phan-he-archive-hero p { color: rgba(255,255,255,0.85); font-size: var(--text-lg); max-width: 720px; margin: 0 auto; line-height: 1.6; }
.phan-he-archive-section { background: var(--bg-secondary); padding: var(--space-4xl) 0; }
.phan-he-archive-stats { display: flex; gap: var(--space-xl); justify-content: center; margin-top: var(--space-2xl); flex-wrap: wrap; }
.phan-he-archive-stats .stat-num { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: #ffffff; display: block; line-height: 1; }
.phan-he-archive-stats .stat-label { font-size: var(--text-sm); color: rgba(255,255,255,0.75); margin-top: 4px; display: block; }

/* === PHAN HE GRID & CARD === */
.phan-he-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg); }
.phan-he-card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl);
  padding: var(--space-xl); display: flex; flex-direction: column; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.phan-he-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.phan-he-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.phan-he-card h3 { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); line-height: 1.3; }
.phan-he-card p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-md); flex: 1; }
.phan-he-card-stats { display: flex; gap: var(--space-md); margin-bottom: var(--space-md); flex-wrap: wrap; }
.phan-he-card-stats span { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); background: var(--bg-secondary); padding: 4px 10px; border-radius: var(--radius-full); }

.status-badge { font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 4px 10px; border-radius: var(--radius-full); text-transform: uppercase; }
.badge-active { background: #dcfce7; color: #16a34a; }
.badge-pilot { background: #fef3c7; color: #d97706; }
.badge-soon { background: #f1f5f9; color: #64748b; }
.pillar-tag { font-size: 10px; font-weight: 600; padding: 2px 10px; border-radius: 12px; text-transform: uppercase; letter-spacing: .5px; }
.pillar-tag[data-pillar="lean"] { background: #dcfce7; color: #16a34a; }
.pillar-tag[data-pillar="tpm"] { background: #ffedd5; color: #ea580c; }
.pillar-tag[data-pillar="scm"] { background: #fee2e2; color: #dc2626; }
.pillar-tag[data-pillar="quality"] { background: #e0f2fe; color: #0284c7; }
.pillar-tag[data-pillar="erp"] { background: #f3e8ff; color: #7c3aed; }

/* === COURSES / POSTS / CASES GRID === */
.courses-archive { background: var(--bg-secondary); padding: var(--space-4xl) 0; }
.posts-grid, .search-results-grid, .case-studies-archive, .case-study-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg); }
.post-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card h3 { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin: var(--space-md) var(--space-md) var(--space-sm); }
.post-card p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 var(--space-md) var(--space-md); line-height: 1.6; }
.post-meta { font-size: var(--text-xs); color: var(--text-muted); padding: 0 var(--space-md) var(--space-md); }

/* === CASE STUDY === */
.cases-section, .case-studies-archive { background: var(--bg-secondary); }
.case-header { padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-2xl); background: linear-gradient(135deg, var(--primary), var(--primary-light)); text-align: center; color: #fff; }
.case-header h1 { color: #fff; }
.case-link { color: var(--primary); font-weight: 600; }
.case-result, .case-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.case-study-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); }

/* === MODULES / ABOUT / SERVICE / CONTACT / ECOSYSTEM === */
.modules-section { background: var(--bg-secondary); padding: var(--space-4xl) 0; }
.module-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg); }
.module-no-results { text-align: center; padding: 60px 20px; }
.about-overview { background: var(--bg-primary); }
.contact-info, .contact-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-xl); }
.contact-item h4 { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.contact-item p, .contact-item a { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
.contact-item a:hover { color: var(--primary); }
.eco-sites-grid, .eco-feed-grid, .eco-events-grid, .pillars-seo-grid, .pricing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); }
.eco-site-card, .eco-feed-card, .eco-event-card, .pillar-seo-card, .pricing-card, .edge-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-xl); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.eco-site-card:hover, .eco-feed-card:hover, .eco-event-card:hover, .pillar-seo-card:hover, .pricing-card:hover, .edge-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.eco-site-header, .eco-feed-card-body, .eco-event-body, .pillar-seo-meta, .pricing-features { color: var(--text-secondary); }
.eco-site-header h3, .eco-feed-card h3, .eco-event-card h3, .pillar-seo-card h3, .pricing-card h3, .edge-card h3 { color: var(--text-primary); font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-sm); }
.eco-stat-label, .eco-feed-meta { font-size: var(--text-xs); color: var(--text-muted); }
.eco-cta, .final-cta, .hero-ecosystem-cta, .cta-buttons, .cta-trust { text-align: center; margin-top: var(--space-2xl); }
.eco-seo-hero, .hero-stat { color: var(--text-primary); }
.hero-stat-value { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--primary); }
.hero-stat-label { font-size: var(--text-sm); color: var(--text-secondary); }

/* === CONTENT CALLOUT / RELATED === */
.content-callout, .cicc-related-ecosystem { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-xl); margin-top: var(--space-2xl); }
.content-callout h4, .cicc-related-ecosystem h4 { color: var(--text-primary); margin-top: 0; margin-bottom: var(--space-md); font-weight: 700; }
.content-callout a, .cicc-related-ecosystem a { color: var(--primary); font-weight: 600; text-decoration: none; }
.content-callout a:hover, .cicc-related-ecosystem a:hover { color: var(--primary-light); }
.phan-he-content, .phanhe-content-body, .post-body, .page-content, .cs-content-imported { font-size: var(--text-base); line-height: 1.8; color: var(--text-primary); }
.phan-he-subtitle, .post-meta, .phanhe-tags { color: var(--text-secondary); }

/* === DARK MODE OVERRIDES for content === */
[data-theme="dark"] .page-header,
[data-theme="dark"] .phan-he-archive-hero,
[data-theme="dark"] .case-header { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); }
[data-theme="dark"] .phan-he-card,
[data-theme="dark"] .post-card,
[data-theme="dark"] .eco-site-card,
[data-theme="dark"] .eco-feed-card,
[data-theme="dark"] .pillar-seo-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .edge-card,
[data-theme="dark"] .contact-info,
[data-theme="dark"] .contact-item { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .phan-he-card p,
[data-theme="dark"] .post-card p,
[data-theme="dark"] .eco-site-header,
[data-theme="dark"] .eco-feed-card-body { color: var(--text-secondary); }
[data-theme="dark"] .phan-he-card-stats span,
[data-theme="dark"] .post-meta { background: #1e293b; color: #94a3b8; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .phan-he-grid, .posts-grid, .search-results-grid, .module-list,
  .eco-sites-grid, .eco-feed-grid, .eco-events-grid, .pillars-seo-grid,
  .pricing-grid, .case-study-grid { grid-template-columns: 1fr; }
  .case-result, .case-results-grid { grid-template-columns: 1fr; }
  .phan-he-archive-stats { gap: var(--space-lg); }
  .page-header, .phan-he-archive-hero, .case-header { padding-top: calc(var(--header-height) + var(--space-2xl)); }
}