/* 🧭 คู่มือในหน้า (public/guide.js) — ใช้ทั้งคอนโซล (style.css) และหน้าที่ใช้ job.css จึงใส่สีสำรองไว้ทุกตัวแปร
   ⚠️ ปุ่มทุกตัวตั้งทั้งพื้นหลังและสีตัวอักษรเอง — บางหน้าตั้งสีปุ่มพื้นฐานเป็นขาว (บทเรียนโหมดสอน VISBIO: ปุ่มขาวบนขาว) */

/* ---- ข้อความไทยในคู่มือ: แต่ละคำไม่ตัดกลาง (ดู thai() ใน guide.js) ---- */
.gd-bubble nb,.gd-box nb,.gd-bar nb{white-space:nowrap}
.gd-bubble,.gd-box,.gd-bar-text{overflow-wrap:anywhere}

/* ---- ไอคอนหน้าชื่อช่อง + ปุ่ม ⓘ ---- */
.gd-label{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.5}
.gd-ico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;color:var(--orange,#e7663e)}
.gd-ico .icon{width:18px;height:18px}
.gd-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:#eaf1fb;color:var(--blue,#2160cc);cursor:help;vertical-align:middle;box-shadow:none}
.gd-tip::after{content:"";position:absolute;inset:-8px}
.gd-tip .icon{width:16px;height:16px}
.gd-tip:hover,.gd-tip[aria-expanded="true"]{background:var(--blue,#2160cc);color:#fff}
.gd-tip:focus-visible{outline:2px solid var(--blue,#2160cc);outline-offset:2px}
label.check .gd-tip,label.checkbox .gd-tip{margin-left:2px;align-self:center}
.gd-head .gd-ico{display:inline-flex;vertical-align:-3px;margin-right:7px}

.gd-bubble{position:fixed;z-index:2147483600;max-width:300px;padding:10px 13px;border-radius:12px;background:var(--navy,#062541);color:#fff;font:400 13px/1.7 Prompt,system-ui,sans-serif;box-shadow:0 12px 32px #06254140;pointer-events:none;white-space:pre-line}
.gd-bubble[hidden]{display:none}
.gd-bubble::before{content:"";position:absolute;top:-6px;left:calc(var(--ax,20px) - 6px);border:6px solid transparent;border-top:0;border-bottom-color:var(--navy,#062541)}
.gd-bubble.above::before{top:auto;bottom:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--navy,#062541)}

/* ---- แถบหัวฟอร์ม ---- */
.gd-bar{grid-column:1/-1;flex-basis:100%;display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:11px 12px;border:1px solid #f3dccf;border-radius:14px;background:linear-gradient(135deg,#fff6f1,#f2f7ff);color:var(--ink,#13344b);text-align:left}
.gd-bar-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--orange,#e7663e);color:#fff}
.gd-bar-ico .icon{width:21px;height:21px}
.gd-bar-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;font-weight:400;line-height:1.65}
.gd-bar-text small{display:flex;align-items:center;gap:5px;margin:0;font-size:11px;text-align:left;color:var(--muted,#657585)}
.gd-bar-text>span{display:block;margin:0}
.gd-mini{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#eaf1fb;color:var(--blue,#2160cc);flex:none}
.gd-mini .icon{width:12px;height:12px}
.gd-start{flex:none;width:auto;display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:0;padding:7px 13px;border:1px solid var(--navy,#062541);border-radius:999px;background:#fff;color:var(--navy,#062541);font:500 12px/1.3 Prompt,system-ui,sans-serif;white-space:nowrap;cursor:pointer;box-shadow:none}
.gd-start .icon{width:16px;height:16px}
.gd-start:hover{background:var(--navy,#062541);color:#fff}
@media (max-width:560px){.gd-bar{flex-wrap:wrap;gap:10px}.gd-start{width:100%;justify-content:center;min-height:40px}}
.gd-bar.gd-compact{justify-content:flex-end;margin:0 0 10px;padding:0;border:0;background:none}
.gd-bar.gd-compact .gd-bar-ico,.gd-bar.gd-compact .gd-bar-text{display:none}
.gd-bar.gd-compact .gd-start{width:auto;min-height:32px;padding:5px 12px;font-size:11.5px}

/* ---- พาดูทีละขั้น ---- */
.gd-layer{position:fixed;inset:0;z-index:2147483000;pointer-events:none}
.gd-mask{position:fixed;background:#062541b3;pointer-events:auto;transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease}
.gd-ring{position:fixed;border-radius:12px;box-shadow:0 0 0 3px var(--orange,#e7663e),0 0 0 9px #e7663e38;pointer-events:none;transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease}
.gd-mask[hidden],.gd-ring[hidden]{display:none}
.gd-still .gd-mask,.gd-still .gd-ring{transition:none}
.gd-box{position:fixed;left:12px;top:12px;pointer-events:auto;padding:14px 16px 12px;border-radius:16px;background:#fff;color:var(--ink,#13344b);font:400 13.5px/1.75 Prompt,system-ui,sans-serif;box-shadow:0 22px 60px #06254155;outline:none;text-align:left}
.gd-box-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.gd-box-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:10px;background:#fff1ea;color:var(--orange,#e7663e)}
.gd-box-ico .icon{width:19px;height:19px}
.gd-count{font-size:11.5px;font-weight:500;color:var(--muted,#657585)}
.gd-box .gd-x{margin:0 0 0 auto;width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:50%;background:#f1f4f6;color:#5b6d7b;font:400 19px/1 system-ui,sans-serif;cursor:pointer;box-shadow:none}
.gd-box h4{margin:2px 0 4px;font-size:15.5px;font-weight:600;line-height:1.5;color:var(--navy,#062541)}
.gd-box p{margin:0 0 11px;line-height:1.75;color:var(--ink,#13344b)}
.gd-box .gd-meta{display:flex;align-items:center;gap:6px;margin:-4px 0 12px;font-size:12px;color:var(--muted,#657585)}
.gd-box .gd-meta .icon{width:15px;height:15px;color:var(--orange,#e7663e)}
.gd-dots{display:flex;gap:5px;margin:0 0 11px}
.gd-dots i{width:7px;height:7px;border-radius:4px;background:#d8e1e7}
.gd-dots i.done{background:#f3b59f}
.gd-dots i.on{width:20px;background:var(--orange,#e7663e)}
.gd-nav{display:flex;align-items:center;gap:8px}
.gd-box .gd-nav button{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:0;padding:8px 15px;border-radius:999px;font:500 13px/1.3 Prompt,system-ui,sans-serif;cursor:pointer;box-shadow:none;width:auto}
.gd-box .gd-prev,.gd-box .gd-skip{border:1px solid #d2dce3;background:#fff;color:var(--ink,#13344b)}
.gd-box .gd-next{margin-left:auto;border:1px solid var(--orange,#e7663e);background:var(--orange,#e7663e);color:#fff}
.gd-box .gd-nav .icon{width:16px;height:16px}
.gd-flip{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.gd-mask,.gd-ring{transition:none}}