/* ==========================================================================
   GOKU MUSIC - SINGLE POST EDITORIAL STYLES (SWISS MODERNISM 2.0 / CONTENT-FIRST)
   Matches design/post-detail.html with 100% precision.
   Strictly scoped to avoid any interference with XStore theme headers & footers.
   Uses Site Native System Font (Roboto / System UI) - 100% Vietnamese Diacritics Support
   ========================================================================== */

:root {
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  
  --color-brand: #eab308;
  --color-brand-dark: #ca8a04;
  --color-brand-light: #fef9c3;
  --color-brand-tint: #fefce8;
  
  --color-bg-page: #f8fafc;
  --color-bg-surface: #ffffff;
  
  --color-text-main: #1e293b;
  --color-text-body: #334155;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  
  --color-accent-amber: #d97706;
  --color-accent-amber-bg: #fffbeb;
  --color-accent-blue: #0284c7;
  --color-accent-blue-bg: #f0f9ff;
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.08);
  --shadow-xl: 0 16px 36px rgba(0,0,0,0.12);
}

/* Scoped Container Widths (Matched exactly to XStore Theme Header & Search Row at 1425px) */
.goku-breadcrumbs-bar .container,
.article-hero-header .container,
.article-main-container .container,
.related-section-wrap .container {
  width: 100% !important;
  max-width: 1425px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

/* XStore Theme Overrides on Single Post */
body.single-post {
  background-color: var(--color-bg-page) !important;
}

body.single-post .page-heading,
body.single-post .sidebar-position-left .sidebar,
body.single-post .sidebar-position-right .sidebar,
body.single-post .content-page .sidebar,
body.single-post .etheme-page-heading {
  display: none !important;
}

body.single-post .content-page,
body.single-post .content-page > .row,
body.single-post .template-content,
body.single-post .page-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Prevent Bootstrap pseudo elements from breaking CSS Grid columns */
.article-grid-layout::before,
.article-grid-layout::after,
.related-posts-grid-3::before,
.related-posts-grid-3::after,
.feature-cards-grid::before,
.feature-cards-grid::after {
  display: none !important;
  content: none !important;
}

/* WordPress wpautop resets */
.entry-content p:empty,
.entry-content h2 br,
.entry-content h3 br,
.entry-content h4 br,
.entry-content .feat-check-icon + br,
.entry-content .toc-header-toggle br,
.entry-content .faq-q-circle + br,
.toc-title-wrap br {
  display: none !important;
}

/* Reading Progress Bar */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #ca8a04, #eab308);
  width: 0%;
  z-index: 99999;
  transition: width 0.1s ease-out;
}

/* ==========================================================================
   1. BREADCRUMBS STRIP
   ========================================================================== */
.goku-breadcrumbs-bar {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
  font-size: 13px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
}

.breadcrumbs-list {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}

.breadcrumbs-list a {
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.breadcrumbs-list a:hover {
  color: var(--color-brand) !important;
}

.breadcrumbs-sep {
  color: var(--color-text-light);
}

.breadcrumbs-current {
  color: var(--color-text-main);
  font-weight: 600;
  max-width: 480px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   2. EDITORIAL HERO HEADER (CONTENT-FIRST)
   ========================================================================== */
.article-hero-header {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  padding: 34px 0 28px 0;
  font-family: var(--font-body);
}

.hero-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-brand-light);
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.article-hero-title {
  font-family: var(--font-heading) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: var(--color-text-main) !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: -0.3px !important;
}

.article-meta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-light);
}

.author-trust-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar-img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 2px solid var(--color-brand) !important;
  object-fit: cover !important;
  display: block;
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: 700;
  color: var(--color-text-main);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.badge-verified-coach {
  color: #0284c7;
  display: inline-flex;
}

.author-role {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.article-quick-metrics {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-page);
  padding: 5px 11px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

.metric-pill svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-brand);
}

.share-quick-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-share {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border);
  color: var(--color-text-body);
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-share:hover {
  background: var(--color-brand);
  color: #ffffff;
  border-color: var(--color-brand);
  transform: translateY(-2px);
}

