/* ==========================================================================
   CSS bổ sung riêng cho post type "Giải pháp"
   Chứa: Bài toán, Cơ chế rủi ro (theo đúng thiết kế giai_phap_fumigation),
   Trường hợp áp dụng. Các khối khác (Quy trình, Sự khác biệt, FAQ...) dùng lại
   nguyên CSS có sẵn của theme (.procedure, .our-diff, .faqs-item...)
   ========================================================================== */

/* ---- Nút CTA hero: mặc định .banner-gr canh giữa (justify-content:center),
   trong khi tiêu đề/tag của trang Giải pháp canh trái nên nút bị lệch giữa.
   Scope riêng qua body class, không sửa file dùng chung. ---- */
.single-giai_phap .banner-gr { justify-content: flex-start; }

/* ---- Đoạn mô tả (.banner-tag) trong hero: mặc định không có margin riêng,
   chỉ dựa vào margin mặc định của thẻ <p>, khoảng cách trên/dưới quá hẹp. ---- */
.single-giai_phap .banner-tag { margin: 2.4rem 0 3.2rem; }
.single-giai_phap .banner-tag p.tag { margin: 0; }

/* ---- Tiêu đề section: .ttcenter mặc định rộng 110rem, tiêu đề dài tràn hết
   1 hàng mất cân đối. Thu hẹp lại cho các section trong trang Giải pháp. ---- */
.single-giai_phap .ttcenter { width: 80rem; }

/* ---- Nền section "Yêu cầu tư vấn báo giá" (section-contact.php dùng chung toàn site)
   Chỉ đổi màu khi hiển thị trong trang Giải pháp (scope qua body class WordPress
   tự thêm), KHÔNG sửa file dùng chung nên không ảnh hưởng các trang khác. ---- */
