/* ═══════════════════════════════════════════════════════════════
   site.css — สไตล์กลางของหน้าเว็บฝั่งลูกค้าทุกหน้า
   (ย้ายมาจาก <style> ในหน้าแรกและหน้าย่อย จะได้แก้ที่เดียวแล้วเปลี่ยนทุกหน้า)
   ═══════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
@media (min-width: 768px) { html { scroll-padding-top: 132px; } }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { -webkit-tap-highlight-color: transparent; }

/* ── ความกว้างเนื้อหา: ยืดตามหน้าต่างเสมอ ──
   .container ของ Tailwind ตั้งไว้ในหน้าให้ไม่มีเพดานจนถึง 1760px
   ค่านี้กันไว้อีกชั้นเผื่อหน้าไหนลืมตั้ง config */
.container { width: 100%; }

/* ── แถบข้อความวิ่ง (marquee) ── */
@keyframes stkMarquee  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes stkMarqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.stk-marquee   { width: max-content; animation: stkMarquee 28s linear infinite; }
.stk-marquee-r { animation-name: stkMarqueeR; }
.stk-marquee:hover, .stk-marquee.is-held { animation-play-state: paused; }

/* ── แผนที่สไตล์แบรนด์ (จอขาวดำ + หมุดแดงเต้น) ── */
.map-mono iframe { filter: grayscale(1) contrast(1.05) brightness(1.03); transform: scale(1.04); pointer-events: none; }
@keyframes mapPing { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
.map-ping { animation: mapPing 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes mapBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.map-pin { animation: mapBob 2.2s ease-in-out infinite; }

/* ── การ์ดรีวิว ── */
.stk-rv { width: 330px; flex-shrink: 0; background: #fff; border: 1px solid #f1f5f9; border-radius: 1.5rem; padding: 1.4rem;
          box-shadow: 0 10px 30px -12px rgba(11, 37, 102, .10); }
@media (min-width: 768px) { .stk-rv { width: 400px; } }
.stk-rv.stk-rv-fluid { width: 100%; }
.stk-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.stk-noscroll::-webkit-scrollbar { display: none; }
.stk-rvwrap { overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
            mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }
@media (max-width: 639px) {
    .stk-rvwrap { -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
                          mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent); }
}

/* ── ทั่วไป ── */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #cdd6e4; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #9fb0cc; background-clip: content-box; }
.card-soft { box-shadow: 0 1px 2px rgba(16,40,90,.04), 0 18px 40px -24px rgba(16,40,90,.18); }
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(16,40,90,.3); }

/* ── แอนิเมชันโผล่ตอนเลื่อนถึง / ตอนเปิดหน้า ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp .7s ease forwards; }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: riseIn .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .5s cubic-bezier(.22,.61,.36,1) both; }

/* ── หัวเรื่องของหน้าย่อย (แถบกรม + จุดประ) ── */
.hero { background: linear-gradient(125deg, #081c4d 0%, #0b2566 40%, #1657d0 100%); }
.hero .dots { position: absolute; inset: 0; opacity: .10; pointer-events: none;
              background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .stk-marquee, .map-ping, .map-pin, .rise, .pop { animation: none; }
    .reveal { opacity: 1; }
    .reveal.in { animation: none; }
    html { scroll-behavior: auto; }
}