:root{
  /* ===== CI: PrimePartners Funding — สีดูดจากโลโก้ต้นฉบับ ===== */
  --navy:#17285A;      /* น้ำเงินเข้ม — ตัว P ในโลโก้ */
  --navy-2:#14224E;
  --blue:#1A6199;      /* ฟ้าแบรนด์หลัก — ลูกศรในโลโก้ */
  --blue-d:#123F6B;
  --blue-m:#3E86C4;
  --blue-l:#D3E4F5;
  --blue-xl:#DCEBFA;
  --gold:#C08A28;      /* ทอง — เจดีย์ + ตัว P ทอง */
  --gold-l:#D3A850;
  --gold-d:#96691A;
  --silver:#D7D7D8;    /* เงิน — วงแหวนโลโก้ */
  --red:#dc2626;
  --ink:#242A33;
  --muted:#4B5563;
  --line:#D2E1F0;
  --white:#fff;
  --radius:14px;
  --shadow:0 6px 24px rgba(53,72,92,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Anuphan',sans-serif;color:var(--ink);background:var(--blue-xl);line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:800;font-size:1rem;border:none;border-radius:10px;padding:14px 26px;cursor:pointer;user-select:none;
transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease}
.btn:focus-visible{outline:3px solid rgba(22,119,200,.45);outline-offset:2px}
section{padding:64px 0}
h2.sec-title{font-size:1.75rem;font-weight:800;color:var(--navy);text-align:center;margin-bottom:8px}
.sec-sub{text-align:center;color:var(--muted);margin-bottom:36px}


/* ══════════ ระบบปุ่ม — เงินฟ้า นูนสามมิติ ══════════ */
/* ทุกปุ่มที่กดได้ใช้หน้าตาเดียวกัน นูนขึ้นมา กดแล้วยุบลง */
.btn-primary,.btn-card,.btn-ghost,.btn-outline,.pain-strip .btn,.cta-act .btn{
background:linear-gradient(180deg,#ffffff 0%,#F7FBFF 38%,#D3E4F5 70%,#DCEBFA 100%);
color:var(--blue-d);border:1.5px solid #aebecd;border-bottom-color:#7f909f;font-weight:800;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(111,150,179,.22),
0 3px 0 #bccada, 0 6px 14px rgba(53,72,92,.15)}
.btn-primary:hover,.btn-card:hover,.btn-ghost:hover,.btn-outline:hover,.pain-strip .btn:hover,.cta-act .btn:hover{
background:linear-gradient(180deg,#ffffff 0%,#DCEBFA 40%,#CFE2F4 72%,#DCEBFA 100%);
border-color:var(--blue);border-bottom-color:var(--blue-d);transform:translateY(-1px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(18,63,107,.22),
0 4px 0 #adbccb, 0 9px 20px rgba(26,97,153,.26)}
.btn-primary:active,.btn-card:active,.btn-ghost:active,.btn-outline:active,.pain-strip .btn:active,.cta-act .btn:active{
transform:translateY(3px);
box-shadow:inset 0 2px 4px rgba(111,150,179,.35), 0 0 0 #bccada, 0 2px 5px rgba(53,72,92,.14)}
.btn-primary:disabled{opacity:.55;cursor:default;transform:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 #ccd6e0}

/* Header */
header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,#ffffff 0%,#DCEBFA 55%,#D3E4F5 100%);border-bottom:2px solid var(--blue);box-shadow:inset 0 -1px 0 rgba(255,255,255,.8), 0 2px 10px rgba(53,72,92,.07);}
.nav{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#f7f9fb 0%,#dde5ec 38%,#aab7c4 72%,#eef2f6 100%);color:#242A33;border:1px solid #97a6b5;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(53,72,92,.18);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem}
.brand .name{font-weight:800;color:var(--blue-d);font-size:1.02rem;line-height:1.25}
.brand .tag{font-size:.72rem;color:var(--muted);font-weight:500}
.nav-links{display:flex;gap:6px;margin-left:auto;font-weight:700;font-size:.85rem;color:var(--blue-d)}
.nav-links a{padding:5px 11px;border-radius:999px;white-space:nowrap;border:1.5px solid transparent;transition:.16s}
.nav-links a:hover{background:linear-gradient(180deg,#ffffff,#DCEBFA);border-color:#aebecd;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 #ccd8e4}
.nav-links a.active{background:linear-gradient(180deg,#ffffff,#D3E4F5);border-color:var(--blue);color:var(--blue-d);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 0 #bcc9d6}
.nav-phone{display:flex;align-items:center;gap:8px;color:var(--blue-d);font-weight:800;font-size:1.02rem;white-space:nowrap}

/* ปุ่มขีดสามขีด — โผล่เฉพาะจอมือถือ (ดู @media(max-width:700px) ด้านล่าง) */
.nav-burger{display:none;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:5px;
padding:0;cursor:pointer;border-radius:10px;border:1.5px solid #aebecd;
background:linear-gradient(180deg,#ffffff,#DCEBFA);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 #ccd8e4}
.nav-burger:focus-visible{outline:3px solid rgba(22,119,200,.45);outline-offset:2px}
.nav-burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--blue-d);transition:transform .2s ease,opacity .2s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Page hero */
.page-hero{background:linear-gradient(120deg,var(--blue-l),var(--blue-xl));border-bottom:1px solid var(--line);color:var(--ink);padding:64px 0}
.page-hero h1{font-size:2.2rem;font-weight:800;color:var(--navy);margin-bottom:10px}
.page-hero p{color:var(--muted);font-size:1.08rem;max-width:640px}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.crumb a:hover{color:var(--blue)}

/* Story */
.story-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.story-grid .ph{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.story-grid .ph img{width:100%;height:100%;object-fit:cover}
.story-grid h2{font-size:1.6rem;font-weight:800;color:var(--navy);margin-bottom:14px}
.story-grid p{color:var(--ink);margin-bottom:14px}
.story-grid p.mut{color:var(--muted)}

/* Values */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.val{border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px;text-align:center;box-shadow:var(--shadow);background:#fff}
.val .v-ic{width:60px;height:60px;border-radius:50%;background:var(--blue-l);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.val h4{font-weight:800;color:var(--navy);font-size:1.02rem;margin-bottom:6px}
.val p{color:var(--muted);font-size:.88rem}

/* Why us */
.why-wrap{background:var(--blue-xl);border-radius:20px;padding:48px 40px}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;max-width:940px;margin:0 auto}
.why-item{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow)}
.why-item .w-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--blue-l);display:flex;align-items:center;justify-content:center}
.why-item h5{font-weight:800;color:var(--navy);font-size:.98rem}
.why-item p{color:var(--muted);font-size:.88rem}

/* How we work strip */
.hw{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hw .hw-item{border-left:3px solid var(--blue);padding:4px 0 4px 18px}
.hw h4{font-weight:800;color:var(--navy);font-size:1rem;margin-bottom:4px}
.hw p{color:var(--muted);font-size:.9rem}

/* CTA banner */
.cta-band{background:linear-gradient(135deg,#ffffff 0%,var(--blue-l) 58%,#ffffff 100%);border:1.5px solid var(--blue);border-radius:20px;color:var(--ink);padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band h3{color:var(--blue-d);font-size:1.5rem;font-weight:800;margin-bottom:6px}
.cta-band p{color:var(--muted)}
.cta-band .btns{display:flex;gap:12px;flex-wrap:wrap}

/* Footer */
footer{background:linear-gradient(180deg,#ffffff 0%,var(--blue-xl) 100%);border-top:1.5px solid var(--blue);color:var(--muted);padding:56px 0 28px;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:36px}
.foot-brand .logo-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-brand .nm{color:var(--navy);font-weight:800}
.foot-brand .tg{font-size:.72rem;color:var(--muted)}
footer h5{color:var(--blue-d);font-weight:800;font-size:.95rem;margin-bottom:14px}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a:hover{color:var(--blue-d)}
.foot-contact li{display:flex;gap:10px;align-items:flex-start}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:34px;height:34px;border-radius:50%;background:var(--blue-l);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue-d);font-weight:800;font-size:.8rem}
.socials a:hover{background:var(--blue);color:#fff}
.foot-bottom{border-top:1px solid var(--line);padding-top:20px;text-align:center;color:var(--muted);font-size:.8rem}

/* Floating LINE */

/* Motion */
header{transition:box-shadow .3s}
header.scrolled{box-shadow:0 4px 18px rgba(53,72,92,.1)}
.val,.why-item{transition:transform .25s ease,box-shadow .25s ease}
.val:hover,.why-item:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(53,72,92,.13)}
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .rv.in{opacity:1;transform:translateY(0)}
}

/* Responsive */
@media(max-width:960px){
  .nav{height:auto;gap:12px;padding-top:10px;padding-bottom:10px}
  .nav-links{gap:5px}
  .nav-links a{font-size:.78rem;padding:5px 9px}
.nav-links.open a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:1rem}
.nav-links.open a:last-child{border-bottom:none}
    .story-grid{grid-template-columns:1fr}
  .vals{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr}
  .hw{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* ===== มือถือ: ปรับให้อ่านง่าย ===== */
@media(max-width:700px){
  /* จอมือถือ — พับแถบเมนูไว้หลังปุ่มขีดสามขีด กดแล้วกางลงมาใต้แถบหัว */
  .nav{flex-wrap:wrap}
  .nav-burger{display:flex}
  .nav-burger{margin-left:auto}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;gap:0;order:9;width:100%;
  margin-left:0;font-size:1rem;border-top:1px solid var(--line);padding-bottom:6px}
  /* ในเมนูที่กางออก ปุ่มเป็นแถบสี่เหลี่ยมเต็มแถว ไม่ใช่แคปซูล */
  .nav-links.open a{border-radius:8px;padding:13px 10px}
  body{font-size:16px;line-height:1.65}
  .container{padding:0 18px}
  section{padding:44px 0}
  h2.sec-title{font-size:1.38rem;line-height:1.4}
  .sec-sub{font-size:.95rem;margin-bottom:26px}

  .nav{min-height:64px;height:auto;gap:10px}
  .brand .logo{width:38px;height:38px;font-size:.95rem}
  .brand .name{font-size:.92rem}
  .brand .tag{display:none}
  .nav-phone{font-size:.92rem;gap:6px}

  .page-hero{padding:40px 0}
  .page-hero h1{font-size:1.7rem}
  .page-hero p{font-size:.98rem}

  .story-grid{gap:26px}
  .story-grid h2{font-size:1.32rem}
  .story-grid p{font-size:.95rem}

  .vals{grid-template-columns:1fr;gap:14px}
  .val{padding:22px 18px;text-align:left;display:grid;grid-template-columns:52px 1fr;column-gap:14px}
  .val .v-ic{width:44px;height:44px;margin:0;grid-row:1/3}
  .val h4{grid-column:2;margin-bottom:4px}
  .val p{grid-column:2;font-size:.92rem}

  .why-wrap{padding:28px 18px;border-radius:16px}
  .why-item{padding:16px 16px;gap:12px}
  .why-item p{font-size:.9rem}

  .hw{gap:18px}
  .hw p{font-size:.92rem}

  .cta-band{padding:28px 20px;border-radius:16px;text-align:center;justify-content:center}
  .cta-band h3{color:var(--blue-d);font-size:1.22rem;line-height:1.4}
  .cta-band p{font-size:.95rem}
  .cta-band .btns{width:100%;flex-direction:column;gap:10px}
  .cta-band .btn{width:auto;justify-content:center}

  footer{padding:44px 0 24px}
  .foot-grid{grid-template-columns:1fr;gap:28px;margin-bottom:28px}
  footer li{margin-bottom:11px}
  .foot-contact li{line-height:1.55}
}
@media(max-width:560px){
  .vals{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
/* กันแถบหัวเว็บบังหัวข้อ เวลากดเมนูกระโดดไปหมวดในหน้า */
/* ═══ ปุ่มหลัก — ฟ้าเงิน ขอบนูนสามมิติ กดแล้วยุบลง ═══ */
.btn-primary,.btn-card,.pain-strip .btn,.cta-act .btn{
color:#17285A;
background:linear-gradient(180deg,#FFFFFF 0%,#DCEBFA 38%,#C9DFF1 72%,#E6F1FA 100%);
border:1px solid #9FBDD6;
text-shadow:0 1px 0 rgba(255,255,255,.9);
box-shadow:
 inset 0 1px 0 rgba(255,255,255,1),
 inset 1px 0 0 rgba(255,255,255,.75),
 inset -1px 0 0 rgba(126,163,193,.55),
 inset 0 -2px 0 rgba(110,150,182,.42),
 0 3px 0 #A6C2DB,
 0 4px 1px rgba(83,120,150,.35),
 0 8px 18px rgba(53,72,92,.16)}
.btn-primary:hover,.btn-card:hover,.pain-strip .btn:hover,.cta-act .btn:hover{
color:#17285A;
background:linear-gradient(180deg,#FFFFFF 0%,#F2F9FE 38%,#BCD8EE 72%,#E0EDF8 100%);
border-color:#7FA9C9;
transform:translateY(-1px);
box-shadow:
 inset 0 1px 0 rgba(255,255,255,1),
 inset 1px 0 0 rgba(255,255,255,.8),
 inset -1px 0 0 rgba(112,152,185,.6),
 inset 0 -2px 0 rgba(96,139,175,.48),
 0 4px 0 #94B5D2,
 0 5px 1px rgba(70,108,140,.4),
 0 11px 24px rgba(26,97,153,.26)}
.btn-primary:active,.btn-card:active,.pain-strip .btn:active,.cta-act .btn:active{
transform:translateY(3px);
box-shadow:
 inset 0 2px 5px rgba(83,120,150,.45),
 inset 0 -1px 0 rgba(255,255,255,.6),
 0 0 0 #A6C2DB,
 0 1px 3px rgba(53,72,92,.2)}
[id]{scroll-margin-top:92px}

/* ===== โลโก้ PrimePartners + เส้นทองตาม CI ===== */
.pp-mark{width:44px;height:44px;flex:0 0 44px;display:block}
.foot-brand .pp-mark,.logo-row .pp-mark{width:40px;height:40px;flex:0 0 40px}
.brand .name,.foot-brand .nm{display:inline-block;padding-bottom:3px;
  border-bottom:2px solid var(--gold);}
@media(max-width:640px){.pp-mark{width:38px;height:38px;flex:0 0 38px}}


/* ══════════ ปุ่ม LINE OA — PrimePartners Funding ══════════ */
.pp-line-btn{display:inline-flex;align-items:center;gap:7px;background:#06C755;color:#fff;
  font-weight:800;border-radius:999px;text-decoration:none;white-space:nowrap;line-height:1.4;
  box-shadow:0 2px 8px rgba(6,199,85,.30);transition:filter .15s ease,transform .15s ease}
.pp-line-btn:hover{filter:brightness(1.07);transform:translateY(-1px);color:#fff}
.pp-line-btn:focus-visible{outline:3px solid #123F6B;outline-offset:2px}
.pp-line-btn svg{fill:currentColor;flex:none}
.nav-line{margin-left:12px;padding:8px 15px;font-size:.97rem}
.nav-line svg{width:19px;height:19px}
@media(max-width:900px){.nav-line{padding:8px 11px;margin-left:8px}.nav-line b{display:none}}
@media(max-width:700px){.nav-line{display:none}}
/* ปุ่มลอยมุมขวาล่าง — เฉพาะมือถือ */
.pp-line-float{position:fixed;right:16px;bottom:18px;z-index:900;display:none;
  padding:12px 19px;font-size:1rem;box-shadow:0 6px 20px rgba(6,199,85,.45)}
.pp-line-float svg{width:22px;height:22px}
@media(max-width:700px){.pp-line-float{display:inline-flex}}
/* ปุ่ม LINE ในหน้าขอบคุณ */
.ty-line{padding:13px 26px;font-size:1.03rem;margin-bottom:10px}
.ty-line svg{width:21px;height:21px}
@media(prefers-reduced-motion:reduce){.pp-line-btn{transition:none}}