/* ═══════════════════════════════════════════════════════════════════════════
   AgingOne — home v6 "3 ส่วน · Talk-First" (มติพี่สิงห์ 7 ก.ย. 2569)
   ชุดนี้ใช้เฉพาะหน้าแรก (index.php + partials/head-v6.php + footer-v6.php + js/home-v6.js)
   หน้าอื่น (knowledge/articles/about) ยังใช้ css/main.css + partials/header.php ชุดเดิม
   ที่มา: ยกมาจาก lab/home-6a.html ที่ Erb เคาะ 15 ก.ย. 2569 (ผ่านการแก้ 15 รอบ — ดูคอมเมนต์หัวไฟล์นั้น)
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══ FONT (ในเครื่อง ไม่มี CDN) ═══ */
@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}

/* ═══ TOKENS (ชุดเดียวกับ css/home-v2.css) ═══ */
:root{
  --violet:#6A2CC6; --violet-d:#55219f; --violet-dd:#3d1873; --violet-l:#ece2fb; --violet-ll:#f7f2fe;
  --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;
  --ink:#44395f; --ink-6:#5c5378; --ink-4:#6b6288; --ink-2:#a79dbf; --ink-h:#695f81;
  --line:#e7e0f2; --bg:#f7f4fc; --white:#fff;
  --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;
  --g-brand:linear-gradient(120deg,#55219f 0%,#6A2CC6 32%,#b0246a 68%,#b23c18 100%);
  --g-brand-soft:linear-gradient(120deg,#6A2CC6 0%,#e0327e 55%,#f4683c 100%);
  --g-line:linear-gradient(90deg,#6A2CC6 0%,#e0327e 34%,#f4683c 67%,#4d7bd9 100%);
}
body.fs-l{--fs:20px} body.fs-xl{--fs:22.5px}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{border:none;background:none;cursor:pointer}
li{list-style:none}
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);
  /* พื้นหลังอุ่น ๆ มีมิติ — แก้คำติ "ทื่อ ไม่มีสีสัน กลืนกัน" โดยไม่ต้องใส่ของรกหน้า */
  background-image:
    radial-gradient(760px 420px at 88% -6%,rgba(224,50,126,.10),transparent 62%),
    radial-gradient(660px 380px at -8% 4%,rgba(106,44,198,.11),transparent 60%),
    radial-gradient(700px 460px at 50% 104%,rgba(244,104,60,.08),transparent 62%);
  background-attachment:fixed;
}
h1,h2,h3{color:var(--ink-h);font-weight:700;line-height:1.3}   /* 700 ไม่ใช่ 800 — รสนิยม Erb */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 16px}
.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:10px}
.skip{position:absolute;left:8px;top:-60px;z-index:200;background:#fff;color:var(--violet-d);
  padding:10px 18px;border-radius:12px;box-shadow:var(--sh);font-weight:600}
.skip:focus{top:8px}
.grad{background:var(--g-brand-soft);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ═══ HEADER ~60px ═══ */
.hd6{position:sticky;top:0;z-index:80;background:rgba(249,246,254,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.hd6::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--g-line)}
.hd6 .wrap{display:flex;align-items:center;gap:8px;min-height:60px}
.hd-brand{display:flex;align-items:center;gap:9px;margin-right:auto;min-height:44px}
.hd-brand img{width:36px;height:36px}
.hd-brand b{font-weight:700;color:var(--ink);font-size:1.02em;line-height:1.1;letter-spacing:.2px}
.hd-nav{display:none;gap:22px;font-size:.86em;font-weight:500;margin-right:14px}
.hd-nav a{color:var(--ink-6);position:relative;padding:6px 0}
.hd-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)}
.hd-nav a:hover{color:var(--ink)} .hd-nav a:hover::after{right:0}
.ic{position:relative;flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;
  border-radius:14px;background:#fff;border:1.5px solid var(--line);color:var(--violet-d);
  transition:border-color var(--tr),transform var(--tr)}
