/* ============================================================
   ThaiEstimate — หน้าประกันภัย (insurance.css)
   ใช้คู่กับ ../site.css (ธีมเดียวกับเว็บหลัก · dark / light)
   ============================================================ */

/* สีหลักของหมวดประกัน — โทนเขียวน้ำทะเล (teal / emerald) ให้ต่างจากเว็บหลัก (ฟ้า–น้ำเงิน)
   แต่ยังเป็นโทนเย็น สะอาด แบบเดียวกัน · ทับตัวแปรของ site.css เฉพาะหน้าที่มี <body class="ins"> */
.ins{
  --bg:#f2f8f6;
  --bg-soft:#e6f3ef;
  --surface-2:#edf6f3;
  --border:#d3e6df;
  --text:#0d2420;
  --text-2:#33504a;
  --text-3:#587069;
  --accent:#0d9488;            /* teal-600 */
  --accent-2:#047857;          /* emerald-700 */
  --grad-brand:linear-gradient(120deg,#10b981,#0d9488 55%,#0e7490);
  --shadow:0 10px 30px -12px rgba(10,70,60,.18);
  --shadow-lg:0 24px 60px -20px rgba(10,70,60,.28);
  --nav-bg:rgba(255,255,255,.92);
  --hero-glow-1:rgba(16,185,129,.16);
  --hero-glow-2:rgba(13,148,136,.14);
  --hero-glow-3:rgba(14,116,144,.10);
  --ring:rgba(13,148,136,.25);
  --glow:rgba(13,148,136,.55);
}
[data-theme="dark"] .ins{
  --bg:#08141a;
  --bg-soft:#0b1c1f;
  --surface:#0f2326;
  --surface-2:#142c2e;
  --border:#203e3d;
  --text:#e5f2ef;
  --text-2:#b6cdc7;
  --text-3:#8fa9a2;
  --accent:#2dd4bf;
  --accent-2:#34d399;
  --shadow:0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-lg:0 24px 60px -18px rgba(0,0,0,.65);
  --nav-bg:rgba(8,20,26,.92);
  --hero-glow-1:rgba(16,185,129,.12);
  --hero-glow-2:rgba(13,148,136,.12);
  --hero-glow-3:rgba(14,116,144,.10);
  --ring:rgba(45,212,191,.28);
  --glow:rgba(13,148,136,.6);
}
.ins .btn-primary{box-shadow:0 12px 26px -10px var(--glow)}
.ins .btn-primary:hover{box-shadow:0 16px 32px -10px var(--glow)}

/* สีประจำประเภทประกัน — ใช้กับไอคอน กรอบ และฉากหัวหน้า */
.ins{--tone:#0d9488;--tone-2:#059669}
.t-car{--tone:#f59e0b;--tone-2:#ea580c}
.t-mach{--tone:#6366f1;--tone-2:#2563eb}
.t-plant{--tone:#0d9488;--tone-2:#0891b2}
.t-motor{--tone:#2563eb;--tone-2:#6366f1}
.t-fire{--tone:#ef4444;--tone-2:#f97316}
.t-misc{--tone:#ec4899;--tone-2:#8b5cf6}
.t-liab{--tone:#8b5cf6;--tone-2:#6366f1}
.t-other{--tone:#0891b2;--tone-2:#10b981}
.t-quote{--tone:#0d9488;--tone-2:#0e7490}

.ins section{padding:58px 0}
.ins .sec-head{margin-bottom:34px}
.ins .sec-head h2{margin-bottom:8px}

/* ไอคอนเส้น (sprite assets/icons.svg) */
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}

/* ---------- Nav ---------- */
.ins .brand-text b{color:var(--text)}
.ins .brand-text b em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.ins .nav-drop-menu{min-width:250px}
.ins .nav-drop-menu a{justify-content:flex-start}
.ins .nav-drop-menu a .i{font-size:1.15rem;color:var(--accent)}
.ins .nav-drop-menu a[aria-current="page"]{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ins .nav-links>a[aria-current="page"]{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ins .nav-links>a.nav-cta[aria-current="page"]{background:var(--grad-brand)}  /* ปุ่มขอใบเสนอราคา ในหน้าฟอร์มเอง: คงสีปุ่มไว้ ไม่ให้จาง */
.ins .nav-drop.is-active .nav-drop-btn{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* ---------- Hero (หน้าแรกประกัน + หน้าประเภท) ---------- */
.ins .p-hero{padding:112px 0 40px}
.ins .p-hero .hero-inner{grid-template-columns:1.1fr .9fr}
@media (max-width:900px){.ins .p-hero .hero-inner{grid-template-columns:1fr;gap:20px}}
.ins .p-hero .hero-inner>*{min-width:0}
.ins .p-hero h1{margin:16px 0 12px}
.ins .p-hero p.lead{margin-bottom:26px}
.ins .p-hero .cta-row{justify-content:flex-start}
@media (max-width:900px){.ins .p-hero .cta-row{justify-content:center}}
.crumb{display:flex;gap:6px;align-items:center;font-size:.85rem;color:var(--text-3);margin-bottom:6px}
.crumb a{color:var(--accent);font-weight:600}
.crumb a:hover{text-decoration:underline}
@media (max-width:900px){.crumb{justify-content:center}}
.lic{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  font-size:.82rem;font-weight:700;color:var(--text-2);
}
.lic .i{color:#10b981;font-size:1.05rem}
/* ป้ายใบอนุญาต กดได้ → กล่องสายด่วน + วิธีตรวจสอบใบอนุญาตที่ คปภ. (<details> ไม่ใช้ JS) */
.lic-wrap{display:inline-block;max-width:100%}
.lic-wrap>summary{list-style:none;cursor:pointer;flex-wrap:wrap;justify-content:center;transition:border-color .2s}
.lic-wrap>summary::-webkit-details-marker{display:none}
.lic-wrap>summary:hover,.lic-wrap[open]>summary{border-color:#10b981}
.lic-more{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:999px;
  background:color-mix(in srgb,#10b981 15%,transparent);color:#047857;font-size:.76rem;font-weight:800}
[data-theme="dark"] .lic-more{color:#34d399}
.lic .lic-more .lic-caret{color:inherit;font-size:.8rem;transition:transform .2s}
.lic-wrap[open] .lic-caret{transform:rotate(90deg)}
.lic-pop{
  margin-top:8px;max-width:430px;padding:14px 16px;border-radius:16px;text-align:left;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  font-size:.84rem;line-height:1.6;color:var(--text-2);
}
.lic-tel{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:9px 13px;margin-bottom:12px;border-radius:12px;
  color:#fff;font-weight:700;background:linear-gradient(120deg,#10b981,#0891b2);box-shadow:0 10px 20px -12px rgba(16,185,129,.8)}
.lic-tel .i{font-size:1.1rem}
.lic-tel b{font-size:1.08rem;letter-spacing:.3px}
.lic-h{display:block;color:var(--text);margin-bottom:4px}
.lic-pop ol{margin:0 0 8px;padding-left:20px;list-style:decimal}
.lic-pop ol li{margin:2px 0}
.lic-pop a:not(.lic-tel){color:var(--accent);font-weight:700}
.lic-pop a:not(.lic-tel):hover{text-decoration:underline}
.lic-alt{margin-top:4px;font-size:.78rem;color:var(--text-3)}
@media (max-width:900px){.lic-pop{margin-left:auto;margin-right:auto}}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
@media (max-width:900px){.hero-facts{justify-content:center}}
.hero-facts span{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);font-size:.85rem;font-weight:600;color:var(--text-2);
}
.hero-facts .i{color:var(--tone);font-size:1.1rem}

/* ฉากไอคอนลอยรอบวง (ใช้ทุกหน้าประเภท) */
.orbit{
  position:relative;aspect-ratio:1/1;max-width:420px;width:100%;margin-inline:auto;
  display:grid;place-items:center;
}
.orbit::before{        /* แสงฟุ้งด้านหลัง */
  content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--tone) 30%,transparent),transparent 68%);
  filter:blur(10px);animation:orbGlow 5s ease-in-out infinite;
}
.orbit .ring{position:absolute;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--tone) 40%,transparent)}
.orbit .ring.r1{inset:14%;animation:spin 40s linear infinite}
.orbit .ring.r2{inset:2%;border-style:solid;border-color:color-mix(in srgb,var(--tone) 16%,transparent);animation:spin 70s linear infinite reverse}
.orbit .core{
  position:relative;z-index:2;width:42%;aspect-ratio:1/1;border-radius:32%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--tone),var(--tone-2));
  box-shadow:0 30px 60px -20px color-mix(in srgb,var(--tone) 70%,transparent),inset 0 2px 0 rgba(255,255,255,.25);
  animation:coreBob 4.5s ease-in-out infinite;
}
.orbit .core .i{width:52%;height:52%;stroke-width:1.5}
.orbit .core::after{        /* แสงวาบบนกล่อง */
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  background-size:250% 100%;animation:shine 4.5s ease-in-out infinite;
}
.orbit .sat{
  position:absolute;z-index:3;width:17%;aspect-ratio:1/1;border-radius:30%;
  display:grid;place-items:center;color:var(--tone);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  animation:satFloat 5s ease-in-out infinite,satOn 12.5s ease-in-out infinite;
}
.orbit .sat .i{width:50%;height:50%}
/* animation-delay 2 ค่า: ลอยขึ้นลง , ไฮไลต์ตามคิวป้าย (วนตามเข็ม s1→s5 ทีละ 2.5 วิ) */
.orbit .s1{top:6%;left:16%;animation-delay:0s,0s}
.orbit .s2{top:12%;right:8%;animation-delay:-1.2s,2.5s}
.orbit .s3{bottom:12%;right:4%;animation-delay:-2.4s,5s}
.orbit .s4{bottom:6%;left:10%;animation-delay:-3.6s,7.5s}
.orbit .s5{top:44%;left:-2%;animation-delay:-.6s,10s}
/* ป้ายข้อความย่อ "คุ้มครองอะไร" — โผล่ทีละอัน สลับกันรอบวง */
.orbit .sat .st{
  position:absolute;left:50%;top:calc(100% + 7px);translate:-50% 4px;opacity:0;pointer-events:none;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
  font-style:normal;font-size:.74rem;font-weight:800;line-height:1.35;color:#fff;
  background:linear-gradient(120deg,var(--tone),var(--tone-2));
  box-shadow:0 10px 22px -10px color-mix(in srgb,var(--tone) 80%,transparent);
  animation:satTag 12.5s ease-in-out infinite;
}
.orbit .s3 .st,.orbit .s4 .st,.orbit .s5 .st{top:auto;bottom:calc(100% + 7px)}   /* ไอคอนล่าง/ซ้าย: ป้ายขึ้นด้านบน ไม่ชนกัน */
.orbit .s5 .st{left:0;translate:0 4px}                             /* ไอคอนชิดซ้าย: ไม่ล้นจอมือถือ */
.orbit .s1 .st{animation-delay:0s}
.orbit .s2 .st{animation-delay:2.5s}
.orbit .s3 .st{animation-delay:5s}
.orbit .s4 .st{animation-delay:7.5s}
.orbit .s5 .st{animation-delay:10s}
.orbit .s5 .st{animation-name:satTagL}
@keyframes satTag{0%{opacity:0;translate:-50% 4px}3%,17%{opacity:1;translate:-50% 0}20%,100%{opacity:0;translate:-50% 4px}}
@keyframes satTagL{0%{opacity:0;translate:0 4px}3%,17%{opacity:1;translate:0 0}20%,100%{opacity:0;translate:0 4px}}
@keyframes satOn{
  0%,20%,100%{border-color:var(--border);box-shadow:var(--shadow-lg)}
  3%,17%{border-color:var(--tone);box-shadow:var(--shadow-lg),0 0 0 4px color-mix(in srgb,var(--tone) 18%,transparent)}
}
@media (max-width:900px){.orbit .sat .st{font-size:.68rem;padding:3px 8px}}
.orbit .tag-ok{
  position:absolute;z-index:4;right:10%;top:48%;
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  background:#10b981;color:#fff;font-size:.8rem;font-weight:800;
  box-shadow:0 12px 26px -10px rgba(16,185,129,.7);animation:pop 3.2s ease-in-out infinite;
}
.orbit .tag-ok .i{stroke-width:3}
@media (max-width:900px){.orbit{max-width:300px;margin-top:10px}}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orbGlow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes coreBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes satFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes shine{0%,40%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---------- ภาพหน้าแรกประกัน (ภาพถ่ายไซต์ก่อสร้างเต็มกรอบ + ข้อความทับ + จุดความเสี่ยง) ---------- */
.ins .p-hero.hero-site{padding:96px 0 44px}
.scene{
  position:relative;display:flex;align-items:center;min-height:470px;border-radius:28px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);isolation:isolate;
}
/* ภาพอยู่ขวา 80% แล้วจางเข้าหาข้อความทางซ้าย */
.scene .sc-photo{position:absolute;top:0;right:0;bottom:0;width:80%;margin:0;overflow:hidden;container-type:size;--fx:50%;--fy:45%}
/* กรอบพิกัดภาพ — ทำตัวแบบ object-fit:cover จุดความเสี่ยงจึงอยู่ตรงตำแหน่งในภาพทุกขนาดจอ */
.scene .sc-frame{
  position:absolute;left:var(--fx);top:var(--fy);translate:calc(var(--fx) * -1) calc(var(--fy) * -1);
  width:max(100cqw,calc(100cqh * 2.0202));aspect-ratio:1600/792;
}
.scene .sc-frame img{
  display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 16%,#000 40%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 16%,#000 40%);
}
.scene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 78%,transparent) 34%,transparent 54%)}
.scene .sc-copy{position:relative;z-index:3;max-width:47%;padding:40px 0 40px 44px}
.scene .sc-copy p.lead{max-width:none}
.scene .sc-badge{
  position:absolute;z-index:3;right:16px;top:16px;
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:rgba(16,185,129,.92);color:#fff;font-size:.82rem;font-weight:800;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
}
.scene .sc-badge .i{stroke-width:2.4;font-size:1rem}
.scene .hs{position:absolute;z-index:2;left:var(--x);top:var(--y);width:0;height:0}
.scene .hs>i{
  position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:#f59e0b;border:3px solid #fff;box-shadow:0 0 0 0 rgba(245,158,11,.7);
  animation:hsPulse 2s ease-out infinite;animation-delay:var(--d);
}
.scene .hs .tip{
  position:absolute;top:-24px;width:max-content;white-space:nowrap;padding:9px 13px;border-radius:12px;
  background:rgba(15,23,42,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);color:#cbd5e1;font-size:.81rem;line-height:1.4;text-align:left;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.7);
  opacity:0;animation:hsTip 20s ease-in-out infinite both;animation-delay:var(--d);
}
.scene .hs .tip b{display:block;color:#fff;font-size:.9rem;font-weight:800}
.scene .hs .tip em{font-style:normal;font-weight:800;color:#34d399}
.scene .hs .tip.l{right:18px}
.scene .hs .tip.r{left:18px}
.scene .hs .tip.c{left:0;top:18px;translate:-50% 0}
@keyframes hsPulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.75)}70%,100%{box-shadow:0 0 0 14px rgba(245,158,11,0)}}
@keyframes hsTip{0%{opacity:0;transform:translateY(6px)}2.5%,17.5%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-4px)}}
@media (max-width:900px){
  .scene{flex-direction:column;align-items:stretch;min-height:0}
  .scene .sc-photo{position:relative;width:100%;aspect-ratio:4/3;--fx:58%;--fy:40%}
  .scene .sc-frame img{
    -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
  .scene::before{display:none}
  .scene .sc-copy{max-width:none;padding:6px 20px 28px;text-align:center}
  .scene .sc-badge{right:auto;left:12px;top:12px}
}
@media (max-width:520px){
  .scene .hs .tip{font-size:.75rem;padding:7px 11px}
  .scene .hs .tip b{font-size:.81rem}
  .scene .hs .tip.r{left:0;top:18px;translate:-50% 0}
  .scene .sc-badge{font-size:.76rem;padding:6px 11px}
  .scene .sc-copy{padding:4px 12px 26px}
  .scene .sc-copy .lic{font-size:.76rem}
}

/* ---------- การ์ดประเภทประกัน (หน้าแรก) ---------- */
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.type-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.type-grid{grid-template-columns:1fr}}
.type-card{
  position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 22px 20px;
  background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;overflow:hidden;
}
.type-card::before{        /* แถบสีบนการ์ด */
  content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--tone),var(--tone-2));
  transform:scaleX(.18);transform-origin:left;transition:transform .45s ease;
}
.type-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--tone) 45%,var(--border))}
.type-card:hover::before{transform:scaleX(1)}
.type-card .ti{
  width:56px;height:56px;border-radius:17px;display:grid;place-items:center;margin-bottom:10px;
  color:#fff;background:linear-gradient(135deg,var(--tone),var(--tone-2));
  box-shadow:0 12px 24px -12px color-mix(in srgb,var(--tone) 80%,transparent);
  transition:transform .4s cubic-bezier(.3,1.6,.5,1);
}
.type-card .ti .i{font-size:1.75rem}
.type-card:hover .ti{transform:rotate(-8deg) scale(1.08)}
.type-card h3{font-size:1.08rem}
.type-card p{font-size:.88rem;color:var(--text-2)}
.type-card .go{
  margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:.85rem;font-weight:700;color:var(--tone);
}
.type-card .go .i{transition:transform .25s}
.type-card:hover .go .i{transform:translateX(5px)}
.type-card .hot{
  position:absolute;top:16px;right:16px;font-size:.66rem;font-weight:800;letter-spacing:.4px;
  padding:4px 9px;border-radius:999px;color:var(--tone);
  background:color-mix(in srgb,var(--tone) 12%,transparent);
}

