
.blog-content-template-2 {
  --green-50: #f0fdf4 !important;
  --green-100: #dcfce7 !important;
  --green-500: #22c55e !important;
  --green-600: #16a34a !important;
  --green-700: #15803d !important;
  --green-800: #166534 !important;
  --green-main: #46CC6A !important;
  --text: #1f2937 !important;
  --text-muted: #6b7280 !important;
  --border: #e5e7eb !important;
  --red-500: #ef4444 !important;
  --radius: 8px !important;
  --radius-sm: 6px !important;
  --toc-bg: #DFF0D8 !important;
}
.blog-content-template-2 * { box-sizing: border-box !important; }
.blog-content-template-2 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  background: #fff !important;
}
/* ---- Layout: single column ---- */
.blog-content-template-2 .page-layout {

  margin: 0 auto !important;

}
.blog-content-template-2 .main-content {
  width: 100% !important;
}
.blog-content-template-2 .article-inner {
  max-width: 100% !important;
}
/* ---- Typography (main content) ---- */
.blog-content-template-2 .main-content h1 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin: 0 0 1.5rem !important;
  line-height: 1.3 !important;
  color: var(--text) !important;
}
.blog-content-template-2 .main-content h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;

  color: var(--text) !important;
}
.blog-content-template-2 .main-content h3 { font-size: 1.125rem !important; font-weight: 600 !important; margin: 1.5rem 0 0.5rem !important; }
.blog-content-template-2 .main-content p { margin: 0 0 1rem !important; color: var(--text) !important; }
.blog-content-template-2 .main-content a { color: #2563eb !important; text-decoration: none !important; }
.blog-content-template-2 .main-content a:hover { color: #1d4ed8 !important; text-decoration: underline !important; }
/* Màu primary (xanh lá): thêm class link-primary vào thẻ a khi cần */
.blog-content-template-2 .main-content a.link-primary,
.blog-content-template-2 a.link-primary { color: var(--green-700) !important; }
.blog-content-template-2 .main-content a.link-primary:hover,
.blog-content-template-2 a.link-primary:hover { color: var(--green-800) !important; }
/* Table of Contents - light green box */
.blog-content-template-2 .toc {
  background: var(--green-50) !important;
  border: 1px solid var(--green-100) !important;
  border-radius: var(--radius) !important;
  padding: 1.25rem 1.5rem !important;
  margin: 2rem 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.blog-content-template-2 .toc-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  margin: 0 0 20px !important;
  color: #000 !important;
}
.blog-content-template-2 .toc > ul {
  list-style: none !important;
  padding: 20px 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid #333 !important;
}
.blog-content-template-2 .toc ul ul {
  list-style: none !important;
  padding: 0.25rem 0 0 1rem !important;
  margin: 0 !important;
}
.blog-content-template-2 .toc li {
  position: relative !important;
  padding-left: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}
.blog-content-template-2 .toc > ul > li::before, .blog-content-template-2 .toc ul ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.5em !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #6EB474 !important;
}
.blog-content-template-2 .toc > ul > li > a {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #000 !important;
}
.blog-content-template-2 .toc ul ul li a {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #555555 !important;
}
.blog-content-template-2 .toc a:hover { color: var(--green-700) !important; }
/* Author block */
.blog-content-template-2 .author {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin: 2rem 0 !important;
}
.blog-content-template-2 .author-avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: var(--green-100) !important;
}
.blog-content-template-2 .author-name { font-weight: 700 !important; font-size: 1rem !important; margin: 0 0 0.15rem !important; }
.blog-content-template-2 .author-title { font-size: 0.875rem !important; color: var(--text-muted) !important; margin: 0 !important; }
.blog-content-template-2 .author-intro-block {
  display: flex !important;
  flex-direction: column !important;

  border: 1px solid #E9EBEA !important;
  border-radius: var(--radius) !important;
  padding: 1.25rem 1.5rem !important;
  margin: 2rem 0 !important;
}
.blog-content-template-2 .author-intro-block .author { margin: 0 !important; }
.blog-content-template-2 .author-intro-block p { margin: 0 !important; }
/* ---- 3-column company comparison cards ---- */
.blog-content-template-2 .company-cards-grid {
  display: flex !important;
  gap: 1.5rem !important;
  margin: 2rem 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  padding-bottom: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.blog-content-template-2 .company-cards-grid::-webkit-scrollbar {
  display: none !important;
}
.blog-content-template-2 .company-card-box {
  flex: 0 0 317.67px !important;
  width: 317.67px !important;
  min-width: 317.67px !important;
  scroll-snap-align: start !important;
  border: 1px solid #E9EBEA !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  display: flex !important;
  flex-direction: column !important;
}
.blog-content-template-2 .company-card-box .card-header {
  background: var(--green-main) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 1rem !important;
  text-align: center !important;
}
.blog-content-template-2 .company-card-box .card-body {
  padding: 1.25rem !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.blog-content-template-2 .company-card-box .card-logo {
  width: 80px !important;
  height: 80px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  background: var(--border) !important;
  margin: 0 0 0.75rem !important;
  display: block !important;
}
.blog-content-template-2 .company-card-box .card-name {
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  text-align: left !important;
  margin: 0 0 0.5rem !important;
}
.blog-content-template-2 .company-card-box .card-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 0 0.35rem !important;
  flex-wrap: wrap !important;
}
.blog-content-template-2 .company-card-box .card-rating-score {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: var(--green-main) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: var(--radius-sm) !important;
}
.blog-content-template-2 .company-card-box .card-rating-score .icon-star {
  width: 12px !important;
  height: 12px !important;
  fill: currentColor !important;
}
.blog-content-template-2 .company-card-box .card-rating-reviews {
  font-size: 0.8rem !important;
  color: var(--text-muted) !important;
}
.blog-content-template-2 .company-card-box .card-website {
  font-size: 0.8rem !important;
  color: #30CB65 !important;
  text-decoration: underline !important;
  text-align: left !important;
  margin: 0 0 0.35rem !important;
  display: inline-block !important;
}
.blog-content-template-2 .company-card-box .card-website:hover {
  color: #28b858 !important;
  text-decoration: underline !important;
}
.blog-content-template-2 .company-card-box .card-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  flex: 1 !important;
}
.blog-content-template-2 .company-card-box .card-features li {
  position: relative !important;
  padding-left: 1.75rem !important;
  margin-bottom: 0.4rem !important;
  font-size: 0.9rem !important;
  color: #46634F !important;
}
.blog-content-template-2 .company-card-box .card-features li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #46634F !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.blog-content-template-2 .company-card-box .btn-quote {
  display: block !important;
  text-align: center !important;
  background: var(--green-main) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.6rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  width: 100% !important;
  margin-top: auto !important;
}
.blog-content-template-2 .company-card-box .btn-quote:hover {
  background: #3ab85d !important;
  color: #fff !important;
  text-decoration: none !important;
}
@media (max-width: 900px) {

.blog-content-template-2 .company-card-box {
    flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px !important;
  }
}
/* Compare table, cost table, price table - reuse index.html styles */
.blog-content-template-2 .compare-table, .blog-content-template-2 .price-table, .blog-content-template-2 .cost-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  margin: 1.5rem 0 !important;
  box-shadow: 0 0 0 1px #E9EBEA, 0 1px 3px rgba(0,0,0,0.06) !important;
}
.blog-content-template-2 .compare-table th, .blog-content-template-2 .price-table th, .blog-content-template-2 .cost-table th {
  background: var(--green-main) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  padding: 0.875rem 1rem !important;
  text-align: left !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
}
.blog-content-template-2 .compare-table td, .blog-content-template-2 .price-table td, .blog-content-template-2 .cost-table td {
  padding: 0.875rem 1rem !important;
  border: 1px solid #E9EBEA !important;
}
.blog-content-template-2 .compare-table td:first-child, .blog-content-template-2 .compare-table th:first-child { text-align: left !important; }
.blog-content-template-2 .compare-table td:not(:first-child), .blog-content-template-2 .compare-table th:not(:first-child) { text-align: center !important; }
.blog-content-template-2 .compare-table tbody tr:nth-child(even), .blog-content-template-2 .price-table tbody tr:nth-child(even), .blog-content-template-2 .cost-table tbody tr:nth-child(even) { background: var(--green-50) !important; }
.blog-content-template-2 .compare-table tbody tr:nth-child(odd), .blog-content-template-2 .price-table tbody tr:nth-child(odd), .blog-content-template-2 .cost-table tbody tr:nth-child(odd) { background: #fff !important; }
.blog-content-template-2 .rating-check {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--green-500) !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
}
.blog-content-template-2 .rating-check::after { content: '✓' !important; color: #fff !important; font-size: 0.7rem !important; font-weight: 700 !important; }
.blog-content-template-2 .rating-cross {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--red-500) !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
}
.blog-content-template-2 .rating-cross::after { content: '✕' !important; color: #fff !important; font-size: 0.7rem !important; font-weight: 700 !important; }
.blog-content-template-2 .btn-quote {
  display: inline-block !important;
  background: var(--green-main) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.blog-content-template-2 .btn-quote:hover { background: #3ab85d !important; color: #fff !important; text-decoration: none !important; }
/* Nút Get a Quote trong company-intro-block: style giống company-card-box + space-between với company-card-main */
.blog-content-template-2 .company-intro-block .company-card {
  justify-content: space-between !important;
}
.blog-content-template-2 .company-intro-block .company-card .btn-quote {
  display: inline-block !important;
  text-align: center !important;
  background: var(--green-main) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.6rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  width: auto !important;
  min-width: 160px !important;
  flex-shrink: 0 !important;
}
.blog-content-template-2 .company-intro-block .company-card .btn-quote:hover {
  background: #3ab85d !important;
  color: #fff !important;
  text-decoration: none !important;
}
/* Company review block */
.blog-content-template-2 .company-review-block { margin: 48px 0 !important; }
.blog-content-template-2 .company-review-block h2 { margin: 0 0 1rem !important; }
.blog-content-template-2 .company-review-divider { height: 1px !important; background: #E9EBEA !important; margin: 0 !important; }
.blog-content-template-2 .company-intro-block {
  border: 1px solid #E9EBEA !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
}
.blog-content-template-2 .company-card {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  padding: 1.25rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 0 !important;
}
.blog-content-template-2 .company-intro-block .company-card { border-bottom: none !important; padding: 0 !important; }
.blog-content-template-2 .company-intro-block .company-card + p { margin: 1rem 0 0 !important; }
.blog-content-template-2 .company-card-main {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}
.blog-content-template-2 .company-logo {
  width: 60px !important;
  height: 60px !important;
  border-radius: var(--radius-sm) !important;
  object-fit: cover !important;
  background: var(--border) !important;
}
.blog-content-template-2 .company-info { display: flex !important; flex-direction: column !important; gap: 0.35rem !important; }
.blog-content-template-2 .company-info h3 { margin: 0 !important; font-size: 1.25rem !important; }
.blog-content-template-2 .company-website { font-size: 0.875rem !important; color: var(--text-muted) !important; margin: 0 !important; }
.blog-content-template-2 .company-info .company-website { margin-bottom: 0 !important; }
.blog-content-template-2 .company-rating { display: flex !important; align-items: center !important; gap: 0.5rem !important; font-size: 0.875rem !important; margin: 0 !important; }
.blog-content-template-2 .company-rating-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: var(--green-main) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: var(--radius-sm) !important;
}
.blog-content-template-2 .company-rating-badge .icon-star { width: 14px !important; height: 14px !important; fill: currentColor !important; }
.blog-content-template-2 .company-rating-reviews { color: #718076 !important; }
/* Accordion */
.blog-content-template-2 .accordion {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  margin-bottom: 0.5rem !important;
}
.blog-content-template-2 .accordion summary {
  list-style: none !important;
  padding: 1rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fff !important;
  user-select: none !important;
}
.blog-content-template-2 .accordion summary::-webkit-details-marker { display: none !important; }
.blog-content-template-2 .accordion summary::after {
  content: '' !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid var(--green-600) !important;
  transition: transform 0.2s !important;
}
.blog-content-template-2 .accordion[open] summary::after { transform: rotate(180deg) !important; }
.blog-content-template-2 .accordion .accordion-body {
  padding: 0 1.25rem 1.25rem !important;
  border-top: 1px solid var(--border) !important;
}
.blog-content-template-2 .accordion .accordion-body p { margin: 0.75rem 0 0 !important; }
/* FAQ */
.blog-content-template-2 .faq-section h2 { margin-top: 2.5rem !important; }
.blog-content-template-2 .faq-item {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  margin-bottom: 0.5rem !important;
}
.blog-content-template-2 .faq-item summary {
  list-style: none !important;
  padding: 1rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fff !important;
}
.blog-content-template-2 .faq-item summary::-webkit-details-marker { display: none !important; }
.blog-content-template-2 .faq-item summary::after {
  content: '' !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid var(--green-600) !important;
  transition: transform 0.2s !important;
}
.blog-content-template-2 .faq-item[open] summary::after { transform: rotate(180deg) !important; }
.blog-content-template-2 .faq-item .faq-answer {
  padding: 0 1.25rem 1.25rem !important;
  border-top: 1px solid var(--border) !important;
}
.blog-content-template-2 .faq-item .faq-answer p { margin: 0.75rem 0 0 !important; }
/* Conclusion */
.blog-content-template-2 .conclusion-block {
  border: 1px solid #E9EBEA !important;
  padding: 24px !important;
  border-radius: var(--radius) !important;
}
.blog-content-template-2 .conclusion-block h2 { margin: 0 0 1rem !important; }
.blog-content-template-2 .conclusion-block p { margin: 0 !important; }
.blog-content-template-2 .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 1.5rem 0 !important;
  border: 1px solid #E9EBEA !important;
  border-radius: var(--radius) !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.blog-content-template-2 .table-responsive::-webkit-scrollbar { display: none !important; }
.blog-content-template-2 .table-responsive table { min-width: 600px !important; margin: 0 !important; }
/* Nút Get a Quote (mobile): style giống nút desktop, ghi đè .main-content a */
.blog-content-template-2 .btn-quote-mobile {
  display: none !important;
  background: var(--green-main) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.6rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  margin-top: 1rem !important;
}
.blog-content-template-2 .btn-quote-mobile:hover {
  background: #3ab85d !important;
  color: #fff !important;
  text-decoration: none !important;
}
@media (max-width: 640px) {

.blog-content-template-2 .company-card { flex-direction: column !important; align-items: flex-start !important; }
.blog-content-template-2 .company-intro-block .company-card .btn-quote { display: none !important; }
.blog-content-template-2 .company-intro-block .btn-quote-mobile { display: inline-block !important; }
}