.single-giai_phap .sec-thumb { background: var(--color-bg-3, #F9F9F9); padding: 8rem 0; }
.single-giai_phap .sec-thumb .thumb.mb-80 { margin-bottom: 0; }

/* ---- Mô tả section (đúng chuẩn giai_phap_fumigation: hẹp 60rem, canh giữa) ---- */
.gp-desc {
  max-width: 46rem;
  margin: 1.6rem auto 0;
  font-size: 1.6rem;
  text-align: center;
  color: var(--color-disabled);
}
.gp-desc.on-dark { color: rgba(255,255,255,0.78); }
@media (max-width: 600px) { .gp-desc { font-size: 1.5rem; margin-top: 1.2rem; } }

/* ---- Button (đúng thiết kế giai_phap_fumigation, không dùng .btn-main của theme) ---- */
.gp-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 3.2rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
}
.gp-btn-pri { background: var(--color-second); color: var(--color-pri-dark, #0C4A40); }
.gp-btn-pri:hover { background: #e89c0c; transform: translateY(-2px); }
.gp-btn svg { width: 1.6rem; height: 1.6rem; transition: transform 0.25s ease; flex-shrink: 0; }
.gp-btn:hover svg { transform: translateX(3px); }
@media (max-width: 560px) {
  .gp-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; padding: 1.3rem 2rem; font-size: 1.3rem; }
}

/* ---- Bài toán: 2 cột thách thức / giải pháp ---- */
.gp-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  margin-top: 4rem;
}
@media (max-width: 860px) { .gp-problem-grid { grid-template-columns: 1fr; } }

.gp-problem-card {
  padding: 3.6rem;
}
.gp-problem-card h3 {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 2.4rem;
}
.gp-problem-card ul { margin: 0; padding: 0; list-style: none; }
.gp-problem-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  font-size: 1.55rem;
  padding: 1.2rem 0;
  border-bottom: 0.1rem solid rgba(0,0,0,0.06);
}
.gp-problem-card ul li:last-child { border-bottom: none; }
.gp-problem-card ul li svg { flex-shrink: 0; width: 2.2rem; height: 2.2rem; margin-top: 0.2rem; }
@media (max-width: 600px) {
  .gp-problem-card { padding: 2.4rem 2rem; }
  .gp-problem-card h3 { font-size: 1.7rem; margin-bottom: 1.6rem; }
  .gp-problem-card ul li { font-size: 1.4rem; padding: 1rem 0; }
}

.gp-problem-card.is-challenge {
  background: var(--white);
  border: 0.15rem solid #ECD9D9;
}
.gp-problem-card.is-challenge h3 { color: #B23A3A; }
.gp-problem-card.is-challenge ul li svg { color: #C24545; }

.gp-problem-card.is-solution {
  background: var(--color-pri);
  color: var(--white);
}
.gp-problem-card.is-solution h3 { color: var(--white); }
.gp-problem-card.is-solution ul li { border-bottom-color: rgba(255,255,255,0.15); }
.gp-problem-card.is-solution ul li svg { color: var(--color-second); }

/* ---- Cơ chế rủi ro: giống thiết kế giai_phap_fumigation ---- */
.gp-risk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
  margin-top: 4rem;
}
@media (max-width: 980px) { .gp-risk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gp-risk-grid { grid-template-columns: 1fr; } }

.gp-risk-card {
  background: var(--white);
  box-shadow: 0 0.6rem 2.4rem rgba(19, 106, 93, 0.08);
  padding: 3.2rem 2.6rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gp-risk-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1.6rem 3.2rem rgba(19,106,93,0.14);
}
.gp-risk-card .gp-risk-ic {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--color-third);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
.gp-risk-card .gp-risk-ic img { width: 2.8rem; height: 2.8rem; object-fit: contain; }
.gp-risk-card h3 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.gp-risk-card p { font-size: 1.6rem; color: var(--color-disabled); }
@media (max-width: 600px) {
  .gp-risk-card { padding: 2.4rem 2rem; text-align: center; }
  .gp-risk-card .gp-risk-ic { width: 4.8rem; height: 4.8rem; margin: 0 auto 1.6rem; }
  .gp-risk-card .gp-risk-ic img { width: 2.4rem; height: 2.4rem; }
}

/* ---- Giải pháp của fumigation / Quy trình: timeline giống thiết kế giai_phap_fumigation ---- */
.gp-solution-band {
  background: var(--color-pri);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.gp-solution-band::after {
  content: "";
  position: absolute;
  right: -10%; top: -20%;
  width: 60rem; height: 60rem;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
  pointer-events: none;
}
.gp-solution-band .title-pri,
.gp-solution-band .desc { color: var(--white); }
.gp-step-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
  margin-top: 4rem;
  margin-bottom: 4.8rem;
}
.gp-step-grid::before {
  content: "";
  position: absolute;
  top: 3.2rem;
  left: 12.5%;
  right: 12.5%;
  height: 0.2rem;
  background: repeating-linear-gradient(to right, rgba(255,255,255,0.35) 0 10px, transparent 10px 18px);
  z-index: 0;
}
@media (max-width: 980px) { .gp-step-grid { grid-template-columns: repeat(2, 1fr); row-gap: 3.2rem; } .gp-step-grid::before { display: none; } }
@media (max-width: 560px) { .gp-step-grid { grid-template-columns: 1fr; } }

.gp-step-item { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.gp-step-marker {
  width: 6.4rem;
  height: 6.4rem;
  flex-shrink: 0;
  margin: 0 auto 2.2rem;
  border-radius: 50%;
  background: var(--color-second);
  box-shadow: 0 0 0 0.6rem var(--color-pri), 0 0 0 0.8rem rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gp-step-marker img { width: 2.8rem; height: 2.8rem; object-fit: contain; }
.gp-step-content {
  background: rgba(255,255,255,0.08);
  border: 0.1rem solid rgba(255,255,255,0.16);
  padding: 2.8rem 2.2rem;
  width: 100%;
  flex: 1 1 auto;
}
.gp-step-tag {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-second);
  margin-bottom: 1rem;
}
.gp-step-content h3 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: var(--white); }
.gp-step-content p { font-size: 1.6rem; color: rgba(255,255,255,0.8); }
.gp-band-actions { text-align: center; }
@media (max-width: 600px) {
  .gp-step-grid { margin-bottom: 3.2rem; gap: 4.8rem; }
  .gp-step-item { background: rgba(255,255,255,0.12); border: 0.1rem solid rgba(255,255,255,0.28); padding: 2.8rem 1.8rem 2.4rem; }
  .gp-step-marker { width: 5.6rem; height: 5.6rem; margin-bottom: 1.6rem; box-shadow: none; }
  .gp-step-marker img { width: 2.4rem; height: 2.4rem; }
  .gp-step-content { padding: 0; background: none; border: none; }
}

/* ---- Sự khác biệt: giống thiết kế giai_phap_fumigation ---- */
.gp-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  margin-top: 4rem;
}
@media (max-width: 980px) { .gp-diff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .gp-diff-grid { grid-template-columns: 1fr; } }

.gp-diff-card {
  background: var(--color-bg);
  padding: 3.2rem 2.8rem;
  text-align: center;
}
.gp-diff-card .gp-diff-ic {
  width: 6rem; height: 6rem;
  margin: 0 auto 2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0.6rem 2.4rem rgba(19, 106, 93, 0.08);
}
.gp-diff-card .gp-diff-ic img { width: 3rem; height: 3rem; object-fit: contain; }
.gp-diff-card h3 { font-size: 1.9rem; font-weight: 700; margin-bottom: 1rem; }
.gp-diff-card p { font-size: 1.6rem; color: var(--color-disabled); }
@media (max-width: 600px) {
  .gp-diff-card { padding: 2.4rem 2rem; }
  .gp-diff-card .gp-diff-ic { width: 5.2rem; height: 5.2rem; margin-bottom: 1.6rem; }
  .gp-diff-card .gp-diff-ic img { width: 2.6rem; height: 2.6rem; }
}

/* ---- Tiêu đề card "Sản phẩm & dịch vụ liên quan" (ghi đè riêng, không sửa .fz-18 chung của site) ---- */
.gp-service-title { font-size: 1.9rem !important; margin-bottom: 2.4rem; }

/* ---- Khoảng cách ảnh - tiêu đề trong card dịch vụ: theme mặc định dùng chung
   1 khoảng gap 2.4rem giữa ảnh và tiêu đề. Thu hẹp lại để tiêu đề gần ảnh hơn,
   khoảng cách phía dưới tiêu đề đã tăng riêng ở trên để các dịch vụ tách bạch hơn. ---- */
.single-giai_phap .nws-item.nws-service { gap: 1.2rem; }
@media (max-width: 600px) {
  .single-giai_phap .nws-des { text-align: center; }
}

/* ---- Trường hợp áp dụng: case study cards ---- */
.gp-case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  margin-top: 4rem;
}
@media (max-width: 760px) { .gp-case-grid { grid-template-columns: 1fr; } }

