/* ===================================================================
   AgingOne — home v2 (Talk-First × ไอด้า)
   ต้นทาง: lab/home-2608-2.html ที่ Erb เคาะ 1 ส.ค. 2026 → ย้ายขึ้นหน้าหลัก
   โหลดเฉพาะ index.php (หน้าอื่นยังใช้ main.css)
   =================================================================== */
/* ═══ FONT ══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Kanit';src:url('/fonts/Kanit-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Kanit';src:url('/fonts/Kanit-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Kanit';src:url('/fonts/Kanit-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Kanit';src:url('/fonts/Kanit-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Kanit';src:url('/fonts/Kanit-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

/* ═══ RESET ═════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit;font-size:inherit}
button{border:none;background:none;cursor:pointer}
ul,ol{list-style:none}

/* ═══ TOKENS — ยกจาก home-4 ทั้งชุด ════════════════════════════════════ */
:root{
  --violet:#7c4dbe; --violet-d:#5e3596; --violet-dd:#432670; --violet-l:#efe7fb; --violet-ll:#f8f4fe;
  --orange:#f4683c; --orange-d:#b23c18; --orange-l:#fde7dd;
  --blue:#4d7bd9;   --blue-d:#3763bc;   --blue-l:#e2ebfb;
  --pink:#e0327e;   --pink-d:#b0246a;   --pink-l:#fce4ef;
  --teal:#2e9c8e;   --teal-l:#dcf4f0;
  --amber:#f59e0b;  --amber-l:#fef1d6;
  --ink:#44395f; --ink-6:#5c5378; --ink-4:#6b6288; --ink-2:#a79dbf;
  --line:#e7e0f2; --bg:#f7f4fc; --white:#fff;
  --ln:#06c755;                              /* เขียวไลน์ */
  --r:16px; --r-l:26px; --pill:999px;
  --sh-s:0 4px 16px rgba(80,50,140,.08);
  --sh:0 10px 32px rgba(80,50,140,.14);
  --sh-l:0 22px 56px rgba(80,50,140,.22);
  --tr:.2s cubic-bezier(.22,.61,.36,1);
  --fs:18px;                                  /* ฐานใหญ่กว่าเว็บทั่วไป — กลุ่มผู้สูงอายุ */
  --wrap:1180px;
}
body.fs-l{--fs:20px} body.fs-xl{--fs:22.5px}

body{
  font-family:'Kanit',-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs);font-weight:400;line-height:1.75;
  color:var(--ink-4);background:var(--bg);padding-bottom:80px;
}
@media(min-width:900px){ body{padding-bottom:0} }
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.3}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:8px}

