:root{
  /* พาเล็ตต์องค์กร (--kpd-*) นิยามไว้ที่ css/theme.css ซึ่งโหลดก่อนไฟล์นี้ */
  --brand:#1c5fa8; --brand-dark:#0a2440; --accent:#4FB3E8;
  --ink:#12202e; --muted:#5a6675; --line:#dde5ee; --soft:#f4fbff;
  --kpd-blue:var(--kpd-blue-500);
}
*{ font-family:"IBM Plex Sans Thai","Segoe UI",system-ui,sans-serif; }
body{ color:var(--ink); }
a{ text-decoration:none; }

/* -------- navbar -------- */
.site-nav{ background:#fff; box-shadow:0 2px 12px rgba(10,36,64,.10); padding:.5rem 0;
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--kpd-navy-950) 0%,var(--kpd-navy-800) 45%,var(--kpd-blue-500) 100%) 1; }
.brand-th{ display:block; font-size:.92rem; font-weight:700; line-height:1.2; color:var(--brand-dark); }
.brand-en{ display:block; font-size:.66rem; color:var(--muted); letter-spacing:.02em; }
.site-nav .nav-link{ font-size:.92rem; color:#33445a; font-weight:500; }
.site-nav .nav-link:hover{ color:var(--kpd-navy-800); }

/* -------- hero -------- */
.hero{ color:#fff; padding:4.5rem 0 4rem; position:relative; overflow:hidden;
  /* บล็อกข้อความกินพื้นที่ราว 56% ของความกว้าง จึงคงเขียวเข้มไว้จนเลยจุดนั้น
     แล้วค่อยไล่ไปเหลืองอ่อน เพื่อให้ตัวอักษรสีขาวอ่านชัดตลอดแนวข้อความ */
  background:linear-gradient(110deg,
    #0a2440 0%,
    #0e3a63 30%,
    #14548f 52%,
    #2b8ec4 68%,
    #8ecbf0 84%,
    #cfeafa 100%); }
.hero::after{ content:""; position:absolute; right:-110px; top:-130px; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.35),transparent 62%); }
/* ทำให้ฝั่งข้อความเข้มพอเสมอ เพื่อให้อ่านตัวอักษรสีขาวได้ชัด */
.hero::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(5,20,38,.55) 0%,
    rgba(5,20,38,.42) 48%,
    rgba(5,20,38,.18) 66%,
    transparent 80%); }
.hero .container{ position:relative; z-index:1; }
.hero h1{ font-size:2.3rem; font-weight:700; line-height:1.35; text-shadow:0 2px 8px rgba(4,18,34,.32); }
.hero .lead{ font-size:1.02rem; opacity:.95; text-shadow:0 1px 3px rgba(4,18,34,.38); }
.hero-logo{ width:230px; max-width:70%; filter:drop-shadow(0 14px 34px rgba(6,26,48,.45)); }
.hero-badges .badge{ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); font-weight:500; }

