/* การ์ดสอนใช้งาน (x-tips.js) — แผ่นเลื่อนทีละท่า แบบการ์ดแนะนำฟีเจอร์ของ Discord / Apple Tips
   เวที = หน้าจอจำลองแบบเรียบ (ตัดรายละเอียด) + นิ้วที่ขยับเอง · ทุกคลาสขึ้นต้น tp- กันชนกับหน้าอื่น */
.tp-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; padding:4px 0 6px; }
.tp-stage { position:relative; width:300px; height:420px; border-radius:26px; background:#0b0b0c; border:1px solid var(--line);
  overflow:hidden; flex:none; -webkit-user-select:none; user-select:none; pointer-events:none; }
.tp-cap { min-height:44px; text-align:center; font-size:16px; font-weight:600; color:var(--ink); line-height:1.35; padding:0 10px; }
.tp-dots { display:flex; gap:7px; justify-content:center; }
.tp-dots i { width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .25s, width .25s; }
.tp-dots i.on { background:var(--tint); width:18px; border-radius:4px; }
.tp-bar { display:flex; gap:10px; width:100%; }
.tp-bar .btn { flex:1; justify-content:center; }

/* นิ้ว */
.tp-finger { position:absolute; left:0; top:0; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%;
  background:rgba(255,255,255,.28); border:2px solid rgba(255,255,255,.85); box-shadow:0 4px 14px rgba(0,0,0,.5);
  transition:transform .55s cubic-bezier(.4,.1,.2,1), opacity .25s; opacity:0; z-index:20; }
.tp-finger.on { opacity:1; }
.tp-finger.press { background:rgba(255,255,255,.55); }
.tp-ripple { position:absolute; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; border:2px solid #fff;
  animation:tp-rip .6s ease-out forwards; z-index:19; }
@keyframes tp-rip { from { transform:scale(.6); opacity:.9; } to { transform:scale(2.2); opacity:0; } }

/* หน้าจอจำลอง */
.tp-scr { position:absolute; inset:0; padding:14px 12px; display:flex; flex-direction:column; gap:9px; }
.tp-h { font-size:17px; font-weight:800; color:var(--ink); }
.tp-seg { display:flex; background:var(--card); border-radius:999px; padding:3px; position:relative; }
.tp-seg span { flex:1; text-align:center; font-size:12px; color:var(--ink-2); padding:6px 0; position:relative; z-index:1; transition:color .3s; }
.tp-seg span.on { color:var(--ink); font-weight:700; }
.tp-pill { position:absolute; top:3px; bottom:3px; border-radius:999px; background:var(--card-2); transition:left .4s cubic-bezier(.4,.1,.2,1), width .4s; }
.tp-row { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-2); }
.tp-row b { color:var(--ink); font-size:13px; }
.tp-sw { width:38px; height:23px; border-radius:12px; background:var(--card-2); position:relative; transition:background .3s; flex:none; }
.tp-sw::after { content:''; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; transition:transform .3s; }
.tp-sw.on { background:var(--green); } .tp-sw.on::after { transform:translateX(15px); }
.tp-card { background:var(--card); border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:8px; }
.tp-nav { display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:700; color:var(--ink); }
.tp-arr { width:28px; height:28px; border-radius:50%; background:var(--card-2); display:grid; place-items:center; font-size:13px; color:var(--ink); }
.tp-month { transition:opacity .25s, transform .35s; display:inline-block; }
.tp-month.out { opacity:0; transform:translateX(30px); }
.tp-tiles { display:flex; gap:6px; }
.tp-tiles div { flex:1; background:var(--card-2); border-radius:10px; padding:5px 4px; text-align:center; font-size:10px; color:var(--muted); }
.tp-tiles b { display:block; font-size:13px; color:var(--ink); transition:color .3s; }
.tp-delta { display:block; font-size:10px; font-weight:700; color:var(--green); max-height:0; opacity:0; overflow:hidden; transition:max-height .35s, opacity .35s; }
.tp-delta.dn { color:var(--red); }
.tp-cmp .tp-delta { max-height:14px; opacity:1; }
.tp-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; transition:opacity .3s; }
.tp-grid.fade { opacity:.15; }
.tp-c { height:39px; border-radius:7px; border:1.5px solid transparent; background:rgba(127,127,127,.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; transition:box-shadow .2s, background .2s; }
.tp-c i { font-style:normal; font-size:8px; color:var(--muted); } .tp-c b { font-size:10px; color:var(--ink); } .tp-c small { font-size:8px; font-weight:700; }
.tp-c.g { border-color:rgba(48,209,88,.7); } .tp-c.g small { color:var(--green); }
.tp-c.r { border-color:rgba(255,69,58,.75); } .tp-c.r small { color:var(--red); }
.tp-c.t { border-color:var(--orange); }
.tp-c.e { background:transparent; }
.tp-c.sel { box-shadow:0 0 0 2px var(--tint) inset; background:rgba(10,132,255,.22); }
.tp-big-btn { margin-top:auto; background:var(--tint); color:#fff; border-radius:14px; padding:12px; text-align:center; font-weight:700; font-size:14px; }
.tp-sheet { position:absolute; left:0; right:0; bottom:0; background:var(--card); border-radius:20px 20px 0 0; padding:14px 12px 18px;
  transform:translateY(105%); transition:transform .45s cubic-bezier(.3,.1,.2,1); display:flex; flex-direction:column; gap:8px; z-index:5; }
.tp-sheet.on { transform:none; }
.tp-sheet .tp-opt { background:var(--card-2); border-radius:12px; padding:10px; font-size:13px; color:var(--ink); display:flex; gap:8px; align-items:center; }

/* ท่าอ่านปฏิทิน: ช่องเดียวขยายใหญ่ + ป้ายชี้ */
.tp-zoom { position:absolute; left:48px; top:120px; width:120px; height:120px; border-radius:20px; border:3px solid rgba(48,209,88,.8);
  background:rgba(127,127,127,.1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:border-color .4s; }
.tp-zoom .d { font-size:16px; color:var(--muted); } .tp-zoom .a { font-size:30px; font-weight:800; color:var(--ink); }
.tp-zoom .p { font-size:16px; font-weight:800; color:var(--green); transition:color .4s; }
.tp-zoom.r { border-color:rgba(255,69,58,.85); } .tp-zoom.r .p { color:var(--red); }
.tp-zoom.t { border-color:var(--orange); }
.tp-lab { position:absolute; font-size:12px; font-weight:700; color:var(--ink); background:var(--card-2); border-radius:9px; padding:5px 9px;
  opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; white-space:nowrap; }
.tp-lab.on { opacity:1; transform:none; }
.tp-legend { position:absolute; left:12px; right:12px; bottom:16px; display:flex; gap:6px; justify-content:center; }
.tp-legend span { font-size:11px; color:var(--ink-2); display:flex; align-items:center; gap:4px; opacity:0; transition:opacity .3s; }
.tp-legend span.on { opacity:1; }
.tp-legend i { width:12px; height:12px; border-radius:4px; border:2px solid; display:inline-block; }

/* ปุ่ม ? บนหัวหน้า */
.tp-help { font-size:20px; }