/* =====================================================================
   SoftwareThai — layout.css
   ส่วนประกอบที่ "ใช้ร่วมกันทุกหน้า": Header / เมนู / เมนูย่อย / Footer /
   ปุ่มติดต่อลอย / Skip link / ตัวเล่น YouTube

   ✅ แก้ดีไซน์ Header, Footer หรือเมนู → แก้ที่ไฟล์นี้ไฟล์เดียว มีผลทุกหน้า
   ✅ แก้ข้อความ/ลิงก์ในเมนูหรือ Footer → แก้ใน _partials/ แล้วรัน
      node _tools/build-layout.js (ดูวิธีใน _tools/README.md)
   ❌ อย่าเขียนกฎของ .site-header / .nav-* / .dd-* / .site-footer /
      .floating-* ซ้ำใน style.css หรือ <style> ของแต่ละหน้า

   Breakpoint มาตรฐานของเว็บ (ใช้ 3 ค่านี้เท่านั้น)
     มือถือ   : max-width: 767px
     แท็บเล็ต : max-width: 991px   ← เมนูเปลี่ยนเป็นแบบ Drawer
     เดสก์ท็อป: min-width: 992px
   ===================================================================== */

:root{
  --st-blue:#0e7ae6;
  --st-blue-dark:#0759b0;
  --st-blue-soft:#e0f0ff;
  --st-navy:#0f172a;
  --st-ink:#1f2937;
  --st-muted:#475569;
  --st-line:#e5e7eb;
  --st-line-green:#06c755;
  --st-phone-green:#16a34a;

  --st-header-h:64px;
  --st-z-header:1000;
  --st-z-overlay:999;
  --st-z-floating:900;
}

/* ---------- พื้นฐานที่ทุกหน้าต้องเหมือนกัน ---------- */
/* ทุกหน้าโหลดไฟล์นี้ จึงรีเซ็ตขอบ body ที่นี่ (บางหน้าไม่ได้โหลด style.css ทำให้ Header มีขอบ 8px) */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; }

