@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/kanit-thai-300-normal.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/kanit-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026}
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/kanit-thai-400-normal.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/kanit-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026}
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/kanit-thai-500-normal.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/kanit-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/kanit-thai-600-normal.woff2') format('woff2');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/kanit-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026}
@font-face{font-family:'Kanit Fallback';src:local('Noto Sans Thai'),local('Leelawadee UI'),local('Thonburi');unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;size-adjust:102.4%;ascent-override:110%;descent-override:39.5%;line-gap-override:0%}
@font-face{font-family:'Kanit Fallback';src:local('Noto Sans'),local('Segoe UI'),local('Arial');unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026;size-adjust:95.9%;ascent-override:110%;descent-override:39.5%;line-gap-override:0%}
/* dt. brand palette — charcoal #2B2B2B / orange #F47B3D / white */
:root{--navy:#2B2B2B;--teal:#A8430F;--teal-d:#8A3A0E;--amber:#F47B3D;--bg:#FFFFFF;--ink:#2B2B2B;--mut:#63605D;--line:#ECE7E2;--soft:#FEF0E9;--wash:#F7F5F3;--r:18px}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-gutter:stable}
/* ── เปลี่ยนหน้าแบบนุ่ม (สไตล์ Apple): ครอสเฟด + เนื้อหาลอยขึ้นเบา ๆ ──
   ใช้ View Transitions ข้ามเอกสารของเบราว์เซอร์ — ไม่มี JS ไม่มีไลบรารี
   เบราว์เซอร์ที่ไม่รองรับ (เช่น Firefox) แค่เปลี่ยนหน้าแบบเดิม ไม่พังอะไร */
/* ⚠️ เปิดเฉพาะจอใหญ่เท่านั้น (บทเรียน 14 ส.ค. 2026 รอบสอง)
   บนมือถือ เมนูสามขีดเป็นแผ่นขาวเต็มจอ · View Transitions ถ่ายภาพนิ่งหน้าเก่าตอนเมนูเปิด
   ได้ภาพขาวล้วน แล้วถ้าเบราว์เซอร์ในแอป (ไลน์) เล่นอนิเมชันไม่จบ ภาพขาวจะค้างทับหน้าใหม่
   = เว็บขาวทั้งจอ · แลกอนิเมชัน 0.3 วิ กับเว็บใช้ไม่ได้บนช่องทางหลัก ไม่คุ้ม */
@media (min-width:900px){@view-transition{navigation:auto}}
/* จังหวะ: หน้าเก่าถอยออกเบา ๆ (จมลงนิด + จาง) · หน้าใหม่ลอยขึ้นมาแบบสปริงนุ่ม ๆ
   เส้นโค้ง .16,1,.3,1 = พุ่งเร็วช่วงแรกแล้วแตะเบรกยาว ๆ ให้ความรู้สึก "ของจริงมีน้ำหนัก" */
@keyframes vt-out{to{opacity:0;transform:translateY(-5px) scale(.995)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px) scale(.998)}}
::view-transition-old(root){animation:vt-out .12s cubic-bezier(.4,0,1,1) forwards}
/* ⚠️ ห้ามใส่ fill-mode `both` ตรงนี้เด็ดขาด (บทเรียน 14 ส.ค. 2026)
   ถ้าใส่ แล้วเบราว์เซอร์ไหนสร้าง pseudo-element แต่ไม่เล่นอนิเมชัน (เบราว์เซอร์ในแอปไลน์)
   หน้าใหม่จะค้างที่ opacity:0 = ขาวทั้งจอ · ไม่ใส่ fill = พังก็ยังเห็นเนื้อหาปกติ */
::view-transition-new(root){animation:vt-in .28s cubic-bezier(.16,1,.3,1)}

/* ── ลูกเล่น 1: ชื่อหน้า (h1) "ว่ายข้ามหน้า" ──
   ทุกหน้ามี h1 เดียว ตั้งชื่อเดียวกัน เบราว์เซอร์จับคู่ h1 หน้าเก่า-หน้าใหม่
   แล้ววาดให้เลื่อน+ย่อขยายจากตำแหน่งเดิมไปตำแหน่งใหม่เอง (morph) */
main h1{view-transition-name:page-title}
::view-transition-group(page-title){animation-duration:.30s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* ── ลูกเล่น 2: เมนูสีส้ม (active) "วิ่งไปหาหน้าที่กด" เหมือนแถบเลือกวิ่งตามนิ้ว ── */
.nav a.active{view-transition-name:nav-active}
::view-transition-group(nav-active){animation-duration:.26s;animation-timing-function:cubic-bezier(.3,1.2,.35,1)}
/* ส่วนหัวกับปุ่มลอย = เปลือกเดียวกันทุกหน้า ต้องนิ่งสนิท ไม่เฟด ไม่ขยับ
   (ซ่อนภาพนิ่งของหน้าเก่า แล้วโชว์ของหน้าใหม่ทันทีโดยไม่มีอนิเมชัน) */
header{view-transition-name:site-header}
.cta-bar{view-transition-name:site-cta}
::view-transition-group(site-header),::view-transition-group(site-tbar),::view-transition-group(site-cta){animation:none}
::view-transition-old(site-header),::view-transition-old(site-tbar),::view-transition-old(site-cta){display:none}
::view-transition-new(site-header),::view-transition-new(site-tbar),::view-transition-new(site-cta){animation:none}
@media (prefers-reduced-motion:reduce){
 ::view-transition-old(root),::view-transition-new(root),
 ::view-transition-group(page-title),::view-transition-group(nav-active){animation:none}
}

body{font-family:'Kanit','Kanit Fallback',sans-serif;color:var(--ink);background:var(--bg);line-height:1.72;font-weight:300;-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}

/* ── แถบเมนู: บาง โปร่ง เบลอพื้นหลัง ── */


/* ── ชิปสลับเครื่องมือเทียบ (อยู่ใต้หัวของหน้าเครื่องมือทั้ง 5) ──
   ให้คนที่เข้ามาผิดเรื่องเปลี่ยนได้ทันทีตั้งแต่ยังไม่เริ่มดูตัวเลข — ไม่ไปแย่งจุดตัดสินใจท้ายหน้า */
.tswitch{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.tswitch a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 16px;font-size:.84rem;font-weight:300;color:var(--mut);white-space:nowrap;transition:color .15s,border-color .15s}
.tswitch a:hover{color:var(--teal);border-color:var(--teal)}
.tswitch a.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:500;pointer-events:none}
@media(max-width:640px){.tswitch{gap:6px}.tswitch a{padding:6px 12px;font-size:.8rem}}

