/* ===== AKK Home (scoped, cleaned) ===== */
:root{
  --home-max:1080px;
  --home-gap:16px;
  --home-muted:#6b7280;
  --home-border:#e5e7eb;
  --home-soft:#f7faf9;
  --home-card:#fff;

  --home-brand: var(--brand, #1B7F6B);

  /* Hero */
  --hero-overlay:0;                 /* 0–0.35 */
  --hero-box-bg:rgba(0,0,0,.55);
}

/* ===== Shell & headings ===== */
.home-wrap{max-width:var(--home-max);margin:0 auto;padding:0 16px}
.home-section{margin:24px 0}
.home-head{font-size:clamp(20px,2.2vw,26px);font-weight:700;margin:0 0 10px;text-align:center}
.home-sub{color:var(--home-muted);margin:4px 0 14px;text-align:center}

/* ===== HERO ===== */
.home-hero{
  position:relative;
  background:url("/assets/hero-home.webp") center/cover no-repeat;
  min-height:360px; padding:68px 0 46px; border-bottom:1px solid #eef0f2;
}
.home-hero::before{
  content:"";position:absolute;inset:0;background:rgba(255,255,255,var(--hero-overlay));pointer-events:none;
}
.home-hero .container{
  max-width:var(--home-max);margin:0 auto;padding:0 16px;
  display:flex;justify-content:center;align-items:center;
}
.home-hero .hero-inner{
  display:block;width:fit-content;max-width:min(920px,92vw);margin-inline:auto;
  color:#fff;text-align:center;background:var(--hero-box-bg);
  padding:24px 26px;border-radius:16px;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.hero-title{font-size:clamp(26px,4.4vw,44px);line-height:1.18;font-weight:800;margin:6px 0 10px;color:#fff}
.hero-sub{color:#f3f7f6;font-size:clamp(15px,1.6vw,18px);line-height:1.7;opacity:.95;margin:0 auto 18px;max-width:820px}
.hero-actions{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-hero{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;border:1.5px solid transparent;transition:.16s}
.btn-hero.primary{background:var(--home-brand);color:#fff;border-color:var(--home-brand);box-shadow:0 6px 18px rgba(27,127,107,.22)}
.btn-hero.primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(27,127,107,.28)}
.btn-hero.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-hero.outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.75)}
@media (max-width:520px){
  .home-hero{padding:54px 0 34px;min-height:300px}
  .home-hero .hero-inner{padding:18px 16px;border-radius:14px}
  .hero-sub br{display:none}
}

/* ===== 1) CATEGORIES (Static images) ===== */
.home-cats{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  justify-content:center;
}
.home-cat{
  display:grid; grid-template-rows:auto min-content;
  background:var(--home-card); border:1px solid var(--home-border); border-radius:12px; overflow:hidden;
  box-shadow:0 1px 8px rgba(0,0,0,.05); transition:.12s;
  text-decoration:none; color:inherit;
}
.home-cat:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.home-thumb{position:relative; aspect-ratio:1/1; overflow:hidden; background:#fff;}
.home-thumb img{position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; display:block}
.home-cat .meta{padding:8px 10px}
.home-cat .title{font-weight:600; font-size:15px}
.home-cat .muted{font-size:13px; color:var(--home-muted)}

/* ===== 2) SERVICES ===== */
.home-services{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-inline:auto; max-width:var(--home-max);
}
.home-serv{
  flex:1 1 260px; max-width:320px; min-height:110px;
  background:#fff; border:1px solid var(--home-border); border-radius:14px; padding:14px; box-shadow:0 1px 6px rgba(0,0,0,.04);
  display:flex; flex-direction:column; justify-content:space-between;
}
.home-serv h3{margin:0 0 6px;font-size:18px}
.home-serv p{margin:0;color:var(--home-muted);font-size:14px}

/* ===== 3) PROCESS (4 steps) ===== */
.home-steps{background:var(--home-soft);border:1px solid var(--home-border);border-radius:16px;padding:14px}
.home-step-grid{
  display:grid; gap:16px; justify-content:center; margin-inline:auto; max-width:var(--home-max);
  grid-template-columns:repeat(1,minmax(240px,1fr));
}
@media (min-width:640px){ .home-step-grid{ grid-template-columns:repeat(2,minmax(260px,1fr)); } }
@media (min-width:980px){ .home-step-grid{ grid-template-columns:repeat(4,1fr); } }
.home-step{
  background:#fff; border:1px dashed var(--home-border); border-radius:14px; padding:14px; position:relative; height:100%;
}
.home-step .num{
  position:absolute; left:12px; top:-10px;
  width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
  background:#fff; border:2px solid var(--home-brand); color:var(--home-brand); font-weight:700;
}
.home-step h4{margin:6px 0 6px}
.home-step p{margin:0;color:var(--home-muted);font-size:14px}

/* ===== 4) WHY AKK ===== */
.home-why{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-inline:auto; max-width:var(--home-max);
}
.home-why .why{
  flex:1 1 260px; max-width:320px; min-height:110px;
  background:#fff; border:1px solid var(--home-border); border-radius:14px; padding:14px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.home-why .why p{margin:0;color:var(--home-muted)}
/* ==== FIX: Center the PROCESS soft panel ==== */
.home-steps{
  background: var(--home-soft);
  border: 1px solid var(--home-border);
  border-radius: 16px;
  padding: 16px;

  /* กุญแจให้กล่องไม่เต็มจอและอยู่กลาง */
  max-width: var(--home-max);   /* 1080px */
  margin-left: auto;
  margin-right: auto;
}

/* กริดข้างในก็ให้คงกลางไว้ */
.home-step-grid{
  justify-content: center;
}

/* ถ้าอยากให้มือถือเต็มขอบ (สวยแบบบัตรยาว) แต่เดสก์ท็อปอยู่กลาง */
@media (max-width: 640px){
  .home-steps{
    max-width: none;        /* ให้เต็มจอบนมือถือ */
    border-radius: 0;       /* ชิดขอบสวยขึ้น */
    margin-left: 0;
    margin-right: 0;
  }
}
/* ===== Polish pack (homepage) ===== */

/* 1) ระยะเซกชันรวม: โปร่งหายอึดอัด */
.home-section{ margin: 36px 0; }
.home-head{ margin: 0 0 12px; }
.home-sub{ margin: 6px 0 18px; }

/* 2) การ์ด “บริการของเรา” และ “ทำไมต้อง AKK” — กว้างพอดีและอยู่กลางเสมอ */
.home-services,
.home-why{
  display:flex !important;
  flex-wrap:wrap;
  gap:18px;
  justify-content:center !important;
  margin-left:auto; margin-right:auto;
  max-width:1080px;
}
.home-serv,
.home-why .why{
  flex:1 1 260px;        /* ฐาน 260px โตได้ */
  max-width:320px;
  min-height:120px;      /* สูงเท่ากัน */
  display:flex; flex-direction:column; justify-content:space-between;
}

/* 3) กระบวนการทำงาน 4 ขั้นตอน — กล่องพื้นหลังอยู่กลางและโปร่งขึ้น */
.home-steps{
  max-width:1080px;
  margin: 12px auto 0;
  padding: 14px 14px;
  border-radius:16px;
}
.home-step-grid{
  display:grid !important;
  gap:16px;
  justify-content:center;
  grid-template-columns: repeat(1, minmax(240px,1fr));
}
@media (min-width:640px){ .home-step-grid{ grid-template-columns:repeat(2,minmax(260px,1fr)); } }
@media (min-width:980px){ .home-step-grid{ grid-template-columns:repeat(4,1fr); } }
.home-step{ height:100%; }
.home-step .num{ top:-10px; }

/* 4) การ์ดหมวด (ตรงบนสุดของหน้าแรก) — ให้รูปเต็มและตัวการ์ดกระทัดรัด */
.home-cats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  justify-content:center;
}
.home-cat{ border-radius:12px; }
.home-thumb{ aspect-ratio: 1 / 1; overflow:hidden; }
.home-thumb img{ width:100%; height:100% !important; object-fit:cover; display:block; }
.home-cat .meta{ padding:8px 10px; }
.home-cat .title{ font-weight:600; font-size:15px; }
.home-cat .muted{ font-size:13px; opacity:.78; }

/* 5) กันสไตล์อื่นมากดให้ชิดซ้าย (กันเหนียว) */
.home-head, .home-sub{ text-align:center; }
/* ================= CENTER FORCE (drop-in fix) ================= */

/* ให้กรอบรวมของโฮมอยู่กลางและมีรางกว้างคงที่ */
.home-wrap{
  max-width:1080px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:16px !important;
  padding-right:16px !important;
}

/* จัดหัวข้อ/คำอธิบายให้กึ่งกลาง */
.home-head, .home-sub{ text-align:center !important; }

/* 1) บริการของเรา  2) ทำไมต้อง AKK -> ใช้ flex แล้วจัดกลาง */
.home-services,
.home-why{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:16px !important;
  justify-content:center !important;
  align-items:stretch !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.home-serv,
.home-why .why{
  flex: 0 1 300px !important;   /* กว้างฐาน ~300px */
  max-width: 340px !important;
  min-width: 260px !important;
  min-height: 120px !important;
}

/* 3) กระบวนการทำงาน 4 ขั้นตอน — กล่องพื้นหลังและกริดอยู่กลาง */
.home-steps{
  max-width:1080px !important;
  margin: 12px auto 0 !important;
  padding: 14px !important;
}
.home-step-grid{
  display:grid !important;
  gap:16px !important;
  justify-content:center !important;     /* กุญแจให้กริดอยู่กลาง */
  grid-template-columns: repeat(1, minmax(240px, 1fr)) !important;
}
@media (min-width:640px){
  .home-step-grid{ grid-template-columns:repeat(2, minmax(260px, 1fr)) !important; }
}
@media (min-width:980px){
  .home-step-grid{ grid-template-columns:repeat(4, 1fr) !important; }
}
.home-step{ height:100% !important; }

/* การ์ดหมวดบนหน้าแรก: ให้รูปเต็ม/บาลานซ์ และกริดอยู่กลาง */
.home-cats{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap:16px !important;
  justify-content:center !important;
}
.home-thumb{ aspect-ratio:1 / 1 !important; overflow:hidden !important; }
.home-thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; }