/* -------- sections -------- */
.section{ padding:3.5rem 0; }
.section-soft{ background:linear-gradient(180deg,#f2f9ff 0%,#ffffff 100%); }
.section-title{ font-size:1.6rem; font-weight:700; margin-bottom:.4rem; }
.section-sub{ color:var(--muted); margin-bottom:2rem; }

.feature-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.4rem; height:100%;
  transition:transform .18s, box-shadow .18s; }
.feature-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(10,36,64,.14); border-color:var(--kpd-blue-300); }
.feature-icon{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:1.5rem;
  background:linear-gradient(135deg,var(--kpd-navy-50),#ffffff); color:var(--kpd-navy-800); margin-bottom:.9rem;
  box-shadow:inset 0 0 0 1px rgba(28,95,168,.16); }
.feature-card.green .feature-icon{ background:linear-gradient(135deg,#dcf5e3,#f2fdf5); color:var(--kpd-green-600); }
.feature-card.yellow .feature-icon{ background:linear-gradient(135deg,var(--kpd-yellow-100),var(--kpd-yellow-50)); color:#b3860a; }
.feature-card.blue .feature-icon{ background:linear-gradient(135deg,#e4f4fd,#f4fbff); color:#2b8ec4; }

/* การ์ดสี่ใบไล่จากน้ำเงินเข้มไปฟ้าอ่อน ตามโทนคลื่นน้ำในโลโก้
   ค่าคอนทราสต์ของไอคอนกับพื้น: 8.54 / 5.29 / 4.75 / 3.23 (เกณฑ์กราฟิก 3.0) */
.feature-card.wave-1 .feature-icon{
  background:linear-gradient(135deg,var(--kpd-navy-50),#f4f8fc); color:var(--kpd-navy-900);
  box-shadow:inset 0 0 0 1px rgba(27,63,110,.16); }
.feature-card.wave-2 .feature-icon{
  background:linear-gradient(135deg,var(--kpd-navy-100),#f2f8ff); color:var(--kpd-navy-800);
  box-shadow:inset 0 0 0 1px rgba(28,95,168,.16); }
.feature-card.wave-3 .feature-icon{
  background:linear-gradient(135deg,var(--kpd-navy-200),#f4fbfe); color:var(--kpd-navy-700);
  box-shadow:inset 0 0 0 1px rgba(23,112,143,.16); }
.feature-card.wave-4 .feature-icon{
  background:linear-gradient(135deg,var(--kpd-navy-300),#f6fcff); color:var(--kpd-blue-600);
  box-shadow:inset 0 0 0 1px rgba(43,142,196,.18); }
.feature-card.wave-1:hover{ border-color:#a9c4e2; }
.feature-card.wave-2:hover{ border-color:#a8c8ee; }
.feature-card.wave-3:hover{ border-color:#a4cfe2; }
.feature-card.wave-4:hover{ border-color:#a9dcf5; }

/* แถบสีด้านบน เพื่อให้เห็นการไล่ระดับแม้ในการ์ดที่ไม่มีไอคอน */
.feature-card.wave-1, .feature-card.wave-2,
.feature-card.wave-3, .feature-card.wave-4{ border-top-width:3px; border-top-style:solid; }
.feature-card.wave-1{ border-top-color:var(--kpd-navy-900); }
.feature-card.wave-2{ border-top-color:var(--kpd-navy-800); }
.feature-card.wave-3{ border-top-color:var(--kpd-navy-700); }
.feature-card.wave-4{ border-top-color:var(--kpd-blue-500); }

.step{ text-align:center; }
.step-num{ width:46px; height:46px; border-radius:50%; color:#fff; display:grid;
  place-items:center; font-weight:700; margin:0 auto .7rem;
  background:linear-gradient(135deg,var(--kpd-navy-850),var(--kpd-navy-700));
  box-shadow:0 6px 16px rgba(28,95,168,.3); }

.price-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.6rem; height:100%; }
.price-card.popular{ border:2px solid var(--kpd-navy-700); box-shadow:0 16px 40px rgba(28,95,168,.2); position:relative; }
.price-card.popular::before{ content:"แนะนำ"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg,var(--kpd-navy-850),var(--kpd-navy-700)); color:#fff;
  padding:.15rem .9rem; border-radius:20px; font-size:.75rem; }
.price-amount{ font-size:2rem; font-weight:700; color:var(--kpd-navy-800); }

.team-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.2rem; text-align:center; height:100%; }
.team-photo{ width:110px; height:110px; border-radius:50%; object-fit:cover; margin:0 auto .8rem; display:block; }
.team-placeholder{ width:110px; height:110px; border-radius:50%; margin:0 auto .8rem; display:grid; place-items:center;
  background:var(--kpd-navy-50); color:#7d8fa6; font-size:2.2rem; }

.testimonial{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.3rem; height:100%; }
.testimonial .stars{ color:#f59e0b; }

.article-card{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; height:100%; }
.article-card img{ width:100%; height:180px; object-fit:cover; }
.article-card .body{ padding:1.1rem; }

.trust-bar{ color:#fff; padding:1.3rem 0;
  background:linear-gradient(90deg,var(--kpd-navy-950) 0%,var(--kpd-navy-850) 100%); }
.trust-item{ text-align:center; }
.trust-item .num{ font-size:1.6rem; font-weight:700; color:var(--kpd-blue-500); text-shadow:0 1px 6px rgba(0,0,0,.3); }
.trust-item .lbl{ font-size:.82rem; opacity:.85; }

.cta{ color:#fff; border-radius:18px; padding:2.4rem; position:relative; overflow:hidden;
  background:linear-gradient(115deg,var(--kpd-navy-950) 0%,var(--kpd-navy-800) 55%,var(--kpd-blue-500) 100%); }
.cta::after{ content:""; position:absolute; right:-60px; bottom:-80px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(143,206,240,.35),transparent 65%); }
.cta > *{ position:relative; z-index:1; }

/* -------- footer -------- */
.site-footer{ color:#cfdded; padding:2.6rem 0 1.4rem; margin-top:3rem;
  background:linear-gradient(160deg,var(--kpd-navy-900) 0%,#071a2e 100%);
  border-top:4px solid var(--kpd-blue-500); }
.site-footer a{ color:#cfdded; }
.site-footer a:hover{ color:#fff; }
.site-footer h3{ color:#fff; margin-bottom:.8rem; }

/* -------- floating contact -------- */
.float-contact{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:.55rem; z-index:1040; }
.fc-btn{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:1.3rem;
  box-shadow:0 8px 22px rgba(0,0,0,.28); }
.fc-line{ background:#06C755; }
.fc-tel{ background:var(--kpd-navy-800); }
.fc-btn:hover{ color:#fff; transform:scale(1.06); }

@media (max-width: 768px){
  .hero{ padding:3rem 0 2.5rem; text-align:center; }
  .hero h1{ font-size:1.7rem; }
  .hero-logo{ width:160px; margin-bottom:1.5rem; }
}


/* ---------------- กฎเฉพาะของเว็บไซต์สาธารณะ ----------------
   การทับค่าสีของ Bootstrap ทั้งหมดอยู่ที่ css/theme.css */
.badge.text-bg-light{ background-color:#eaf2fc !important; color:var(--kpd-navy-850) !important; }
.site-footer a{ color:#cfdded; }
.article-card:hover{ border-color:var(--kpd-green-300); }
.testimonial .stars{ color:var(--kpd-orange); }

/* กล่องติดต่อ: ฝังแผนที่ให้เต็มพื้นที่ที่เหลือในกล่องเดียวกัน */
.contact-card:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.contact-map{ flex:1 1 auto; min-height:300px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--kpd-green-50); }
.contact-map iframe{ display:block; width:100%; height:100%; min-height:300px; }
@media (max-width:991.98px){ .contact-map{ min-height:260px; } }

/* ปุ่มเรียกร้องบนแบนเนอร์และ CTA ใช้ฟ้าอ่อนของธีม แทนสีเหลืองเดิม
   ตัวอักษรน้ำเงินเข้มบนฟ้าอ่อนได้คอนทราสต์ 6.68 */
.hero .btn-warning, .cta .btn-warning{
  --bs-btn-bg:var(--kpd-blue-500); --bs-btn-border-color:var(--kpd-blue-500);
  --bs-btn-color:var(--kpd-navy-950);
  --bs-btn-hover-bg:#7bc8f0; --bs-btn-hover-border-color:#7bc8f0;
  --bs-btn-hover-color:var(--kpd-navy-950);
  --bs-btn-active-bg:#37a3dc; --bs-btn-active-color:var(--kpd-navy-950); }
.hero .btn-success, .cta .btn-light{
  --bs-btn-bg:#fff; --bs-btn-border-color:#fff; --bs-btn-color:var(--kpd-navy-850);
  --bs-btn-hover-bg:#e9f3fb; --bs-btn-hover-border-color:#e9f3fb;
  --bs-btn-hover-color:var(--kpd-navy-950); }

/* หน้าเว็บไซต์ใช้โทนน้ำเงิน–ฟ้าอ่อนล้วน ไอคอนและกล่องสถานะจึงใช้สีชุดเดียวกัน
   (ระบบหลังบ้านยังคงใช้เขียวสำหรับสถานะสำเร็จตามความหมายเดิม) */
.text-success{ color:var(--kpd-navy-700) !important; }
.alert-success{ --bs-alert-bg:#eaf2fc; --bs-alert-border-color:#a8c8ee;
  --bs-alert-color:var(--kpd-navy-850); }
.contact-map{ background:#eaf2fc; }