/* ---------- ขั้นตอน 3 ขั้น ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
@media (max-width:820px){.steps3{grid-template-columns:1fr}}
.step3{
  position:relative;text-align:center;padding:28px 22px 24px;background:var(--surface);
  border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);
}
.step3 .sn{
  position:relative;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--grad-brand);
  box-shadow:0 14px 28px -12px var(--glow);
}
.step3 .sn .i{font-size:1.7rem}
.step3 .sn b{
  position:absolute;top:-4px;right:-4px;width:24px;height:24px;border-radius:50%;
  background:var(--surface);color:var(--accent-2);border:2px solid var(--accent-2);
  display:grid;place-items:center;font-size:.75rem;font-weight:900;
}
.step3 .sn::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 35%,transparent);
  animation:ripple 2.6s ease-out infinite;
}
.step3:nth-child(2) .sn::after{animation-delay:.6s}
.step3:nth-child(3) .sn::after{animation-delay:1.2s}
@keyframes ripple{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.step3 h3{font-size:1.05rem;margin-bottom:4px}
.step3 p{font-size:.88rem;color:var(--text-2)}

/* ---------- แถบโลโก้บริษัทประกัน (เลื่อนวน) ---------- */
.marquee{
  position:relative;overflow:hidden;padding:6px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.logo-tile{
  display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:16px;
  background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);
  font-size:.86rem;font-weight:700;color:#0f2233;white-space:nowrap;
}
.logo-tile img{height:38px;width:auto;max-width:110px;object-fit:contain}
.fine{font-size:.8rem;color:var(--text-3);text-align:center;margin-top:16px}