/* ---------- Accessibility helpers ---------- */
.skip-link{
  position:absolute; left:12px; top:-60px;
  z-index:2000; padding:10px 16px; border-radius:10px;
  background:var(--st-navy); color:#fff; font-size:14px; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.floating-contact a:focus-visible{
  outline:3px solid #f59e0b;
  outline-offset:2px;
}

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position:-webkit-sticky; position:sticky; top:0;
  z-index:var(--st-z-header);
  background:#fff;
  border-bottom:1px solid var(--st-line);
  font-family:"Kanit",system-ui,sans-serif;
}
.site-header .container{
  max-width:1200px; margin:0 auto; padding:0 16px; box-sizing:border-box;
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:var(--st-header-h);
}
.nav-left{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand-home-link{ display:inline-flex; align-items:center; text-decoration:none; color:inherit; }
.brand-logos{ display:flex; align-items:center; gap:4px; }
.brand-logos img{ display:block; height:38px; width:auto; }
.brand-text{ display:none; }            /* ไม่ได้ใช้งาน (ข้อความว่าง) */
.nav-right{ display:flex; align-items:center; }

/* ---------- เมนูหลัก (Desktop) ---------- */
.nav-menu{
  display:flex; align-items:center; gap:6px;
  margin:0; padding:0;
}
.nav-menu > a,
.nav-dd > .dd-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px;
  font-size:14.5px; font-weight:500; line-height:1.4;
  color:#374151; text-decoration:none; white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.nav-menu > a:hover,
.nav-dd > .dd-btn:hover,
.nav-dd:hover > .dd-btn,
.nav-dd.open > .dd-btn{
  background:var(--st-blue-soft); color:var(--st-blue);
}
/* หน้าปัจจุบัน (ตั้งค่าอัตโนมัติโดย site.js) */
.nav-menu > a.active,
.nav-menu > a[aria-current="page"],
.nav-dd.is-current > .dd-btn{
  background:var(--st-blue); color:#fff;
}
.caret{ font-size:11px; opacity:.8; transition:transform .18s ease; }
.nav-dd.open > .dd-btn .caret{ transform:rotate(180deg); }

/* ---------- ล็อกตัวอักษรใน Header ให้เหมือนกันทุกหน้า ---------- */
/* ยกเว้นไอคอน <i> (Font Awesome ใช้ฟอนต์ของตัวเอง) */
.site-header, .site-header *:not(i):not(.caret){ font-family:"Kanit",system-ui,sans-serif; letter-spacing:normal; text-transform:none; }
.site-header .nav-menu > a,
.site-header .nav-dd > .dd-btn{ font-size:15px; font-weight:500; line-height:1.4; }
.site-header .dd-link{ font-size:14.5px; font-weight:400; line-height:1.45; }
.site-header .dd-link[aria-current="page"]{ font-weight:600; }
.site-header .nav-menu > a i,
.site-header .nav-dd > .dd-btn > i{ width:16px; font-size:14px; text-align:center; }
.site-header .caret{ font-family:system-ui,sans-serif; }

/* ---------- Dropdown ---------- */
.nav-dd{ position:relative; }
.nav-dd .dd-panel{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:250px; max-width:300px;
  padding:8px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(15,23,42,.16);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
  z-index:2;
}
/* กลุ่มเมนูด้านขวา (ลูกค้า/ติดต่อเรา) ให้เปิดชิดขวา ไม่ล้นจอ */
.nav-dd.align-right .dd-panel,
.nav-menu > .nav-dd:nth-last-of-type(-n+2) .dd-panel{ left:auto; right:0; }
/* สะพานกันเมนูหายระหว่างเลื่อนเมาส์ลงมา */
.nav-dd .dd-panel::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
.nav-dd:hover > .dd-panel,
.nav-dd:focus-within > .dd-panel,
.nav-dd.open > .dd-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition:opacity .16s ease,transform .16s ease;
}
.dd-link{
  position:relative;
  display:flex; align-items:center; gap:10px;
  min-height:40px; padding:7px 10px; border-radius:10px;
  font-size:14px; font-weight:500; color:#334155; text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.dd-link:hover,
.dd-link:focus-visible{ background:#f1f5f9; color:var(--st-blue); }
.dd-link[aria-current="page"]{ background:var(--st-blue-soft); color:var(--st-blue); font-weight:600; }
.dd-ico{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 26px; width:26px; height:26px; border-radius:8px;
  background:rgba(14,165,233,.10); color:var(--st-blue); font-size:13px;
}
img.dd-ico{ object-fit:contain; padding:3px; box-sizing:border-box; }
.dd-ico .dbd-logo{ width:18px; height:18px; object-fit:contain; }
.dd-text{ flex:1 1 auto; }

/* ---------- เมนูย่อยชั้นที่ 2 (ประเภทธุรกิจ / อื่นๆ) ---------- */
.dd-sub{ position:relative; }
.dd-sub-btn{ padding-right:34px; }
.dd-arrow{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:11px; opacity:.6; transition:transform .18s ease;
}
.dd-sub-panel{
  position:absolute; top:-8px; left:calc(100% + 6px);
  width:260px; padding:8px;
  background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:14px;
  box-shadow:0 18px 44px rgba(15,23,42,.16);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
  max-height:calc(100vh - 120px); overflow-y:auto;
}
/* สะพานเมาส์ด้านซ้าย */
.dd-sub-panel::before{ content:""; position:absolute; top:0; bottom:0; left:-10px; width:10px; }
/* เปิดไปทางซ้ายเมื่อพื้นที่ด้านขวาไม่พอ (site.js ใส่ class ให้อัตโนมัติ
   และกำหนดไว้ล่วงหน้าสำหรับ 2 กลุ่มเมนูขวาสุด) */
.dd-sub.flip-left > .dd-sub-panel,
.nav-menu > .nav-dd:nth-last-of-type(-n+2) .dd-sub-panel{
  left:auto; right:calc(100% + 6px); transform:translateX(6px);
}
.dd-sub.flip-left > .dd-sub-panel::before,
.nav-menu > .nav-dd:nth-last-of-type(-n+2) .dd-sub-panel::before{ left:auto; right:-10px; }
.dd-sub.flip-right > .dd-sub-panel{ left:calc(100% + 6px); right:auto; transform:translateX(-6px); }
.dd-sub.flip-right > .dd-sub-panel::before{ left:-10px; right:auto; }

.dd-sub:hover > .dd-sub-panel,
.dd-sub:focus-within > .dd-sub-panel,
.dd-sub.open > .dd-sub-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0);
  transition:opacity .16s ease,transform .16s ease;
}
.dd-sub-panel .dd-link{ white-space:nowrap; }

