/* ⚠️ ทุกคลาสขึ้นต้นด้วย tms-qn- เพื่อไม่ให้ทับสไตล์ของหน้าอื่น */
        /* ==================================================================
           🔴 เปลี่ยนเป็นโทนน้ำเงิน + ขอบวิ่ง 2026-09-14
           ==================================================================
           ⭐ เหตุผลที่เปลี่ยนสี: หน้าแรกใช้โทนชมพูแทบทั้งหน้า
           ตั้งแต่แถบประกาศ หัวข้อหมวด ป้ายชื่อบนการ์ด ไปจนแถบนำทางล่างจอ
           กล่องนี้จึงกลมกลืนไปกับพื้นหลังจนมองข้าม

           📌 กล่องนี้เป็นเครื่องมือ ไม่ใช่เนื้อหา หน้าที่ของมันคือ
           "ให้คนที่รู้ว่าจะไปไหน ไปถึงเร็วที่สุด" จึงต้องหาเจอก่อนทุกอย่าง
           สีที่ตัดกับทั้งหน้าจึงเหมาะกว่าสีที่กลมกลืน

           ⚠️ ขอบวิ่งทำด้วยพื้นหลังไล่สีที่หมุนรอบกล่อง ไม่ใช่เส้นขอบจริง
           เพราะเส้นขอบของ CSS ใส่สีไล่ไม่ได้ ต้องใช้สองชั้นซ้อนกัน
           ชั้นนอกเป็นสีไล่ที่หมุน ชั้นในเป็นพื้นขาวทับ เหลือให้เห็นแค่ขอบ

           🔴 เคารพการตั้งค่าลดการเคลื่อนไหวของเครื่องผู้ใช้
           คนที่ตั้งค่าไว้มักมีเหตุผลทางสุขภาพ เช่นเวียนหัวจากภาพเคลื่อนไหว
           ดูบล็อกท้ายไฟล์ที่สั่งหยุดหมุนให้คนกลุ่มนั้น
           ================================================================== */
        .tms-qn{
            position:relative;
            background:linear-gradient(135deg,#f2f8ff,#fff);
            border:none;
            border-radius:18px;
            padding:16px;
            margin-bottom:22px;
            font-family:'Prompt',sans-serif;
            isolation:isolate;
        }

        /* ชั้นขอบวิ่ง — อยู่หลังกล่อง โผล่ออกมา 2px รอบด้าน */
        .tms-qn::before{
            content:"";
            position:absolute;
            inset:-2px;
            border-radius:20px;
            background:conic-gradient(from var(--tms-qn-a,0deg),
                #1971c2, #22b8cf, #4dabf7, #1971c2);
            z-index:-2;
            animation:tms-qn-spin 4s linear infinite;
        }

        /* ชั้นทับพื้นขาว ทำให้ชั้นบนเหลือให้เห็นแค่ขอบ */
        .tms-qn::after{
            content:"";
            position:absolute;
            inset:0;
            border-radius:18px;
            background:linear-gradient(135deg,#f2f8ff,#fff);
            z-index:-1;
        }

        @property --tms-qn-a{syntax:'<angle>';initial-value:0deg;inherits:false}
        @keyframes tms-qn-spin{to{--tms-qn-a:360deg}}
        .tms-qn-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
        .tms-qn-title{font-size:15px;font-weight:700;color:#1971c2}
        .tms-qn-setbtn{background:#fff;border:1.5px solid #a5d8ff;color:#1971c2;border-radius:20px;
            padding:6px 14px;font-family:'Prompt',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .18s}
        .tms-qn-setbtn:hover{background:#1971c2;border-color:#1971c2;color:#fff}

        /* ---- ลำดับ: เลือกหมวด → ช่องพิมพ์ → ปุ่มค้นหา ---- */
        .tms-qn-jump{margin-bottom:10px}
        .tms-qn-select{width:100%;border:1.5px solid #d0e4f7;border-radius:22px;padding:11px 16px;
            font-family:'Prompt',sans-serif;font-size:13.5px;background:#fff;color:#2d3436;cursor:pointer;outline:none}
        .tms-qn-select:focus{border-color:#1971c2}

        .tms-qn-search{margin-bottom:10px}
        .tms-qn-input{width:100%;border:1.5px solid #d0e4f7;border-radius:22px;padding:11px 16px;
            font-family:'Prompt',sans-serif;font-size:13.5px;outline:none;background:#fff;
            /* ⚠️ ต้องมี box-sizing ไม่งั้นช่องจะกว้างเกินกล่องเพราะ padding บวกเพิ่ม */
            box-sizing:border-box}
        .tms-qn-input:focus{border-color:#1971c2}

        /* ปุ่มค้นหาเต็มความกว้าง ปิดท้ายกล่อง */
        .tms-qn-go{display:block;width:100%;background:#1971c2;color:#fff;border:none;border-radius:22px;
            padding:12px;font-family:'Prompt',sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;
            transition:background .18s,transform .15s}
        .tms-qn-go:hover{background:#155a9a}
        .tms-qn-go:active{transform:scale(.99)}

        .tms-qn-hint{position:relative;display:block;margin-top:12px;padding:8px 10px;text-align:center;text-decoration:none;
            font-size:clamp(9.5px,3vw,11.5px);white-space:nowrap;font-weight:700;line-height:1.5;border-radius:14px}
        .tms-qn-hint-t{display:block;overflow:hidden;text-overflow:ellipsis}
        .tms-qn-glow{position:relative;color:#4b3aa8 !important;border:2px solid transparent !important;
            background:linear-gradient(90deg,#fff5f7,#f3f0ff,#eef8ff) padding-box,
                linear-gradient(90deg,#ff4d6d,#ff9f1c,#ffd60a,#2ec4b6,#3a86ff,#8338ec,#ff4d9d,#ff4d6d) border-box;
            background-size:100% 100%,300% 100%;animation:tms-qn-rb 4s linear infinite;box-shadow:0 2px 10px rgba(131,56,236,.13)}
        .tms-qn-setbtn.tms-qn-glow{font-weight:700}
        .tms-qn-setbtn.tms-qn-glow:hover{color:#fff !important;
            background:linear-gradient(90deg,#8338ec,#3a86ff) padding-box,
                linear-gradient(90deg,#ff4d6d,#ff9f1c,#ffd60a,#2ec4b6,#3a86ff,#8338ec,#ff4d9d,#ff4d6d) border-box;
            background-size:100% 100%,300% 100%}
        .tms-qn-tw{position:absolute;font-size:12px;line-height:1;color:#ffb703;animation:tms-qn-tw 1.6s ease-in-out infinite;pointer-events:none}
        .tms-qn-tw1{top:-7px;left:8px}
        .tms-qn-tw2{bottom:-7px;right:10px;color:#8338ec;animation-delay:.8s}
        .tms-qn-vip{position:relative;display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 12px;border-radius:14px;
            border:2px solid transparent;color:#7a5200 !important;font-size:13px;font-weight:800;text-decoration:none !important;line-height:1.3;
            background:linear-gradient(120deg,#fff8e1,#ffe9a0 50%,#fff8e1) padding-box,
                linear-gradient(90deg,#ff4d6d,#ff9f1c,#ffd60a,#2ec4b6,#3a86ff,#8338ec,#ff4d9d,#ff4d6d) border-box;
            background-size:100% 100%,300% 100%;animation:tms-qn-rb 4s linear infinite;box-shadow:0 3px 12px rgba(225,161,0,.25)}
        .tms-qn-vip:hover{box-shadow:0 4px 16px rgba(131,56,236,.25)}
        .tms-qn-vip-sh{position:absolute;inset:0;border-radius:12px;overflow:hidden;pointer-events:none}
        .tms-qn-vip-sh::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
            background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);
            animation:tms-qn-sweep 3s ease-in-out infinite}
        @keyframes tms-qn-sweep{0%{left:-60%}60%,100%{left:130%}}
        .tms-qn-vip .tms-qn-tw1{top:-8px;left:40px}
        .tms-qn-vip .tms-qn-tw2{bottom:-8px;right:34px}
        .tms-qn-vip-s{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#f9d423,#e1a100);
            display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
        .tms-qn-vip-t{position:relative;flex:1;min-width:0}
        .tms-qn-vip-t small{display:block;font-weight:500;font-size:11px;color:#8a6d00}
        .tms-qn-vip-a{font-size:16px;color:#b07d00}
        .tms-qn-vip-new{position:absolute;top:-8px;right:10px;background:#ec4899;color:#fff;font-size:10px;font-weight:700;border-radius:7px;padding:0 6px;line-height:1.5}
        @keyframes tms-qn-rb{to{background-position:0 0,300% 0}}
        @keyframes tms-qn-tw{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(90deg)}}

        /* ==================================================================
           🔴 หยุดขอบวิ่งให้คนที่ตั้งค่าลดการเคลื่อนไหวไว้
           ==================================================================
           ⚠️ ไม่ใช่เรื่องความสุภาพ แต่เป็นเรื่องสุขภาพ
           คนที่ตั้งค่านี้มักเวียนหัวหรือคลื่นไส้จากภาพที่ขยับตลอดเวลา

           📌 ขอบยังอยู่ครบ แค่ไม่หมุน กล่องจึงยังเด่นเหมือนเดิม
           ไม่ได้เสียอะไรเลยสำหรับคนกลุ่มนี้
           ================================================================== */
        @media (prefers-reduced-motion: reduce){
            .tms-qn::before,.tms-qn-glow,.tms-qn-tw,.tms-qn-vip,.tms-qn-vip-sh::before{animation:none}
        }

        /* ---- หน้าต่างตั้งค่า ---- */
        /* 🔄 27 ก.ย. (G27-03) เว้นขอบล่าง 106px ให้แถบเมนูล่าง (788 สูง 70px + วงกลมโฮมโผล่อีก 20px)
           แถบนั้นอยู่ชั้นบนสุดของหน้าเสมอ (z-index สูงสุด + inline !important) ยกหน้าต่างขึ้นไปทับไม่ได้
           → ให้หน้าต่างจบเหนือแถบแทน · สูงสุด = พื้นที่ที่เหลือหลังหักขอบ (100% ของกล่องนอก)
           ⚠️ ไม่ใช้ 84vh/100vh เพราะบน iPhone Safari 100vh รวมพื้นที่ใต้แถบที่อยู่เว็บ หน้าต่างจะล้นไปโดนแถบอีก */
        .tms-qn-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99999;
            display:flex;align-items:center;justify-content:center;padding:16px 16px 106px;box-sizing:border-box;font-family:'Prompt',sans-serif}
        .tms-qn-modal[hidden]{display:none}
        .tms-qn-panel{background:#fff;border-radius:18px;width:100%;max-width:420px;
            max-height:100%;display:flex;flex-direction:column;overflow:hidden}
        .tms-qn-panel-head{display:flex;align-items:center;justify-content:space-between;
            padding:14px 16px;border-bottom:1px solid #f1f2f6;font-size:15px;font-weight:700;color:#2d3436}
        .tms-qn-close{background:none;border:none;font-size:17px;color:#a4b0be;cursor:pointer;line-height:1}
        .tms-qn-panel-desc{padding:12px 16px;font-size:12px;color:#7f8fa6;line-height:1.75;background:#fafbfc}

        /* ⚠️ ต้องเลื่อนได้ เพราะ 11 หมวดสูงเกินจอมือถือ */
        .tms-qn-list{flex:1;overflow-y:auto;padding:8px 10px}
        .tms-qn-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:11px;
            border:1px solid #f1f2f6;margin-bottom:6px;background:#fff}
        .tms-qn-check{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:13px;
            color:#2d3436;cursor:pointer}
        .tms-qn-check span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .tms-qn-check input{flex-shrink:0;width:17px;height:17px;cursor:pointer}
        .tms-qn-move{display:flex;gap:4px;flex-shrink:0}
        /* ⚠️ ปุ่มต้องกว้างอย่างน้อย 32px ไม่งั้นนิ้วกดพลาดบนมือถือ */
        .tms-qn-move button{width:32px;height:32px;border:1px solid #dfe4ea;background:#f8f9fa;
            border-radius:9px;color:#57606f;font-size:11px;cursor:pointer;line-height:1}
        .tms-qn-move button:hover{background:#1971c2;border-color:#1971c2;color:#fff}

        .tms-qn-panel-foot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #f1f2f6}
        .tms-qn-reset{flex:0 0 auto;background:#f1f2f6;border:none;color:#57606f;border-radius:20px;
            padding:9px 15px;font-family:'Prompt',sans-serif;font-size:12px;cursor:pointer}
        .tms-qn-save{flex:1;background:#1971c2;border:none;color:#fff;border-radius:20px;
            padding:9px;font-family:'Prompt',sans-serif;font-size:13px;font-weight:700;cursor:pointer}
        .tms-qn-save:hover{background:#155a9a}

        /* 📌 ไม่ต้องมี media query สำหรับส่วนค้นหาอีกแล้ว
           เพราะทั้งสามชิ้นเป็นเต็มความกว้างอยู่แล้วทุกขนาดจอ */