/*
 * สไตล์กลางของหน้าสาธารณะ (ราคา + หน้าเจาะคำค้น)
 *
 * แยกเป็นไฟล์แทนที่จะฝัง <style> ซ้ำทุกหน้าเหมือน landing.html เพราะตอนนี้มีหลายหน้าแล้ว
 * ฝังซ้ำ = แก้สีปุ่มทีต้องไล่แก้ห้าที่ และเบราว์เซอร์โหลดใหม่ทุกหน้า แคชไม่ได้
 *
 * landing.html ยังใช้ <style> ของตัวเองอยู่ ตั้งใจไม่ไปแตะ — หน้านั้น Google เก็บ index
 * แล้วและทำงานดีอยู่ ไม่มีเหตุผลให้เสี่ยงแก้เพื่อความสวยงามของโครงสร้างโค้ด
 * ค่าที่ใช้ตรงนี้จึงคัดมาให้ตรงกับหน้านั้นเป๊ะ ๆ
 */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans Thai', -apple-system, 'Segoe UI', sans-serif;
  color: #0F172A; background: #fff; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

/* ── หัวเว็บ ── */
header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid #E2E8F0;
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.1rem; text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-link { text-decoration: none; font-weight: 700; font-size: .95rem; color: #334155; padding: 11px 12px; }
.nav-link:hover { color: #EA580C; }
@media (max-width: 480px) { .nav-link { display: none; } }

.btn {
  display: inline-block; padding: 11px 22px; border-radius: 9px;
  font-weight: 700; text-decoration: none; font-size: .95rem; border: 0; cursor: pointer;
}
.btn-primary { background: #EA580C; color: #fff; }
.btn-ghost { border: 1.5px solid #CBD5E1; color: #334155; }

/* ── ส่วนหัวเนื้อหา ── */
.hero { padding: 60px 0 44px; text-align: center; }
.hero h1 { font-size: clamp(1.75rem, 4.2vw, 2.7rem); font-weight: 800; line-height: 1.28; letter-spacing: -.5px; }
.hero h1 span { color: #EA580C; }
.hero p.lead { margin: 18px auto 0; max-width: 680px; font-size: 1.06rem; color: #475569; }
.hero-cta { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

section { padding: 52px 0; }
section.alt { background: #F8FAFC; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; }
h2 { font-size: clamp(1.35rem, 2.8vw, 1.9rem); font-weight: 800; text-align: center; letter-spacing: -.3px; }
.sub { text-align: center; color: #64748B; margin-top: 10px; max-width: 640px; margin-inline: auto; }

.grid { margin-top: 34px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.card { background: #fff; border: 1px solid #E2E8F0; border-radius: 13px; padding: 22px; }
.card h3 { font-size: 1.04rem; font-weight: 700; margin-bottom: 7px; }
.card p { color: #475569; font-size: .94rem; }
.card .ico { font-size: 1.5rem; margin-bottom: 11px; display: block; }

/* ── เนื้อหายาว ── */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { text-align: left; margin-top: 38px; }
.prose h3 { font-size: 1.08rem; font-weight: 700; margin-top: 26px; }
.prose p { margin-top: 12px; color: #334155; }
.prose ul { margin: 12px 0 0 22px; color: #334155; }
.prose li { margin-top: 7px; }
.prose .note {
  margin-top: 18px; padding: 15px 18px; border-radius: 11px;
  background: #FFF7ED; border: 1px solid #FED7AA; color: #7C2D12; font-size: .95rem;
}

/* ── ตารางราคา ── */
/* การ์ดสูงเท่ากันและดันปุ่มลงล่างสุด — ไม่งั้นใบที่ไม่มีป้ายส่วนลดจะมีปุ่มลอยสูงกว่าใบอื่น
   ทำให้สายตาอ่านว่าเป็นคนละชุดกัน */
.plans { margin-top: 38px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.plan { border: 1.5px solid #E2E8F0; border-radius: 15px; padding: 26px 24px; background: #fff; position: relative; display: flex; flex-direction: column; }
.plan.best { border-color: #EA580C; border-width: 2px; box-shadow: 0 8px 26px rgba(234,88,12,.13); }
.plan .tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: #EA580C; color: #fff; font-size: .76rem; font-weight: 700;
  padding: 5px 15px; border-radius: 999px; white-space: nowrap;
}
.plan .term { font-size: 1.06rem; font-weight: 800; }
.plan .price { margin-top: 10px; font-size: 2.15rem; font-weight: 800; letter-spacing: -1px; }
.plan .price small { font-size: 1rem; font-weight: 700; color: #64748B; margin-left: 3px; }
.plan .per { margin-top: 4px; color: #64748B; font-size: .92rem; }
.plan .save { margin-top: 10px; align-self: flex-start; background: #ECFDF5; color: #047857; font-weight: 700; font-size: .82rem; padding: 4px 12px; border-radius: 999px; }
/* margin-top:auto ดันปุ่มลงล่างสุดของการ์ด ปุ่มทุกใบจึงอยู่ระดับเดียวกันแม้เนื้อหาข้างบนไม่เท่ากัน
   (ใบ 3 เดือนไม่มีป้ายส่วนลด) ระยะห่างด้านบนใช้ padding ของตัวห่อ ไม่ใช่ margin-top เพราะ
   margin-top จะไปทับค่า auto */
.plan .cta-wrap { margin-top: auto; padding-top: 22px; }
.plan .cta { display: block; text-align: center; padding-top: 11px; padding-bottom: 11px; }

/* หมายเหตุใต้การ์ดราคา — ต้องอ่านออกแต่ไม่แย่งสายตากับตัวเลขราคา */
.vat-note { margin-top: 16px; text-align: center; color: #64748B; font-size: .88rem; }

.included { margin-top: 40px; }
.included ul { list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); margin-top: 22px; }
.included li { display: flex; gap: 10px; align-items: flex-start; color: #334155; font-size: .95rem; }
.included li::before { content: '✓'; color: #16A34A; font-weight: 800; flex: none; }

/* ── คำถามที่พบบ่อย ── */
.faq { max-width: 760px; margin: 32px auto 0; }
.faq details { border: 1px solid #E2E8F0; border-radius: 11px; padding: 15px 18px; margin-bottom: 11px; background: #fff; }
.faq summary { cursor: pointer; font-weight: 700; font-size: .99rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '▸ '; color: #EA580C; }
.faq details[open] summary::before { content: '▾ '; }
.faq p { margin-top: 10px; color: #475569; font-size: .94rem; }

/* ── ลิงก์ไปหน้าอื่นในเว็บ ── */
.more-links { margin-top: 36px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.more-links a {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid #E2E8F0; border-radius: 12px; padding: 18px 20px;
}
.more-links a:hover { border-color: #EA580C; }
.more-links .t { font-weight: 700; }
.more-links .d { color: #64748B; font-size: .89rem; margin-top: 4px; }

/* ── ท้ายเว็บ ── */
footer { background: #0F172A; color: #94A3B8; padding: 34px 0; font-size: .9rem; margin-top: 10px; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
footer a { color: #E2E8F0; text-decoration: none; font-weight: 600; }
.foot-contact { display: flex; gap: 18px; flex-wrap: wrap; }