.btn-share svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ==========================================================================
   3. SWISS GRID 70/30 (ARTICLE BODY + STICKY SIDEBAR)
   ========================================================================== */
.article-main-container {
  padding: 36px 0 60px 0;
  font-family: var(--font-body);
}

.article-grid-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 36px !important;
  align-items: start !important;
}

/* Primary Column (The Article Body) */
.article-body-col {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

/* Article Prose Typography */
.article-prose,
.entry-content {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--color-text-body) !important;
}

.article-prose p,
.entry-content p {
  margin-bottom: 20px !important;
  line-height: 1.8 !important;
  color: var(--color-text-body) !important;
}

.article-prose h2,
.entry-content h2 {
  font-family: var(--font-heading) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--color-text-main) !important;
  margin: 40px 0 18px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--color-border-light) !important;
  position: relative !important;
  scroll-margin-top: 90px;
}

.article-prose h2::after,
.entry-content h2::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 48px !important;
  height: 2px !important;
  background: var(--color-brand) !important;
}

.article-prose h3,
.entry-content h3 {
  font-family: var(--font-heading) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--color-brand-dark) !important;
  margin: 28px 0 14px 0 !important;
  scroll-margin-top: 90px;
}

.article-prose ul,
.article-prose ol,
.entry-content ul,
.entry-content ol {
  margin: 16px 0 24px 24px !important;
  padding: 0 !important;
}

.article-prose li,
.entry-content li {
  margin-bottom: 10px !important;
  line-height: 1.7 !important;
  color: var(--color-text-body) !important;
}

.article-prose strong,
.entry-content strong {
  color: var(--color-text-main) !important;
  font-weight: 600 !important;
}

.article-prose figure,
.entry-content figure {
  margin: 28px 0 !important;
  text-align: center !important;
}

.article-prose figure img,
.entry-content figure img,
.article-prose img,
.entry-content img {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.article-prose figcaption,
.entry-content figcaption {
  font-size: 13.5px !important;
  color: var(--color-text-muted) !important;
  font-style: italic !important;
  margin-top: 10px !important;
  display: block !important;
  text-align: center !important;
}

/* Table of Contents (Inline TOC) */
.toc-card-box {
  background: #f8fafc !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 22px 24px !important;
  margin: 28px 0 !important;
  box-shadow: var(--shadow-sm) !important;
}

.toc-header-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 14px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--color-text-main) !important;
}

.toc-header-toggle span,
.toc-header-toggle .toc-title-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.toc-header-toggle svg {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.toc-card-box .toc-list,
.entry-content .toc-list,
.article-prose .toc-list,
.toc-list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.toc-card-box .toc-list li,
.entry-content .toc-list li,
.article-prose .toc-list li,
.toc-list li,
.toc-item {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.toc-item a {
  color: var(--color-text-body) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  display: inline-block !important;
  padding: 2px 0 !important;
  text-decoration: none !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}

.toc-item a::before,
.toc-list li::before,
.toc-card-box li::before {
  content: none !important;
  display: none !important;
}

.toc-item a:hover {
  color: var(--color-brand-dark) !important;
  transform: translateX(4px) !important;
}

/* Lead Paragraph Callout */
.lead-box-callout {
  background: #fffbeb !important;
  border-left: 5px solid #eab308 !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  padding: 22px 26px !important;
  margin-bottom: 30px !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #1e293b !important;
  box-shadow: var(--shadow-sm) !important;
}

.lead-box-callout p {
  color: #1e293b !important;
  margin: 0 !important;
  line-height: 1.8 !important;
  font-size: 16px !important;
}

/* Quote Card */
.quote-box-callout {
  background: #f8fafc !important;
  border-left: 4px solid #3b82f6 !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  padding: 20px 24px !important;
  margin: 26px 0 !important;
  font-style: italic !important;
  color: #1e293b !important;
}

.quote-box-callout strong {
  font-style: normal !important;
  color: #1d4ed8 !important;
}

/* Feature Grid (2 columns) */
.feature-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 26px 0 !important;
}

.feature-card-item {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
}

.feature-card-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.feature-card-item h4 {
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text-main) !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

.feat-check-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 50% !important;
  background: #fef9c3 !important;
  color: #ca8a04 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: bold !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.feature-card-item p {
  font-size: 14px !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* Timeline Stepper Cards */
.timeline-phase-card {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-left: 5px solid var(--color-brand) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  padding: 24px !important;
  margin: 24px 0 !important;
  box-shadow: var(--shadow-sm) !important;
}

.phase-badge-line {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}

.phase-badge {
  background: var(--color-brand) !important;
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-sm) !important;
}