.ic:hover{border-color:var(--violet);transform:translateY(-1px)}
.ic svg{width:20px;height:20px}
.ic small{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font-size:9.5px;line-height:1;font-weight:600;letter-spacing:.2px}
.ic.has-l{padding-bottom:9px}
.ic-call{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(244,104,60,.34)}
.ic-call:hover{border-color:var(--orange-d)}
.ic-fs{font-weight:700;font-size:.84em;letter-spacing:.5px;line-height:1}
.fsw{position:relative;flex:0 0 auto}
.fs-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:90;display:flex;gap:6px;padding:9px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh)}
.fs-pop[hidden]{display:none}
.fs-pop button{min-width:52px;height:44px;border-radius:12px;background:var(--violet-ll);
  color:var(--violet-d);font-weight:600;transition:background var(--tr),color var(--tr)}
.fs-pop button[aria-pressed="true"],.fs-pop button:hover{background:var(--violet);color:#fff}

/* ═══ HERO = ① + ② ═══ */
.hero{padding:4px 0 8px}
.hero-g{display:flex;flex-direction:column;gap:0}

/* ── ① แบรนด์ ── */
/* ① — ภาพ v5 (คุณยายรถเข็น + ผู้ดูแล) เป็นพื้นหลังโซนแบรนด์ เต็มความกว้างจอ (Erb เลือกแบบ ก · รอบ 5)
   ซูม 200% แล้วเลื่อนให้ "ตัวคน" ไปอยู่โซนซ้ายของจอ พ้นโลโก้ที่อยู่กลาง
   ม่าน 2 ชั้น: แนวนอน = ฝั่งซ้ายใสให้เห็นคน ฝั่งขวาทึบรองตัวอักษร · แนวตั้ง = ไล่จบลงพื้นหน้า
   จอคอมใช้ภาพเดียวกันแต่คนละที่วาง — ดู .hero::before ด้านล่าง (Erb รอบ 8) */
.bd{position:relative;text-align:center;padding:8px 0 4px}
.bd::before{content:"";position:absolute;z-index:0;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);
  background:
    linear-gradient(180deg,rgba(247,244,252,.26) 0%,rgba(247,244,252,.24) 54%,rgba(247,244,252,.76) 86%,var(--bg) 100%),
    linear-gradient(90deg,rgba(247,244,252,.04) 0%,rgba(247,244,252,.16) 24%,rgba(247,244,252,.68) 50%,rgba(247,244,252,.86) 100%),
    url("/img/home/ao-01-hero-v6.webp") 86% 26%/210% auto no-repeat}
/* จอคอม: ย้ายภาพไปเป็นพื้นหลังของ .hero ทั้งแถบ (ไม่ใช่แค่โซนแบรนด์) แล้ววางคู่ยาย+ผู้ดูแล
   ไว้ "ตรงกลาง" ระหว่างคอลัมน์โลโก้/motto (ซ้าย) กับการ์ดคุยกับไอด้า (ขวา) — Erb รอบ 8
   ใช้ calc(50% - 13vw) เลื่อนภาพให้ตัวคนตกช่องว่างนั้นได้โดยไม่ผูกกับความกว้างจอใดจอหนึ่ง */
