/* ==========================================================================
   YiBB — แถบเมนูและลูกเล่นชุด 3 (แนวคิดจาก 21st: Expandable Tabs, Dock, Timeline, Accordion)
   ถอดออก: ลบ <link xnav.css> และ <script xnav.js> ใน index.html
   ========================================================================== */

/* ---------- เมนูบน: แถบไฮไลต์เลื่อนตามเมาส์ + หัวเว็บหดตอนเลื่อน ---------- */
nav.links{position:relative;isolation:isolate}
.nv-pill{position:absolute;z-index:-1;top:50%;height:38px;border-radius:999px;background:var(--surface-2);transform:translateY(-50%);
  transition:left .35s cubic-bezier(.3,1.25,.5,1),width .35s cubic-bezier(.3,1.25,.5,1),opacity .2s;opacity:0;pointer-events:none}
.nv-pill.show{opacity:1}
nav.links a,nav.links .dd-btn{background:transparent!important;transition:color .2s}
nav.links a.on{background:transparent!important}
nav.links a.on::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent)}
nav.links a{position:relative}
header.top{transition:box-shadow .3s,background .3s,border-color .3s}
header.top .wrap{transition:height .3s cubic-bezier(.2,.8,.2,1)}
header.top.scrolled{background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);box-shadow:0 10px 30px -24px rgba(31,41,55,.5)}
@media (min-width:901px){header.top.scrolled .wrap{height:58px}}