/* ---------- ปุ่ม Hamburger ---------- */
.nav-toggle{
  display:none;
  width:42px; height:42px; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border:1px solid rgba(14,122,230,.22); border-radius:12px;
  background:#fff; cursor:pointer;
  box-shadow:0 6px 16px rgba(2,6,23,.08);
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{
  display:block; width:20px; height:2px; border-radius:2px; background:#0b3a66;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-overlay{ display:none; }
.nav-drawer-head{ display:none; }

/* =====================================================================
   แท็บเล็ต + มือถือ (≤ 991px) — เมนูแบบ Drawer เลื่อนจากซ้าย
   ===================================================================== */
@media (max-width:991px){
  /* Header มือถือ/แท็บเล็ต: ปุ่มเมนูอยู่แถวเดียวกับโลโก้ ความสูงรวม 56px */
  :root{ --st-header-h:56px; }

  .navbar{ position:relative; justify-content:center; min-height:var(--st-header-h); }
  .nav-left{ margin:0 auto; }
  .brand-logos img{ height:30px; }

  /* ห้ามใช้ transform กับ .nav-right เพราะ Drawer (position:fixed) อยู่ข้างใน */
  .nav-right{ position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; }
  .nav-toggle{ display:inline-flex; width:40px; height:40px; border-radius:11px; }

  .nav-menu{
    position:fixed; top:0; left:0; bottom:0;
    width:min(86vw,360px);
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    padding:12px 14px 28px;
    background:#fff;
    box-shadow:18px 0 60px rgba(2,6,23,.22);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    transform:translateX(-105%); visibility:hidden;
    transition:transform .28s ease,visibility 0s linear .28s;
    z-index:2;
  }
  .nav-menu.open{
    transform:translateX(0); visibility:visible;
    transition:transform .28s ease;
  }
  .nav-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:4px 2px 12px; margin-bottom:6px; border-bottom:1px solid var(--st-line);
  }
  .nav-drawer-head img{ height:30px; width:auto; }
  .nav-drawer-close{
    width:38px; height:38px; border:0; border-radius:10px;
    background:#f1f5f9; color:#0f172a; font-size:18px; cursor:pointer;
  }

  .nav-menu > a,
  .nav-dd > .dd-btn{
    display:flex; width:100%; box-sizing:border-box;
    min-height:46px; padding:10px 12px; border-radius:12px;
    font-size:15px; font-weight:600; color:#0f172a;
  }
  .nav-dd > .dd-btn .caret{ margin-left:auto; }
  .nav-dd:hover > .dd-btn{ background:transparent; color:#0f172a; }
  .nav-dd.open > .dd-btn{ background:var(--st-blue-soft); color:var(--st-blue); }

  .nav-dd .dd-panel,
  .nav-menu > .nav-dd:nth-last-of-type(-n+2) .dd-panel{
    position:static; display:none;
    min-width:0; max-width:none; margin:4px 0 6px;
    padding:6px; border-radius:12px;
    background:#f8fafc; border:1px solid rgba(15,23,42,.06); box-shadow:none;
    opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:none;
  }
  .nav-dd .dd-panel::before{ display:none; }
  .nav-menu .nav-dd:hover > .dd-panel,
  .nav-menu .nav-dd:focus-within > .dd-panel{ display:none; }
  .nav-menu .nav-dd.open > .dd-panel{ display:block; }

  .dd-link{ min-height:44px; }

  .dd-sub-panel,
  .dd-sub.flip-left > .dd-sub-panel,
  .nav-menu > .nav-dd:nth-last-of-type(-n+2) .dd-sub-panel{
    position:static; display:none; width:auto; max-height:none;
    margin:2px 0 4px; padding:4px 0 4px 14px;
    background:transparent; border:0; border-left:2px solid #dbeafe; border-radius:0;
    box-shadow:none; opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:none;
  }
  .dd-sub-panel::before{ display:none; }
  .nav-menu .dd-sub:hover > .dd-sub-panel,
  .nav-menu .dd-sub:focus-within > .dd-sub-panel{ display:none; }
  .nav-menu .dd-sub.open > .dd-sub-panel{ display:block; }
  .dd-sub.open .dd-arrow{ transform:translateY(-50%) rotate(90deg); }
  .dd-sub-panel .dd-link{ white-space:normal; }

  .nav-overlay{
    display:block; position:fixed; inset:0;
    background:rgba(15,23,42,.45);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease,visibility 0s linear .25s;
    z-index:var(--st-z-overlay);
  }
  .nav-overlay.show{ opacity:1; visibility:visible; transition:opacity .25s ease; }

  body.nav-lock{ overflow:hidden; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ font-family:"Kanit",system-ui,sans-serif; }
.footer-top{ background:var(--st-navy); color:#e5e7eb; font-size:14px; }
.footer-top-inner{
  max-width:1200px; margin:0 auto; box-sizing:border-box;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 32px; padding:12px 16px;
}
.footer-top-inner span,
.footer-top-inner a{ display:inline-flex; align-items:center; gap:8px; color:#e5e7eb; text-decoration:none; line-height:1.7; }
.footer-top-inner a:hover{ color:#fff; text-decoration:underline; }
.footer-top i{ color:#7cc4ff; }

/* แถวลิงก์ยอดนิยม (ช่วย SEO + ลูกค้าหาหน้าที่ต้องการเร็วขึ้น) */
.footer-seo{ background:#f8fafc; border-top:1px solid var(--st-line); font-size:13px; }
.footer-seo-inner{
  max-width:1200px; margin:0 auto; box-sizing:border-box;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:10px 16px 0;
}
.footer-seo-inner:last-child{ padding-bottom:12px; }
.footer-seo-title{ font-weight:600; color:#0f172a; margin-right:4px; }
.footer-seo a{ color:var(--st-muted); text-decoration:none; }
.footer-seo a:hover{ color:var(--st-blue); text-decoration:underline; }
@media (max-width:767px){
  .footer-seo-inner{ justify-content:center; text-align:center; padding:12px 14px 0; }
  .footer-seo-title{ width:100%; margin:0; }
}
.footer-bottom{ background:#fff; color:var(--st-muted); font-size:13px; border-top:1px solid var(--st-line); }
.footer-bottom-inner{
  max-width:1200px; margin:0 auto; box-sizing:border-box;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:18px; padding:16px;
}
.footer-brand{ display:flex; align-items:center; gap:6px; }
.footer-brand img{ height:52px; width:auto; display:block; }
.footer-dbd{ display:flex; justify-content:center; }
.footer-dbd img{ display:block; height:56px; width:auto; }
.footer-copy{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; color:#fff; font-size:16px;
  text-decoration:none; box-shadow:0 8px 18px rgba(2,6,23,.12);
  transition:transform .15s ease;
}
.footer-social a:hover{ transform:translateY(-2px); }
.footer-social .fb{ background:#1877f2; }
.footer-social .line{ background:#06a547; }
.footer-social .yt{ background:#e00000; }
.footer-social .ig{ background:#111827; }
.footer-social .mail{ background:#2563eb; }
.visit-counter{ font-size:13px; color:var(--st-muted); }
.visit-counter b{ color:var(--st-blue); font-weight:600; }
.visit-counter[hidden]{ display:none; }
.copyright{ font-size:13px; color:var(--st-muted); }
.footer-links{ display:flex; gap:14px; font-size:13px; }
.footer-links a{ color:var(--st-muted); text-decoration:underline; text-underline-offset:2px; }
.footer-links a:hover{ color:var(--st-blue); }

@media (max-width:767px){
  .footer-top-inner{ flex-direction:column; gap:8px; padding:14px; }
  .footer-top-inner span,
  .footer-top-inner a{
    width:100%; justify-content:center; box-sizing:border-box;
    padding:10px 12px; border-radius:12px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  }
  .footer-bottom-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; padding:18px 14px; }
  .footer-brand img{ height:40px; }
  .footer-copy{ align-items:center; }
  .footer-social a{ width:40px; height:40px; font-size:18px; }
}

/* =====================================================================
   ปุ่มติดต่อลอย
   Desktop/แท็บเล็ต : ปุ่มกลมด้านขวา 4 ปุ่ม
   มือถือ          : แถบล่าง 2 ปุ่ม (LINE / โทร) ไม่บังเนื้อหา
   ===================================================================== */
.floating-contact{
  position:fixed; right:18px; bottom:24px;
  display:flex; flex-direction:column; gap:10px;
  z-index:var(--st-z-floating);
}
.floating-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:999px;
  color:#fff; font-size:20px; text-decoration:none;
  box-shadow:0 8px 18px rgba(15,23,42,.30);
  transition:transform .15s ease,box-shadow .15s ease;
}
.floating-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(15,23,42,.34); }
.floating-btn-phone{ background:var(--st-phone-green); }
.floating-btn-line{ background:var(--st-line-green); }
.floating-btn-youtube{ background:#e00000; }
.floating-btn-quote{ display:none; background:#0e7ae6; }
.floating-btn-facebook{ background:#1877f2; }
.fc-label{
  position:absolute; right:56px; top:50%; transform:translateY(-50%);
  padding:5px 10px; border-radius:8px; white-space:nowrap;
  background:var(--st-navy); color:#fff; font-size:13px; font-family:"Kanit",sans-serif;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.floating-btn:hover .fc-label,
.floating-btn:focus-visible .fc-label{ opacity:1; }
body.nav-lock .floating-contact{ display:none; }
@media (min-width:768px){
  .floating-contact{ transition:opacity .2s ease,transform .2s ease; }
  body.footer-in-view .floating-contact{ opacity:0; transform:translateX(20px); pointer-events:none; }
}

@media (max-width:767px){
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .floating-contact{
    left:0; right:0; bottom:0;
    flex-direction:row; gap:8px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    border-top:1px solid var(--st-line);
    box-shadow:0 -6px 20px rgba(2,6,23,.08);
    -webkit-backdrop-filter:saturate(1.2) blur(6px); backdrop-filter:saturate(1.2) blur(6px);
  }
  .floating-btn{
    flex:1 1 0; width:auto; height:46px; border-radius:12px;
    gap:8px; font-size:18px; box-shadow:none;
  }
  .floating-btn:hover{ transform:none; box-shadow:none; }
  .floating-btn-youtube,
  .floating-btn-facebook{ display:none; }
  .floating-btn-quote{ display:inline-flex; }
  .fc-label{
    position:static; transform:none; opacity:1; padding:0; background:none;
    font-size:15px; font-weight:600; color:#fff;
  }
}

/* =====================================================================
   ตัวเล่น YouTube แบบเบา (.yt-lite) และวิดีโอที่ยังไม่มีไฟล์
   ใช้: <div class="yt-lite" data-youtube="ลิงก์ YouTube" data-title="ชื่อคลิป"></div>
   ===================================================================== */
.yt-lite{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  overflow:hidden; border-radius:16px; background:#0f172a center/cover no-repeat;
  cursor:pointer;
}
.yt-lite.is-short{ aspect-ratio:9/16; max-width:380px; margin-inline:auto; }
.yt-lite::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35));
}
.yt-lite-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:1; width:72px; height:50px; border:0; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:#e00000; color:#fff; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition:background .15s ease, transform .15s ease;
}
/* สามเหลี่ยมปุ่มเล่น (วาดด้วย CSS ไม่ต้องพึ่งไอคอน จึงอยู่กึ่งกลางเสมอ) */
.yt-lite-play::before{
  content:""; display:block; width:0; height:0; margin-left:4px;
  border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}
.yt-lite-play i{ display:none; }
.yt-lite:hover .yt-lite-play{ background:#c00000; transform:translate(-50%,-50%) scale(1.06); }
.yt-lite iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-lite.is-playing::after{ display:none; }

.yt-local-note{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:16px; text-align:center; background:rgba(15,23,42,.88); color:#fff; font-family:"Kanit",sans-serif; font-size:14px;
}
.yt-local-note strong{ font-size:16px; }
.yt-local-note span{ opacity:.85; line-height:1.5; }
.yt-local-note a{ margin-top:4px; padding:8px 16px; border-radius:999px; background:#e00000; color:#fff; text-decoration:none; font-weight:600; }
.st-video-yt .yt-local-note, .customer-reel-yt.yt-local-note{ position:relative; min-height:260px; }

.media-pending{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%; aspect-ratio:16/9; border-radius:16px; text-align:center;
  background:linear-gradient(135deg,#eaf4ff,#f8fbff); color:#0b3a66;
  border:1px dashed #9cc8f3; font-family:"Kanit",sans-serif; padding:16px; box-sizing:border-box;
}
.media-pending i{ font-size:34px; color:var(--st-blue); }
.media-pending a{ color:var(--st-blue); font-weight:600; }

img.img-missing{
  background:#eef4fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/48px no-repeat;
  min-height:120px; object-position:-9999px 0;
}

/* ---------- ฟอร์มติดต่อ: ข้อความสถานะ ---------- */
.form-status{ margin-top:12px; padding:10px 14px; border-radius:10px; font-size:14px; display:none; }
.form-status.is-ok{ display:block; background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.form-status.is-error{ display:block; background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.form-status.is-info{ display:block; background:#eff6ff; color:#1e3a8a; border:1px solid #bfdbfe; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ปุ่มเปิดเมนูย่อยชั้นที่ 2 เป็น <button> */
button.dd-link{
  width:100%; border:0; background:none; font:inherit; text-align:left; cursor:pointer;
}

/* ---------- ส่วน "คุณอาจสนใจ" ท้ายหน้า (สร้างจาก _partials/pages.json) ---------- */
.related-pages{
  background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);
  border-top:1px solid var(--st-line);
  padding:56px 16px 64px;
  font-family:"Kanit",system-ui,sans-serif;
}
.rp-head{ max-width:1160px; margin:0 auto 28px; text-align:center; }
.rp-kicker{
  display:inline-block; padding:4px 14px; border-radius:999px;
  background:var(--st-blue-soft); color:var(--st-blue-dark);
  font-size:13px; font-weight:500; letter-spacing:.02em;
}
.rp-head h2{ margin:10px 0 6px; font-size:clamp(24px,3vw,32px); font-weight:600; color:var(--st-navy); line-height:1.3; }
.rp-head p{ margin:0; color:var(--st-muted); font-size:15px; }
.rp-grid{
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
}
.rp-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--st-line); border-radius:18px;
  color:inherit; text-decoration:none;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rp-card:hover,.rp-card:focus-visible{
  transform:translateY(-4px); border-color:#bfdcff;
  box-shadow:0 14px 30px rgba(14,122,230,.16);
}
.rp-card:focus-visible{ outline:3px solid var(--st-blue); outline-offset:2px; }
.rp-img{ display:block; aspect-ratio:16/9; overflow:hidden; background:#f1f5f9; }
.rp-img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.rp-img.rp-contain{ background:linear-gradient(135deg,#f8fafc,#e8f2ff); }
.rp-img.rp-contain img{ object-fit:contain; padding:14px; }
.rp-card:hover .rp-img img{ transform:scale(1.04); }
.rp-body{ display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; flex:1; }
.rp-tag{ align-self:flex-start; font-size:12px; font-weight:500; color:var(--st-blue-dark); background:var(--st-blue-soft); padding:2px 10px; border-radius:999px; }
.rp-title{ font-size:18px; font-weight:600; color:var(--st-navy); line-height:1.4; }
.rp-desc{ font-size:14.5px; color:var(--st-muted); line-height:1.55; flex:1; }
.rp-more{ margin-top:6px; font-size:14.5px; font-weight:500; color:var(--st-blue); }
.rp-more i{ margin-left:4px; font-size:12px; transition:transform .2s ease; }
.rp-card:hover .rp-more i{ transform:translateX(4px); }
@media (max-width:991px){
  .rp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .related-pages{ padding:40px 16px 48px; }
  .rp-grid{ grid-template-columns:1fr; gap:16px; }
  .rp-card{ flex-direction:row; }
  .rp-img{ flex:0 0 38%; aspect-ratio:auto; min-height:120px; }
  .rp-body{ padding:12px 14px; }
  .rp-title{ font-size:16px; }
  .rp-desc{ font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce){
  .rp-card,.rp-img img,.rp-more i{ transition:none; }
}

/* =====================================================================
   ป้ายรีวิว Google (Footer + หน้าแรก)
   ตัวเลขรีวิวพิมพ์ไว้ตายตัว — เมื่อรีวิวเพิ่ม ให้แก้ที่ _partials/footer.html และ index.html
   ===================================================================== */
.footer-greview b{ color:#fff; }
.gr-stars{ color:#fbbf24; letter-spacing:1px; font-size:13px; }
.g-review-badge{
  display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:8px 16px 8px 10px;
  background:#fff; border:1px solid #e2ebf5; border-radius:999px; box-shadow:0 8px 20px rgba(8,48,86,.08);
  color:#0b1f33; text-decoration:none; font-size:14.5px; transition:transform .2s, box-shadow .2s;
}
.g-review-badge:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(8,48,86,.14); }
.g-review-badge .g-logo{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0); color:#fff; font-size:14px;
}
.g-review-badge .g-logo i{ background:#fff; color:#4285f4; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; }
.g-review-badge strong{ font-size:17px; }
.g-review-badge .gr-stars{ font-size:15px; }
.g-review-badge span.g-muted{ color:#64748b; }

/* =====================================================================
   แถบแจ้งคุกกี้ (PDPA) — สคริปต์อยู่ใน site.js ส่วนที่ 10
   ===================================================================== */
.cookie-bar{
  position:fixed; left:18px; bottom:18px; z-index:calc(var(--st-z-floating) + 1);
  width:min(440px,calc(100% - 36px)); padding:18px 20px; border-radius:18px;
  background:#fff; color:#334155; border:1px solid #e2ebf5; box-shadow:0 18px 50px rgba(2,6,23,.18);
  font-family:"Kanit",sans-serif; font-size:14.5px; line-height:1.65;
  transform:translateY(16px); opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.cookie-bar.show{ transform:none; opacity:1; }
.cookie-bar[hidden]{ display:none; }
.cookie-bar h2{ margin:0 0 4px; font-size:16.5px; color:#0b1f33; display:flex; align-items:center; gap:8px; }
.cookie-bar h2 i{ color:#f59e0b; }
.cookie-bar p{ margin:0 0 12px; }
.cookie-bar a{ color:#0759b0; }
.cookie-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cookie-actions button{
  flex:1 1 auto; padding:10px 14px; border-radius:12px; font:inherit; font-weight:600; cursor:pointer;
  border:1px solid #cfdcea; background:#fff; color:#0b1f33; transition:background .2s, border-color .2s;
}
.cookie-actions button:hover{ background:#f1f6fb; }
.cookie-actions .cookie-accept{ background:#0e7ae6; border-color:#0e7ae6; color:#fff; }
.cookie-actions .cookie-accept:hover{ background:#0759b0; }
.cookie-settings-link{
  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.footer-links .cookie-settings-link{ color:inherit; opacity:.9; }
@media (max-width:767px){
  .cookie-bar{ left:10px; right:10px; width:auto; bottom:calc(74px + env(safe-area-inset-bottom)); padding:16px; font-size:14px; }
}