.phase-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--color-text-main) !important;
  margin: 0 !important;
}

.milestone-badge-box {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm) !important;
  margin-top: 14px !important;
  display: inline-block !important;
}

/* High-Precision Comparison Table */
.table-container-responsive {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 28px 0 !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #ffffff !important;
}

.editorial-table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: none !important;
  text-align: left !important;
  font-size: 14.5px !important;
  min-width: 620px !important;
  margin: 0 !important;
}

.editorial-table th {
  background: var(--color-brand-dark) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 14px 18px !important;
  border: none !important;
  text-transform: none !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
}

.editorial-table td {
  padding: 13px 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: var(--color-text-body) !important;
  vertical-align: middle !important;
  line-height: 1.5 !important;
}

.editorial-table tr:nth-child(even) td {
  background: #f8fafc !important;
}

.editorial-table tr:hover td {
  background: var(--color-brand-tint) !important;
}

/* FAQ Item Cards */
.faq-accordion-item {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 18px 22px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--shadow-sm) !important;
}

.faq-q-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text-main) !important;
  margin: 0 0 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

.faq-q-circle {
  background: var(--color-brand) !important;
  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.faq-a-body,
.faq-a-desc {
  padding-left: 34px !important;
  color: var(--color-text-body) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}

.faq-a-body p,
.faq-a-desc p {
  margin: 0 0 8px 0 !important;
  color: var(--color-text-body) !important;
  line-height: 1.65 !important;
  font-size: 14.5px !important;
}

.faq-a-body p:last-child,
.faq-a-desc p:last-child {
  margin-bottom: 0 !important;
}

/* Call to Action Banner Box */
.post-cta-banner-box {
  background: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-brand) 100%) !important;
  color: #1e293b !important;
  border-radius: var(--radius-lg) !important;
  padding: 36px 30px !important;
  text-align: center !important;
  margin: 40px 0 20px 0 !important;
  box-shadow: var(--shadow-xl) !important;
}

.post-cta-banner-box h3 {
  color: #1e293b !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  margin-top: 0 !important;
}

.post-cta-banner-box p {
  color: #334155 !important;
  font-size: 15.5px !important;
  max-width: 620px !important;
  margin: 0 auto 22px auto !important;
  line-height: 1.6 !important;
}

.post-cta-banner-box .post-cta-btn-group,
.post-cta-btn-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.btn-cta-zalo {
  background: #ffffff !important;
  color: var(--color-brand-dark) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 12px 24px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-cta-zalo:hover {
  background: #f8fafc !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.btn-cta-hotline {
  background: rgba(30, 41, 59, 0.85) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 12px 22px !important;
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-cta-hotline:hover {
  background: rgba(30, 41, 59, 1) !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Author Bio Card */
.article-author-bio-card {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px 28px !important;
  margin-top: 36px !important;
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  box-shadow: var(--shadow-sm) !important;
}

.author-bio-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  border: 3px solid var(--color-brand-light) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.author-bio-content h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--color-text-main) !important;
  margin-bottom: 6px !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.author-bio-content p {
  font-size: 14px !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   4. STICKY SIDEBAR (CONSULTATION & CONTEXT WIDGETS)
   ========================================================================== */
.article-sidebar-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
  position: sticky !important;
  top: 92px !important;
  min-width: 0;
}

.sidebar-widget-card {
  background: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-sm) !important;
}

.widget-title-head {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text-main) !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--color-border-light) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}

.widget-title-head::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 36px !important;
  height: 2px !important;
  background: var(--color-brand) !important;
}

