/* kits.css · สร้างจาก src/kit-css/*.css · แก้ที่ไฟล์ part แล้วรันใหม่ + เพิ่มเลข ?v= */

/* gemini-notebook-study · แผง Studio จำลองใน hero */
.gn-panel { position: relative; max-width: 360px; margin-left: auto; background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); padding: 0 0 40px; transform: rotate(1.5deg); overflow: hidden; }
.gn-bar { display: flex; align-items: center; gap: 7px; background: var(--navy); padding: 10px 16px; }
.gn-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); display: block; }
.gn-bar i + i { background: var(--sky); }
.gn-bar i + i + i { background: var(--green); }
.gn-bar b { margin-left: 8px; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.gn-row { display: flex; align-items: center; gap: 12px; margin: 10px 14px 0; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; background: #f7f9fc; }
.gn-row b { display: block; font-family: var(--font-head); font-size: 16px; line-height: 1.3; color: var(--ink); }
.gn-row small { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.gn-n { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 14px; background: var(--amber); border: 2px solid var(--ink); }
.g-hero .visual .gn-panel + .sticker { right: -6px; bottom: -18px; }
@media (max-width: 860px) { .gn-panel { margin: 10px auto 0; } }

/* line-oa-ai-chatbot · แชทจำลองใน hero + ป้ายเมนู */
.lo-chat { position: relative; max-width: 360px; margin-left: auto; background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); padding: 0 0 16px; transform: rotate(1.5deg); overflow: hidden; }
.lo-chat .lo-top { display: flex; align-items: center; gap: 10px; background: #06c755; color: #fff; padding: 10px 16px; font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.lo-chat .lo-top i { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: block; flex: none; }
.lo-chat .lo-msg { margin: 12px 14px 0; max-width: 82%; padding: 8px 13px; border-radius: 16px; font-size: 15px; line-height: 1.5; width: max-content; }
.lo-chat .lo-in { background: #eef1f5; color: var(--ink); border-top-left-radius: 4px; }
.lo-chat .lo-out { margin-left: auto; background: #06c755; color: #fff; border-top-right-radius: 4px; }
.lo-chat .lo-note { display: block; margin: 12px 14px 0; font-family: var(--font-head); font-size: 12.5px; color: var(--ink-3); text-align: right; }
.g-hero .visual .lo-chat + .sticker { right: -6px; bottom: -18px; }
@media (max-width: 860px) { .lo-chat { margin: 10px auto 0; } }
.lo-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 14px; }
.lo-path span { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 3px 11px; }
.lo-path span.on { background: #dcf7ea; border-color: #0b6b40; color: #0b6b40; }
.lo-path i { font-style: normal; color: var(--ink-3); font-weight: 800; }
.lo-price { background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); padding: 20px 22px; margin: 18px 0 8px; }
.lo-price h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.lo-price .lo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lo-price .lo-cols > div { border-radius: 14px; padding: 12px 14px; background: #f3f6fb; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.lo-price .lo-cols b { display: block; font-family: var(--font-head); font-size: 16px; color: var(--ink); }
.lo-price .lo-cols .free { background: #dcf7ea; }
.lo-price .lo-cols .paid { background: #fff6dc; }
@media (max-width: 600px) { .lo-price .lo-cols { grid-template-columns: 1fr; } }
.shot.menu { max-width: 300px; }

/* slip-to-sheet · ตารางรายจ่ายจำลองใน hero */
.ss-sheet { position: relative; max-width: 380px; margin-left: auto; background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); padding: 0 0 44px; transform: rotate(1.5deg); overflow: hidden; }
.ss-top { display: flex; align-items: center; gap: 10px; background: #1e8e3e; color: #fff; padding: 10px 16px; font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.ss-top i { width: 22px; height: 22px; border-radius: 5px; background: #fff; display: block; flex: none; }
.ss-grid { display: grid; grid-template-columns: auto 1fr auto auto; margin: 10px 12px 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13px; line-height: 1.35; }
.ss-grid span { padding: 7px 8px; border-top: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.ss-grid span.h { border-top: 0; background: #f3f6fb; font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.ss-grid span.r { text-align: right; font-variant-numeric: tabular-nums; }
.ss-grid span.q { color: #b3261e; font-weight: 600; }
.ss-grid em { font-style: normal; font-family: var(--font-head); font-weight: 600; font-size: 12px; background: #dcf7ea; color: #0b6b40; border-radius: 999px; padding: 1px 8px; }
.ss-btn { width: max-content; margin: 12px 12px 0 auto; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; background: var(--amber); border: 2px solid var(--ink); border-radius: 10px; padding: 4px 12px; }
.g-hero .visual .ss-sheet + .sticker { right: -6px; bottom: -18px; }
@media (max-width: 860px) { .ss-sheet { margin: 10px auto 0; } }
@media (max-width: 420px) { .ss-grid { font-size: 12px; } .ss-grid span { padding: 6px 5px; } }