/* ---------- คุ้มครองอะไร (ไทล์ไอคอน) ---------- */
.cover-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.cv{
  display:flex;flex-direction:column;gap:10px;padding:20px 18px;border-radius:18px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  transition:transform .25s ease,border-color .25s ease;
}
.cv:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--tone) 50%,var(--border))}
.cv .ci{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  color:var(--tone);background:color-mix(in srgb,var(--tone) 13%,transparent);
  transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.cv .ci .i{font-size:1.45rem}
.cv:hover .ci{transform:scale(1.12) rotate(-6deg)}
.cv b{font-size:.98rem;line-height:1.4}
.cv span{font-size:.84rem;color:var(--text-2);line-height:1.55}

/* กล่องสองฝั่ง: ไม่คุ้มครอง / ส่วนขยาย */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.panel{
  padding:24px 24px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
}
.panel h3{display:flex;align-items:center;gap:10px;font-size:1.08rem;margin-bottom:14px}
.panel h3 .hi{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:1.15rem}
.panel.no h3 .hi{color:#ef4444;background:color-mix(in srgb,#ef4444 12%,transparent)}
.panel.plus h3 .hi{color:#10b981;background:color-mix(in srgb,#10b981 12%,transparent)}
.panel.info h3 .hi{color:var(--tone);background:color-mix(in srgb,var(--tone) 12%,transparent)}
.ticks{list-style:none;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--text-2);line-height:1.5}
.ticks li .i{margin-top:2px;font-size:1.05rem;stroke-width:2.4}
.panel.no .ticks .i{color:#ef4444}
.panel.plus .ticks .i{color:#10b981}
.panel.info .ticks .i{color:var(--tone)}

/* ---------- เคสตัวอย่าง (การ์ด + ตัวกรอง) ---------- */
.case-filter{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.case-filter button{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:700;color:var(--text-2);
  background:var(--surface);border:1px solid var(--border);transition:.2s;
}
.case-filter button:hover{border-color:var(--accent);color:var(--accent)}
.case-filter button.on{color:#fff;background:var(--grad-brand);border-color:transparent;box-shadow:0 10px 22px -10px var(--glow)}
.case-filter button[data-f="yes"].on{background:#10b981}
.case-filter button[data-f="no"].on{background:#ef4444}
.case-filter .n{font-size:.72rem;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,currentColor 16%,transparent)}
/* ตารางสรุปเคส: เหตุการณ์ | เคลมได้ไหม | เพราะอะไร — มือถือแปลงเป็นการ์ดเรียงลง */
.case-wrap{border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.case-table{width:100%;border-collapse:collapse}
.case-table th{
  padding:14px 18px;text-align:left;font-size:.8rem;font-weight:800;letter-spacing:.04em;
  color:var(--text-3);background:var(--surface-2);border-bottom:1px solid var(--border);
}
.case-table th:nth-child(2){text-align:center;width:150px}
.case-table td{padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:.92rem}
.case-table tbody tr:last-child td{border-bottom:0}
.case-table tbody tr{transition:background .2s}
.case-table tbody tr:hover{background:var(--surface-2)}
.case-table tr.hide{display:none}
.case-table tr.fade-in{animation:caseIn .35s ease both}
@keyframes caseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.case-table .ev{display:flex;gap:12px;align-items:center;font-weight:600;color:var(--text);line-height:1.5}
.case-table .ev>.i{
  flex:none;width:38px;height:38px;padding:8px;border-radius:12px;
  color:var(--tone);background:color-mix(in srgb,var(--tone) 12%,transparent);
}
.case-table td:nth-child(2){text-align:center}
.case-table td:nth-child(3){color:var(--text-2);font-size:.86rem;line-height:1.55}
.verdict{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:.8rem;font-weight:800;white-space:nowrap;
}
.verdict .i{stroke-width:3}
tr[data-claim="yes"] .verdict{color:#059669;background:color-mix(in srgb,#10b981 14%,transparent)}
tr[data-claim="no"] .verdict{color:#dc2626;background:color-mix(in srgb,#ef4444 12%,transparent)}
tr[data-claim="yes"] td:first-child{box-shadow:inset 4px 0 0 #10b981}
tr[data-claim="no"] td:first-child{box-shadow:inset 4px 0 0 #ef4444}
[data-theme="dark"] tr[data-claim="yes"] .verdict{color:#34d399}
[data-theme="dark"] tr[data-claim="no"] .verdict{color:#f87171}
.case-sub{display:flex;align-items:center;gap:8px;font-size:1.1rem;margin:30px 0 12px}
[data-case-block]+[data-case-block]{margin-top:34px}
.case-sub{margin-top:0}
.case-sub .i{color:var(--tone);font-size:1.3rem}
.case-sum{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:-8px 0 18px;font-size:.82rem;color:var(--text-3)}
@media (max-width:700px){
  .case-table thead{display:none}
  .case-table,.case-table tbody,.case-table tr,.case-table td{display:block;width:100%}
  .case-table tr{padding:14px 16px;border-bottom:1px solid var(--border)}
  .case-table tbody tr:last-child{border-bottom:0}
  .case-table td{padding:0;border:0;text-align:left!important}
  .case-table td:nth-child(2){margin:10px 0 6px 50px}
  .case-table td:nth-child(3){margin-left:50px}
  tr[data-claim] td:first-child{box-shadow:none}
  tr[data-claim="yes"]{box-shadow:inset 4px 0 0 #10b981}
  tr[data-claim="no"]{box-shadow:inset 4px 0 0 #ef4444}
}
.case-note{
  display:flex;gap:10px;align-items:flex-start;max-width:760px;margin:22px auto 0;padding:12px 16px;border-radius:14px;
  font-size:.84rem;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);
}
.case-note .i{color:var(--accent);font-size:1.15rem;margin-top:1px}

/* ---------- เตรียมข้อมูลขอราคา (ชิป) ---------- */
.prep{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.prep span{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  font-size:.9rem;font-weight:600;color:var(--text-2);transition:.2s;
}
.prep span:hover{border-color:var(--accent);color:var(--text);transform:translateY(-2px)}
.prep .i{color:var(--accent);font-size:1.2rem}

/* ---------- ตารางเปรียบเทียบ (ประกันรถ) ---------- */
.ins .cmp td,.ins .cmp th{padding:12px 14px}
.ins .cmp .ok,.ins .cmp .nok{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%}
.ins .cmp .ok{color:#fff;background:#10b981}
.ins .cmp .nok{color:var(--text-3);background:var(--surface-2)}
.ins .cmp .ok .i,.ins .cmp .nok .i{font-size:.95rem;stroke-width:3}
.ins .cmp tbody tr{transition:background .2s}
.ins .cmp tbody tr:hover{background:var(--surface-2)}
.ins .cmp td:first-child .i{color:var(--tone);font-size:1.15rem;margin-right:8px}
.ins .cmp thead th small{display:block;font-weight:600;color:var(--text-3);font-size:.72rem}

/* ---------- ตัวเลขเด่น ---------- */
.big-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.big-num{
  padding:22px 20px;border-radius:18px;text-align:center;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow);
}
.big-num .i{font-size:1.6rem;color:var(--tone);margin-bottom:6px}
.big-num b{display:block;font-size:1.5rem;font-weight:900;background:linear-gradient(120deg,var(--tone),var(--tone-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.big-num span{font-size:.84rem;color:var(--text-2)}

/* ---------- ที่มาข้อมูล ---------- */
.src{
  max-width:860px;margin:0 auto;padding:16px 20px;border-radius:16px;
  background:var(--surface-2);border:1px dashed var(--border);font-size:.8rem;color:var(--text-3);
}
.src b{display:flex;align-items:center;gap:6px;color:var(--text-2);margin-bottom:6px;font-size:.82rem}
.src ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px}
.src a{display:inline-flex;align-items:center;gap:4px;color:var(--accent)}
.src a:hover{text-decoration:underline}
.src a .i{font-size:.85rem}
.src p{margin-top:8px}

/* ---------- แถบ CTA ---------- */
.ins .cta-band{padding:48px 32px}
.ins .cta-band .cta-row{gap:12px}
.cta-band .btn .i{font-size:1.2rem}

/* ---------- ฟอร์มขอใบเสนอราคา ---------- */
.q-wrap{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}
@media (max-width:980px){.q-wrap{grid-template-columns:1fr}}
.q-card{padding:28px;border-radius:24px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
@media (max-width:560px){.q-card{padding:20px 16px}}
.q-step{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:1.02rem;font-weight:800;margin:4px 0 14px}
.q-step b{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:#fff;background:var(--grad-brand);font-size:.85rem;
}
.q-step small{font-weight:600;color:var(--text-3);font-size:.8rem}
.q-sep{border:0;border-top:1px dashed var(--border);margin:24px 0 18px}
.q-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.q-type{position:relative;cursor:pointer}
.q-type input{position:absolute;opacity:0;pointer-events:none}
.q-type span{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 8px;border-radius:16px;
  font-size:.82rem;font-weight:700;color:var(--text-2);line-height:1.35;
  background:var(--surface-2);border:1.5px solid var(--border);transition:.2s;
}
.q-type span .i{font-size:1.6rem;color:var(--accent);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.q-type:hover span{border-color:var(--accent);color:var(--text)}
.q-type input:checked+span{color:var(--text);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:0 10px 22px -12px var(--ring)}
.q-type input:checked+span .i{transform:scale(1.18) rotate(-6deg)}
.q-type input:focus-visible+span{outline:3px solid var(--ring);outline-offset:2px}
.pick-count{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--accent);padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pick-item{position:relative;cursor:pointer}
.pick-item input{position:absolute;opacity:0;pointer-events:none}
.pick-item>span{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border-radius:16px;
  font-size:.78rem;font-weight:700;color:#334155;text-align:center;line-height:1.3;
  background:#fff;border:1.5px solid var(--border);transition:.2s;
}
.pick-item img{height:34px;width:auto;max-width:110px;object-fit:contain}
.pick-item>span::after{        /* วงติ๊ก */
  content:"";position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid #cbd5e1;background:#fff center/12px no-repeat;transition:.2s;
}
.pick-item input:checked+span{border-color:#10b981;box-shadow:0 10px 22px -12px rgba(16,185,129,.6);transform:translateY(-2px)}
.pick-item input:checked+span::after{
  border-color:#10b981;background-color:#10b981;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.pick-item input:disabled+span{opacity:.4;cursor:not-allowed}
.pick-item input:focus-visible+span{outline:3px solid var(--ring);outline-offset:2px}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.q-grid{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:6px;font-size:.86rem;font-weight:700;color:var(--text-2)}
.fld.full{grid-column:1/-1}
.fld em{font-style:normal;color:#ef4444}
.fld .inp{position:relative}
.fld .inp .i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:1.1rem;pointer-events:none}
.fld input,.fld textarea{
  width:100%;padding:12px 14px;border-radius:12px;font:inherit;font-weight:500;font-size:.95rem;
  color:var(--text);background:var(--surface-2);border:1.5px solid var(--border);transition:.2s;
}
.fld .inp input{padding-left:40px}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--ring)}
.fld input:focus+.i,.fld .inp:focus-within .i{color:var(--accent)}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.84rem;color:var(--text-2);cursor:pointer}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent-2);flex:none}
.consent a{color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.q-actions .btn .i{font-size:1.15rem}
/* เมนู "ส่งทางอีเมลแทน" */
.mail-alt{position:relative}
.mail-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;min-width:100%;width:max-content;max-width:calc(100vw - 32px);display:grid;gap:2px;padding:6px;
  border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.mail-menu[hidden]{display:none}
.mail-menu a,.mail-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border-radius:10px;border:0;background:transparent;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--text);text-align:left;cursor:pointer;white-space:nowrap}
.mail-menu a:hover,.mail-menu button:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.mail-menu .i{flex:none;font-size:1.05rem;color:var(--accent)}
button.btn:disabled{opacity:.6;cursor:wait;transform:none}
.form-msg{display:none;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 16px;border-radius:14px;font-size:.9rem;font-weight:600}
.form-msg.show{display:flex;animation:caseIn .3s ease both}
.form-msg .i{font-size:1.2rem;margin-top:1px}
.form-msg.ok{color:#047857;background:color-mix(in srgb,#10b981 12%,transparent);border:1px solid color-mix(in srgb,#10b981 35%,transparent)}
.form-msg.err{color:#b91c1c;background:color-mix(in srgb,#ef4444 10%,transparent);border:1px solid color-mix(in srgb,#ef4444 35%,transparent)}
.form-msg.wait{color:var(--text-2);background:var(--surface-2);border:1px solid var(--border)}
[data-theme="dark"] .form-msg.ok{color:#6ee7b7}
[data-theme="dark"] .form-msg.err{color:#fca5a5}
.q-side{display:grid;gap:14px;position:sticky;top:84px}
@media (max-width:980px){.q-side{position:static}}
.q-side .panel{padding:20px}
.q-side .panel h3{font-size:1rem;margin-bottom:10px}
.q-side .ticks li{font-size:.86rem}
.q-contact{display:grid;gap:8px}
.q-contact a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);font-size:.88rem;font-weight:700;color:var(--text);transition:.2s;
}
.q-contact a:hover{border-color:var(--accent);color:var(--accent)}
.q-contact .i{color:var(--accent);font-size:1.15rem}

/* ---------- Footer ---------- */
.ins footer{margin-top:20px}
.ins .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:1000px){.ins .foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.ins .foot-grid{grid-template-columns:1fr}}
.ins .foot-grid .i{color:var(--accent);margin-right:6px}

@media (prefers-reduced-motion:reduce){
  .orbit *,.orbit::before,.scene .hs>i,.marquee-track,.step3 .sn::after,.case-table tr.fade-in{animation:none!important}
  .orbit .sat .st{opacity:1;translate:-50% 0}            /* ไม่มีแอนิเมชัน: แสดงป้ายทุกอันค้างไว้ */
  .orbit .s5 .st{translate:0 0}
}

/* หัวข้อเล็ก (kicker) ภาษาไทย — ไม่ถ่างตัวอักษร */
.ins .kicker{letter-spacing:.04em;text-transform:none;font-size:.85rem}

/* ---------- ไทม์ไลน์ช่วงคุ้มครอง ---------- */
.tline{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:14px;counter-reset:tl}
.tline::before{        /* เส้นเชื่อม + แสงวิ่ง */
  content:"";position:absolute;top:31px;left:calc(100%/var(--n,4)/2);right:calc(100%/var(--n,4)/2);height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--tone),var(--tone-2),var(--tone));background-size:200% 100%;
  animation:flow 3s linear infinite;opacity:.55;
}
@keyframes flow{to{background-position:-200% 0}}
.tl{position:relative;text-align:center;padding:0 6px}
.tl .dot{
  position:relative;z-index:1;width:66px;height:66px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--tone),var(--tone-2));
  border:5px solid var(--bg);box-shadow:0 12px 26px -12px color-mix(in srgb,var(--tone) 80%,transparent);
  transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.tl:hover .dot{transform:scale(1.1) rotate(-6deg)}
.tl .dot .i{font-size:1.6rem}
.tl.opt .dot{background:var(--surface);color:var(--tone);border-color:var(--bg);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tone) 50%,transparent)}
.tl b{display:block;font-size:.95rem}
.tl span{display:block;font-size:.8rem;color:var(--text-3);line-height:1.5}
.tl em{display:inline-block;margin-top:4px;font-style:normal;font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:999px;color:var(--tone);background:color-mix(in srgb,var(--tone) 12%,transparent)}
@media (max-width:700px){
  .tline{grid-template-columns:1fr;gap:10px}
  .tline::before{top:20px;bottom:20px;left:32px;right:auto;width:4px;height:auto;background-size:100% 200%;animation:flowV 3s linear infinite}
  @keyframes flowV{to{background-position:0 -200%}}
  .tl{display:grid;grid-template-columns:66px 1fr;gap:4px 14px;text-align:left;align-items:center;padding:0}
  .tl .dot{grid-row:span 3;margin:0}
}
@media (prefers-reduced-motion:reduce){.tline::before{animation:none}}

/* ---------- การ์ดผลิตภัณฑ์ย่อย (หน้าอื่น ๆ) ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.prod{
  display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease;
}
.prod:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.prod-h{display:flex;align-items:center;gap:12px}
.prod-h .ti{
  width:50px;height:50px;border-radius:15px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2));transition:transform .4s cubic-bezier(.3,1.6,.5,1);
}
.prod:hover .prod-h .ti{transform:rotate(-8deg) scale(1.08)}
.prod-h .ti .i{font-size:1.5rem}
.prod-h h3{font-size:1.06rem}
.prod-h small{display:block;font-size:.72rem;font-weight:700;color:var(--text-3)}
.prod p{font-size:.88rem;color:var(--text-2)}
.prod .ticks li{font-size:.86rem}
.prod .ticks .i{color:var(--c1)}
.prod .q{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--c1)}
.prod .q .i{transition:transform .25s}
.prod:hover .q .i{transform:translateX(4px)}

/* ป้าย "ขึ้นกับแผน" ในตารางเทียบ */
.ins .cmp .maybe{display:inline-block;font-size:.7rem;font-weight:800;padding:3px 8px;border-radius:999px;color:#b45309;background:color-mix(in srgb,#f59e0b 16%,transparent)}
[data-theme="dark"] .ins .cmp .maybe{color:#fbbf24}
.ins .cmp th.hl,.ins .cmp td.hl{background:color-mix(in srgb,var(--tone) 7%,transparent)}
.cover-grid.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.cover-grid.c3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cover-grid.c3{grid-template-columns:1fr}}
.pick-count.short{color:#b45309;background:color-mix(in srgb,#f59e0b 16%,transparent)}
[data-theme="dark"] .pick-count.short{color:#fbbf24}

/* ---------- เอกสารที่ต้องเตรียม (ตามประเภท) ---------- */
.docs3{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:16px}
@media (max-width:900px){.docs3{grid-template-columns:1fr}}
.docs3 .panel h3{font-size:1rem}
.panel.later h3 .hi{color:var(--text-3);background:var(--surface-2)}
.panel.later .ticks .i{color:var(--text-3)}
.panel.later{background:var(--surface-2);box-shadow:none}
.panel.attach{border-color:color-mix(in srgb,var(--tone) 40%,var(--border))}
.panel.attach h3 .hi{color:#fff;background:linear-gradient(135deg,var(--tone),var(--tone-2))}
.panel.attach .ticks .i{color:var(--tone)}
.docs-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:22px}
.docs-cta small{color:var(--text-3);font-size:.82rem}

/* ฟอร์ม: เช็กลิสต์เอกสารที่โผล่ตามประเภทที่เลือก */
.doc-hint{margin-top:14px;padding:16px 18px;border-radius:16px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--border));animation:caseIn .35s ease both}
.doc-hint[hidden]{display:none}
.doc-hint h4{display:flex;align-items:center;gap:8px;font-size:.95rem;margin-bottom:10px}
.doc-hint h4 .i{color:var(--accent);font-size:1.15rem}
.doc-hint .cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
@media (max-width:640px){.doc-hint .cols{grid-template-columns:1fr}}
.doc-hint ul{list-style:none;display:grid;gap:6px}
.doc-hint li{display:flex;gap:8px;font-size:.85rem;color:var(--text-2);line-height:1.45}
.doc-hint li .i{margin-top:2px;color:var(--accent);flex:none}
.doc-hint .sub{font-size:.75rem;font-weight:800;color:var(--text-3);margin-bottom:4px}
.doc-hint .later{margin-top:10px;font-size:.8rem;color:var(--text-3);display:flex;gap:6px;align-items:flex-start}

/* ฟอร์ม: ช่องแนบไฟล์ */
.drop{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;
  padding:22px 16px;border-radius:18px;border:2px dashed var(--border);background:var(--surface-2);transition:.2s;
}
.drop:hover,.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.drop .dz-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;background:var(--grad-brand);box-shadow:0 12px 24px -12px var(--glow);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.drop .dz-ico .i{font-size:1.5rem}
.drop:hover .dz-ico,.drop.over .dz-ico{transform:translateY(-4px) rotate(-6deg)}
.drop b{font-size:.95rem}
.drop small{font-size:.78rem;color:var(--text-3)}
.drop:focus-within{outline:3px solid var(--ring);outline-offset:2px}
.file-list{list-style:none;display:grid;gap:8px;margin-top:10px}
.file-list li{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);font-size:.86rem;animation:caseIn .3s ease both;
}
.file-list .fi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.file-list .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text)}
.file-list .fs{font-size:.76rem;color:var(--text-3);white-space:nowrap}
.file-list .fs em{font-style:normal;color:#059669;font-weight:700}
.file-list button{width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-3);cursor:pointer;display:grid;place-items:center;flex:none}
.file-list button:hover{color:#ef4444;border-color:#ef4444}
.file-meta{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:.78rem;color:var(--text-3)}
.file-meta .warn{color:#dc2626;font-weight:700}

/* บริษัทที่ยังไม่มีไฟล์โลโก้ / ช่อง "อื่น ๆ (ระบุ)" */
.logo-txt{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 10px;border-radius:9px;color:#0f766e;background:#ecfdf5;border:1px solid #a7f3d0;font-style:normal}
.logo-txt .i{font-size:1.15rem}
.logo-txt i{font-style:normal;font-weight:800;font-size:.8rem;white-space:nowrap}
.logo-tile .logo-txt{height:38px}
.pick-other .logo-txt{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,#fff);border-color:color-mix(in srgb,var(--accent) 30%,#fff)}
.other-ins{margin-top:12px;max-width:520px;animation:caseIn .3s ease both}
.other-ins[hidden]{display:none}

/* ---------- กล่องขวา "เอกสารที่ต้องใช้" (เปลี่ยนตามประเภท) + ปุ่มแนบทีละรายการ ---------- */
.docs-side .ds-empty{display:flex;gap:8px;font-size:.86rem;color:var(--text-3);line-height:1.55}
.docs-side .ds-empty .i{transform:rotate(180deg);margin-top:3px;color:var(--accent);animation:dsPoint 1.4s ease-in-out infinite}
@keyframes dsPoint{0%,100%{transform:rotate(180deg) translateX(0)}50%{transform:rotate(180deg) translateX(5px)}}
.docs-side.on{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.docs-side.flash{animation:dsFlash .7s ease}
@keyframes dsFlash{0%{box-shadow:0 0 0 0 var(--ring)}40%{box-shadow:0 0 0 8px var(--ring)}100%{box-shadow:var(--shadow)}}
.q-side{max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:thin}
@media (max-width:980px){.q-side{max-height:none;overflow:visible}}
.ds-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-4px 0 10px;padding:8px 10px;border-radius:12px;background:var(--surface-2)}
.ds-head b{font-size:.9rem}
.ds-count{font-size:.74rem;font-weight:800;color:var(--accent);white-space:nowrap}
.docs-side .sub,.doc-hint .sub{font-size:.74rem;font-weight:800;color:var(--text-3);margin:4px 0 6px}
.att-list{list-style:none;display:grid;gap:6px}
.att-li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:12px;font-size:.84rem;color:var(--text-2);line-height:1.4;border:1px solid transparent;transition:.2s}
.att-li:hover{background:var(--surface-2);border-color:var(--border)}
.att-li>.i{flex:none;color:var(--accent)}
.att-li>span{flex:1;min-width:0}
.att-li em{font-style:normal;font-size:.72rem;font-weight:800;color:#059669}
.att-li.done{background:color-mix(in srgb,#10b981 9%,transparent);border-color:color-mix(in srgb,#10b981 30%,transparent);color:var(--text)}
.att-li.done>.i{color:#10b981;stroke-width:3}
.att-btn{flex:none;font:inherit;font-size:.74rem;font-weight:800;padding:4px 11px;border-radius:999px;cursor:pointer;
  color:#fff;background:var(--grad-brand);border:0;box-shadow:0 6px 14px -8px var(--glow);transition:.2s}
.att-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.att-li.done .att-btn{color:#059669;background:var(--surface);box-shadow:inset 0 0 0 1px #10b981}
.att-other{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:8px;border-radius:12px;
  font:inherit;font-size:.82rem;font-weight:700;color:var(--accent);background:transparent;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,var(--border));cursor:pointer}
.att-other:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
/* เอกสารที่ต้องแนบ (CAR / EAR: สัญญาจ้าง + รูปถ่ายสถานที่) */
.att-need{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:.66rem;font-weight:800;line-height:1.5;vertical-align:1px;white-space:nowrap;color:#b45309;background:#fef3c7;border:1px solid #fde68a}
[data-theme="dark"] .att-need{color:#fcd34d;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.32)}
.ds-uw{display:flex;gap:6px;align-items:flex-start;margin:0 0 10px;font-size:.78rem;line-height:1.5;color:var(--text-2)}
.ds-uw .i{flex:none;margin-top:2px;color:#d97706}
.ds-info{margin-top:10px;font-size:.82rem}
.ds-info summary{cursor:pointer;font-weight:700;color:var(--text-2)}
.ds-info ul{list-style:none;display:grid;gap:5px;margin-top:8px}
.ds-info li{display:flex;gap:7px;color:var(--text-2);line-height:1.45}
.ds-info li .i{color:var(--accent);margin-top:2px;flex:none}
.docs-side .later,.doc-hint .later{margin-top:10px;font-size:.78rem;color:var(--text-3);display:flex;gap:6px;align-items:flex-start;line-height:1.5}
.file-list .ftag{display:block;font-size:.72rem;font-weight:700;color:#059669;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* จอใหญ่ใช้กล่องขวา · จอเล็กใช้กล่องใต้ข้อ 1 */
@media (min-width:981px){.doc-hint{display:none!important}}
@media (max-width:980px){#docs-side{display:none}}

/* ---------- หน้า ประกันภัยเบ็ดเตล็ด ---------- */
.jump{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.jump{grid-template-columns:1fr 1fr}}
.jump a{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:18px 12px;border-radius:18px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);transition:.25s;
}
.jump a .i{font-size:1.9rem;color:var(--tone);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.jump a b{font-size:.95rem}
.jump a small{font-size:.76rem;color:var(--text-3)}
.jump a:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--tone) 50%,var(--border))}
.jump a:hover .i{transform:scale(1.15) rotate(-8deg)}
.misc-head{display:flex;gap:18px;align-items:center;margin-bottom:22px}
.misc-head .ti{
  width:64px;height:64px;border-radius:20px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--tone),var(--tone-2));box-shadow:0 14px 28px -14px color-mix(in srgb,var(--tone) 80%,transparent);
  animation:coreBob 4.5s ease-in-out infinite;
}
.misc-head .ti .i{font-size:2rem}
.misc-head .kicker{margin-bottom:2px}
.misc-head h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:4px}
.misc-head p{color:var(--text-2);font-size:.95rem}
@media (max-width:640px){.misc-head{flex-direction:column;text-align:center}}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.mini-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mini-grid{grid-template-columns:1fr}}
.mini{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);transition:.25s}
.mini:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--tone) 50%,var(--border))}
.mini .ci{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--tone);background:color-mix(in srgb,var(--tone) 13%,transparent)}
.mini .ci .i{font-size:1.4rem}
.mini b{font-size:.98rem}
.mini>span:not(.ci){font-size:.85rem;color:var(--text-2);line-height:1.55}
.mini em{margin-top:auto;font-style:normal;font-size:.82rem;font-weight:700;color:var(--tone);display:inline-flex;align-items:center;gap:5px}
@media (prefers-reduced-motion:reduce){.misc-head .ti{animation:none}}

/* ภาษา EN: ซ่อนหน้าไว้ระหว่างโหลดคำแปล (insurance.js เอาออก) — กันเห็นไทยแวบก่อนเป็นอังกฤษ */
html.ins-wait body{visibility:hidden}