:root{
  --green-900:#0b5d36;
  --green-700:#138a50;
  --green-100:#eaf7f0;
  --text:#0f172a;
  --muted:#475569;
  --card:#ffffff;
  --bg:#f6f7fb;
  --shadow: 0 10px 30px rgba(15,23,42,.10);
  --radius: 18px;
  --max: 1040px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Noto Sans Thai", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

a{color:inherit}
.container{
  width:min(var(--max), calc(100% - 32px));
  margin-inline:auto;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.topbar__inner{
  /*display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0;*/
  display:flex;
  align-items:center;
  justify-content: space-between; /* ซ้าย = brand, ขวา = กลุ่ม contact */
}
.topbar__contacts{
  display:flex;
  gap:12px;              /* ระยะห่าง โทร กับ Line */
  margin-left:auto;      /* ดันไปชิดขวา */
}
.topbar__brand{display:flex; align-items:center; gap:10px; font-weight:700}
.dot{
  width:10px;height:10px;border-radius:99px;background:var(--green-700);
  box-shadow:0 0 0 5px rgba(19,138,80,.15);
}
.topbar__phone{
  font-weight:700;
  text-decoration:none;
  color:var(--green-900);
  padding:8px 12px;
  border-radius:999px;
  background:var(--green-100);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
/*.topbar_phone::after{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.35);
  opacity: 0;
  transition: opacity .25s ease;
}*/
.topbar_phone::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,.85),
    rgba(255,255,255,.25)
  );
  opacity:0;
  transition: opacity .15s ease;
  pointer-events:none;
  border-radius:16px;
}
.topbar_phone:active::after{
  opacity: 1;
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(15,23,42,.08);
  background: #fff;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(11,93,54,.70), rgba(11,93,54,.15)),
    url("images/khonkaen.png") center/cover no-repeat;
  filter:saturate(1.05);
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
  gap:24px;
  padding: 44px 0 26px;
}
.hero__content{
  color:#fff;
  padding: 18px 0;
}
.hero h1{
  margin:0 0 10px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height:1.15;
  letter-spacing:.2px;
}
.subtitle{
  margin:0 0 18px;
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(255,255,255,.92);
}
.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.hero__badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  padding:8px 10px;
  border-radius:999px;
  font-size: 13px;
}

.hero__visual{
  position:relative;
  min-height: 240px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:14px;
}
.vehicle{
  width:min(320px, 48%);
  max-height: 260px;
  object-fit:contain;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.25));
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  transition: transform .08s ease, filter .08s ease;
  user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(180deg, var(--green-700), var(--green-900));
  color:#fff;
  box-shadow: 0 12px 22px rgba(11,93,54,.25);
}
.btn--ghost{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  color:#fff;
}
.btn--xl{padding:14px 18px; border-radius: 16px; font-size: 16px;}
.btn__icon{font-size:18px}

/* Sections */
.section{padding: 28px 0;}
.section__title{
  margin:0 0 14px;
  font-size: clamp(18px, 2.1vw, 24px);
  color: var(--text);
}
.section--cta{
  background: linear-gradient(180deg, #ffffff, var(--green-100));
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.cta-block{
  text-align:center;
  padding: 10px 0;
}
.cta-block h2{
  margin:0 0 8px;
  font-size: clamp(20px, 2.4vw, 28px);
}
.cta-block .subtitle{color:var(--muted); margin-bottom: 16px}

/* Cards */
.card{
  background:var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid rgba(15,23,42,.06);
  padding: 18px;
}
.card--soft{
  background: #fff;
}

.checklist{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.checklist li{
  position:relative;
  padding-left: 30px;
  color: var(--text);
  font-weight:600;
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  width:22px; height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-900);
  font-weight:900;
}

.divider{
  height:1px;
  background: rgba(15,23,42,.08);
  margin: 16px 0;
}
.muted{color:var(--muted); margin:0}

/* Services Grid */
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.service-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  min-height: 240px;
}
/* ===== Services : Compact mode ===== */
/* ทำให้รูปเด่นขึ้น */
.services--compact .service-card__img img{
  height: 220px;          /* เพิ่มพื้นที่รูป */
  object-fit: cover;
}
/* ลดพื้นที่สีขาว */
.services--compact .service-card__body{
  background:#fff;
  padding: 10px 6px 8px; /* บน / ซ้ายขวา / ล่าง */
  margin-top: 70px;        /* ดันข้อความลง */
}
/* ระยะห่างหัวข้อ */
.services--compact .service-card__body h3{
  margin: 0 0 6px;
}
/* ระยะห่างคำอธิบาย */
.services--compact .service-card__body p{
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}
/* Service Trus */
.service-card--image-only{
  padding: 0;
  background: transparent;
  box-shadow: none;
  transition: transform .3s ease;
}
.service-card--image-only:hover{
  transform: translateY(-4px);
}
/* ซ่อน body ถ้ายังเผลอมี */
.service-card--image-only .service-card__body{
  display: none;
}
/* ทำให้รูปเป็นตัวการ์ดจริง ๆ */
.service-card--image-only .service-card__img img{
  width: 100%;
  height: 220px;          /* ปรับได้ */
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.service-card__img{
  height: 120px;
  background: #eef2f7;
}
.service-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.service-card__body{padding:14px}
.service-card__body h3{
  margin:0 0 6px;
  font-size: 16px;
}
.service-card__body p{
  margin:0;
  color:var(--muted);
  font-size: 13px;
}

/* Area card */
.area-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.area-card__icon{
  width:44px;height:44px;
  border-radius: 14px;
  background: var(--green-100);
  display:flex;align-items:center;justify-content:center;
  font-size: 20px;
}
.area-card__headline{font-weight:800}
.area-card__sub{color:var(--muted); font-size: 13px; margin-top: 2px}

/* Footer */
.footer{
  background:#0b1220;
  color:#e2e8f0;
  padding: 18px 0 90px; /* เผื่อปุ่มลอยบนมือถือ */
}
.footer__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer__brand{font-weight:800}
.footer__meta{color:#cbd5e1; display:flex; gap:10px; flex-wrap:wrap}
.footer__meta a{color:#e2e8f0; text-decoration:none}
.dot-sep{opacity:.6}

/* Sticky call button (มือถือ) */
.sticky-call{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 60;

  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 14px 16px;
  border-radius: 16px;
  text-decoration:none;
  font-weight:900;

  background: linear-gradient(180deg, var(--green-700), var(--green-900));
  color:#fff;
  box-shadow: 0 18px 40px rgba(11,93,54,.35);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.sticky-call::after{
  content:'';
  position:absolute;
  inset:0;
   background: linear-gradient(
    120deg,
    rgba(255,255,255,.85),
    rgba(255,255,255,.25) ); /* สีแสงวาบ */
  opacity:0;
  transition: opacity .15s ease;
  pointer-events: none;               /* ✅ ไม่บังการคลิก */
  border-radius: 16px;               /* ✅ ให้ตรงกับปุ่ม */
}

.sticky-call:active::after{
  opacity:1;
}
/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr; padding: 36px 0 22px;}
  .hero__visual{min-height: 180px; justify-content:flex-start}
  .vehicle{width:min(320px, 52%)}
  .grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 560px){
  .topbar__phone{display:none;}
  .grid{grid-template-columns: 1fr;}
  .service-card__img{height: 140px;}
  .sticky-call{display:flex;}
  .btn--ghost{display:none;} /* มือถือเน้นโทร */
}
/* ===== Lightbox ===== */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}

.lightbox img{
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
}