@media(min-width:980px){
  .bd::before{display:none}
  .hero{position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;z-index:0;
    background:
      linear-gradient(180deg,rgba(247,244,252,.30) 0%,rgba(247,244,252,.28) 36%,rgba(247,244,252,.60) 58%,rgba(247,244,252,.88) 80%,var(--bg) 100%),
      linear-gradient(90deg,rgba(247,244,252,.82) 0%,rgba(247,244,252,.48) 18%,rgba(247,244,252,.20) 42%,rgba(247,244,252,.55) 60%,rgba(247,244,252,.88) 78%,rgba(247,244,252,1) 92%),
      url("/img/home/ao-01-hero-v6.webp") calc(50% - 13vw) 40%/104% auto no-repeat}
  .hero-g{position:relative;z-index:1}
}
.bd-h{display:block;margin:0;position:relative;z-index:1}
.bd-plate{display:inline-block;padding:4px 10px 6px;border-radius:24px;background:transparent}
.bd-plate{font-size:var(--fs);max-width:100%}   /* รีเซ็ตสเกล h1 (2em) ออกจากแผ่นโลโก้ — ไม่งั้นชื่อ/คำอังกฤษล้นแผ่นบนมือถือ */
.bd-plate img{width:176px;height:auto;margin:0 auto;display:block}   /* มือถือ = 2 เท่าของเดิม (Erb รอบ 4) */
.bd-name{display:block;margin-top:2px;font-size:1.9em;font-weight:700;line-height:1.15;letter-spacing:-.01em;
  background:var(--g-brand-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.bd-en{display:block;font-size:.72em;font-weight:500;color:var(--ink-4);line-height:1.3}
.m1{display:block;margin-top:6px;font-size:.76em;font-weight:500;color:var(--ink-6);line-height:1.35;white-space:nowrap}   /* มือถือ = 80% ของเดิม (Erb รอบ 4) */
.m2{display:block;font-size:min(.98em,6.1vw);font-weight:700;line-height:1.3;white-space:nowrap}   /* มือถือ = 80% ของเดิม (Erb รอบ 4) */

/* ── ② แผงไอด้า ── */
.ad{margin-top:8px}
.card{position:relative;background:#fff;border:1px solid rgba(231,224,242,.9);border-radius:var(--r-l);
  overflow:visible;box-shadow:var(--sh-l);display:flex;flex-direction:column}   /* visible = ให้ไอด้าล้นออกนอกการ์ดได้ (รอบ 13) */
.card-top{position:relative;border-radius:var(--r-l) var(--r-l) 0 0;display:flex;align-items:center;gap:9px;min-height:46px;padding:0 15px;
  background:var(--g-brand-soft);color:#fff;font-size:.78em;font-weight:500;line-height:1.3}
.dot{width:9px;height:9px;border-radius:50%;background:#fff;flex:0 0 auto;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.card-top b{font-weight:700}
.card-top .sep{display:none;margin-left:auto;opacity:.92;white-space:nowrap}   /* จอเล็กที่แคบ: ซ่อนไว้ ไม่ให้แถบหัวการ์ดล้น */
.card-x{display:none;flex:0 0 auto;width:34px;height:34px;margin-left:auto;border-radius:50%;
  place-items:center;background:rgba(255,255,255,.22);color:#fff}
.card-x svg{width:19px;height:19px}
/* สวิตช์ โหมดพูดคุย ที่หัวแชต — ป้ายตัวหนังสือ + สถานะ เปิด/ปิด ชัดเจน สูง ≥44px */
.lm{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 14px;border-radius:var(--pill);
  background:rgba(255,255,255,.22);border:2px solid #fff;color:#fff;font-weight:600;font-size:1em;cursor:pointer;touch-action:manipulation}
.lm[hidden]{display:none}
.lm-s{display:inline-block;min-width:44px;padding:5px 10px;border-radius:var(--pill);background:#fff;color:var(--violet-dd);font-weight:700;text-align:center}
.lm.on{background:#fff;color:var(--violet-dd)}
.lm.on .lm-s{background:var(--violet-dd);color:#fff}
.lm:focus-visible,.lis button:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--violet-dd)}
/* แถบสถานะเหนือช่องพิมพ์: ไอด้ากำลังพูด (ม่วง) / กำลังฟังคุณอยู่ (ส้ม + จุดกะพริบ) */
.lis{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;border-radius:14px;
  background:var(--violet-l);border:2px solid var(--violet-dd);color:var(--violet-dd);font-weight:600;font-size:.9em;line-height:1.35}
.lis[hidden],.lis button[hidden]{display:none}
.lis[data-mode="listen"]{background:var(--orange-l);border-color:var(--orange-d);color:var(--orange-d)}
.lis-dot{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:currentColor;animation:rec 1s infinite}
.lis-t{flex:1 1 180px}
.lis-b{display:flex;flex-wrap:wrap;gap:8px}
.lis button{min-height:56px;padding:0 20px;border-radius:var(--pill);font-weight:700;font-size:1.05em;cursor:pointer;touch-action:manipulation}
.lis-stop{background:var(--violet-dd);color:#fff;border:2px solid var(--violet-dd)}
.lis[data-mode="listen"] .lis-stop{background:var(--orange-d);border-color:var(--orange-d)}
.lis-no{background:#fff;color:var(--ink);border:2px solid var(--ink-6)}
.card-b{padding:12px 14px 12px;display:flex;flex-direction:column;min-height:0}

/* หน้าเปิด (ยังไม่คุย) — Erb รอบ 13: การ์ดต้องสูงเท่าเดิม ห้ามดันไอด้าไปขึ้นบรรทัดใหม่
   → ภาพไอด้าเป็น absolute หลุดออกจากโฟลว์ ตัวใหญ่ ล้นขึ้นไปทับแถบหัวการ์ดที่ไล่สี
   และล้นขอบขวาของการ์ดนิดหน่อย ให้ได้ความรู้สึก "โผล่ออกมา"
   .arow ตั้ง min-height ไว้แทนความสูงเดิมที่ภาพเคยดันไว้ = การ์ดสูงเท่าเดิม */
.arow{position:relative;display:block;min-height:150px}
/* ภาพไอด้าหน้าเปิด = ไฟล์ตัดพื้นหลังโปร่ง วางลอยบนพื้นการ์ด ไม่มีกรอบสี · เงาตามรูปทรงคน
   ต้องใช้ filter:drop-shadow (ไม่ใช่ box-shadow ซึ่งจะได้เงาเป็นสี่เหลี่ยม) — Erb รอบ 11 */
.photo{position:absolute;right:-14px;bottom:-6px;z-index:2;display:block;width:auto;margin:0;background:none;padding:0;border-radius:0;box-shadow:none}
.photo span{display:block;width:100%;background:none;border-radius:0;overflow:visible}
.photo img{width:auto;height:235px;max-width:60vw;filter:drop-shadow(0 10px 18px rgba(80,50,140,.30))}
.log{width:100%;padding-right:142px;min-width:0;min-height:0;max-height:236px;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start;gap:7px}   /* max-height: คู่ถาม-ตอบที่เก็บไว้หลังกดปิดอาจยาวมาก อย่าให้การ์ดยืดจนดัน (3) หลุดจอ */
/* เริ่มคุยแล้ว หรือเปิดหน้ามาแล้วมีบทสนทนาเดิมคืนมา = เอาภาพไอด้าตัวใหญ่ออก (Erb 4 ต.ค.: ภาพมีเฉพาะหน้าเปิดใหม่)
   js/home-v6.js ใส่ .talking ที่ #aida เมื่อมีเทิร์นของผู้ใช้ · ล้างประวัติ = โหลดหน้าใหม่ ภาพกลับมาเอง
   .arow min-height และ .log padding-right ถูกตั้งไว้เผื่อภาพทุกช่วงจอ ต้องคืนค่าด้วย ไม่งั้นเหลือที่ว่างเปล่า
   (#aida.talking มี specificity สูงกว่ากฎใน media query ของ .arow/.log จึงชนะทุกช่วงจอโดยไม่ต้องเขียนซ้ำ) */
#aida.talking .photo{display:none}
#aida.talking .arow{min-height:0}
#aida.talking .log{padding-right:0}
.who{color:var(--ink);font-weight:700;font-size:1.05em;line-height:1.2}
.who i{display:block;font-style:normal;font-weight:400;font-size:.62em;color:var(--ink-4);line-height:1.35;margin-top:1px}
/* ไอคอนไอด้าตอนคุย = ภาพพื้นขาว ครอบวงกลม + วงแหวนไล่เฉดม่วง→ส้ม (Erb รอบ 11)
   วงแหวน = พื้นหลังไล่เฉดของกรอบนอก + padding แล้วรูปข้างในเป็นวงกลมพื้นขาวทับ */
.who-av{display:none;flex:0 0 52px;width:52px;aspect-ratio:1;border-radius:50%;padding:3.5px;
  background:var(--g-brand-soft);box-shadow:0 4px 12px rgba(106,44,198,.24)}
.who-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff}
.bub{max-width:96%;padding:10px 13px;font-size:.82em;line-height:1.55;word-wrap:break-word}
.bub.ai{background:var(--violet-ll);border:1px solid var(--line);border-radius:16px 16px 16px 5px;color:var(--ink-6)}
.bub.me{align-self:flex-end;background:linear-gradient(120deg,var(--violet) 0%,var(--pink) 100%);
  color:#fff;border-radius:16px 16px 5px 16px;box-shadow:0 6px 16px rgba(176,50,110,.24)}
/* ปุ่มฟังเสียงท้ายบอลลูนไอด้า — สูง ≥48px มีตัวหนังสือกำกับเสมอ คอนทราสต์สูง (ขาวบนม่วงเข้ม ≈9:1) */
.say{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;margin-top:8px;padding:0 18px;
  border-radius:var(--pill);border:2px solid var(--violet-dd);background:var(--violet-dd);color:#fff;
  font-size:1em;font-weight:600;line-height:1;cursor:pointer;touch-action:manipulation;transition:background var(--tr)}
.say svg{width:26px;height:26px;flex:0 0 auto}
.say:hover{background:var(--violet-d)}
.say:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.say.on{background:#fff;color:var(--violet-dd)}
.say.on svg{animation:rec 1s infinite}
.bub.ai.urg .say{border-color:var(--orange-d);background:var(--orange-d)}
.bub.ai.urg .say.on{background:#fff;color:var(--orange-d)}
.bub.ai b{color:var(--violet-d);font-weight:600}
/* ฉุกเฉิน (triage จาก api/chat.php) — ต้องสะดุดตา ไม่จมไปกับคำตอบปกติ */
.bub.ai.urg{background:var(--orange-l);border-color:var(--orange);color:var(--orange-d);font-weight:500}
.bub.ai.urg a{color:var(--orange-d);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bub a{color:var(--violet-d);text-decoration:underline;text-underline-offset:3px}
.bub.me a{color:#fff}
.typ{display:inline-flex;gap:4px;align-items:center;padding:3px 0}
.typ i{width:7px;height:7px;border-radius:50%;background:var(--ink-2);animation:bob 1.1s infinite}
.typ i:nth-child(2){animation-delay:.16s} .typ i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-5px);opacity:1}}


.ask{position:relative;margin-top:12px}
.ask-in{width:100%;min-height:56px;padding:0 64px 0 20px;border-radius:var(--pill);
  background:#fff;border:2px solid var(--line);color:var(--ink);font-size:.92em;font-weight:400}
.ask-in::placeholder{color:var(--ink-2)}
.ask-in:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 5px rgba(106,44,198,.16)}
.ask-go{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(120deg,var(--violet) 0%,var(--pink) 78%,var(--orange) 130%);
  box-shadow:0 8px 20px rgba(176,50,110,.32);transition:transform var(--tr)}
.ask-go:hover{transform:translateY(-50%) scale(1.07)}
.ask-go svg{width:22px;height:22px}

/* ── แนบรูป / ถ่ายรูป / ไฟล์ / อัดเสียง (ซ่อนจน JS เปิด · ปุ่มมีป้ายตัวหนังสือเสมอ ผู้สูงวัยไม่ต้องเดาไอคอน) ── */
.att{margin-top:8px}
.att[hidden],.att-pend[hidden],.att-b[hidden]{display:none}
.att-row{display:flex;flex-wrap:wrap;gap:6px}
.att-b{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;border-radius:var(--pill);
  background:#fff;border:1.5px solid var(--line);color:var(--violet-d);font-size:.74em;font-weight:500;
  cursor:pointer;transition:border-color var(--tr),background var(--tr)}
.att-b svg{width:19px;height:19px;flex:0 0 auto}
.att-b:hover,.att-b:focus-visible{border-color:var(--violet);background:var(--violet-ll)}
.att-b[aria-pressed="true"]{border-color:var(--orange);background:var(--orange-l);color:var(--orange-d)}
.att-b[aria-pressed="true"] svg{animation:rec 1s infinite}
@keyframes rec{50%{opacity:.35}}
.att-b:disabled{opacity:.45;cursor:default}
.att-pend{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:6px 6px 6px 8px;border-radius:12px;
  background:var(--violet-ll);border:1.5px solid var(--violet-l);font-size:.74em;color:var(--ink-6)}
.att-ic{flex:0 0 auto;width:40px;height:40px;border-radius:8px;display:grid;place-items:center;overflow:hidden;background:#fff;color:var(--violet-d)}
.att-ic img{width:100%;height:100%;object-fit:cover}
.att-ic svg{width:20px;height:20px}
.att-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-x{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink-4);background:none;border:none;cursor:pointer}
.att-x svg{width:18px;height:18px}
.bub.me .bub-att{display:block;font-size:.86em;opacity:.9}
.bub.me img.bub-img{display:block;max-width:180px;max-height:180px;border-radius:10px;margin-bottom:6px}

.rbt{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:10px;padding:0 14px;
  border-radius:14px;background:var(--violet-ll);border:1.5px solid var(--line);
  font-size:.78em;color:var(--ink-6);cursor:pointer;transition:border-color var(--tr),background var(--tr)}
.rbt input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--violet);cursor:pointer}
.rbt.warn{border-color:var(--orange);background:var(--orange-l);color:var(--orange-d);font-weight:500}
.rbt[hidden]{display:none}
.note{margin-top:7px;font-size:.72em;line-height:1.5;color:var(--ink-2);text-align:center}
.note a{color:var(--orange-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pdpa-clr{margin-left:6px;min-height:36px;padding:0 14px;border:1.5px solid var(--violet);border-radius:var(--pill);background:#fff;
  color:var(--violet);font:inherit;font-weight:600;cursor:pointer}
.pdpa-clr:hover{background:var(--violet);color:#fff}
.pdpa-clr:focus-visible{outline:3px solid var(--orange-d);outline-offset:2px}
.pdpa-clr[disabled]{opacity:.6;cursor:wait}

/* ── ③ กระเบื้อง 6 ใบ ── */
.tiles{padding:16px 0 26px}
.t-h{font-size:1.32em;text-align:center;margin-bottom:4px}
.t-lead{text-align:center;font-size:.8em;color:var(--ink-2);margin-bottom:14px}
.t-g{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{position:relative;display:block;border-radius:18px;overflow:hidden;background:var(--violet-l);
  box-shadow:var(--sh-s);transition:transform var(--tr),box-shadow var(--tr)}
.tile img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.tile::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(35,18,70,0) 34%,rgba(35,18,70,.34) 58%,rgba(35,18,70,.82) 100%)}
.tile b{position:absolute;left:11px;right:11px;bottom:9px;z-index:2;color:#fff;font-weight:600;
  font-size:.8em;line-height:1.32;text-shadow:0 2px 10px rgba(20,8,45,.6)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.tile:hover img{transform:scale(1.06)}

/* ── FOOTER บรรทัดเดียว ── */
.ft{border-top:1px solid var(--line);background:rgba(255,255,255,.65)}
.ft p{padding:14px 0 18px;font-size:.72em;line-height:1.7;color:var(--ink-2);text-align:center}

/* ═══ DRAWER เมนู ═══ */
.sheet{position:fixed;inset:0;z-index:120;display:flex;justify-content:flex-end;background:rgba(40,25,70,.45)}
.sheet[hidden]{display:none}
.sheet-p{width:min(340px,88vw);height:100%;overflow-y:auto;background:#fff;padding:16px 18px 30px;
  box-shadow:-18px 0 50px rgba(40,20,80,.3)}
.sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sheet-h b{font-size:1.02em;color:var(--ink)}
.sheet-x{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--violet-ll);color:var(--violet-d)}
.sheet-x svg{width:21px;height:21px}
.sheet-p h3{margin:16px 0 4px;font-size:.74em;font-weight:600;color:var(--ink-2);letter-spacing:.6px}
.sheet-p nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;
  padding:6px 8px;border-bottom:1px solid var(--line);font-size:.86em;font-weight:500;color:var(--ink-6)}
.sheet-p nav a:hover{color:var(--violet-d)}
.sheet-p nav a svg{width:17px;height:17px;flex:0 0 auto;color:var(--ink-2)}
.sheet-p nav a em{font-style:normal;font-weight:700;color:var(--orange-d)}
.sheet-fs{display:flex;gap:8px;padding:6px 2px 0}
.sheet-fs button{flex:1;min-height:46px;border-radius:13px;background:var(--violet-ll);color:var(--violet-d);font-weight:600;font-size:.86em}
.sheet-fs button[aria-pressed="true"],.sheet-fs button:hover{background:var(--violet);color:#fff}
.sheet-src{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.sheet-src a{font-size:.76em;color:var(--violet-d);text-decoration:underline;text-underline-offset:3px;min-height:38px;display:flex;align-items:center}

/* ═══ เริ่มคุย = แผงขยายเต็มจอ — ใช้ชุดเดียวกันทั้งมือถือและจอคอม (Erb รอบ 9 ขอให้จอคอม
   เหมือนมือถือ ทั้งตอนเริ่มคุยและตอนกลับมาคุยอีกครั้ง) เดิมกฎชุดนี้อยู่ใน max-width:979px ═══ */
body.chat-on{overflow:hidden}
/* .hero-g มี z-index:1 (ยกเนื้อหาให้ลอยเหนือภาพพื้นหลัง) = สร้าง stacking context ครอบ .ad
   ถ้าไม่ปลดตอนคุย แผงเต็มจอ z-index:130 จะยังอยู่ใต้ header ที่ z-index:80 */
body.chat-on .hero-g{z-index:auto}
body.chat-on .ad{position:fixed;inset:0;z-index:130;margin:0}
body.chat-on .card{height:100%;border-radius:0;border:none;overflow:hidden}
body.chat-on .card-top{border-radius:0}
body.chat-on .card-b{flex:1;min-height:0}
body.chat-on .card-x{display:grid;margin-left:0}
body.chat-on .lm{margin-left:auto}
body.chat-on .card-top{padding-top:5px;padding-bottom:5px}
body.chat-on .card-top .sep{display:none}
/* โหมดคุย = ทรงแอปแชต (Erb 15 ก.ย. รอบ 3): ภาพไอด้า+ชื่อเป็นหัวแถบบนสุด · บอลลูนไอด้าชิดขอบซ้าย
   ระยะเท่ากับที่บอลลูนผู้ใช้ชิดขวา (ไม่มีคอลัมน์ภาพมาดันข้อความเข้าใน) */
body.chat-on .arow{display:flex;flex:1;min-height:0;flex-direction:column;gap:0}
body.chat-on .photo{display:none}
body.chat-on .who{display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:2px}
body.chat-on .who-av{display:block}
body.chat-on .log{width:100%;max-height:none;justify-content:flex-start;overflow-y:auto;gap:9px;padding-right:0}
body.chat-on .bub{max-width:88%;font-size:.86em}
body.chat-on .bub.ai{align-self:flex-start}
/* จอคอม: เต็มจอเหมือนกัน แต่คุมคอลัมน์บทสนทนา/ช่องพิมพ์ไว้กลางจอ — ปล่อยเต็ม 1440px
   บรรทัดจะยาวจนอ่านยาก (แอปแชตบนเดสก์ท็อปทุกตัวทำแบบนี้) */
@media(min-width:980px){
  body.chat-on .card-b{width:100%;max-width:920px;margin:0 auto}
  body.chat-on .bub{max-width:76%}
  /* แถบหัวยังเต็มความกว้าง (เป็นไตเติลบาร์) แต่ดันชื่อ/ปุ่มปิดให้ตรงขอบคอลัมน์บทสนทนา */
  body.chat-on .card-top{padding:0 clamp(20px,calc((100vw - 920px) / 2),400px)}
}

/* ═══ จอกลาง ═══ */
@media(min-width:620px){
  .wrap{padding:0 24px}
  .bd-name{font-size:2.3em}   /* โลโก้ไม่ลดขนาดที่จอกลางแล้ว — คงขนาดมือถือ 176px ต่อเนื่องถึง 979px (Erb รอบ 4) */
  .m1{font-size:1.05em} .m2{font-size:1.5em}
  .photo img{height:241px}
  .arow{min-height:172px} .log{padding-right:152px;max-height:264px}
  .t-g{grid-template-columns:repeat(3,1fr);gap:14px}
  .t-h{font-size:1.5em}
}

/* ═══ จอคอม: ①ซ้าย ②ขวา ═══ */
@media(min-width:980px){
  .hd-nav{display:flex}
  .hero{padding:0}
  .hero-g{flex-direction:row;align-items:center;gap:52px;min-height:640px;padding:24px}   /* padding:24px 0 เดิม ลบพ็ดดิ้งข้างของ .wrap ทิ้ง -> ที่จอ 980-1180px ตัวอักษรชนขอบจอ */
  .bd{flex:0 0 50.5%;text-align:left}   /* เดิม 40% แต่ motto nowrap 1.85em ดันคอลัมน์จริงเป็น ~50.5% อยู่แล้ว · พอย่อ motto เหลือ 75%
                                            คอลัมน์หดลงมาที่ 40% การ์ดไอด้าเลยกว้าง/ขยับซ้ายไปบังผู้ดูแล → ตรึงไว้ที่ค่าเดิม (Erb รอบ 10)
                                            จอ 980-1179px ยังใช้ 36% ตามบล็อกด้านล่าง ไม่งั้นการ์ดแคบเกิน */
  .bd-plate{padding:4px 12px 8px}
  .bd-plate img{width:256px} .bd-name{font-size:2.9em} .bd-en{font-size:.85em}   /* โลโก้จอคอม x2: 128 -> 256px (Erb รอบ 9) */
  .m1{margin-top:18px;font-size:1.125em;font-weight:600;color:var(--ink-h)}   /* 1.5em -> 75% (Erb รอบ 9) */
  .m2{font-size:1.39em;line-height:1.24}   /* 1.85em -> 75% (Erb รอบ 9) */
  .ad{flex:1;min-width:0;margin-top:0}
  .card-top{min-height:52px;font-size:.82em;padding:0 20px}
  .card-top .sep{display:none}   /* รอบ 13: ไอด้าโผล่มาทับมุมขวาของแถบหัว ข้อความนี้จะโดนบัง เลยตัดทิ้ง */
  .card-b{padding:20px 20px 18px}
  .photo img{height:340px}
  .arow{min-height:236px} .log{padding-right:216px;max-height:340px}
  .log{gap:9px}
  .who{font-size:1.2em}
  .bub{font-size:.88em;padding:12px 16px}
  .log{gap:9px}
  .ask{margin-top:14px}
  .ask-in{min-height:60px}
  .rbt{margin-top:12px;min-height:46px;font-size:.82em}
  .note{margin-top:10px;font-size:.76em;text-align:left;padding-left:4px}
  .tiles{padding:6px 0 34px}
  .t-h{font-size:1.72em} .t-lead{margin-bottom:18px}
  .t-g{grid-template-columns:repeat(6,1fr);gap:14px}
  .tile b{font-size:.78em;left:10px;right:10px}
}

/* ═══ จอคอมแคบ 980-1179px: ที่ความกว้างนี้ .bd 40% + gap 52 บีบการ์ดจนบอลลูนเหลือคำละบรรทัด ═══ */
@media(min-width:980px) and (max-width:1179px){
  .hero-g{gap:28px}
  .bd{flex:0 0 36%}
  .bd-name{font-size:2.4em} .m1{font-size:.96em} .m2{font-size:1.16em}   /* motto 75% (Erb รอบ 9) */
  .photo img{height:270px}
  .arow{min-height:196px} .log{padding-right:172px;max-height:290px}

}
@media(min-width:1240px){ .t-g{gap:16px} .tile b{font-size:.84em} }

/* ═══ เคารพผู้ใช้ที่ปิดอนิเมชัน ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .tile:hover{transform:none} .tile:hover img{transform:none}
}
.say.loading svg{animation:rec 1s infinite}.say.loading{opacity:.85}