/*
Theme Name: pthvietnam
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* =====================================================
   GIẢI PHÁP CỐT LÕI - SECTION STYLING (PTH Việt Nam)
   Selector: main .section:first-of-type (section đầu tiên sau hero)
   ===================================================== */

/* --- Section container: chỉ target section đầu tiên trong main content --- */
main .section:first-of-type {
  background: linear-gradient(160deg, #f2fbf5 0%, #ffffff 55%, #eaf7ee 100%) !important;
  padding: 60px 0 70px !important;
  position: relative;
}

main .section:first-of-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1e7a36, #318f48, #57c26f, #318f48, #1e7a36);
}

/* --- Section heading H2 --- */
main .section:first-of-type h2 {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #1a4d2e !important;
  letter-spacing: -0.3px;
  margin-bottom: 4px !important;
  position: relative;
}

main .section:first-of-type h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: #318f48;
  margin: 10px auto 0;
  border-radius: 2px;
}

/* --- Cards col-inner: white card với border và shadow --- */
main .section:first-of-type .col.medium-3 .col-inner {
  background: #ffffff !important;
  border: 1.5px solid #c6e6cf !important;
  border-radius: 12px !important;
  padding: 28px 22px 22px !important;
  box-shadow: 0 2px 10px rgba(49, 143, 72, 0.09), 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
  position: relative;
  overflow: hidden;
}

/* Accent bar top của mỗi card */
main .section:first-of-type .col.medium-3 .col-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #318f48, #57c26f);
  border-radius: 12px 12px 0 0;
}

/* Hover effect */
main .section:first-of-type .col.medium-3 .col-inner:hover {
  box-shadow: 0 8px 28px rgba(49, 143, 72, 0.18), 0 2px 8px rgba(0,0,0,0.07) !important;
  transform: translateY(-5px);
  border-color: #318f48 !important;
}

/* --- Card title (bold/strong text) --- */
main .section:first-of-type .col.medium-3 .text b,
main .section:first-of-type .col.medium-3 .text strong,
main .section:first-of-type .col.medium-3 h3,
main .section:first-of-type .col.medium-3 h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #1a4d2e !important;
  margin-bottom: 10px !important;
  display: block;
  line-height: 1.3;
}

/* --- Description paragraph --- */
main .section:first-of-type .col.medium-3 .text p {
  font-size: 0.875rem !important;
  color: #4a5568 !important;
  line-height: 1.65 !important;
  margin-bottom: 16px !important;
}

/* --- CTA link --- */
main .section:first-of-type .col.medium-3 a {
  color: #318f48 !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

main .section:first-of-type .col.medium-3 a:hover {
  color: #1a5e2e !important;
  text-decoration: underline;
}

/* =====================================================
   MOBILE RESPONSIVE
   ===================================================== */
@media only screen and (max-width: 48em) {
  main .section:first-of-type {
    padding: 40px 0 48px !important;
  }
  main .section:first-of-type h2 {
    font-size: 1.5rem !important;
  }
  main .section:first-of-type .col.medium-3 .col-inner {
    padding: 20px 16px !important;
    margin-bottom: 14px;
  }
  main .section:first-of-type .col.medium-3 .col-inner:hover {
    transform: none;
  }
}