.gp-case-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 0.1rem solid rgba(19,106,93,0.14);
}
.gp-case-card .gp-case-img { aspect-ratio: 16/10; overflow: hidden; }
.gp-case-card .gp-case-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.gp-case-card:hover .gp-case-img img { transform: scale(1.06); }
.gp-case-card .gp-case-body { padding: 2.4rem 2.8rem 2.8rem; }
.gp-case-card .gp-case-tag {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--color-pri-dark, #0C4A40);
  padding: 0.4rem 1.2rem;
  margin-bottom: 1.4rem;
}
.gp-case-card h3 { font-size: 1.8rem; font-weight: 700; line-height: 1.35; margin-bottom: 1rem; }
.gp-case-card p { font-size: 1.4rem; color: var(--color-disabled); margin-bottom: 1.6rem; }
.gp-case-card .gp-case-lnk { color: var(--color-pri); font-weight: 700; font-size: 1.4rem; display: inline-flex; align-items: center; gap: 0.6rem; }
@media (max-width: 600px) {
  .gp-case-card .gp-case-body { padding: 2rem; }
  .gp-case-card h3 { font-size: 1.6rem; }
}

/* ---- FAQ: giống thiết kế giai_phap_fumigation (không dùng .faqs-item của theme,
   vì đó là accordion nhiều danh mục lồng nhau, khác cấu trúc 1-câu-1-card ở đây) ---- */
.gp-faq-list { max-width: 70%; margin: 4rem auto 0; display: flex; flex-direction: column; gap: 1.2rem; }
@media (max-width: 860px) { .gp-faq-list { max-width: 100%; } }

.gp-faq-item {
  background: var(--white);
  border: 0.1rem solid rgba(19,106,93,0.14);
  overflow: hidden;
}
.gp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 2rem 2.4rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 700;
}
.gp-faq-q svg { width: 2rem; height: 2rem; flex-shrink: 0; color: var(--color-pri); transition: transform 0.25s ease; }
.gp-faq-item.open .gp-faq-q svg { transform: rotate(45deg); }
.gp-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.gp-faq-item.open .gp-faq-a { grid-template-rows: 1fr; }
.gp-faq-a-inner { overflow: hidden; min-height: 0; padding: 0 2.4rem; }
.gp-faq-item.open .gp-faq-a-inner { padding: 0 2.4rem 2.2rem; }
.gp-faq-a p { font-size: 1.5rem; color: var(--color-disabled); }
@media (max-width: 600px) {
  .gp-faq-q { padding: 1.6rem 1.8rem; font-size: 1.4rem; gap: 1.2rem; }
  .gp-faq-a-inner { padding: 0 1.8rem; }
  .gp-faq-item.open .gp-faq-a-inner { padding: 0 1.8rem 1.8rem; }
  .gp-faq-a p { font-size: 1.4rem; }
}

/* Quy trình: 4 bước/hàng, đường nối vẽ theo từng cặp bước liền kề trong cùng hàng (2026-10-15) */
@media (min-width: 981px) {
  .gp-step-grid::before { display: none; }
  .gp-step-item:not(:last-child):not(:nth-child(4n))::after {
    content: ""; position: absolute; z-index: -1;
    top: 3.2rem; left: 50%; width: calc(100% + 2.4rem); height: 0.2rem;
    background: repeating-linear-gradient(to right, rgba(255,255,255,0.35) 0 10px, transparent 10px 18px);
  }
}