/* ---------- มือถือ: แถบเมนูล่างแบบแอป (Dock) ---------- */
.dock{display:none}
@media (max-width:900px){
  .dock{display:flex;position:fixed;z-index:34;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
    width:min(440px,calc(100% - 20px));justify-content:space-between;padding:6px;border-radius:24px;
    background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
    border:1px solid color-mix(in srgb,var(--line-2) 70%,transparent);box-shadow:0 18px 40px -16px rgba(31,41,55,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .dock.hide{transform:translate(-50%,130%)}
  .dock a,.dock button{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 6px;border:0;background:none;
    color:var(--muted);font:inherit;font-size:11px;font-weight:600;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s}
  .dock svg{width:22px;height:22px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .dock .on{color:var(--accent-2)}
  .dock .on svg{transform:translateY(-1px) scale(1.08)}
  .dock a:active svg,.dock button:active svg{transform:scale(.88)}
  .dock-blob{position:absolute;z-index:0;top:6px;bottom:6px;border-radius:18px;background:var(--accent-soft);transition:left .4s cubic-bezier(.3,1.3,.5,1),width .4s}
  .dock .bd{position:absolute;top:2px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;
    display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}
  .dock .bd[hidden]{display:none}
  .dock .bd.pop{animation:dkPop .4s cubic-bezier(.3,1.6,.5,1)}
  @keyframes dkPop{40%{transform:scale(1.4)}}
  /* หลบให้แถบล่าง */
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .yb-chat{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
  .yb-chat.yb-away{opacity:0;transform:translateY(20px) scale(.8);pointer-events:none!important}
  .yb-chat.yb-away>*{pointer-events:none!important}
  .xc-sticky{top:calc(env(safe-area-inset-top,0px) + 70px)}
  /* ตะกร้า/บัญชีย้ายไปแถบล่างแล้ว เหลือหัวเว็บโล่งขึ้น */
  header.top .cart-btn,header.top .acct-btn{display:none!important}
}

/* ---------- แถบหมวด: ตัวเลือกเลื่อน + ขอบจางบอกว่าเลื่อนได้ ---------- */
.xs-cats{position:relative;isolation:isolate}
.xs-cats .cs-pill{position:absolute;z-index:-1;border-radius:999px;background:var(--ink);transition:left .4s cubic-bezier(.3,1.25,.5,1),width .4s cubic-bezier(.3,1.25,.5,1),top .3s,height .3s;pointer-events:none}
.xs-cats.has-pill button.on{background:transparent!important;border-color:transparent!important;color:var(--on-ink)!important}
.xs-cats.has-pill button.xs-new.on{color:#fff!important}
.fade-x{-webkit-mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent)}
.fade-x.at-start{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.fade-x.at-end{-webkit-mask:linear-gradient(90deg,transparent,#000 18px);mask:linear-gradient(90deg,transparent,#000 18px)}
.fade-x.at-start.at-end{-webkit-mask:none;mask:none}
.cats{scroll-behavior:smooth}

/* ---------- วิธีสั่ง: เส้นเวลาวิ่งตามการเลื่อน ---------- */
.flow::after{content:"";position:absolute;top:28px;left:12.5%;height:2px;width:calc(75% * var(--fp,0));background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px;transition:width .15s linear}
.flow li .dot{transition:transform .4s cubic-bezier(.3,1.6,.5,1),border-color .3s,background .3s,box-shadow .3s}
.flow li.lit .dot{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 12%,transparent),var(--shadow);transform:scale(1.06)}
.flow li.lit b{color:var(--accent-2)}
@media (max-width:640px){
  .flow::after{top:28px;left:27px;width:2px;height:calc((100% - 56px) * var(--fp,0));background:linear-gradient(180deg,var(--accent),var(--accent-2))}
}

/* ---------- คำถามที่พบบ่อย: เปิด/ปิดนุ่มๆ ---------- */
.faq details{overflow:hidden}
.faq summary{position:relative;padding-right:44px!important;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--accent-soft)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2542D' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))!important}

/* ---------- คำแนะนำตอนพิมพ์ค้นหา ---------- */
.sg-wrap{position:relative}
.sg{position:absolute;left:0;top:calc(100% + 6px);z-index:40;width:max(100%,min(440px,calc(100vw - 32px)));max-height:min(420px,60vh);overflow:auto;padding:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px -20px rgba(31,41,55,.35);animation:sgIn .2s cubic-bezier(.2,.8,.2,1);font-weight:400}
.sg[hidden]{display:none}
@keyframes sgIn{from{opacity:0;transform:translateY(-6px)}}
.sg-h{margin:6px 8px 4px;font-size:11.5px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
.sg-chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 4px 6px}
.sg-chip{border:1px solid var(--line-2);background:var(--bg);border-radius:999px;padding:6px 12px;font:inherit;font-size:13.5px;color:var(--text);cursor:pointer}
.sg-chip:hover,.sg-chip.on{border-color:var(--accent);background:var(--accent-soft)}
.sg-row{width:100%;display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px;border-radius:12px;font:inherit;font-size:14px;color:var(--text);text-align:left;cursor:pointer}
.sg-row img,.sg-ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;object-fit:cover;background:var(--surface-2);display:grid;place-items:center;font-size:18px}
.sg-row span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sg-row:hover,.sg-row.on{background:var(--surface-2)}
.sg mark{background:none;color:var(--accent-2);font-weight:700}
.sg-go{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;border:0;border-radius:12px;padding:11px 12px;background:var(--accent-soft);color:var(--accent-2);font:inherit;font-weight:600;font-size:14px;cursor:pointer;text-align:left}
.sg-go span{font-size:11.5px;opacity:.7;white-space:nowrap}
.sg-go:hover,.sg-go.on{background:var(--accent);color:#fff}

/* ---------- น้องหยิบพูดได้ (assets/say.js) ---------- */
.sh-say{position:absolute;z-index:3;left:calc(50% + 150px);top:2%;width:max-content;max-width:250px;padding:12px 16px;border-radius:20px 20px 20px 6px;cursor:pointer;
  background:var(--surface);color:var(--text);font-size:14.5px;line-height:1.45;border:1px solid var(--line);
  box-shadow:0 20px 40px -18px rgba(242,84,45,.45);opacity:0;transform:translateY(10px) scale(.85);transform-origin:0 100%;pointer-events:none;
  transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.sh-say.show{opacity:1;transform:none;pointer-events:auto}
.sh-say small{display:block;margin-top:3px;color:var(--muted);font-size:12.5px}
.sh-say b{color:var(--accent-2)}
.sh-say::before{content:"";position:absolute;left:-7px;bottom:10px;width:14px;height:14px;background:inherit;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);border-radius:0 0 0 4px}
.sh-say[data-mood="happy"]{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.sh-say[data-mood="happy"].show{animation:sayHop .6s cubic-bezier(.3,1.6,.5,1)}
.sh-say[data-mood="sad"]{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
@keyframes sayHop{30%{transform:translateY(-6px) rotate(-2deg)}}
@media (max-width:1023px){.sh-say{left:auto;right:0}}
.sh-say{text-wrap:balance}
@media (max-width:640px){
  /* มือถือ: กล่องอยู่ใต้เท้าน้องหยิบ ตรงกลาง หางชี้ขึ้น → ไม่บังหน้า */
  .sh-say{left:50%;right:auto;top:auto;bottom:-18px;max-width:min(290px,88vw);font-size:13px;padding:9px 14px;border-radius:16px;text-align:center;
    transform:translate(-50%,8px) scale(.9);transform-origin:50% 0}
  .sh-say.show{transform:translate(-50%,0)}
  .sh-say[data-mood="happy"].show{animation:sayHopM .6s cubic-bezier(.3,1.6,.5,1)}
  @keyframes sayHopM{30%{transform:translate(-50%,-5px)}}
  .sh-say::before{left:50%;top:-7px;bottom:auto;margin-left:-7px;border:0;border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:4px 0 0 0}
  .sh-say small{font-size:11.5px}
  .sh-figure:has(.sh-say.show) .sh-hint{opacity:0}
}
.translated-ltr .sh-say{display:none}

/* ---------- รูปลอยเข้าตะกร้า ---------- */
.fly-img{position:fixed;z-index:200;object-fit:cover;pointer-events:none;box-shadow:0 20px 40px -12px rgba(242,84,45,.55);border:3px solid #fff;will-change:transform}
.cart-hit{animation:cartHit .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes cartHit{30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.94) rotate(3deg)}}
.dock .cart-hit{animation:none}.dock .cart-hit svg{animation:cartHit .55s cubic-bezier(.3,1.6,.5,1)}
.cart-burst{position:fixed;z-index:201;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;
  box-shadow:0 -22px 0 -2px #FF6B3D,16px -16px 0 -2px #FFB347,22px 0 0 -2px #FF6B3D,16px 16px 0 -2px #FFB347,0 22px 0 -2px #FF6B3D,-16px 16px 0 -2px #FFB347,-22px 0 0 -2px #FF6B3D,-16px -16px 0 -2px #FFB347;
  animation:burst .6s ease-out forwards}
@keyframes burst{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}

@media (prefers-reduced-motion:reduce){.nv-pill,.dock-blob,.cs-pill,.flow::after{transition:none}}