/* กล่องชวนไปหน้าเด็ก (หน้าเช็คเบี้ยสุขภาพ เมื่อกรอกอายุ ≤ 10) */
.kidhint{display:none;align-items:center;gap:12px;flex-wrap:wrap;background:var(--soft);border:1px solid #F3D8C4;border-radius:14px;padding:14px 18px;margin-top:14px;font-size:.9rem}
.kidhint.show{display:flex}
.kidhint b{font-weight:500;color:var(--teal-d)}
.kidhint a{background:var(--teal);color:#fff;border-radius:999px;padding:7px 18px;font-size:.86rem;font-weight:500;white-space:nowrap}

/* ── แถบความเชื่อใจใต้หัวเว็บ — เป็นส่วนหนึ่งของเปลือกเว็บ มีทุกหน้า ──
   (เดิมมีเฉพาะหน้าแรก พอเปลี่ยนหน้าแถบหายไป ส่วนบนเลยกระโดด — WATER สั่งให้ใส่ทุกหน้า 6 ส.ค. 2026) */
.tbar{background:var(--navy);color:#EDE9E4;font-size:.78rem;font-weight:300;view-transition-name:site-tbar}
.tbar .wrap{display:flex;gap:8px 26px;flex-wrap:wrap;padding:8px 24px;justify-content:center}
.tbar span{white-space:nowrap}
.tbar span::before{content:"✓";color:#F4B860;margin-right:7px;font-weight:600}
@media(max-width:640px){.tbar{font-size:.72rem}.tbar .wrap{gap:6px 16px;padding:7px 16px}}
header{background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
/* เบราว์เซอร์ที่เบลอ backdrop ไม่ได้ (Android เก่า · in-app browser ของ LINE/FB) → พื้นทึบ กันเนื้อหาทะลุ header */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header{background:#fff}}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:52px;flex-wrap:wrap;gap:6px}
.logo{display:inline-flex;align-items:center}
.logo img{display:block}
.nav ul{display:flex;gap:26px;list-style:none;flex-wrap:wrap}
.nav a{color:var(--ink);font-weight:300;font-size:.86rem;letter-spacing:.01em;opacity:.86}
.nav a.active{color:var(--teal);opacity:1}
.nav a:hover{opacity:1;color:var(--teal)}

/* ── เมนูย่อยใต้ "เทียบเบี้ย" (14 ส.ค. 2569) ────────────────────────────────
   ก่อนหน้านี้เมนูไม่มีหน้าเครื่องมือเลยสักหน้า — จากหน้าสุขภาพจะไปหน้าเด็ก
   ต้องผ่าน compare.html = 3 จังหวะ

   ★ ลิงก์เป็น <a> จริงในหน้า ไม่ได้สร้างด้วย JS — Google เก็บลิงก์ภายในได้ครบ
     และปิด JS ก็ยังกดได้ (เมนูย่อยจะกางค้างไว้ ไม่ซ่อน)
   ★ มือถือไม่ใช้ตัวนี้ — .nav>ul ถูกซ่อนอยู่แล้ว ไปใช้แผ่นเมนูเต็มจอแทน */
.nav .hassub{position:relative}
.nav .subnav{position:absolute;top:100%;left:-14px;display:none;flex-direction:column;
  gap:0;min-width:212px;padding:8px 0;margin-top:6px;background:#fff;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 34px rgba(43,43,43,.13);z-index:80}
/* ช่องว่างล่องหนคั่นหัวเมนูกับกล่อง — กันเมาส์ "ตกร่อง" แล้วเมนูหุบกลางทาง */
.nav .hassub::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
.nav .hassub:hover .subnav,
.nav .hassub:focus-within .subnav{display:flex}
.nav .subnav li{width:100%}
.nav .subnav a{display:block;padding:9px 18px;font-size:.85rem;opacity:1;white-space:nowrap}
.nav .subnav a:hover,.nav .subnav a:focus-visible{background:var(--wash);color:var(--teal)}
/* ไม่มี JS = ไม่มีแผ่นเมนูมือถือ → กางเมนูย่อยไว้เลย จะได้ยังกดได้ */
html:not(.js) .nav .subnav{display:flex;position:static;box-shadow:none;border:0;
  padding:0;margin:0;min-width:0;background:none}
html:not(.js) .nav .subnav a{padding:4px 0 4px 14px;font-size:.8rem;opacity:.8}

/* ── หัวหน้าย่อย: พื้นขาว ตัวหนังสือเข้ม (คอนทราสต์ผ่านเต็ม) ── */
.phead{background:#fff;color:var(--ink);padding:76px 0 8px;text-align:center}
.phead h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:600;line-height:1.16;letter-spacing:-.028em;max-width:22ch;margin:0 auto}
.phead p{margin:18px auto 0;font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.6;max-width:56ch;color:var(--mut)}
.phead .eyebrow{margin-bottom:10px}
.phead .acts{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:center;align-items:center;margin-top:26px}

/* ── ปุ่ม ── */
.btn{display:inline-block;background:var(--teal);color:#fff;font-weight:400;font-size:1rem;padding:12px 28px;border-radius:980px;margin-top:28px;transition:filter .15s}
.btn:hover{filter:brightness(1.08)}

/* ── ส่วนเนื้อหา ── */
section{padding:92px 0}
.stripe{background:var(--wash)}
h2{color:var(--navy);font-size:2.05rem;font-weight:600;line-height:1.25;letter-spacing:-.018em;margin-bottom:12px}
.sub{color:var(--mut);margin-bottom:34px;font-size:1.05rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:var(--wash);border:0;border-radius:var(--r);padding:28px}
.stripe .card,.hero+section .card{background:var(--wash)}
.stripe .card{background:#fff}
.card h3{color:var(--navy);font-weight:500;font-size:1.1rem;letter-spacing:-.01em;margin-bottom:8px}
.card p{color:var(--mut);font-size:.95rem}


/* ── ป้ายบริษัทประกัน (คงสีของแต่ละแบรนด์) ── */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:.9rem;font-weight:300;color:var(--ink)}
.chip i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--amber)}
.b-mtl i{background:#E6007E}.b-bla i{background:#005BAA}.b-tli i{background:#1E4396}.b-aia i{background:#D31145}.b-fwd i{background:#E87722}.b-az i{background:#003781}.b-axa i{background:#00008F}.b-sam i{background:#1428A0}

/* ── คำถามที่พบบ่อย ── */
.faq-item{background:var(--wash);border:0;border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:18px 22px;font-weight:400;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';color:var(--teal);font-weight:600}
.faq-item[open] summary::after{content:'−'}
.faq-item .a{padding:0 22px 20px;color:var(--ink)}
.faq-cat{margin:44px 0 16px;color:var(--teal-d);font-weight:500;font-size:1.2rem;letter-spacing:-.01em}

.note{background:var(--soft);border:0;border-radius:14px;padding:18px 22px;font-size:.92rem;color:#7A3A12;margin-top:32px}

/* ── ท้ายเว็บ ── */
footer{background:var(--navy);color:#C9C4C0;padding:48px 0 40px;font-size:.84rem;line-height:1.9;margin-top:0;border-top:5px solid;border-image:linear-gradient(90deg,#D31145 0 12.5%,#00008F 12.5% 25%,#003781 25% 37.5%,#E87722 37.5% 50%,#E6007E 50% 62.5%,#005BAA 62.5% 75%,#1E4396 75% 87.5%,#1428A0 87.5% 100%) 1}
footer a{color:#F9A876}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-bottom:28px}
.updated{font-size:.85rem;color:var(--mut);margin-top:6px}
main p a,.sub a,.note a,.a a{text-decoration:underline;text-underline-offset:3px}

/* ── ตาราง ── */
table.cmp{width:100%;border-collapse:collapse;background:#fff;border:0;border-radius:var(--r);overflow:hidden;font-size:.95rem}
table.cmp th{background:var(--navy);color:#fff;font-weight:400;padding:13px 16px;text-align:left}
table.cmp td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
table.cmp th[scope="row"]{background:#fff;color:var(--ink);font-weight:300;text-align:left;border-top:1px solid var(--line)}
.check{color:var(--teal);font-weight:600}

/* ── ปุ่มทักแชทลอย (ทุกหน้า) — โทนเดียวกับธีม ── */
.cta-bar{position:fixed;z-index:60;right:20px;bottom:20px;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.cta-bar a{display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:980px;font-size:.9rem;font-weight:400;text-decoration:none;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 12px rgba(43,43,43,.10);white-space:nowrap;transition:transform .15s}
.cta-bar a:hover{transform:translateY(-1px)}
.cta-bar a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.cta-bar svg{width:17px;height:17px;flex:none;fill:var(--teal)}
.cta-bar .cta-line{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 3px 14px rgba(168,67,15,.28)}
.cta-bar .cta-line svg{fill:#fff}
@media(max-width:720px){
 .cta-bar{right:0;left:0;bottom:0;flex-direction:row;gap:0;align-items:stretch;border-top:1px solid var(--line);background:rgba(255,255,255,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cta-bar{background:#fff}}
 .cta-bar a{flex:1;justify-content:center;border-radius:0;border:0;box-shadow:none;background:transparent;backdrop-filter:none;padding:13px 6px}
 .cta-bar .cta-line{background:var(--teal);box-shadow:none;border:0}
 body{padding-bottom:52px}
}


/* ── ไทล์: หนึ่งเรื่องต่อหนึ่งจอ พื้นขาวเป็นหลัก สีมาจาก "ของ" เท่านั้น ── */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}
.tiles>*{min-width:0}
.tile{max-width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:76px 34px;min-height:440px;background:var(--wash)}
.tile.full{grid-column:1/-1;min-height:560px}
.eyebrow{font-size:1.05rem;font-weight:500;color:var(--teal);margin-bottom:10px;letter-spacing:.01em}
.tile h1,.tile h2{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:600;line-height:1.14;letter-spacing:-.028em;margin:0;color:inherit;text-wrap:balance}
.tile p{margin-top:18px;font-size:clamp(1.06rem,1.42vw,1.28rem);line-height:1.6;max-width:58ch;color:inherit;opacity:.78;text-wrap:balance}
.tile .acts{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:center;align-items:center;margin-top:26px}
.tile .btn{margin-top:0}
.from{margin-top:14px;font-size:1.15rem;color:var(--mut)}
.from b{color:var(--ink);font-weight:500}
.t-hero{background:#fff;color:var(--ink);min-height:auto;padding-top:84px;padding-bottom:0}
.t-hero h1{font-size:clamp(2.2rem,4.6vw,3.8rem)}
.t-dark{background:var(--navy);color:#fff}
.t-dark .more{color:#F9A876}
.t-white{background:#fff}
.t-white h2,.t-hero h1{max-width:none}
.more{font-size:1.05rem;color:var(--teal);font-weight:400}
.more::after{content:' ›'}

/* ตัวเลขใหญ่แทนรูปสินค้า */
.nb{white-space:nowrap}
.cur{margin-right:.14em;font-weight:400}
.stat{font-size:clamp(3.6rem,8vw,6.4rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.t-dark .stat{color:#fff}
.stat.accent{color:var(--teal)}
.tile .stat+h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-top:14px}

/* ── "ภาพสินค้า" ของเรา = ตารางเทียบเบี้ยจริง ── */
.shot{width:100%;max-width:min(1000px,100%);margin:44px auto 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.mini{width:100%;min-width:940px;border-collapse:collapse;background:#fff;font-size:.95rem;text-align:left;
 box-shadow:0 18px 46px rgba(43,43,43,.13);border-radius:16px 16px 0 0;overflow:hidden}
table.mini th,table.mini td{padding:13px 10px}
table.mini thead th+th{text-align:center}
table.mini thead th{font-weight:400;font-size:.82rem;color:var(--mut);border-bottom:1px solid var(--line);white-space:nowrap;line-height:1.35}
table.mini thead th span{display:block;font-size:.74rem;color:var(--mut)}
table.mini thead th i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
table.mini tbody th{font-weight:300;font-size:.88rem;color:var(--ink);border-top:1px solid var(--line);white-space:nowrap}
table.mini tbody td{font-weight:400;font-size:.95rem;color:var(--ink);border-top:1px solid var(--line);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
table.mini td.best{color:var(--teal);font-weight:500}
.tile p.foot-note,.foot-note{width:100%;max-width:min(860px,100%);margin:24px auto 0;font-size:.7rem;color:var(--mut);line-height:1.65;text-align:center;text-wrap:pretty;opacity:1}

@media(max-width:820px){
 table.mini{min-width:820px;font-size:.85rem}
 table.mini th,table.mini td{padding:11px 8px}
 .tiles{grid-template-columns:1fr}
 .tile{min-height:360px;padding:58px 24px}
 .tile.full{min-height:420px}
 .t-hero{padding-top:60px}
 .shot{margin-top:34px}
 .foot-note{padding:0 4px}
}



/* ── แบบประกัน 4 แบบ ในหัวหน้า ── */
.lines{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:1000px;margin-top:52px}
.line{display:flex;flex-direction:column;gap:7px;background:var(--wash);border-radius:18px;padding:24px 22px;text-align:left;text-decoration:none;color:var(--ink);border-top:3px solid var(--amber);transition:transform .15s,box-shadow .15s}
.line:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(43,43,43,.10)}
.line b{font-weight:500;font-size:1.06rem;color:var(--navy);letter-spacing:-.01em}
.line span{font-size:.88rem;color:var(--mut);line-height:1.6}
@media(max-width:900px){.lines{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lines{grid-template-columns:1fr;margin-top:38px}}

/* ── การ์ด "คุณกำลังอยู่ตรงไหน" ── */
.sits{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:12px;width:100%;max-width:1000px;margin-top:38px}
.sit{background:#fff;border-radius:18px;padding:26px 24px;text-align:left;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s}
.sit:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(43,43,43,.10)}
.sit h3{font-size:1.06rem;font-weight:500;color:var(--navy);letter-spacing:-.01em;line-height:1.4}
.sit p{margin:0;font-size:.92rem;color:var(--mut);max-width:none;opacity:1;flex:1}
.sit .more{font-size:.95rem;margin-top:4px}

/* ── แบบประกัน 4 แบบ ── */
.prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;width:100%;max-width:1000px;margin-top:38px}
.prod{background:var(--wash);border-radius:18px;padding:26px 24px;text-align:left;display:flex;flex-direction:column;gap:8px}
.prod h3{font-size:1.12rem;font-weight:500;color:var(--navy);letter-spacing:-.01em}
.prod p{margin:0;font-size:.92rem;color:var(--mut);max-width:none;opacity:1;flex:1}
.prod .more{font-size:.95rem;margin-top:4px}

/* ── แถบบริษัทประกัน: สีของแต่ละแบรนด์ (ปรับเข้มให้ผ่านคอนทราสต์ทุกสี) ── */
.lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:1000px;margin-top:38px}
.ins{display:flex;align-items:flex-end;min-height:100px;border-radius:14px;padding:18px 16px;color:#fff;font-weight:500;font-size:.95rem;line-height:1.35;text-align:left}

/* ── ช่องทางติดต่อ ── */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:12px;width:100%;max-width:1000px;margin-top:38px}
.way{display:flex;flex-direction:column;gap:5px;background:var(--wash);border-radius:18px;padding:24px;text-align:left;text-decoration:none;color:var(--ink);border-left:4px solid var(--line);transition:transform .15s}
.way:hover{transform:translateY(-2px)}
.way b{font-weight:500;font-size:1.05rem;color:var(--navy)}
.way span{font-size:.9rem;color:var(--mut)}
.w-line{border-left-color:#037A32}.w-fb{border-left-color:#0B5ED7}.w-tel{border-left-color:var(--teal)}.w-mail{border-left-color:var(--navy)}

@media(max-width:640px){
 .sits,.prods,.ways{grid-template-columns:1fr}
 .lineup{grid-template-columns:1fr 1fr}
 .ins{min-height:78px;font-size:.88rem}
}

/* ── กล่องเก็บลีดท้ายหน้าเช็คเบี้ย ── */
.lead{background:var(--soft);border:0;border-radius:var(--r);padding:34px 30px;margin-top:40px}
.lead h2{margin:0 0 10px;color:var(--teal-d)}
.lead p{margin:0 0 22px;color:#7A3A12;font-size:.98rem}
.lead iframe{width:100%;min-height:560px;border:0;background:#fff;border-radius:14px}
.lead-alt{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.lead-alt a{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:980px;text-decoration:none;font-weight:400;font-size:.98rem;background:#fff;color:var(--ink);border:1px solid #F2D3BE}
.lead-alt a.cta-line{background:var(--teal);color:#fff;border-color:var(--teal)}

@media(max-width:900px){section{padding:72px 0}h2{font-size:1.8rem}}
@media(max-width:720px){
 .nav{flex-direction:column;align-items:stretch;gap:0;padding:8px 0}
 .logo{align-self:flex-start;padding:2px 0 6px}
 .nav ul{flex-wrap:nowrap;overflow-x:auto;gap:18px;padding-bottom:4px;scrollbar-width:none}
 .nav ul::-webkit-scrollbar{display:none}
 .nav li{flex:none}
}
@media(max-width:640px){
 .phead{padding:56px 0 4px}
 section{padding:60px 0}h2{font-size:1.6rem}
 .nav ul{gap:16px}.nav a{font-size:.82rem}
}

/* ── เมนูมือถือ: โลโก้ + แฮมเบอร์เกอร์ (เดสก์ท็อปคงเมนูเต็มไว้) ──
   คลาส .navham เติมโดย dt-analytics.js ตอนสร้างปุ่ม → ถ้า JS ไม่รัน เมนูเดิมยังโชว์ (fallback ปลอดภัย) */
#dtham{display:none}
@media(max-width:760px){
 html.js .nav{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:0;padding:0;min-height:52px;position:relative}
 html.js .nav .logo{align-self:center;padding:0}
 html.js .nav>ul{display:none}
}
@media(max-width:760px){
 header .nav.navham{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:0;padding:0;min-height:52px;position:relative}
 header .nav.navham .logo{align-self:center;padding:0}
 header .nav.navham>ul{position:absolute;top:100%;left:-22px;right:-22px;flex-direction:column;align-items:stretch;gap:0;padding:6px 0;overflow:visible;display:none;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 26px rgba(43,43,43,.09);z-index:70}
 header .nav.navham>ul.dtopen{display:flex}
 header .nav.navham>ul li{flex:none;width:100%}
 header .nav.navham>ul li a{display:block;padding:14px 22px;font-size:1rem}
 header .nav.navham #dtham{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px;margin:0;background:none;border:0;cursor:pointer;flex:none}
 #dtham span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s,opacity .22s}
 #dtham.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 #dtham.x span:nth-child(2){opacity:0}
 #dtham.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ── หน้ารวมเทียบเบี้ย ── */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.cmp-grid .cmp{position:relative;display:flex;flex-direction:column;gap:9px;background:var(--wash);border-radius:var(--r);padding:30px 28px;text-decoration:none;color:var(--ink)}
.cmp-grid a.cmp{transition:transform .15s,box-shadow .15s}
.cmp-grid a.cmp:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(43,43,43,.10)}
.cmp-grid .cmp-on{background:var(--soft)}
.cmp-grid .cmp h2{font-size:1.35rem;font-weight:500;letter-spacing:-.015em;margin:0}
.cmp-grid .cmp p{margin:0;font-size:.94rem;color:var(--mut);flex:1;line-height:1.65}
.cmp-grid .cmp .more{margin-top:6px;align-self:flex-start}
.st{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:500;padding:3px 11px;border-radius:99px;background:#EDEAE7;color:var(--mut)}
.st-on{background:var(--teal);color:#fff}
@media(max-width:720px){.cmp-grid{grid-template-columns:1fr}.cmp-grid .cmp{padding:26px 22px}}

/* ── ABOUT-PORTRAIT-START: หน้าเกี่ยวกับเรา — รูปผู้ก่อตั้ง ── */
.abt-hero{display:grid;grid-template-columns:250px 1fr;gap:28px;margin-top:16px;align-items:start}
.port,.port-ph{width:100%;border-radius:var(--r);display:block}
.port{object-fit:cover;aspect-ratio:4/5;height:auto}
/* height:auto จำเป็น — แอตทริบิวต์ height ของ <img> จะชนะ aspect-ratio ถ้าไม่เขียนทับ */
.port-ph{aspect-ratio:4/5;background:var(--soft);color:var(--amber);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:.9rem;line-height:1.45}
.port-ph svg{width:44%;height:auto}
@media(max-width:640px){.abt-hero{grid-template-columns:1fr}.port-ph,.port{max-width:250px;margin:0 auto}}
/* ── ABOUT-PORTRAIT-END ── */

/* ── FOOTER-V2-START: รายการใบอนุญาต · เมนู · QR ไลน์ ── */
.foot-grid ul{list-style:none;margin:0;padding:0}
.fname{display:block;font-weight:500;color:#fff;margin-top:2px}
.flic,.fnav{margin-top:4px}
.flic li,.fnav li{position:relative;padding-left:13px;line-height:1.75}
.flic li::before,.fnav li::before{content:"";position:absolute;left:0;top:.82em;
  width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.34)}
.fqr{display:inline-flex;flex-direction:column;align-items:center;gap:7px;margin-top:16px;
  text-decoration:none;color:#C9C4C0}
.fqr img{width:104px;height:104px;display:block;background:#fff;border-radius:10px;padding:6px}
.fqr span{font-size:.76rem;line-height:1.4}
.fqr:hover span{color:#F9A876}
.fqr:focus-visible{outline:2px solid #F9A876;outline-offset:4px;border-radius:12px}
/* ── FOOTER-V2-END ── */

/* ── NAV-MOBILE-START: เมนูบนสุดบนจอมือถือ ──
   ปัญหาที่วัดเจอ: ที่จอ 360–430px แถบเมนูกว้าง 445px จึงเลื่อนได้แต่ "ไม่มีอะไรบอกว่าเลื่อนได้"
   → เมนูตัวท้าย (ติดต่อเรา / เกี่ยวกับเรา) หายไปนอกจอโดยลูกค้าไม่รู้ว่ามี
   แก้สองชั้น: ย่อระยะห่างกับขนาดตัวอักษรให้พอดีจอส่วนใหญ่ + ไล่เฉดจาง ๆ ที่ขอบขวาเป็นสัญญาณว่ายังมีต่อ */
@media(max-width:520px){
  .nav ul{gap:15px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* ไล่เฉดที่ขอบขวา = ใบ้ว่าปัดต่อได้ พอเลื่อนสุดแล้วเฉดจะหายเอง */
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .nav ul::-webkit-scrollbar{display:none}
  .nav ul li{flex:0 0 auto}
  .nav a{font-size:.8rem}
}
@media(max-width:380px){ .nav ul{gap:12px} .nav a{font-size:.76rem} }
/* ── NAV-MOBILE-END ── */

/* ── QRBOX-START: การ์ด LINE ในหน้าติดต่อเรา ── */
.qrbox{display:flex;flex-direction:column;align-items:center;gap:9px;margin:6px 0 12px;
  text-decoration:none;color:var(--mut)}
.qrbox img{width:148px;height:148px;display:block;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:8px}
.qrbox span{font-size:.82rem;line-height:1.55;text-align:center}
.qrbox b{font-weight:500;color:var(--teal)}
.qrbox:hover img{border-color:var(--amber)}
.qrbox:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:14px}
/* การ์ดช่องทางติดต่อ: ชื่อ → ปุ่ม/ค่า → คำอธิบายสั้น แนวเดียวกันทุกใบ */
.chan{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.chan h3{margin-bottom:2px}
.chan .cv{margin-top:8px;font-size:.98rem;font-weight:400}
.chan .cd{margin-top:8px;font-size:.85rem;color:var(--mut);line-height:1.65}
.chan .qrbox{align-self:center;margin:10px 0 2px}
/* ── QRBOX-END ── */

/* ── ASKBOX-START: กล่องข้อความพร้อมส่ง (หน้าติดต่อเรา) ── */
.askbox{background:var(--soft);border-radius:20px;padding:22px 24px;max-width:640px}
.asklab{display:block;font-size:.76rem;color:#8A5910;margin-bottom:10px;font-weight:500}
.askmsg{background:#fff;border-radius:14px;padding:16px 18px;font-size:.96rem;line-height:1.9;
  white-space:pre-wrap;color:var(--ink);border:1px solid #F6D9C6}
.askacts{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}
/* ปุ่มสองใบต้องสูงเท่ากันและเรียงบนเส้นเดียวกัน — .btn ตัวกลางมี margin-top:28px ติดมาด้วย
   ถ้าไม่ล้างจะถูกดันต่ำกว่าปุ่มข้าง ๆ (ตรงกับที่เห็นในภาพ) · min-height 44px = ขนาดแตะขั้นต่ำบนมือถือ */
.askacts .btn,.askacts .btn2{display:inline-flex;align-items:center;justify-content:center;
  margin:0;font:inherit;font-size:.95rem;font-weight:400;line-height:1.2;
  padding:0 26px;min-height:46px;border-radius:980px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap}
.askacts .btn{background:var(--teal);color:#fff}
.askacts .btn:hover{filter:brightness(1.07)}
.askacts .btn2{background:#fff;color:var(--teal);border-color:#F0C9AE}
.askacts .btn2:hover{background:#FFF6EF}
.askacts .btn:focus-visible,.askacts .btn2:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.asknote{font-size:.84rem;color:#166534;font-weight:500}
@media(max-width:560px){.askbox{padding:18px 16px}.askmsg{font-size:.9rem;padding:14px 15px}
  .askacts .btn,.askacts .btn2{flex:1 1 100%;text-align:center}}
/* ── ASKBOX-END ── */

/* ── CVAL-START: ค่าหลักในตารางเทียบ ใช้สีประจำบริษัท ── */
.qt .cval,.yt .cval{font-weight:500}
.qt .cplan .pn,.yt .cplan .pn{font-weight:500}
/* ── CVAL-END ── */

/* ── MOBILE-FIX-START: จากการเดินเว็บจริงบนมือถือ 3 รุ่น (7 ส.ค. 2026) ── */

/* 1) เผื่อพื้นที่แถบระบบล่างของ iPhone รุ่นไม่มีปุ่มโฮม (แถบขีดขาว ~34px)
      ไม่เผื่อ = ปุ่มทักไลน์ถูกแถบทับบางส่วน กดพลาดง่าย */
@media(max-width:720px){
  .cta-bar{padding-bottom:env(safe-area-inset-bottom,0)}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0))}
}

/* 2) ปุ่มบนมือถือต้องสูงพอให้นิ้วโป้งแตะติด (เกณฑ์ที่ใช้กันคือ 44px) */
@media(max-width:720px){
  .tswitch a{min-height:44px;display:inline-flex;align-items:center}
  .seg button{min-height:44px}
  .qt .cvtoggle button{min-height:44px;padding:10px 12px}
}
/* ── MOBILE-FIX-END ── */

/* ── TABLE-MOBILE-V2-START ── ตารางเทียบบนมือถือ (คู่กับ dt-table.js)
   อิง NN/g: ป้ายบอกปัดได้ · แถบชื่อบริษัทลอยติดจอ · ปุ่มเลือกบริษัท · หยุดพอดีคอลัมน์ */

/* ปุ่มเลือกบริษัท — สีขีดบนของแต่ละปุ่มคือสีประจำบริษัท (บอกตัวตน ไม่ใช่จัดอันดับ) */
.cochips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:14px 0 10px}
.cochips-lab{font-size:.78rem;font-weight:300;color:var(--mut);margin-right:2px;white-space:nowrap}
.cochip{font-family:inherit;font-size:.78rem;font-weight:500;color:var(--ink);cursor:pointer;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--cc,#8a8a8a);
  border-radius:10px;padding:8px 12px;min-height:38px;transition:opacity .15s,border-color .15s}
.cochip.off{opacity:.42;border-top-color:var(--line);text-decoration:line-through;
  text-decoration-thickness:1px}
@media(max-width:720px){
  .cochips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-left:-4px;padding:2px 4px 6px}
  .cochip{white-space:nowrap;min-height:44px;flex:0 0 auto}
}

/* ป้าย "ปัดดูอีก N บริษัท" — กดทะลุได้ ไม่ขวางนิ้ว หายถาวรเมื่อเริ่มปัด */
.qthint{position:absolute;right:6px;z-index:5;pointer-events:none;
  background:rgba(43,43,43,.86);color:#fff;font-size:.74rem;font-weight:400;
  padding:7px 12px;border-radius:999px;box-shadow:0 4px 14px rgba(43,43,43,.25);
  opacity:1;transition:opacity .4s}
.qthint::after{content:" →"}
.qthint.gone{opacity:0}
@media(min-width:900px){.qthint{display:none}}

/* แถบชื่อบริษัทลอยติดใต้เมนู — โผล่เฉพาะตอนหัวตารางจริงพ้นจอ เลื่อนตามตารางเป๊ะ */
#dtfloat{position:fixed;left:0;right:0;z-index:40;display:none;
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);
  box-shadow:0 8px 20px rgba(43,43,43,.09)}
#dtfloat .dtfloat-clip{overflow:hidden;max-width:1140px;margin:0 auto;padding:0 20px}
#dtfloat .dtfloat-row{display:flex}
#dtfloat .dtc{flex:0 0 auto;box-sizing:border-box;padding:5px 8px 6px;
  border-top:3px solid var(--cc,transparent);background:#fff;
  font-size:.7rem;line-height:1.3;min-width:0}
#dtfloat .dtc b{display:block;font-weight:500;font-size:.72rem;color:var(--cc,var(--ink));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dtfloat .dtc span{display:block;color:var(--mut);font-weight:300;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dtfloat .dtc.corner{position:sticky;left:0;z-index:2;border-top-color:transparent;
  display:flex;align-items:center;font-size:.68rem;font-weight:300;color:var(--mut);
  box-shadow:6px 0 8px -6px rgba(43,43,43,.2)}
@media(max-width:720px){#dtfloat .dtfloat-clip{padding:0 12px}}

/* ปัดแล้วหยุดพอดีขอบคอลัมน์ — เว้นระยะเท่าคอลัมน์ชื่อรายการที่ตรึงไว้ (120px) */
@media(max-width:720px){
  .qtwrap{scroll-snap-type:x proximity;scroll-padding-left:120px}
  .qt th.chead{scroll-snap-align:start}
}

/* หัวเรื่องหมวดเกาะขอบจอซ้าย ไม่ลอยหายตอนปัดตารางไปขวา (dt-table.js เป็นคนห่อ span ให้) */
.qt .secpin{position:sticky;left:12px;display:inline-block;max-width:calc(100vw - 56px)}

/* แถบสลับมุมมอง การ์ด ↔ ตารางเต็ม — มือถือเริ่มที่การ์ด จอคอมเริ่มที่ตาราง */
.vswitch{display:flex;gap:8px;margin:14px 0 4px;max-width:430px}
.vswitch button{flex:1;font-family:inherit;font-size:.84rem;color:var(--ink);cursor:pointer;
  padding:10px 0;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff}
.vswitch button.on{background:var(--ink,#2b2b2b);color:#fff;border-color:var(--ink,#2b2b2b);font-weight:500}

/* มุมมองการ์ด "ดูทีละบริษัท" — ทุกช่องลอกจากช่องตารางจริง (dt-table.js)
   ลำดับการ์ดตามลำดับคอลัมน์เดิมของตาราง ไม่เรียงตามราคา */
#cocards{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0}
@media(min-width:760px){#cocards{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){#cocards{grid-template-columns:1fr 1fr 1fr}}
.dtcard{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:15px 16px 13px;position:relative;max-width:480px}
.dtbadge{position:absolute;top:-11px;right:14px;background:#E3F2D6;color:#14532D;
  font-size:.72rem;font-weight:500;padding:4px 12px;border-radius:999px}
.dtbadge.warn{background:#FFF3E6;color:#8a5a2b}
.dtline{height:5px;width:64px;border-radius:3px;margin-bottom:9px}
.dtco{font-size:.8rem;font-weight:300;color:var(--mut)}
.dtpn{font-size:1.02rem;font-weight:600;margin:1px 0 10px}
.dtpn small{font-weight:400;color:var(--mut);font-size:.8rem}
.dtgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.dtcell{background:#F6F3F0;border-radius:11px;padding:9px 11px;min-width:0}
.dtcell .k{font-size:.7rem;font-weight:300;color:var(--mut);margin-bottom:2px}
.dtcell .v{font-size:1rem;font-weight:600;overflow-wrap:anywhere}
.dtcell .v.small{font-size:.84rem}
.dtcell .v.money{color:#9a3412}
.dtrow{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;
  padding:7px 2px;border-bottom:1px solid #F6F3F0}
.dtrow b{font-weight:500;text-align:right;overflow-wrap:anywhere}
.dtmore{display:block;width:100%;text-align:center;font-family:inherit;font-size:.8rem;
  color:#9a3412;font-weight:500;margin-top:9px;padding:9px 0;min-height:44px;
  background:none;border:none;cursor:pointer}

/* ── VIEW-YT — หน้า life/pension: ทับ media query 940px ที่สลับ yt/pcards
   เดิม CSS ตัดสินแทนคนจากขนาดจอเดียว ตอนนี้ผู้ใช้กด "ตารางเทียบเต็ม"
   บนมือถือได้ และ "ดูทีละบริษัท" บนจอคอมได้ (คู่กับ initYt ใน dt-table.js)
   specificity สูงกว่ากติกาใน @media จึงชนะแน่ ไม่ต้องใช้ !important */
body[data-view="cards"] table.yt,
body[data-view="cards"] .ytfoot{display:none}
/* การ์ดเรียงเป็น grid แบบเดียวกับ #cocards ของหน้าสุขภาพ:
   มือถือ 1 คอลัมน์ · ≥760px 2 คอลัมน์ · ≥1080px 3 คอลัมน์ */
body[data-view="cards"] .pcards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){body[data-view="cards"] .pcards{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){body[data-view="cards"] .pcards{grid-template-columns:1fr 1fr 1fr}}
body[data-view="table"] table.yt{display:table}
body[data-view="table"] .ytfoot{display:block}
body[data-view="table"] .pcards{display:none}
/* หน้าที่ไม่มี .yt/.pcards (health/kids/ci/index/…) ไม่ได้รับผลกระทบจากกติกาข้างบน
   เพราะ selector ระบุ .yt/.pcards ชัดเจน */

/* ── CARD-UNIFY — การ์ด "ดูทีละบริษัท" ของ life/pension (.pcard) ให้หน้าตา
   เท่ากับการ์ดของ health/kids/ci (.dtcard) · ปรับแค่หน้าตา ไม่แตะข้อมูล/DOM
   (โครง .pcard หน้าสร้างเอง เราแค่ทาสีทับให้เป็นภาษาเดียวกัน)

   ⚠️ ต้องนำหน้าทุกกฎด้วย #result — เพราะ <style> ในหน้า life/pension โหลด
   ทีหลัง style.css กฎ .pcard ของหน้าจึงชนะถ้า specificity เท่ากัน
   ใส่ id #result (การ์ดอยู่ใน #result.qtwrap) → specificity สูงกว่าแน่ */

/* การ์ด: เปิด overflow ให้ป้ายลอยพ้นขอบบนได้ · เอาขอบเขียวของใบ best ออก (ใช้ป้ายพอ เหมือน dtcard) */
#result .pcard{overflow:visible;padding:15px 16px 13px;margin-bottom:0}  /* gap ของ grid คุมระยะแทน margin */
#result .pcard.best{border:1px solid var(--line)}
/* ป้าย: พิลล์เขียวอ่อนมุมขวาบน — อยู่ "ในกรอบ" การ์ด (WATER เคาะแบบ 2 · 14 ส.ค. 2569)
   ★ ห้ามใช้ top ติดลบอีก: ของเดิม top:-11px ทำให้ป้ายลอยพ้นขอบไปทับมุมมนการ์ด
   ★ ถ้อยคำก็เปลี่ยนจาก "คุ้มค่าที่สุดในกลุ่มนี้" → "คืนสูงสุดในชุดนี้" (แก้ที่ builder)
     เพราะ คปภ. ห้ามชี้ว่าบริษัทไหนดีกว่า ในเมื่อเงื่อนไขแต่ละแผนไม่เท่ากัน
     คำใหม่บอกว่า "วัดจากอะไร" ไม่ใช่คำตัดสิน */
#result .pcard .ptag{top:12px;right:12px;background:#EFF4EA;color:#2F5233;
  border:1px solid #D7E3CC;font-size:.7rem;font-weight:500;
  padding:4px 11px;border-radius:999px;letter-spacing:0}
/* กันชื่อบริษัทวิ่งไปชนป้าย — เฉพาะใบที่มีป้ายเท่านั้น */
#result .pcard.best .pco{max-width:calc(100% - 132px)}

/* แถบสีบริษัท: border-top ของ .pco เป็นบาร์สั้นมนหัว ชื่อบริษัทเทาอยู่ใต้ (เหมือน .dtline + .dtco) */
#result .pcard .pco{display:inline-block;border-top-left-radius:3px;border-top-right-radius:3px;
  padding-top:10px;min-width:64px;font-size:.8rem;font-weight:300;color:var(--mut)}

/* ชื่อแผน: หนาเท่า .dtpn */
#result .pcard .pnm{font-size:1.02rem;font-weight:600;margin:1px 0 10px;letter-spacing:0}

/* เซลล์ค่า: พื้น/มุม/ฟอนต์เท่า .dtcell · "เงินที่จ่าย" น้ำตาลเท่า .dtcell .v.money
   สีเขียว (ผลตอบแทน/บำนาญที่ได้) คงไว้ — ข้อมูลบวกที่เพิ่มค่า ไม่ใช่สีที่ตีกัน */
#result .pcard .kv{gap:8px}
#result .pcard .kv>div{background:#F6F3F0;border-radius:11px;padding:9px 11px}
#result .pcard .kv .k{font-size:.7rem;color:var(--mut);font-weight:300;margin-bottom:2px;line-height:1.3}
#result .pcard .kv .v{font-size:1rem;font-weight:600}
#result .pcard .kv .v.red{color:#9a3412}

/* ตารางย่อยแบน (.mt): เส้น/ระยะ/ฟอนต์เท่าแถว .dtrow */
#result .pcard .mt{margin-top:2px}
#result .pcard .mt td{padding:7px 2px;border-bottom:1px solid #F6F3F0;font-size:.82rem}
#result .pcard .mt td:first-child{color:var(--mut);width:auto}
#result .pcard .mt td:last-child{text-align:right;font-weight:500}

/* ปุ่ม "ดูรายละเอียดเต็มในตาราง" ท้ายการ์ด life/pension (เติมโดย dt-table.js → cardMore)
   มีเส้นคั่นด้านบน เพราะข้างบนมันคือ .pmore ที่หน้าตาคล้ายกัน จะได้ไม่สับสนว่าเป็นปุ่มเดียวกัน */
#result .pcard .dtmore{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}

/* ปุ่มกาง "ดูตารางรายปี" (pension): จัดกลาง สีน้ำตาลเท่าปุ่ม .dtmore */
#result .pcard .pmore{margin-top:9px}
#result .pcard .pmore summary{text-align:center;color:#9a3412;font-weight:500;font-size:.8rem;
  padding:9px 0;min-height:44px;list-style:none}
#result .pcard .pmore summary::-webkit-details-marker{display:none}
/* ── TABLE-MOBILE-V2-END ── */

/* ── SHEET-HEAD-V2 (9 ส.ค. 2026) — WATER สั่ง 3 จุด + ตารางย่อพอดีจอ ──
   1) ข้อมูล เพศ/อายุ/งบ ฯลฯ เป็นกล่องชัด  2) ปุ่มสลับ segmented แบ่งครึ่งเท่ากัน
   3) ชิปเลือกบริษัทพับครบไม่เลื่อน (ชื่อย่อโดย dtShortCo ใน dt-table.js)
   ส่วน "ตารางย่อพอดีจอ" ทำใน JS ล้วน (syncFit ใน dt-table.js) — ไม่มี CSS ที่นี่
   หมายเหตุ: กฎ .sheet-info ต้องนำหน้าด้วย .sheet เพื่อชนะ <style> ในหน้า (โหลดทีหลัง) */

/* 1) กล่องข้อมูล — ใช้ทุกหน้าเครื่องมือ (โครง markup: span > b(ป้าย) + ค่า)
   ตั้งใจให้ "แบน" ไม่มีขอบ/เงา — จะได้ไม่ดูเป็นปุ่มกดได้ (WATER ทัก 10 ส.ค.
   ว่ากล่องแบบมีขอบทำให้แยกไม่ออกว่าอันไหนกดได้ อันไหนแค่ข้อมูล) */
.sheet .sheet-info{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;font-size:.9rem}
.sheet .sheet-info>span{background:var(--wash);border:0;border-radius:9px;
  padding:6px 12px 7px;white-space:nowrap;font-weight:600;color:var(--ink);line-height:1.3;
  flex:1 1 auto;min-width:0}
.sheet .sheet-info>span b{display:block;font-weight:300;font-size:.66rem;color:var(--mut);
  padding:0;line-height:1.3}

/* 2) ปุ่มสลับมุมมอง — segmented control กรอบขาว+ขอบ+เงา = ดูเป็นของกดได้ชัด
   (ตัดกับกล่องข้อมูลด้านบนที่แบนสนิท) */
.vswitch{display:flex;gap:0;background:#fff;border:1.5px solid var(--line);border-radius:13px;
  padding:4px;max-width:430px;margin:14px 0 6px;box-shadow:0 2px 10px rgba(43,43,43,.07)}
.vswitch button{flex:1;font-family:inherit;font-size:.87rem;font-weight:500;color:var(--ink);
  cursor:pointer;border:0;background:transparent;border-radius:10px;padding:10px 6px;min-height:44px}
.vswitch button.on{background:var(--teal);border-color:var(--teal);color:#fff;
  box-shadow:0 2px 8px rgba(168,67,15,.3);font-weight:500}

/* 3) ชิปบริษัท — มือถือพับครบทุกเจ้า (ทับกติกาเลื่อนแนวนอนเดิมด้านบน) */
@media(max-width:760px){
  .cochips{flex-wrap:wrap;overflow-x:visible;padding-bottom:0}
  .cochips-lab{flex-basis:100%;margin-bottom:2px}
  .cochip{flex:0 0 auto;white-space:nowrap;min-height:40px}
}

/* 4) ตารางย่อพอดีจอ (life/pension) — ตอน scale หัวตารางห้าม sticky
   (top:53px ใน container ที่ถูก transform จะเลื่อนลงมาทับแถวแรก) */
table.yt.ytscaled thead th{position:static}

/* 5) โหมด "ตารางเทียบเต็ม" ไม่มีตัวเลือกบริษัท — ตารางโชว์ครบทุกเจ้าเสมอ
   (WATER สั่งตัด 10 ส.ค. life/pension · ขยายมา health/kids/ci 11 ส.ค.
   ชิปยังใช้ได้ในโหมด "ดูทีละบริษัท") */
body.ytpage[data-view="table"] #cochips,
body.qtpage[data-view="table"] #cochips{display:none}

/* 5.1) health/kids/ci: ตารางย่อพอดีจอ (syncFitQt ใน dt-table.js) — ตอน scale
   ปิด sticky คอลัมน์ซ้าย/หัวหมวด (containing block เปลี่ยนเพราะ transform จะทำให้เพี้ยน)
   และซ่อนเงาขอบขวาที่มีไว้บอกว่า "ปัดได้" เพราะไม่มีการปัดแล้ว */
table.qt.qtscaled th.item,table.qt.qtscaled th.corner{position:static}
table.qt.qtscaled .secpin{position:static;max-width:none}
table.qt.qtscaled th.item::after,table.qt.qtscaled th.corner::after{display:none}

/* 6) เมนูมือถือเต็มจอ สไตล์ Apple (แทนดรอปดาวน์เดิม) — สร้างโดย dt-analytics.js */
#dtmenu{position:fixed;inset:0;z-index:200;background:#fff;display:none;flex-direction:column;
  padding:14px 18px 30px;overflow:auto;overscroll-behavior:contain}
#dtmenu.open{display:flex}
#dtmenu .mx{align-self:flex-end;background:none;border:0;font-size:22px;color:var(--ink);
  padding:12px;cursor:pointer;line-height:1;min-width:44px;min-height:44px}
#dtmenu nav{display:flex;flex-direction:column;padding:6px 10px 0}
#dtmenu a{font-size:1.6rem;font-weight:600;color:var(--ink);padding:13px 4px;
  letter-spacing:-.015em;line-height:1.25;border:0}
#dtmenu a.active{color:var(--teal)}
/* ลิงก์ลูก (5 หน้าตาราง + ตัวอย่างใบเสนอ) — เล็กลง เยื้องเข้า มีเส้นนำสายตา */
#dtmenu a.sub{font-size:1.05rem;font-weight:400;color:var(--mut);
  padding:10px 4px 10px 20px;margin-left:4px;border-left:2px solid var(--line)}
#dtmenu a.sub.active{color:var(--teal);border-left-color:var(--teal)}
#dtmenu a.sub:first-of-type{padding-top:12px}

/* 7) การ์ดไฮไลต์ใต้ตาราง (แทนโน้ตย่อหน้ายาว — คอนเซปเดียวกับบล็อกลดหย่อนภาษี) */
.hl3{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
@media(min-width:760px){.hl3{grid-template-columns:repeat(3,1fr)}}
.hlc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.hlc .big{font-size:1.55rem;font-weight:700;color:var(--teal);letter-spacing:-.015em;line-height:1.15}
.hlc p{font-size:.88rem;color:var(--mut);margin-top:6px;line-height:1.55;font-weight:300}
.hlnote{font-size:.78rem;color:var(--mut);margin-top:12px;font-weight:300;line-height:1.6}

/* ── LEAD-V3 (13 ส.ค. 2026) — ฟอร์ม "ไม่สะดวกแชท กรอกไว้ได้" ──────────────────
   หน้าตาสุดท้ายที่ WATER เคาะ (mockup แบบ C): กล่องส้มอ่อนก้อนเดียว ไม่มีการ์ดขาวซ้อน
   ไม่มีแถบข้าง · แถบบนบอกว่าใช้เวลาน้อย · เลือกประเภทด้วยปุ่มกด · ปุ่มส่งเต็มความกว้าง

   ประวัติ: เคยทำแบบ B (การ์ดขาว + แถบความน่าเชื่อถือ 3 ข้อด้านขวา) แต่ WATER ดูของจริงแล้ว
   เลือกแบบ C — ถอดการ์ดขาวกับแถบข้างออก 13 ส.ค. (โค้ดสร้างแถบข้างถูกถอดใน dt-analytics.js ด้วย)

   ⚠️ ปุ่มส่ง #leadBtn เดิม "ไม่มีกฎ CSS จับเลยสักหน้า" เลยเป็นปุ่มดิบของเบราว์เซอร์
   ทั้ง 5 หน้า (kids/ci/life/pension ใช้ .lf-act ที่ไม่มีสไตล์ · health ใช้ .lf-send ที่มี)
   — กฎ #leadBtn ข้างล่างแก้ให้ทุกหน้าพร้อมกัน ห้ามลบ */

.lead{padding:30px 28px}
@media(max-width:560px){.lead{padding:24px 18px}}

/* หัวเรื่อง — เล็กลงให้เป็นหัวข้อของกล่อง ไม่ใช่หัวข้อของทั้งหน้า */
.lead h2{font-size:1.24rem;font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
.lead>p{font-size:.88rem;font-weight:300;color:#7A3A12;line-height:1.65;margin:0 0 18px}

/* แถบบนสุด — ใช้เวลาน้อย ไม่มีเงื่อนไข */
.leadsteps{font-size:.78rem;font-weight:300;color:#82603F;margin-bottom:8px;line-height:1.5}
.leadsteps b{color:var(--teal-d);font-weight:500}

/* เลือกประเภทประกันด้วยปุ่มกด — <select> เดิมยังอยู่ในฟอร์ม แค่ซ่อน (โค้ดส่งฟอร์มอ่านจากมัน) */
.lf-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-pills{margin-bottom:16px}
.pillrow{display:flex;flex-wrap:wrap;gap:9px}
.pill{font:inherit;font-size:.9rem;font-weight:400;padding:10px 20px;border-radius:999px;
  background:#fff;border:1.5px solid #F2D3BE;color:var(--ink);cursor:pointer;min-height:44px;
  transition:background .12s,border-color .12s,color .12s}
.pill:hover{border-color:var(--teal)}
.pill.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:500}
.pill:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* เหลือ 2 ช่องในแถว (ชื่อ · เบอร์) เพราะช่องประเภทย้ายขึ้นไปเป็นปุ่มแล้ว */
.lead .lf-grid{grid-template-columns:1fr 1fr}
@media(max-width:640px){.lead .lf-grid{grid-template-columns:1fr}}
.lead .lf-fld input,.lead .lf-fld textarea{background:#fff}

/* ปุ่มส่ง — เต็มความกว้าง กดง่ายทั้งมือถือและจอคอม */
.lf-act{margin-top:18px}
#leadBtn{width:100%;font:inherit;font-size:1rem;font-weight:500;color:#fff;background:var(--teal);
  border:0;border-radius:980px;padding:14px 38px;min-height:52px;cursor:pointer;
  box-shadow:0 2px 12px rgba(168,67,15,.28);transition:filter .15s,transform .06s}
#leadBtn:hover{filter:brightness(1.07)}
#leadBtn:active{transform:scale(.985)}
#leadBtn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
#leadBtn[disabled]{background:#C9C4BE;box-shadow:none;cursor:progress}

/* ข้อความยินยอม — เล็ก มีไอคอนกุญแจนำ อ่านเป็นหมายเหตุ ไม่ใช่เนื้อหาหลัก */
.lf-note{font-size:.78rem;color:#8A6B57;font-weight:300;line-height:1.65;margin:12px 0 0;
  padding-left:20px;position:relative}
.lf-note::before{content:"";position:absolute;left:0;top:3px;width:13px;height:13px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6B57' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}

/* ช่องทางติดต่ออื่น — แยกด้วยเส้นคั่น ไม่ลอยปนกับฟอร์ม */
.lead .lead-alt{margin-top:22px;padding-top:18px;border-top:1px solid #F4DDCC;align-items:center;gap:10px}
.lead .lead-alt .altlab{flex-basis:100%;font-size:.88rem;color:#7A3A12;font-weight:300;margin:0}
.lead .lead-alt a{padding:11px 20px;font-size:.94rem}

/* ── QUOTE-SAMPLE (14 ส.ค. 2026) — บล็อก "ใบเสนอฉบับเต็มหน้าตาแบบนี้" ใต้ตารางทุกหน้าเครื่องมือ
   ภาพมาจาก make_quote_images.py (เรนเดอร์จาก PDF ที่ 2 เท่า ฟอนต์จึงไม่เพี้ยน)
   มือถือ: ย่อทั้งใบลงจอ (WATER เคาะ 14 ส.ค.) แล้วให้กดเปิดใบเต็มไปซูมนิ้วเอา ── */
.qsam{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:center;margin-top:12px}
.qsam h2{margin-bottom:10px}
.qsam>div>p{color:var(--mut);font-size:.96rem}
.qsam ul{margin:14px 0 0;padding:0;list-style:none}
.qsam li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--mut);font-size:.92rem;line-height:1.65}
.qsam li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.qsam .qs-fig{margin:0;position:relative}
.qsam .qs-link{display:block;position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 10px 34px rgba(43,43,43,.16);line-height:0}
.qsam img{width:100%;height:auto;display:block}
.qsam .qs-zoom{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.96);border-radius:999px;
  padding:8px 16px;font-size:.82rem;font-weight:500;color:var(--teal-d);line-height:1.2;
  box-shadow:0 3px 12px rgba(43,43,43,.18)}
.qsam .qs-cap{font-size:.76rem;color:var(--mut);margin-top:10px;text-align:center;line-height:1.6}
.qsam .qs-acts{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:20px}
@media(max-width:860px){
  .qsam{grid-template-columns:1fr;gap:22px}
  .qsam .qs-fig{order:-1}
  .qsam .qs-zoom{right:10px;bottom:10px;font-size:.8rem;padding:9px 16px}
}

/* ── ลิงก์กลับหน้าตารางจากหน้าตัวอย่างใบเสนอ (14 ส.ค. 2569) ────────────────
   เดิมลูกค้าดูใบเสนอจบแล้วต้องกดย้อนกลับอย่างเดียว — เสียจังหวะที่สนใจสูงสุด */
.qs-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.qs-back{font-size:.95rem;white-space:nowrap}

/* แถวปุ่มหลัก + ลิงก์รอง (ใช้ที่ compare.html ท้ายหน้า) */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}

/* ลิงก์ "ไปต่อ" ท้ายคำตอบใน FAQ (14 ส.ค. 2569)
   วางนอก .a เสมอ — ข้อความใน .a ต้องตรงกับ JSON-LD ของ FAQ เป๊ะ ไม่งั้น schema เพี้ยน */
.faq-go{margin:14px 0 0}
.faq-go a{font-size:.92rem;color:var(--teal);font-weight:400}
.faq-go a:hover{text-decoration:underline}

/* คำบอกใบ้ตอนตารางถูกย่อลงจอ (สร้างโดย dt-table.js → zoomHint) */
.dtzoom{margin:12px 2px 0;font-size:.82rem;line-height:1.6;color:#6B6560;
  background:#FFF3E6;border-radius:12px;padding:11px 14px}

/* เคยมีบล็อก .hjump (แถบลิงก์ลัดหน้าแรก) ตรงนี้ — ถอดออก 14 ส.ค. 2569 ตามที่ WATER สั่ง
   เหลือไว้แค่ scroll-margin ข้างล่าง เผื่อมีคนส่งลิงก์ index.html#ex-quote ให้กัน */
/* กันหัวเว็บติดหนึบบังหัวข้อตอนกดลิงก์ลัด */
#ex-prod,#ex-quote,#ex-fee,#ex-ways{scroll-margin-top:64px}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL-ANIM v2 — เลื่อนแล้วมีอะไรให้ดูทุกจอ (WATER เคาะ 14 ส.ค. 2569)
   v1 โดนตีกลับเพราะ "ทุกการเลื่อนเหมือนกันหมด" → v2 แยก 7 ท่าตามชนิดเนื้อหา

   กติกาที่ห้ามพัง (เหตุผลที่คะแนนไม่ตก):
     · ขยับด้วย transform/opacity เท่านั้น ไม่แตะ width/height/margin → CLS คง 0
     · ของที่เห็นอยู่แล้วตอนเปิดหน้า สคริปต์ไม่แตะเลย → LCP เท่าเดิมเป๊ะ
     · ปิด JS = เห็นทุกอย่างครบตามปกติ (กฎ .js เท่านั้นที่ซ่อน)
     · เคารพ prefers-reduced-motion — ปิดหมดทุกท่า
   ตัวสั่งงานอยู่ท้าย dt-analytics.js (บล็อก SCROLL-ANIM)
   ══════════════════════════════════════════════════════════════════════════ */
/* ── ท่ากลาง: ทุกตัวเริ่มจาก "ยังไม่โผล่" แล้วค่อยเข้าที่ ──
   เคลื่อนด้วย transform/opacity เท่านั้น = ไม่ทำให้หน้าขยับ (CLS คงเป็น 0) */
html.js [data-sa]{opacity:0;transition-property:opacity,transform;
  transition-duration:var(--sd,620ms);transition-timing-function:var(--se,cubic-bezier(.16,1,.3,1));
  transition-delay:var(--sad,0ms)}
html.js [data-sa].in{opacity:1;transform:none}

/* ── ท่าที่ 1 · แจกไพ่: ป้ายบริษัท 8 ใบ เด้งขึ้นพร้อมเอียงนิด ไล่เร็ว ๆ ── */
html.js [data-sa="deal"]{transform:translateY(16px) scale(.92) rotate(-2.5deg)}

/* ── ท่าที่ 2 · สลับข้าง: การ์ดสินค้าเข้าจากซ้าย-ขวาสลับกัน ── */
html.js [data-sa="fromL"]{transform:translateX(-34px)}
html.js [data-sa="fromR"]{transform:translateX(34px)}

/* ── ท่าที่ 3 · ป๊อป: การ์ดสถานการณ์ เด้งจากเล็กเป็นใหญ่ (สปริง) ── */
html.js [data-sa="pop"]{transform:scale(.84) translateY(12px)}

/* ── ท่าที่ 4 · ไล่จากซ้าย: tips / ไฮไลต์ เหมือนรายการถูกเขียนลงมา ── */
html.js [data-sa="wipe"]{transform:translateX(-22px)}

/* ── ท่าที่ 5 · แยกซ้ายขวา: บล็อกใบเสนอ ข้อความมาจากซ้าย รูปมาจากขวา ── */
html.js [data-sa="splitL"]{transform:translateX(-40px)}
html.js [data-sa="splitR"]{transform:translateX(40px) scale(.96)}

/* ── ท่าที่ 6 · นุ่ม: กล่องฟอร์ม แค่สเกลเข้าเบา ๆ ไม่แย่งซีน ── */
html.js [data-sa="soft"]{transform:scale(.975)}

/* ── ท่าที่ 7 · ขึ้นตรง ๆ: หัวข้อกับคำโปรย ── */
html.js [data-sa="rise"]{transform:translateY(22px)}

/* ── ไอคอนช่องทางติดต่อ: หมุนเข้าที่ ── */
html.js .wcard .wico{transform:rotate(-24deg) scale(.7);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--sad,0ms)}
html.js .wcard.in .wico{transform:none}

/* ── บล็อกยอด 2568: แถบสีกวาดทีละช่อง + จุดสีเด้ง ── */
html.js .y25 .cobar.top i{transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);transition-delay:var(--sad,0ms)}
html.js .y25.go .cobar.top i{transform:scaleX(1)}
html.js .codots i{transform:scale(0);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--sad,0ms)}
html.js .y25.go .codots i{transform:scale(1)}

/* ── เลขขั้นตอน 1-2-3: ป๊อปสปริง ── */
html.js .stepn{transform:scale(0);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--sad,0ms)}
html.js .in .stepn,html.js .stepn.in{transform:scale(1)}

/* ── ปิดทั้งหมดถ้าผู้ใช้ตั้งค่า "ลดการเคลื่อนไหว" ── */
@media(prefers-reduced-motion:reduce){
  html.js [data-sa],html.js .wcard .wico,html.js .y25 .cobar.top i,
  html.js .codots i,html.js .stepn{opacity:1!important;transform:none!important;transition:none!important}
}