
.isolated-qa-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 60px !important;
  margin-bottom: 60px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}


.isolated-qa-main-header {
  text-align: left !important; 
  margin-bottom: 35px !important;
  border-bottom: 2px solid rgba(82, 183, 136, 0.15) !important;
  padding-bottom: 16px !important;
}

.isolated-qa-main-header h2 {
  font-size: 1.6rem !important; 
  color: var(--dark-neutral) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  text-align: left !important;
}

.isolated-qa-main-header p {
  font-size: 0.95rem !important;
  color: #64748b !important;
  text-align: left !important;
}

.isolated-qa-list-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
}

.isolated-qa-card-box {
  background: #ffffff !important;
  border: 1px solid rgba(82, 183, 136, 0.15) !important;
  border-radius: 16px !important;
  padding: 25px 30px !important;
  box-shadow: 0 10px 25px rgba(27, 67, 50, 0.02) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  text-align: left !important;
}

.isolated-qa-question-line {
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px !important;
  margin-bottom: 14px !important;
}

.isolated-qa-tag-q {
  background-color: var(--dark-neutral) !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.isolated-qa-question-line h3 {
  font-size: 1.1rem !important;
  color: var(--dark-neutral) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  text-align: left !important;
}

.isolated-qa-answer-line {
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px !important;
  padding-left: 5px !important;
}

.isolated-qa-tag-a {
  background-color: var(--success-bg) !important;
  color: var(--success-text) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.isolated-qa-answer-line p {
  font-size: 0.95rem !important; 
  color: #4A5568 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  text-align: left !important;
}


@media (max-width: 768px) {
  .isolated-qa-main-header h2 {
    font-size: 1.35rem !important;
  }
  
  .isolated-qa-card-box {
    padding: 20px 18px !important;
    border-radius: 12px !important;
  }

  .isolated-qa-question-line h3 {
    font-size: 1.05rem !important; 
    line-height: 1.5 !important;
    text-align: left !important;
  }

  .isolated-qa-answer-line p {
    font-size: 1rem !important; 
    line-height: 1.6 !important;
    text-align: left !important;
  }
}

.isolated-qa-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 60px !important;
  margin-bottom: 60px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.isolated-qa-main-header {
  text-align: left !important;
  margin-bottom: 35px !important;
  border-bottom: 2px solid rgba(82, 183, 136, 0.15) !important;
  padding-bottom: 16px !important;
}

.isolated-qa-main-header h2 {
  font-size: 1.6rem !important;
  color: var(--dark-neutral, #1B2E1E) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  text-align: left !important;
}

.isolated-qa-main-header p {
  font-size: 0.95rem !important;
  color: #64748b !important;
  text-align: left !important;
}

.isolated-qa-list-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 25px !important;
  width: 100% !important;
}

.isolated-qa-card-box {
  background: #ffffff !important;
  border: 1px solid rgba(82, 183, 136, 0.15) !important;
  border-radius: 16px !important;
  padding: 30px 35px !important;
  box-shadow: 0 10px 25px rgba(27, 67, 50, 0.02) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  text-align: left !important;
}

.isolated-qa-question-line {
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px !important;
  margin-bottom: 16px !important;
}

.isolated-qa-tag-q {
  background-color: var(--dark-neutral, #1B2E1E) !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.isolated-qa-question-line h3 {
  font-size: 1.15rem !important; 
  color: var(--dark-neutral, #1B2E1E) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  text-align: left !important;
}

.isolated-qa-answer-line {
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px !important;
  padding-left: 2px !important;
}

.isolated-qa-tag-a {
  background-color: var(--success-bg, #E8F5E9) !important;
  color: var(--success-text, #2E7D32) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.isolated-qa-answer-content {
  flex: 1 !important;
  text-align: left !important;
}

.isolated-qa-answer-content p {
  font-size: 0.95rem !important; 
  color: #2D3748 !important;
  line-height: 1.7 !important;
  margin: 0 0 15px 0 !important;
  text-align: left !important;
}

/* ระบบสไตล์ Bullet ชิดซ้ายแบบพรีเมียม */
.isolated-qa-bullet-list {
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.isolated-qa-bullet-list li {
  font-size: 0.925rem !important; 
  color: #4A5568 !important;
  line-height: 1.7 !important;
  margin-bottom: 12px !important;
  position: relative !important;
  padding-left: 18px !important;
  text-align: left !important;
}

.isolated-qa-bullet-list li::before {
  content: "•" !important;
  color: var(--primary-color, #2E7D32) !important;
  font-weight: bold !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

.isolated-qa-bullet-list li:last-child {
  margin-bottom: 0 !important;
}


@media (max-width: 768px) {
  .isolated-qa-main-header h2 {
    font-size: 1.35rem !important;
  }
  
  .isolated-qa-card-box {
    padding: 22px 18px !important;
    border-radius: 12px !important;
  }

  .isolated-qa-question-line h3 {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }


  .isolated-qa-answer-content p {
    font-size: 1rem !important; 
    line-height: 1.6 !important;
  }

  .isolated-qa-bullet-list li {
    font-size: 0.975rem !important; 
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
    padding-left: 16px !important;
  }
}

.isolated-qa-toggle-panel summary::-webkit-details-marker {
  display: none !important;
}
.isolated-qa-toggle-panel summary {
  list-style: none !important;
  outline: none !important;
  cursor: pointer !important;
}


.isolated-qa-toggle-panel summary:hover h3 {
  color: var(--primary-color, #2E7D32) !important;
}


.isolated-qa-toggle-panel[open] .isolated-qa-answer-line {
  margin-top: 15px !important;
  animation: slideDownQA 0.2s ease-out;
}

@keyframes slideDownQA {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.isolated-qa-click-trigger {
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px !important;
  list-style: none !important;
  outline: none !important;
  cursor: pointer !important;
  width: 100% !important;
}


.isolated-qa-click-trigger::-webkit-details-marker {
  display: none !important;
}

.isolated-qa-title-text {
  font-size: 1.15rem !important;
  color: var(--dark-neutral, #1B2E1E) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  text-align: left !important;
}


.isolated-qa-click-trigger:hover .isolated-qa-title-text {
  color: #2E7D32 !important;
}


.isolated-qa-toggle-panel[open] .isolated-qa-answer-line {
  margin-top: 18px !important;
  animation: slideDownQA 0.2s ease-out;
}

@keyframes slideDownQA {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

  .compost-image {
    width: 100%; 
    height: auto; 
    display: block; 
    max-width: 100%;
  }

  .banner-responsive-wrapper {
    width: 100%;         
    max-width: 100%;     
    overflow: hidden;   
    display: block;
    box-sizing: border-box;
    margin: 0 auto;   
  }

  .banner-fluid-img {
    width: 100%;         
    max-width: 100%;
    height: auto;        
    display: block;      
    object-fit: contain;  
  }

  @media (max-width: 768px) {
    .compost-image-container {
      height: 28vh; 
    }
  }