/* ═══ ปุ่ม ══════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 26px;border-radius:var(--pill);
  font-weight:600;font-size:1em;white-space:nowrap;
  transition:transform var(--tr),box-shadow var(--tr),background var(--tr)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:21px;height:21px;flex:0 0 auto}
.btn-line{background:var(--ln);color:#fff;box-shadow:0 10px 24px rgba(6,199,85,.32)}
.btn-line:hover{box-shadow:0 16px 34px rgba(6,199,85,.4)}
.btn-brand{background:linear-gradient(135deg,var(--violet) 0%,var(--violet-d) 100%);color:#fff;box-shadow:0 10px 24px rgba(124,77,190,.3)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(244,104,60,.32)}
.btn-ghost{background:#fff;color:var(--violet-d);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--violet)}

/* ═══ LAB BAR ═══════════════════════════════════════════════════════════ */
.lab{background:var(--violet-dd);color:#e5daf7;font-size:.78em;padding:8px 0}
.lab .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lab b{background:var(--orange);color:#fff;border-radius:6px;padding:1px 9px;font-size:.9em;letter-spacing:.5px}
.lab a{color:#d6c4ff;text-decoration:underline;text-underline-offset:3px}

/* ═══ ไล่เฉดสีตามโลโก้ (ม่วง → ชมพู → ส้ม → ฟ้า) ═══════════════════════
   โลโก้ AgingOne เป็นวงแหวนไล่สี 4 สี — พื้นหลังสีเดียวทึบ ๆ จึงดูไม่เข้าชุด
   ทุกพื้นเข้มในหน้านี้ใช้เฉดจากโลโก้ทั้งหมด และคุมให้ตัวอักษรขาวยังผ่าน 4.5:1 */
:root{
  --g-brand:linear-gradient(120deg,#5e3596 0%,#7c4dbe 32%,#b0246a 68%,#b23c18 100%);
  --g-brand-soft:linear-gradient(120deg,#7c4dbe 0%,#e0327e 55%,#f4683c 100%);
  --g-line:linear-gradient(90deg,#7c4dbe 0%,#e0327e 34%,#f4683c 67%,#4d7bd9 100%);
}

/* ═══ แถบช่วยเหลือ + HEADER (โครงจาก 2608-1 · สีจาก home-4) ═══════════ */
.util{background:linear-gradient(100deg,#4b2a80 0%,#5e3596 38%,#8a2d72 72%,#a8371f 100%);color:#fff}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;flex-wrap:wrap}
.util-call{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.9em;min-height:44px}
.util-call svg{width:18px;height:18px}
.util-a11y{display:flex;align-items:center;gap:6px;font-size:.8em}
.util-a11y button{min-width:42px;height:36px;border-radius:9px;color:#fff;background:rgba(255,255,255,.18);font-weight:600;transition:background var(--tr),color var(--tr)}
.util-a11y button:hover,.util-a11y button[aria-pressed="true"]{background:#fff;color:var(--violet-d)}

.hdr{position:sticky;top:0;z-index:60;background:rgba(248,244,254,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--g-line)}  /* เส้นไล่สีตามโลโก้ */
.hdr .wrap{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand img{width:46px;height:46px}
.brand-n{display:block;font-weight:700;color:var(--ink);font-size:1.15em;line-height:1.2}
.brand-t{display:block;font-size:.72em;color:var(--ink-4);line-height:1.25}
.nav{display:none;gap:26px;font-size:.92em;font-weight:500}
.nav a{color:var(--ink-6);padding:4px 0;position:relative}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2.5px;background:var(--orange);border-radius:2px;transition:right var(--tr)}
.nav a:hover{color:var(--ink)} .nav a:hover::after{right:0}
.hdr-cta{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--pill);background:var(--ln);color:#fff;font-weight:600;font-size:.92em}
.hdr-cta svg{width:19px;height:19px}
.hdr-cta span{display:none}
@media(min-width:560px){ .hdr-cta span{display:inline} }
@media(min-width:1000px){ .nav{display:flex} }

/* ═══ ① กล่องคุยไอด้า ═══════════════════════════════════════════════════ */
.talk{position:relative;overflow:hidden;padding:32px 0 44px;
  background:
    radial-gradient(125% 95% at 100% 0%,var(--pink-l) 0%,transparent 55%),
    radial-gradient(110% 80% at 0% 15%,var(--violet-l) 0%,transparent 58%),
    linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
.talk .wrap{position:relative;z-index:1;display:grid;gap:32px}
@media(min-width:980px){ .talk{padding:52px 0 64px} .talk .wrap{grid-template-columns:1.1fr .9fr;align-items:center;gap:54px} }

.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:var(--pill);
  background:#fff;box-shadow:var(--sh-s);font-size:.82em;font-weight:600;color:var(--violet-d);margin-bottom:18px}
/* หัวเรื่องต่อด้วยช่องถามเลย (ตัดป้าย .badge + ย่อหน้า .talk-lead ออกแล้ว 6 ส.ค. 2026)
   → ระยะห่างใต้หัวเรื่องต้องรับช่วงจากที่ย่อหน้าเคยกันไว้ ไม่งั้นหัวเรื่องไปติดช่องพิมพ์ */
.talk h1{font-size:clamp(2.05rem,5.6vw,3.15rem);line-height:1.22;margin-bottom:26px}
.talk h1 .grad{display:block;margin-top:2px;
  background:linear-gradient(100deg,var(--violet),var(--pink) 48%,var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.talk-lead{font-size:1.02em;color:var(--ink-4);margin-bottom:24px;max-width:33em}
.talk-lead b{color:var(--ink);font-weight:600}

.ask{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.ask-in{width:100%;min-height:62px;padding:0 24px;border-radius:var(--pill);
  background:#fff;border:2px solid var(--line);color:var(--ink);box-shadow:var(--sh-s);
  transition:border-color var(--tr),box-shadow var(--tr)}
.ask-in::placeholder{color:var(--ink-2)}
.ask-in:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 5px rgba(124,77,190,.16)}
.ask .btn{min-height:62px}
@media(min-width:620px){ .ask{flex-direction:row;align-items:center} .ask-in{flex:1} }

.qh{font-size:.86em;color:var(--ink-4);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.chip{display:inline-flex;align-items:center;min-height:48px;padding:8px 18px;border-radius:var(--pill);
  background:#fff;border:1.5px solid var(--line);color:var(--violet-d);font-size:.9em;font-weight:500;
  transition:background var(--tr),border-color var(--tr),color var(--tr),transform var(--tr)}
.chip:hover{background:var(--violet);border-color:var(--violet);color:#fff;transform:translateY(-2px)}

.tick{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.85em;color:var(--ink-4)}
.tick span{display:inline-flex;align-items:center;gap:7px}
.tick svg{width:17px;height:17px;color:var(--teal)}

/* มือถือจำลอง */
.phone{position:relative;width:min(320px,84vw);margin:0 auto;background:var(--ink);border-radius:44px;padding:11px;box-shadow:var(--sh-l)}
.phone::before{content:'';position:absolute;top:23px;left:50%;transform:translateX(-50%);width:96px;height:6px;border-radius:99px;background:rgba(255,255,255,.3)}
.ph-scr{border-radius:34px;overflow:hidden}
.ph-top{display:flex;align-items:center;gap:11px;padding:36px 16px 13px;background:var(--g-brand-soft);color:#fff}
.ph-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--violet-d);background:#fff}
.ph-av svg{width:22px;height:22px}
.ph-top b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.ph-top small{display:block;font-size:12px;opacity:.8;line-height:1.2}
.ph-body{display:flex;flex-direction:column;gap:11px;padding:16px 13px 20px;min-height:250px;background:#93aac9}
.bub{max-width:84%;padding:11px 15px;font-size:14.5px;line-height:1.55;border-radius:18px;box-shadow:0 2px 5px rgba(0,0,0,.13)}
.bub-me{align-self:flex-end;background:#b0e77f;color:#20351a;border-bottom-right-radius:5px}
.bub-ai{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:5px}
.bub-t{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:#fff;border-radius:18px;border-bottom-left-radius:5px}
.bub-t i{width:7px;height:7px;border-radius:50%;background:var(--ink-2);animation:blink 1.3s infinite}
.bub-t i:nth-child(2){animation-delay:.18s} .bub-t i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ph-cap{margin-top:14px;text-align:center;font-size:.84em;color:var(--ink-4)}

/* ── กล่องคุยจริง (ไอด้าตอบเองผ่าน api/chat.php) ─────────────────────── */
.ph-body{overflow-y:auto;max-height:min(58vh,380px);scroll-behavior:smooth}
.bub-t[hidden]{display:none}
.bub-sys{align-self:center;max-width:92%;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.82);
  color:var(--ink-6);font-size:13px;line-height:1.5;text-align:center}
.chat-cta{align-self:stretch;background:#fff;border-radius:18px;padding:14px;box-shadow:0 2px 6px rgba(0,0,0,.14);
  display:flex;flex-direction:column;gap:10px;text-align:center}
.chat-cta p{font-size:13.5px;line-height:1.55;color:var(--ink)}
.chat-cta a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  border-radius:var(--pill);background:var(--ln);color:#fff;font-size:14.5px;font-weight:600}
.chat-cta a svg{width:18px;height:18px}
.ask-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ask-alt{display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:0 16px;border-radius:var(--pill);
  font-size:.88em;font-weight:600;color:#04a548}
.ask-alt:hover{text-decoration:underline;text-underline-offset:3px}
.ask-alt svg{width:18px;height:18px}

/* ═══ ② สไลด์ 4 เรื่อง ══════════════════════════════════════════════════ */
.slides-sec{padding:6px 0 44px}
.slides{position:relative}
.slides-vp{overflow:hidden;border-radius:var(--r-l);box-shadow:var(--sh)}
.slides-tr{display:flex}
.slides-tr.anim{transition:transform 1.1s cubic-bezier(.4,0,.2,1)}   /* ค่อย ๆ ไหล ไม่กระชาก */
.slide{flex:0 0 100%;min-width:100%;display:grid;gap:22px;padding:28px 22px 32px;
  background:linear-gradient(155deg,#fff 0%,var(--violet-l) 100%);--ac:var(--violet);--ac-l:var(--violet-l)}
.slide.ac-blue{--ac:var(--blue);--ac-l:var(--blue-l);background:linear-gradient(155deg,#fff 0%,var(--blue-l) 100%)}
.slide.ac-orange{--ac:var(--orange);--ac-l:var(--orange-l);background:linear-gradient(155deg,#fff 0%,var(--orange-l) 100%)}
.slide.ac-pink{--ac:var(--pink);--ac-l:var(--pink-l);background:linear-gradient(155deg,#fff 0%,var(--pink-l) 100%)}
@media(min-width:900px){ .slide{grid-template-columns:1.02fr .98fr;align-items:center;gap:40px;padding:44px 46px;min-height:430px} }
.slide-tag{display:inline-block;padding:6px 16px;border-radius:var(--pill);background:#fff;color:var(--ac);
  font-size:.8em;font-weight:600;margin-bottom:12px;box-shadow:var(--sh-s)}
.slide h2{font-size:clamp(1.45rem,4.4vw,2.2rem);margin-bottom:12px}
.slide p{font-size:1em;color:var(--ink-4);margin-bottom:20px}
.slide-note{margin-top:14px;font-size:.85em;color:var(--ink-4)}
/* ⚠️ ต้องมี height:auto เสมอ — ถ้า <img> มีแอตทริบิวต์ height="750" ติดมา
   ค่านั้นจะกลายเป็น presentational hint (height:750px) แล้ว "ชนะ" aspect-ratio
   ผลคือกล่องยืดเป็น 494x750 แล้ว object-fit:cover ครอปภาพจนสไลด์สูงผิดปกติ
   (เจอจริง 2 ส.ค. 2026 — สไลด์ทั้งแถบสูง 838px เพราะ flex ยืดตามใบที่สูงสุด) */
.slide-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh-s)}

/* กราฟในสไลด์สถิติ */
.big{font-size:clamp(3rem,11vw,5rem);font-weight:700;color:var(--blue-d);line-height:1;margin-bottom:6px}
.chart{background:#fff;border-radius:var(--r);padding:20px 18px;box-shadow:var(--sh-s)}
.chart-h{font-size:.85em;color:var(--ink-4);margin-bottom:14px}
.bars{display:flex;align-items:flex-end;gap:10px;height:170px}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
.bar b{font-size:.85em;color:var(--ink);font-weight:600}
.bar i{display:block;width:100%;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#7aa0e8,var(--blue))}
.bar.pj i{background:linear-gradient(180deg,#ffb08d,var(--orange))}
.bar em{font-size:.78em;font-style:normal;color:var(--ink-4)}
.src{margin-top:12px;font-size:.76em;line-height:1.6;color:var(--ink-4)}
.src a{color:var(--violet-d);text-decoration:underline;text-underline-offset:3px}

/* แผงโล่ + ตัวอย่างหมวดในสไลด์ */
.shield{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r);color:#fff;
  background:linear-gradient(145deg,var(--orange) 0%,var(--pink) 100%);box-shadow:var(--sh-s)}
.shield svg{width:42%;height:auto}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.mini li{display:grid;justify-items:center;gap:6px;padding:13px 6px;background:#fff;border-radius:14px;box-shadow:var(--sh-s);
  font-size:.68em;line-height:1.35;text-align:center;color:var(--ink-4)}
.mini i{width:28px;height:28px;background:var(--ac);
  -webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}

/* ปุ่มควบคุมสไลด์ — ใหญ่ กดง่าย */
.slides-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.arw{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--violet-d);
  border:1.5px solid var(--line);box-shadow:var(--sh-s);transition:background var(--tr),color var(--tr)}
.arw:hover{background:var(--violet);color:#fff;border-color:var(--violet)}
.arw svg{width:24px;height:24px}
.dots{display:flex;gap:6px}
.dot{width:44px;height:44px;display:grid;place-items:center}
.dot::after{content:'';width:11px;height:11px;border-radius:50%;background:var(--ink-2);transition:width var(--tr),background var(--tr)}
.dot.on::after{width:30px;border-radius:99px;background:var(--violet)}

/* ═══ ③ เราเตรียมข้อมูลไว้ให้ทุกคน ═════════════════════════════════════ */
.sec{padding:56px 0}
.sec-w{background:#fff}
.sec-head{max-width:44em;margin-bottom:28px}
.sec-tag{display:inline-block;font-size:.82em;font-weight:600;color:var(--orange-d);margin-bottom:8px}
.sec h2{font-size:clamp(1.55rem,4.6vw,2.3rem);margin-bottom:10px}
.sec-lead{font-size:1em;color:var(--ink-4)}

.grp{display:grid;gap:18px}
@media(min-width:820px){ .grp{grid-template-columns:repeat(3,1fr)} }
.gcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-s);transition:transform var(--tr),box-shadow var(--tr)}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.gcard img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.gcard-b{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px;flex:1}
.gcard h3{font-size:1.12em}
.gcard p{font-size:.92em;color:var(--ink-4);flex:1}
.go{display:inline-flex;align-items:center;gap:7px;font-size:.92em;font-weight:600;color:var(--orange-d);min-height:44px}
.gcard.g2 h3{color:var(--orange-d)} .gcard.g3 h3{color:var(--blue-d)} .gcard.g1 h3{color:var(--violet-d)}

/* ═══ ④ ตัวอย่างคำถามที่พบบ่อย ═════════════════════════════════════════ */
.faq{display:grid;gap:16px}
@media(min-width:680px){ .faq{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1020px){ .faq{grid-template-columns:repeat(3,1fr)} }
.fcard{display:flex;flex-direction:column;gap:12px;padding:24px 22px;background:var(--violet-ll);
  border:1px solid var(--line);border-radius:var(--r-l);transition:box-shadow var(--tr),transform var(--tr)}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.fic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#fff;box-shadow:var(--sh-s)}
.fic i{width:29px;height:29px;background:var(--violet);
  -webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat}
.fcard h3{font-size:1.08em}
.fcard ul{display:flex;flex-direction:column;gap:9px}
.q{display:flex;align-items:flex-start;gap:10px;min-height:52px;padding:11px 14px;border-radius:14px;
  background:#fff;border:1.5px solid var(--line);font-size:.92em;line-height:1.55;color:var(--ink-6);
  transition:border-color var(--tr),background var(--tr),color var(--tr)}
.q svg{width:18px;height:18px;flex:0 0 auto;margin-top:5px;color:var(--orange)}
.q:hover{border-color:var(--orange);background:var(--orange-l);color:var(--orange-d)}

/* ═══ ⑤ 18 หมวด ════════════════════════════════════════════════════════ */
.cats{background:var(--violet-ll)}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media(min-width:560px){ .cgrid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:940px){ .cgrid{grid-template-columns:repeat(6,1fr)} }
.cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  min-height:112px;padding:16px 10px;background:#fff;border-radius:var(--r);border:1.5px solid transparent;
  font-size:.82em;font-weight:500;color:var(--ink-6);line-height:1.4;
  transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr),color var(--tr)}
.cat i{width:31px;height:31px;background:var(--violet);
  -webkit-mask:var(--u) center/contain no-repeat;mask:var(--u) center/contain no-repeat;transition:background var(--tr)}
.cat:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--orange);color:var(--orange-d)}
.cat:hover i{background:var(--orange)}

/* ═══ ⑥ TOP 5 ══════════════════════════════════════════════════════════ */
.top-lead{display:grid;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-s);margin-bottom:18px;transition:transform var(--tr),box-shadow var(--tr)}
.top-lead:hover{transform:translateY(-4px);box-shadow:var(--sh)}
@media(min-width:800px){ .top-lead{grid-template-columns:1.05fr 1fr;align-items:center} }
.top-lead img{width:100%;height:100%;min-height:230px;object-fit:cover}
.top-lead-b{padding:24px 26px 28px;display:flex;flex-direction:column;gap:11px}
.rank{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;font-weight:700;font-size:.92em}
.top-lead h3{font-size:clamp(1.15rem,3vw,1.5rem)}
.tag{align-self:flex-start;font-size:.76em;font-weight:600;color:var(--violet-d);background:var(--violet-l);padding:4px 13px;border-radius:var(--pill)}
.meta{font-size:.82em;color:var(--ink-2)}
.rgrid{display:grid;gap:16px}
@media(min-width:620px){ .rgrid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1020px){ .rgrid{grid-template-columns:repeat(4,1fr)} }
.rcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-s);transition:transform var(--tr),box-shadow var(--tr)}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.rcard img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.rcard-b{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.rcard h3{font-size:.98em;line-height:1.45;flex:1}
.rn{display:inline-flex;align-items:center;gap:8px;font-size:.8em;color:var(--ink-2)}
.rn b{color:var(--violet-d);font-size:1.15em}
.all{margin-top:24px;text-align:center}

/* ═══ ⑦ ทางลัดบริการ ═══════════════════════════════════════════════════ */
.quick{background:var(--g-brand);color:#f0e8fa}
.quick h2{color:#fff}
.quick .sec-tag{color:#ffc4a8}
.quick .sec-lead{color:#cfc2ea}
.qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){ .qgrid{grid-template-columns:repeat(4,1fr)} }
.qitem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;
  min-height:124px;padding:18px 12px;border-radius:var(--r-l);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.17);color:#fff;font-weight:600;font-size:.92em;line-height:1.4;
  transition:background var(--tr),transform var(--tr)}
.qitem:hover{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.qitem svg{width:30px;height:30px}
.qitem small{display:block;font-weight:400;font-size:.82em;color:#cfc2ea}
.qsrc{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:.85em;color:#cfc2ea;line-height:1.8}
.qsrc a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.qwarn{margin-top:12px;font-size:.82em;color:#b9a9dd}

/* ═══ ⑧ ปิดท้าย ════════════════════════════════════════════════════════ */
.final{background:#fff;text-align:center}
.final h2{font-size:clamp(1.6rem,4.8vw,2.4rem);margin-bottom:12px}
.final p{max-width:34em;margin:0 auto 26px;color:var(--ink-4)}
.final-note{margin-top:18px;font-size:.84em;color:var(--ink-2)}

/* ═══ FOOTER ═══════════════════════════════════════════════════════════ */
.ft{background:linear-gradient(120deg,#3a2f52 0%,#44395f 42%,#572f55 78%,#5c3a2e 100%);color:#cbc2e0;padding:44px 0 28px;font-size:.9em}
.ft-g{display:grid;gap:26px;margin-bottom:26px}
@media(min-width:700px){ .ft-g{grid-template-columns:1.5fr 1fr 1fr} }
.ft h4{color:#fff;font-size:1.02em;margin-bottom:12px}
.ft li{margin-bottom:8px}
.ft a{min-height:32px;display:inline-block}
.ft a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft-b{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;font-size:.88em;color:#9b90b8}

/* ═══ แถบลอยล่างจอ ═════════════════════════════════════════════════════ */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(248,244,254,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transform:translateY(130%);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.dock.on{transform:translateY(0)}
.dock .btn{width:100%}
@media(min-width:900px){ .dock{display:none} }

/* ═══ หน้าต่างคุยกับไอด้า — เต็มจอ สไตล์ไลน์ ═══════════════════════════ */
.cw{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:#8fa8c8}
.cw[hidden]{display:none}
.cw-top{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:var(--g-brand-soft);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);flex:0 0 auto}
.cw-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--violet-d);flex:0 0 auto}
.cw-av svg{width:26px;height:26px}
.cw-id{flex:1;min-width:0}
.cw-id b{display:block;font-size:1.02em;font-weight:600;line-height:1.25}
.cw-id small{display:block;font-size:.74em;opacity:.85;line-height:1.2}
.cw-x{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;transition:background var(--tr)}
.cw-x:hover{background:rgba(255,255,255,.35)}
.cw-x svg{width:24px;height:24px}
.cw-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px 20px;
  display:flex;flex-direction:column;gap:12px;background:#93aac9}
.cw-day{align-self:center;padding:4px 14px;border-radius:var(--pill);background:rgba(0,0,0,.16);color:#fff;font-size:.76em}
.cw-body .bub{max-width:min(78%,540px);font-size:1em;line-height:1.65;padding:12px 16px}
.cw-body .bub a{color:var(--violet-d);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.cw-lead{flex:0 0 auto;padding:12px 14px;background:#fff;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.cw-lead[hidden]{display:none}
.cw-lead p{font-size:.88em;line-height:1.5;color:var(--ink-6);flex:1;min-width:190px}
.cw-lead a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--pill);
  background:var(--ln);color:#fff;font-weight:600;font-size:.92em;white-space:nowrap}
.cw-lead a svg{width:19px;height:19px}
.cw-copy{min-height:48px;padding:0 18px;border-radius:var(--pill);border:2px solid var(--line);
  background:#fff;color:var(--violet-d);font-weight:600;font-size:.9em;white-space:nowrap}
.cw-copy:hover{border-color:var(--violet)}
.cw-copy[hidden]{display:none}
.cw-in{flex:0 0 auto;display:flex;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line)}
.cw-in input{flex:1;min-width:0;min-height:54px;padding:0 20px;border-radius:var(--pill);
  background:var(--violet-ll);border:2px solid var(--line);color:var(--ink)}
.cw-in input:focus{outline:none;border-color:var(--violet);background:#fff}
.cw-in button{width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--violet-d));color:#fff;box-shadow:var(--sh-s)}
.cw-in button:disabled{opacity:.5}
.cw-in button svg{width:24px;height:24px}
.cw-note{align-self:center;max-width:92%;text-align:center;font-size:.76em;line-height:1.5;
  color:#37455c;background:rgba(255,255,255,.75);border-radius:12px;padding:8px 12px}
body.cw-open{overflow:hidden}
@media(min-width:780px){
  .cw{inset:auto;right:24px;bottom:24px;width:420px;height:min(78vh,680px);border-radius:var(--r-l);
    overflow:hidden;box-shadow:var(--sh-l)}
  .cw-top{border-radius:0}
}

/* มือถือจำลองบนหน้า = ปุ่มเปิดหน้าต่างคุย */
.phone{cursor:pointer;transition:transform var(--tr),box-shadow var(--tr)}
.phone:hover,.phone:focus-visible{transform:translateY(-4px);box-shadow:0 28px 66px rgba(80,50,140,.28)}

/* ลดการเคลื่อนไหว = ตัดเฉพาะอนิเมชันประดับ (จุดกระพริบ)
   ไม่ตัดการไหลของสไลด์ — Erb ยืนยันว่าต้องการให้สไลด์ "เลื่อน" ให้เห็นเสมอ */
@media(prefers-reduced-motion:reduce){
  .bub-t i{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   ชุดสีแยกก้อน — ยกจาน 8 สีของ lab/home-2 มาใช้ (Erb เคาะ 1 ส.ค. 2026)
   ใช้กับ 3 ส่วน: การ์ด "ถามอะไรได้บ้าง" · 18 หมวด · บทความ
   ทุกสีจับคู่ (เข้ม = ไอคอน/ขอบ, จาง = พื้นวงกลม) ให้ตัวอักษรยังอ่านชัดเสมอ
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --c1:#7c4dbe; --cb1:#ede6fa;   /* ม่วง */
  --c2:#e0327e; --cb2:#fce4ef;   /* ชมพูบานเย็น */
  --c3:#f4683c; --cb3:#fde7dd;   /* ส้มคอรัล */
  --c4:#c47f00; --cb4:#fef1d6;   /* เหลืองอำพัน (เข้มขึ้นให้ผ่าน contrast) */
  --c5:#2e9c8e; --cb5:#dcf4f0;   /* เขียวน้ำทะเล */
  --c6:#4d7bd9; --cb6:#e2ebfb;   /* ฟ้า */
  --c7:#c13aae; --cb7:#fae3f5;   /* ม่วงกล้วยไม้ */
  --c8:#5e8a2e; --cb8:#e8f3da;   /* เขียวใบไม้ */
}
.is-c1{--c:var(--c1);--cb:var(--cb1)} .is-c2{--c:var(--c2);--cb:var(--cb2)}
.is-c3{--c:var(--c3);--cb:var(--cb3)} .is-c4{--c:var(--c4);--cb:var(--cb4)}
.is-c5{--c:var(--c5);--cb:var(--cb5)} .is-c6{--c:var(--c6);--cb:var(--cb6)}
.is-c7{--c:var(--c7);--cb:var(--cb7)} .is-c8{--c:var(--c8);--cb:var(--cb8)}

/* — การ์ด "ถามอะไรได้บ้าง" — */
.fcard{border-top:5px solid var(--c,var(--violet))}
.fcard .fic{background:var(--cb,var(--violet-l))}
.fcard .fic i{background:var(--c,var(--violet))}
.fcard h3{color:var(--c,var(--ink))}
.fcard:hover{border-color:var(--c,var(--violet))}
.fcard .q:hover{border-color:var(--c);background:var(--cb);color:var(--ink)}
.fcard .q svg{color:var(--c,var(--orange))}

/* — 18 หมวด: ไอคอนอยู่ในวงกลมสีจาง — */
.cat{gap:11px}
.cat-ic{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--cb,var(--violet-l));transition:transform var(--tr)
}
.cat i{width:28px;height:28px;background:var(--c,var(--violet))}
.cat:hover{border-color:var(--c,var(--violet));color:var(--c,var(--orange-d))}
.cat:hover .cat-ic{transform:scale(1.08)}
.cat:hover i{background:var(--c,var(--violet))}

/* — บทความ: ป้ายหมวดใช้สีของหมวดนั้น + แถบสีบนการ์ด — */
.rcard{border-top:5px solid var(--c,var(--violet))}
.rcard .tag,.top-lead .tag{background:var(--cb,var(--violet-l));color:var(--c,var(--violet-d))}
.rcard .rn b{color:var(--c,var(--violet-d))}
.top-lead{border-top:5px solid var(--c,var(--violet))}
.top-lead .rank{background:linear-gradient(135deg,var(--c,var(--violet)),var(--violet-d))}

/* ═══ อวาตาร์ไอด้า (ภาพจริงแทนไอคอนเส้น) ═══════════════════════════════
   ⚠️ ภาพชุดนี้เป็น "ตัวชั่วคราว" — ทีมออกแบบกำลังทำมาสคอทตัวจริง
   เปลี่ยนภาพทีหลังแก้ไฟล์เดียว: web/img/aida/aida-avatar.png (ทุกจุดใช้ path เดียวกัน) */
.cw-av,.ph-av{overflow:hidden;background:#fff}
.cw-av img,.ph-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 12%}

/* ═══ หน้าตรวจร่างคำตอบไอด้า (lab/faq-review.php) ══════════════════════ */
.faq-count{font-size:.92em;color:var(--ink-4);margin-top:10px}
.faq-count strong{color:var(--violet-d)}
.faq-list{counter-reset:none;display:flex;flex-direction:column;gap:16px;list-style:none}
.faq-item{background:#fff;border:1px solid var(--line);border-left:5px solid var(--ink-2);
  border-radius:var(--r-l);padding:22px 24px;box-shadow:var(--sh-s)}
.faq-item.is-ok{border-left-color:var(--teal)}
.faq-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.faq-no{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--violet-l);color:var(--violet-d);font-weight:700;font-size:.86em}
.faq-status{font-size:.84em;font-weight:600;color:var(--ink-4)}
.faq-item.is-ok .faq-status{color:var(--teal)}
.faq-key{font-size:.78em;color:var(--ink-2);background:var(--violet-ll);padding:2px 10px;border-radius:var(--pill)}
.faq-q{font-size:1em;font-weight:600;color:var(--ink);margin-bottom:10px;line-height:1.5}
.faq-a{font-size:.96em;line-height:1.8;color:var(--ink-6);background:var(--violet-ll);
  border-radius:var(--r);padding:16px 18px}
.faq-a a{color:var(--violet-d);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.faq-a strong{color:var(--ink)}
.faq-meta{margin-top:8px;font-size:.8em;color:var(--ink-2)}
.faq-note{margin-top:26px;padding:20px 22px;background:var(--orange-l);border-radius:var(--r-l)}
.faq-note h2{font-size:1.1em;margin-bottom:8px}
.faq-note p{font-size:.92em;color:var(--ink-6);margin-bottom:8px}
.faq-note code{background:#fff;padding:1px 7px;border-radius:6px;font-size:.9em}

/* ═══ AOS — กันเนื้อหาหายถ้าสคริปต์โหลดไม่ทัน/ไม่ขึ้น ═══════════════════ */
.no-aos [data-aos]{opacity:1!important;transform:none!important}

/* ═══ หน้า "กำลังดำเนินการ" (soon.php) ═════════════════════════════════ */
.soon{
  max-width:640px;margin:24px auto;padding:40px 28px 36px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh)
}
.soon-ic{
  width:88px;height:88px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:var(--violet-l);color:var(--violet-d)
}
.soon-ic svg{width:46px;height:46px}
.soon-tag{
  display:inline-block;margin-bottom:12px;padding:6px 18px;border-radius:var(--pill);
  background:var(--orange-l);color:var(--orange-d);font-size:.84em;font-weight:600
}
.soon h1{font-size:clamp(1.5rem,4.6vw,2.1rem);margin-bottom:12px}
.soon-desc{font-size:1.02em;color:var(--ink-4);margin-bottom:14px}
.soon-note{
  font-size:.92em;color:var(--ink-6);background:var(--violet-ll);
  border-radius:var(--r);padding:14px 16px;margin-bottom:24px
}
.soon-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}