/* =========================
   HOME: Reset & Base
   ========================= */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,p,ul,li,a{margin:0;padding:0}
:root{font-size:19px}
  
body{
  font-family:'Inter','Noto Sans Thai',system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif;
  line-height:1.8;background:#fdfdfb;color:#333;font-size:1rem;font-weight:400
}
h1,h2,h3{color:#2e7d32;font-weight:600}
section{max-width:1200px;margin:auto;padding:1.2rem 1rem}
.container{width:100%;padding:0 1rem;margin:0 auto}
@media(min-width:576px){.container{max-width:540px}}
@media(min-width:768px){.container{max-width:720px}}
@media(min-width:992px){.container{max-width:960px}}
@media(min-width:1200px){.container{max-width:1140px}}
@media(min-width:1400px){.container{max-width:1320px}}

.section-heading{font-size:1.9rem;color:#2e7d32;margin:1.3rem 0;text-align:center}

/* =========================
   HOME: Top Bar
   ========================= */
.top-bar{background:#008000;color:#fff;padding:.1rem .4rem;position:sticky;top:0;z-index:9999;text-align:center}
.top-bar-text{font-weight:450;font-size:.95rem}
.desktop-only{display:inline}
.mobile-only{display:none}

/* =========================
   HOME: Navbar (header.php)
   ========================= */
.navbar{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(
  180deg,
  rgba(176, 255, 164, 0) 0%,      /* #B0FFA4 ??????? */
  rgba(176, 255, 164, 0.72) 80%,  /* #B0FFA4 ??? 72% */
  rgba(176, 255, 164, 0.9) 100%   /* #B0FFA4 ??? 90% */
);padding:18px 30px;border-bottom:5px solid #F8EA28;position:relative
}
.logo{padding-left:1px;padding-top:7px}
.logo img{display:block;height:auto;max-height:59px}
.nav-links{list-style:none;display:flex;gap:20px;align-items:center;transition:all .3s}
.nav-links a{text-decoration:none;color:#006600;font-size:1.15rem;font-weight:500;padding:7px 9px;display:inline-block}
.nav-links a:hover{color:#fdd835}
.lang-switch a{font-size:22px;display:flex;align-items:center;gap:8px;color:#006600;font-weight:600;text-decoration:none}
.lang-switch img.flag{height:24px;width:auto;display:inline-block}
.menu-toggle,.menu-close{
  font-size:31px;background:none;border:0;cursor:pointer;padding:1rem;display:none;
  position:absolute;top:6px;right:0;z-index:1001
}

/* Mobile nav */
@media (max-width:768px){
  .desktop-only{display:none}
  .mobile-only{display:inline}
  .navbar{flex-direction:column;align-items:stretch}
  .menu-toggle{display:block}
  .menu-close{display:none;top:10px;right:10px;font-size:28px}
  .nav-links{display:none;flex-direction:column;width:100%;padding:12px 10px;align-items:flex-start}
  .nav-links.active{display:flex}
  .navbar.menu-open .menu-toggle{display:none}
  .navbar.menu-open .menu-close{display:block}
}

/* =========================
   HOME: Hero
   ========================= */
.hero{background:#fff;text-align:center;padding:1.8rem 1rem}
.hero h1{font-size:2.1rem;margin-bottom:1.1rem}
.hero p{font-size:1.2rem;margin-bottom:1.5rem}

/* =========================
   HOME: Clients (โลโก้ลูกค้า)
   ========================= */
section.clients{
  padding:3rem 1rem;background:#B0FFA4;text-align:center;
  border-top:1px solid #F8EA28;border-bottom:1px solid #F8EA28
}
.client-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;list-style:none}
.client-logos img{max-height:60px;width:auto;object-fit:contain;opacity:.8;filter:grayscale(40%);transition:transform .2s,opacity .2s,filter .2s}
.client-logos img:hover{transform:scale(1.1);opacity:1;filter:grayscale(0%)}

/* =========================
   HOME: Buttons
   ========================= */
.btn-primary,.btn-secondary{
  display:inline-block;padding:.75rem 1.5rem;font-size:1.05rem;border-radius:6px;text-decoration:none;margin:.5rem;font-weight:bold;cursor:pointer
}
/* ===== ???????? (?????????????????) ===== */
:root{
  /* ???????????: ??????? 1 ??? 2 */
  --shine-core-1: rgba(255,140,140,.95); /* ??????????????? 1 */
  --shine-soft-1: rgba(255,110,110,.48); /* ?????????????? 1 */
  --shine-core-2: rgba(255,170,170,.90); /* ??????????????? 2 */
  --shine-soft-2: rgba(255,130,130,.40); /* ?????????????? 2 */
  --sparkle-1:   rgba(255,212,219,.95);  /* ????????????????? 1 */
  --sparkle-2:   rgba(255,195,205,.85);  /* ????????????????? 2 */
}
.btn-primary{
  position: relative;               /* ?????? pseudo ??? */
  display: inline-block;
  padding: .75rem 1.5rem;
  font-size: 1.05rem;
  font-weight: bold;
  color: #064e1a;
  background: linear-gradient(
    180deg,
    #fff69b 0%,
    #f7e77d 40%,
    #ffd93b 70%,
    #f7c400 100%
  );
  border: none;
  border-radius: 8px;
  box-shadow:
    0 4px 12px rgba(0,0,0,.25),
    inset 0 2px 6px rgba(255,255,255,.5);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;                 /* ????????????????????? */
  isolation: isolate;               /* ????????????? */
}

.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow:
    0 6px 15px rgba(0,0,0,.3),
    inset 0 2px 8px rgba(255,255,255,.6);
}

/* ===== ?????????? ? ?????? (????????????) ===== */
/* ???????????????????? (???? ?) */
.btn-primary::before{
  content:"";
  position:absolute;
  inset:-28% -18% auto -18%;
  height:64%;
  background: radial-gradient(120% 100% at 20% 20%,
              rgba(255,255,255,.55), transparent 62%);
  pointer-events:none;
  mix-blend-mode: screen;
}

/* ==============================
   ?????????????? + Sparkles
   ??? ::after ???????????????????????
   ============================== */
/* ===== ??????? 2 ???? ===== */
.btn-primary::after{
  content:"";
  position:absolute;
  top:-135%;
  left:-30%;
  width:46%;
  height:320%;

  /* ??????????????? */
  will-change: transform;
  transform: translateX(-140%) skewX(-12deg);
  filter: blur(1.4px) saturate(115%);
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.95;

  /* ????????????: (????1 core+halo) + (????2 core+halo) + sparkles ??????? */
  background:
    /* -- ??????? 1 (????????) -- */
    linear-gradient(115deg, transparent 0 42%,
      var(--shine-core-1) 46%, transparent 50%),   /* ???????? */
    linear-gradient(115deg, transparent 0 38%,
      var(--shine-soft-1) 46%, transparent 66%),   /* ??????? */

    /* -- ??????? 2 (????????????????) -- */
    linear-gradient(115deg, transparent 0 62%,
      var(--shine-core-2) 66%, transparent 70%),   /* ???????? */
    linear-gradient(115deg, transparent 0 58%,
      var(--shine-soft-2) 66%, transparent 82%),   /* ??????? */

    /* sparkles ??????????? 1 */
    radial-gradient(10px 10px at 28% 44%, var(--sparkle-1), transparent 60%),
    radial-gradient(7px 7px   at 46% 66%, rgba(255,200,205,.75), transparent 60%),

    /* sparkles ??????????? 2 */
    radial-gradient(9px 9px   at 70% 50%, var(--sparkle-2), transparent 60%),
    radial-gradient(7px 7px   at 60% 78%, rgba(255,185,195,.65), transparent 60%);
}

/* ????????????????? (???????? / ????? hover ??????????????????) */
.btn-primary.shine-run::after{
  animation: shine-glide 2.8s linear infinite;
}
.btn-primary.shine-hover::after{
  animation: shine-glide 2.8s linear paused;
}
.btn-primary.shine-hover:hover::after{
  animation-play-state: running;
}


/* ????????????????? motion */
@media (prefers-reduced-motion: reduce){
  .btn-primary.shine-run::after,
  .btn-primary.shine-hover::after{ animation: none; }
}

/* ?????????? ? ?????? ????????????? */
@keyframes shine-glide{
  from { transform: translateX(-140%) skewX(-12deg); }
  to   { transform: translateX(260%)  skewX(-12deg); }
}

.btn-secondary{background:#c8e6c9;color:#2e7d32}

/* =========================
   HOME: Services (grid + card)
   ========================= */
.services{
  position:relative;
  /* ไล่โทนสว่าง→เหลืองอ่อน→เขียวมาตรฐาน แล้วจางหาย */
  max-width:1360px;
	background: linear-gradient(
    180deg,
    #fdfdfd 0%,
    #f7fcbf 40%,
    var(--kept-green,#10b981) 78%,
    rgba(16,185,129,0.0) 100%
  );
}
.services::after{
  /* สร้าง fade-to-background ที่ก้นหลุม ให้กลืนกับพื้นหลังเพจ */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 70%, rgba(255,255,255,0.85) 100%);
  pointer-events:none;
}

/* เพิ่ม texture wave เบาๆ */
.services::before{
  content:"";
  position:absolute; inset:0;
  background-repeat:repeat-x; background-size:1200px auto;
  opacity:.15; transform:translateY(-8px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,0) 90%);
  pointer-events:none;
}

.services > * {
  position: relative;
  z-index: 1;
}

/* ====== Title with Underline Gradient ====== */
.services h2 {
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  color: #064e3b; /* เขียวเข้ม */
  margin-bottom: 1.8rem;
  position: relative;
}

.services h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 85%;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, #166534, #22c55e, #facc15);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.service-grid{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-top:1rem}
.service-box{
  background: linear-gradient(180deg, #fdfdfd 0%, #f7fcbf 55%, #a7f3d0 100%);
  padding:1rem;max-width:380px;min-height:460px;
  box-shadow:0 2px 5px rgba(0,0,0,.1);text-align:left;transition:transform .2s ease
}
.service-box:hover{transform:translateY(-8px)}
.service-box h3{color:#2e7d32;font-size:1.2rem;margin:.75rem 0 .5rem}
.service-box p{font-size:.95rem;margin-bottom:.75rem}
.service-box a{color:#3366cc;font-weight:700;text-decoration:none}
.service-box img{max-width:100%;border-radius:8px;display:block}

/* ===== service: image slide (auto) ===== */
.image-slide-hover{position:relative;width:100%;height:250px;overflow:hidden;border-radius:10px;background:#f5f7f4}
.slider{display:flex;width:100%;height:100%;animation:slide 18s infinite}
.slider img{min-width:100%;min-height:100%;width:100%;height:100%;object-fit:cover;display:block}
@keyframes slide{
  0%{transform:translateX(0)}16.66%{transform:translateX(0)}
  20%{transform:translateX(-100%)}33.32%{transform:translateX(-100%)}
  36.66%{transform:translateX(-200%)}49.98%{transform:translateX(-200%)}
  53.32%{transform:translateX(-300%)}66.64%{transform:translateX(-300%)}
  69.98%{transform:translateX(-400%)}83.3%{transform:translateX(-400%)}
  86.64%{transform:translateX(-500%)}100%{transform:translateX(-500%)}
}

/* =========================
   HOME: Latest Gallery (4 รายการล่าสุด)
   ========================= */

/* กรอบครอบทั้ง section */
.latest-gallery.wrap-1440{padding: 45px;margin: 28px auto 28px;}
.wrap-1440{max-width:1360px;margin:0 auto;padding:0 20px}
.section-title{font-size:clamp(22px,2.2vw,32px);font-weight:800}
.section-title::before {content: "🚚 ";}
.section-title::after {content: " 📦";}
.latest-gallery .section-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.latest-gallery .see-all{text-decoration:none;font-weight:600;color:#455B03}
.latest-gallery .see-all:hover{text-decoration:underline;color:#facc15}

/* รูปใหญ่ด้านบน */
.latest-head{display:block;border-radius:16px;overflow:hidden;position:relative;height:clamp(260px,42vw,550px);margin-bottom:14px;background:#f2f6f0}
.head-card>img{width:100%;height:100%;object-fit:cover;display:block}
.head-card .head-content{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.66) 58%,rgba(0,0,0,.85) 100%);backdrop-filter:saturate(110%) blur(1px)}
.head-card h3 {font-size: clamp(22px, 2.6vw, 32px);font-weight: 800;color: #FCF379; /* เขียว */
  -webkit-text-stroke: 1px #1b5e20; /* เส้นขอบสีขาว */text-shadow:2px 2px 0 #1b5e20,3px 3px 0 #1b5e20,4px 4px 0 #1b5e20;}
.head-card .date{margin:0;font-weight:700;color:#F3EBEB;font-size:15px}

/* 3 การ์ดด้านล่าง */
.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-card{
  position:relative;display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.07);transition:transform .18s,box-shadow .18s
}
.gallery-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.card-media{position:relative;aspect-ratio:16/10;background:#F1F5F9}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
/* gradient ซ้อนที่ก้นภาพ */
.card-media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:54%;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 80%,rgba(0,0,0,.9) 100%);
  pointer-events:none
}
/* เนื้อหาซ้อนบนภาพ */
.card-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px 16px 16px;color:#fff
}
.card-title{
  margin:0 0 4px;font-weight:700;font-size:clamp(16px,1.8vw,20px);line-height:1.35;color:#fff;
  text-shadow:0 3px 10px rgba(0,0,0,.5)
}
.card-meta{margin:0;font-size:12.5px;color:#FFED70;font-weight:650}

/* responsive ของ latest */
@media(max-width:1024px){.latest-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .latest-gallery.wrap-1440{padding:12px;border-radius:16px}
  .latest-grid{grid-template-columns:1fr}
  .head-card .head-content{padding:14px}
  .card-body{padding:12px 12px 14px}
	
	/* ให้ทั้งเซกชันเป็น anchor สำหรับตำแหน่ง absolute */
  .latest-gallery.wrap-1440{position: relative;padding-bottom: 58px;   /* เผื่อพื้นที่ปุ่ม 'ดูทั้งหมด' ด้านล่าง */}
  .latest-gallery .section-title{padding: 4px 10px;border-radius: 10px;background: rgba(255,255,255,.86);box-shadow: 0 2px 8px rgba(0,0,0,.06);}
  /* แถวหัวข้อ: แสดงแค่หัวข้อที่กึ่งกลางด้านบน */
  .latest-gallery .section-title-row{display: block;text-align: center;margin-bottom: 10px;}
  .latest-gallery .section-title{display: inline-block;margin: 0 auto;}

  /* ย้าย 'ดูทั้งหมด' ไปกึ่งกลางล่างของทั้งเซกชัน */
  .latest-gallery .see-all{position: absolute;left: 50%;bottom: 12px;transform: translateX(-50%);display: inline-block;padding: 8px 14px;border-radius: 999px;background: #ecf9c9;/* เขียวอ่อน */
	box-shadow: 0 6px 16px rgba(0,0,0,.08);text-decoration: none;font-weight: 700;z-index: 5;  /* ลอยเหนือรูป */}
  .latest-gallery .see-all:hover{background:#e4f4b9;}	
}

/* =========================
   HOME: Why Us
   ========================= */
.why-us{background:#f1f8e9;padding:2.5rem 1rem;border-radius:10px;max-width:1360px;margin:1.5rem auto 0}
.why-us h2{font-size:1.75rem;color:#2e7d32;margin-bottom:1.5rem;text-align:center;font-weight:700}
.why-us ul{list-style:none;padding:1rem 0 2rem;margin:0 auto;max-width:990px;display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:1.25rem 2rem}
.why-us li{display:grid;align-items:center;gap:.25rem;position:relative;padding-left:3rem;font-size:1rem;line-height:1.6;color:#333}
.why-us li::before{content:"✅";position:absolute;left:.7rem;top:.1rem;color:#43a047;font-size:1rem}
@media(max-width:768px){.why-us{padding:2rem}.why-us ul{grid-template-columns:1fr}.why-us h2{font-size:1.5rem}}

/* =========================
   HOME: Blog Latest + CTA
   ========================= */
.blog-latest{background:#fff;padding:2rem 1.5rem;text-align:center}
.blog-latest h2{font-size:1.5rem;color:#2e7d32;margin-bottom:1.5rem}
.blog-list{list-style:disc;padding-left:1.25rem;max-width:1010px;margin:0 auto 2rem;text-align:left}
.blog-list li{margin-bottom:1.1rem;font-size:1.1rem;line-height:1.6}
.blog-list a{color:#1a237e;text-decoration:none;font-weight:500}
.blog-list a:hover{color:#fdd835}
.cta-box{background:#fffde7;padding:2rem 1rem;border-radius:12px;max-width:600px;margin:0 auto;box-shadow:0 4px 8px rgba(0,0,0,.06)}
.cta-box h2{color:#2e7d32;font-size:1.25rem;margin-bottom:1.2rem}
.cta-box .btn-primary{background:#fdd835;color:#333;border-radius:8px}

/* =========================
   HOME: Reviews (Trustindex)
   ========================= */
.review-wide-wrapper{width:100%;max-width:1360px;margin:0 auto;padding:0 1rem;box-sizing:border-box}
.review-box {max-width: 980px;margin: 1.5rem auto;padding: 18px 22px;border: 2px solid #b5e48c;/* กรอบเขียวอ่อน */border-radius: 14px;
  background: #fafff5;/* สีพื้นหลังอ่อน */box-shadow: 0 4px 12px rgba(0,0,0,.06);text-align: center;transition: transform .2s, box-shadow .2s;}
.review-box:hover {transform: translateY(-2px);box-shadow: 0 8px 20px rgba(0,0,0,.1);}
.review-box a {text-decoration: none; /* เอา underline ออก */color: inherit; /* ใช้สีตัวอักษรจากพาเรนต์ */}
.review-box p {font-size: 1.05rem;line-height: 1.7;color: #2e7d32;/* เขียวหลัก KEPT */margin: 0;}
.review-box strong {color: #1a237e;/* น้ำเงินเข้มดึงตา */font-weight: 700;margin-left: 8px;}

/* =========================
   HOME: FAQ (Accordion)
   ========================= */
.faq{
  /* ??????????????? (??????) + ??????? */
  --head-min-h: 85px;   /* ??????? */
  --band: 18px;         /* ?????????????????????????? */
  background:#f9fbe7;
  border-radius:12px;
  padding:2.5rem 2rem;
  margin:1.15rem auto;
  max-width:1440px;
}

.faq-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  justify-content:center;
  gap:1.5rem 2.5rem;
}

/* ---------- Card base: ???????????????????????? ---------- */
.faq-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--head-min-h) + var(--band));
  background: linear-gradient(180deg,#ffffff 0%,#fefefe 50%,#f7f7f7 100%);
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 0 12px rgba(247,231,125,.35);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* ???????????????????? */
.faq-item::before{
  content:"";
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background: radial-gradient(circle at top left,
              rgba(255,255,255,.6), rgba(255,255,255,0) 70%);
  transform: rotate(25deg);
  pointer-events:none;
}

/* hover */
.faq-item:hover{
  transform: translateY(-3px);
  border-color:#F7E77D;
  box-shadow:
    0 8px 18px rgba(0,0,0,.15),
    0 0 26px rgba(247,231,125,.45);
}

/* ---------- Heading / Button ---------- */
.faq-item h3{ margin:0; }

.faq-toggle{
  width:100%;
  min-height: var(--head-min-h);          /* ???????? */
  margin:0 0 var(--band) 0;               /* ?????????????????? */
  padding:0 3rem 0 1rem;                  /* ??? padding ???? min-height */
  display:flex; align-items:center; gap:.75rem;
  border:0; background:#fff; text-align:left;
  font-weight:650; color:#167304;
}

/* ????????? ? ??? band ???????????? panel */
.faq-item:has(.faq-toggle[aria-expanded="true"]) .faq-toggle{ margin-bottom:0; }

/* ====== ?????????????: 2 ?????? + ??????????????????????? ====== */
.q-label{
  display:-webkit-box;
  -webkit-line-clamp:2;        /* ???????????? 2 ?????? */
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size: var(--fs, 1.05rem); /* ??????? ????/????????????? --fs */
  line-height: 1.18;            /* line-height ????????????? 2 ?????? */
}

/* ???????????????????? ???????? '???????' ?????????????? ? */
.faq-toggle,
.faq-toggle * {
  cursor: pointer;
}
/* ???????????? (??????) */
.faq-toggle::after{ content:""; position:absolute; right:.6rem; width:28px; height:28px; border-radius:999px; background:#e8f5e9; }


.faq-toggle:focus-visible{
  outline:3px solid #a5d6a7;
  outline-offset:2px;
  border-radius:8px;
}

/* ?????????? (??????) */
.faq-toggle .chev{ position:absolute; right:1rem; width:10px; height:10px; border-right:2px solid #2e7d32; border-bottom:2px solid #2e7d32; transform:rotate(-45deg); transition:transform .2s, border-color .2s; }
.faq-toggle[aria-expanded="true"] .chev{ transform:rotate(45deg); border-color:#1b5e20; }

/* ---------- Panel ---------- */
.faq-panel{
  background:#fcfff7;
  border-top:1px solid #e6f2df;
}
.faq-panel[hidden]{ display:none; }

.faq-panel-inner{
  padding:1rem 1.25rem;
  color:#333;
  line-height:1.7;
  font-size:.98rem;
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  .faq{
    padding:2rem .75rem;
    --head-min-h: 56px;  /* ?????????????????? */
  }
  .faq-list{ gap:.75rem 1rem; }
  .faq-toggle{
    font-size:1.02rem;
    padding:0 2.75rem 0 1rem;
  }
  .faq-toggle::after{ width:26px;height:26px; }
}

/* =========================================
   (????????) ?????????? � ??????? "shine"
   ========================================= */
.faq-item.shine{
  isolation:isolate;
  box-shadow:
    0 4px 10px rgba(0,0,0,.08),
    0 0 0 1px rgba(247,231,125,.35) inset,
    0 0 20px rgba(247,231,125,.35);
}

/* ?????????????? */
.faq-item.shine::after{
  content:"";
  position:absolute;
  top:-40%; left:-20%;
  width:60%; height:180%;
  background: linear-gradient(115deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,.65) 12%,
              rgba(255,255,255,.95) 18%,
              rgba(255,255,255,.65) 24%,
              rgba(255,255,255,0) 35%);
  filter: blur(.5px);
  transform: translateX(-120%);
  animation: shine-sweep 3.6s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}

@keyframes shine-sweep{
  0%   { transform: translateX(-120%); opacity:.85; }
  50%  { transform: translateX(220%);  opacity:1;   }
  100% { transform: translateX(220%);  opacity:.85; }
}


/* =========================
   HOME: Footer
   ========================= */
footer{background: linear-gradient(
  180deg,
  rgba(247, 231, 125, 0) 0%,   /* ????????????? */
  #F7E77D 5%,                 /* ?????????????????? */
  #F7E77D 70%,                 /* ?????????????????????? */
  #B0FFA4 100%                 /* ??????????????? */
);
 text-align:center;padding:20px;font-size:.9rem;color:#1F5121}
.footer-fixed-bar{position:fixed;bottom:0;left:0;width:100%;background:#2e7d32;z-index:9999;box-shadow:0 -2px 5px rgba(0,0,0,.2)}
.social-icon-groups{display:flex;justify-content:center;align-items:center;gap:16px;padding:10px 0}
.social-headers img{width:35px;height:35px;display:block}

/* =========================
   HOME: Responsive tweaks
   ========================= */
@media(max-width:1024px){ section{padding:2rem 1.5rem} }
@media(max-width:768px){
  .section-heading{padding:0 1rem;text-align:center;font-size:1.5rem}
  .service-grid{flex-direction:column;align-items:center}
  .hero h1{font-size:1.6rem}
  .hero p,.btn-primary,.btn-secondary{font-size:1rem}
}
@media(max-width:600px){
  .blog-latest h2{font-size:1.3rem}
  .btn-primary{display:flex;width:fit-content;margin:2.5rem auto;padding:.65rem 1.8rem;font-size:1rem}
  .cta-box .btn-primary{width:100%}
}
@media(max-width:480px){ section{padding:1.5rem 1.25rem} }
@media(min-width:1300px){ .service-grid{gap:1.5rem} }

.card-white{ max-width: 420px; margin-inline:auto; }
.grid-3 .card-white{ max-width: unset; } /* ในกริดให้ยืดเท่าคอลัมน์ */

.container-xl{max-width:1440px;margin-inline:auto;padding-inline:16px;}
.grid-3{
  display:grid; gap:24px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1200px){ .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:720px){  .grid-3{ grid-template-columns:1fr; } }