/* ============================================================
   visamon-detail.css - Chi tiet bai viet
   ============================================================ */

/* HERO */
.vm-detail-hero {
  background: linear-gradient(135deg, #003D20 0%, #005C2E 60%, #007A40 100%);
  padding: 32px 0 28px; position: relative; overflow: hidden;
}
.vm-detail-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpolygon points='30,2 58,17 58,35 30,50 2,35 2,17' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 52px; pointer-events: none;
}
.vm-detail-hero-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.vm-detail-title {
  font-family: 'Fraunces', 'Plus Jakarta Sans', serif;
  font-size: clamp(20px, 3vw, 30px); font-weight: 700;
  color: #fff; margin: 12px 0 14px; line-height: 1.3;
}
.vm-detail-meta { display: flex; flex-wrap: wrap; gap: 16px; }
.vm-detail-meta-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: rgba(255,255,255,.6);
}

/* LAYOUT */
.vm-detail-wrap { background: #F7F8FA; padding: 32px 0 60px; }
.vm-detail-container {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start;
}

/* MAIN */
.vm-detail-main { min-width: 0; }

/* Thumbnail */
.vm-detail-thumb {
  border-radius: 12px; overflow: hidden; margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.vm-detail-thumb img { width: 100%; height: auto; display: block; }

/* TOC */
.vm-toc {
  background: #fff; border: 1px solid #E8EAF0;
  border-left: 4px solid #00A456;
  border-radius: 0 10px 10px 0;
  padding: 16px 18px; margin-bottom: 24px;
}
.vm-toc-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #00A456; margin-bottom: 12px;
}
.vm-toc-header svg { flex-shrink: 0; }
.vm-toc-header span { flex: 1; }
.vm-toc-toggle {
  background: none; border: 1px solid #E8EAF0; border-radius: 4px;
  width: 24px; height: 24px; cursor: pointer; font-size: 10px;
  color: #9AA3B2; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.vm-toc-toggle:hover { background: #F0FAF5; }
.vm-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vm-toc-item a { font-size: 13.5px; color: #5A6478; transition: color .2s; display: block; padding: 2px 0; }
.vm-toc-item a:hover { color: #00A456; }
.vm-toc-h3 { padding-left: 16px; }
.vm-toc-h3 a { font-size: 13px; }

/* Article body */
.vm-article-body {
  background: #fff; border-radius: 12px;
  padding: 28px 32px; border: 1px solid #E8EAF0;
  font-size: 15.5px; line-height: 1.75; color: #1A202C;
}
.vm-article-body h2 { font-size: 22px; font-weight: 700; color: #0F1923; margin: 32px 0 14px; line-height: 1.3; }
.vm-article-body h3 { font-size: 18px; font-weight: 600; color: #0F1923; margin: 24px 0 10px; }
.vm-article-body h4 { font-size: 16px; font-weight: 600; color: #0F1923; margin: 20px 0 8px; }
.vm-article-body p { margin-bottom: 16px; }
.vm-article-body ul, .vm-article-body ol { padding-left: 24px; margin-bottom: 16px; }
.vm-article-body li { margin-bottom: 6px; }
.vm-article-body img { max-width: 100%; height: auto !important; border-radius: 8px; margin: 16px auto; display: block; }
.vm-article-body a { color: #00A456; text-decoration: underline; text-decoration-color: rgba(0,164,86,.3); }
.vm-article-body a:hover { color: #007A40; }
.vm-article-body blockquote {
  border-left: 4px solid #00A456; background: #F0FAF5;
  padding: 14px 18px; margin: 20px 0; border-radius: 0 8px 8px 0;
  font-style: italic; color: #3D6B50;
}
.vm-article-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; }
.vm-article-body th { background: #00A456; color: #fff; padding: 10px 14px; text-align: left; }
.vm-article-body td { padding: 9px 14px; border-bottom: 1px solid #E8EAF0; }
.vm-article-body tr:nth-child(even) td { background: #F7F8FA; }

/* Inline CTA sau H2 - noi bat */
.vm-inline-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, #F0FAF5 0%, #FDF3D0 100%);
  border: 1.5px solid #00A456;
  border-radius: 12px;
  padding: 16px 20px; margin: 24px 0;
  box-shadow: 0 2px 12px rgba(0,164,86,.12);
}
.vm-inline-cta-content {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.vm-inline-cta-text {
  font-size: 14px; color: #003D20; line-height: 1.4;
}
.vm-inline-cta-text strong { color: #00A456; }
.vm-inline-cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #00A456; color: #fff !important;
  font-size: 13.5px; font-weight: 700;
  padding: 10px 22px; border-radius: 50px;
  white-space: nowrap; flex-shrink: 0;
  min-width: 120px; justify-content: center;
  box-shadow: 0 3px 12px rgba(0,164,86,.35);
  transition: background .2s, transform .15s, box-shadow .2s;
  text-decoration: none !important;
}
.vm-inline-cta-btn:hover {
  background: #007A40; color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,164,86,.4);
}
@media (max-width: 480px) {
  .vm-inline-cta { flex-direction: column; align-items: flex-start; }
  .vm-inline-cta-btn { width: 100%; justify-content: center; }
}

/* Tags */
.vm-article-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid #E8EAF0;
}
.vm-article-tags-label { font-size: 13px; font-weight: 600; color: #5A6478; }
.vm-article-tag {
  font-size: 12.5px; padding: 4px 12px; border-radius: 50px;
  background: #E6F7EE; color: #007A40; border: 1px solid #C6E8D5;
  transition: background .2s;
}
.vm-article-tag:hover { background: #00A456; color: #fff; }

/* CTA cuoi bai */
.vm-detail-cta-bottom {
  margin-top: 24px;
  background: linear-gradient(135deg, #003D20, #005C2E);
  border-radius: 14px; overflow: hidden;
}
.vm-detail-cta-bottom-inner {
  padding: 28px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.vm-detail-cta-text h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.vm-detail-cta-text p { font-size: 13.5px; color: rgba(255,255,255,.65); margin: 0; }
.vm-detail-cta-btns { display: flex; gap: 10px; flex-shrink: 0; }
.vm-detail-cta-zalo {
  display: inline-flex; align-items: center; gap: 7px;
  background: #D4A017; color: #fff; font-size: 14px; font-weight: 700;
  padding: 11px 20px; border-radius: 50px;
  transition: background .2s, transform .15s;
}
.vm-detail-cta-zalo:hover { background: #A97B23; transform: translateY(-1px); color: #fff; }
.vm-detail-cta-phone {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 11px 20px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.2);
  transition: background .2s;
}
.vm-detail-cta-phone:hover { background: rgba(255,255,255,.2); color: #fff; }

/* SIDEBAR */
.vm-detail-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 20px; }

/* RESPONSIVE */
@media (max-width: 960px) {
  .vm-detail-container { grid-template-columns: 1fr !important; }
  .vm-detail-sidebar { display: none !important; }
}
@media (max-width: 640px) {
  .vm-detail-container { padding: 0 16px; }
  .vm-inline-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vm-inline-cta-btn { width: 100%; justify-content: center; }
  .vm-inline-cta-content { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .vm-article-body { padding: 20px 16px; }
  .vm-detail-cta-bottom-inner { flex-direction: column; }
  .vm-detail-cta-btns { width: 100%; }
  .vm-detail-cta-zalo, .vm-detail-cta-phone { flex: 1; justify-content: center; }
  .vm-detail-hero { padding: 24px 0 20px; }
  .vm-inline-cta { flex-direction: column; align-items: flex-start; }
}

/* An anh thumbnail chat luong thap tu /images/thumbs/ trong noi dung bai viet */
.vm-article-body img[src*="/thumbs/"],
.vm-article-body img[src*="thumbs/tintuc"] {
  display: none !important;
}
.main_news img[src*="/thumbs/"],
.main_news img[src*="thumbs/tintuc"] {
  display: none !important;
}