/* Fast Consultation & Showroom Info Card */
.sidebar-consultation-card {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-top: 4px solid var(--color-brand) !important;
}

.support-badge-pill {
  background: #fef9c3 !important;
  color: #854d0e !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-full) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  border: 1px solid #fde047 !important;
}

.consult-tagline {
  font-size: 13.5px !important;
  color: var(--color-text-body) !important;
  margin-bottom: 16px !important;
  line-height: 1.5 !important;
}

.sidebar-actions-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

.btn-sidebar-zalo {
  width: 100% !important;
  height: 44px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25) !important;
  box-sizing: border-box !important;
}

.btn-sidebar-zalo:hover {
  background: #0369a1 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.btn-sidebar-call {
  width: 100% !important;
  height: 44px !important;
  background: #eab308 !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 3px 10px rgba(234, 179, 8, 0.25) !important;
  box-sizing: border-box !important;
}

.btn-sidebar-call:hover {
  background: #ca8a04 !important;
  color: #1e293b !important;
  transform: translateY(-1px) !important;
}

.sidebar-showroom-info {
  background: #f8fafc !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: var(--color-text-body) !important;
  line-height: 1.45 !important;
}

.showroom-info-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.showroom-info-item .info-icon {
  font-size: 14px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

/* Recommended Guitar for Course */
.rec-product-box {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-bottom: 1px dashed var(--color-border) !important;
}

.rec-product-box:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.rec-product-img {
  width: 68px !important;
  height: 68px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-border) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.rec-product-info h5 {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--color-text-main) !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.4 !important;
}

.rec-product-info h5 a {
  color: var(--color-text-main) !important;
  text-decoration: none !important;
}

.rec-product-info h5 a:hover {
  color: var(--color-brand) !important;
}

.rec-product-price {
  color: #dc2626 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Related Articles Widget */
.related-articles-list {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.related-item-link {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  text-decoration: none !important;
}

.related-item-thumb {
  width: 60px !important;
  height: 60px !important;
  border-radius: var(--radius-sm) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.related-item-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--color-text-main) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.related-item-link:hover .related-item-title {
  color: var(--color-brand) !important;
}

/* ==========================================================================
   5. RELATED ARTICLES GRID (BOTTOM OF POST)
   ========================================================================== */
.related-section-wrap {
  background: #ffffff !important;
  border-top: 1px solid var(--color-border) !important;
  padding: 50px 0 !important;
  font-family: var(--font-body) !important;
}

.section-headline-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 28px !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.section-title-big {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-text-main) !important;
  margin: 0 !important;
}

.related-posts-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.blog-card-item {
  background: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  display: flex !important;
  flex-direction: column !important;
}

.blog-card-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}

.blog-card-thumb {
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  display: block !important;
}

.blog-card-content {
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.blog-card-category {
  color: var(--color-brand-dark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.blog-card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text-main) !important;
  line-height: 1.4 !important;
  margin: 0 0 10px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.blog-card-title a {
  color: var(--color-text-main) !important;
  text-decoration: none !important;
}

.blog-card-title a:hover {
  color: var(--color-brand-dark) !important;
}

.blog-card-excerpt {
  font-size: 13.5px !important;
  color: var(--color-text-muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 14px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.blog-card-footer {
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12.5px !important;
  color: var(--color-text-light) !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--color-border-light) !important;
}

.card-read-more {
  color: var(--color-brand-dark) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
}

/* ==========================================================================
   6. RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 1024px) {
  .article-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .article-sidebar-col {
    position: static !important;
    order: 2 !important;
  }

  .related-posts-grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  .article-hero-title {
    font-size: 24px !important;
  }

  .article-meta-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .article-body-col {
    padding: 22px 18px !important;
    border-radius: var(--radius-md) !important;
  }

  .feature-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .related-posts-grid-3 {
    grid-template-columns: 1fr !important;
  }

  .faq-q-title {
    font-size: 15px !important;
  }

  .faq-a-body,
  .faq-a-desc {
    padding-left: 0 !important;
    margin-top: 6px !important;
  }

  .article-author-bio-card {
    flex-direction: column !important;
    text-align: center !important;
  }
}