: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; }

/* ---------------------------------------------------------------- ปุ่มย่อ-ขยายตัวอักษร
   ช่วยให้ผู้สูงอายุและผู้ที่สายตาไม่ดีอ่านเนื้อหาบนเว็บได้สบายขึ้น
   ระดับการซูมถูกเก็บไว้ในเครื่องผู้ใช้ จึงคงค่าไว้เมื่อเปิดหน้าอื่น */
.zoom-control{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line);
               border-radius:999px; padding:2px; background:#fff; }
.zoom-btn{ border:0; background:transparent; color:var(--kpd-navy-800,#123f6d); cursor:pointer;
           min-width:34px; height:28px; border-radius:999px; font-size:.82rem; font-weight:600;
           line-height:1; padding:0 .4rem; transition:background .15s ease, color .15s ease; }
.zoom-btn:hover, .zoom-btn:focus-visible{ background:var(--kpd-blue-50,#f2f9ff);
           color:var(--kpd-blue-600,#1c5fa8); outline:none; }
.zoom-btn:active{ background:var(--kpd-blue-100,#e4f4fd); }
.zoom-reset{ font-variant-numeric:tabular-nums; }

/* หน้าจอเล็กให้ปุ่มอยู่ชิดซ้ายพร้อมป้ายกำกับ */
@media (max-width: 991.98px){
  .zoom-control{ margin:.5rem 0; }
  .zoom-control::before{ content:"ขนาดตัวอักษร"; font-size:.78rem; color:#5a6675; margin:0 .4rem 0 .6rem; }
}

/* ---------------------------------------------------------------- นโยบายคุณภาพการบริการ */
.quality-policy{ background:linear-gradient(135deg,#0a2440 0%,#123f6d 55%,#2b8ec4 100%);
                 color:#fff; border-radius:18px; padding:2rem 1.75rem; }
.qp-badge{ display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.16);
           border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:.3rem .9rem;
           font-size:.8rem; font-weight:600; }
.qp-statement{ font-size:1.45rem; font-weight:700; line-height:1.6; margin:1rem 0 0; }
.qp-item{ display:flex; gap:.6rem; align-items:flex-start; background:rgba(255,255,255,.1);
          border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:.8rem 1rem;
          font-size:.9rem; height:100%; }
.qp-item i{ color:#8fd3f4; margin-top:.15rem; flex-shrink:0; }
@media (max-width: 575.98px){ .qp-statement{ font-size:1.15rem; } }

/* ---------------------------------------------------------------- คลังภาพกิจกรรม */
.gallery-filter{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.5rem; }
.gf-chip{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid var(--line);
          border-radius:999px; padding:.4rem 1rem; font-size:.85rem; color:#4b5766; text-decoration:none;
          transition:all .15s ease; }
.gf-chip span{ background:#eef4fb; border-radius:999px; padding:0 .45rem; font-size:.75rem; }
.gf-chip:hover{ border-color:var(--kpd-blue-300,#a8c8ee); color:var(--kpd-blue-600,#1c5fa8); }
.gf-chip.active{ background:var(--kpd-navy-800,#123f6d); border-color:var(--kpd-navy-800,#123f6d); color:#fff; }
.gf-chip.active span{ background:rgba(255,255,255,.22); color:#fff; }

.gallery-item{ display:block; width:100%; padding:0; border:0; background:none; position:relative;
               border-radius:14px; overflow:hidden; aspect-ratio:4/3; cursor:zoom-in;
               text-decoration:none; color:inherit; }
a.gallery-item{ cursor:pointer; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.gallery-item:hover img{ transform:scale(1.06); }
.gi-overlay{ position:absolute; inset:auto 0 0 0; padding:.8rem; text-align:left; color:#fff;
             background:linear-gradient(to top,rgba(10,36,64,.88),rgba(10,36,64,0)); }
.gi-cat{ display:block; font-size:.72rem; opacity:.85; }
.gi-title{ display:block; font-size:.85rem; font-weight:600; line-height:1.35;
           overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }