/* 🔧 (2026-09-04 รอบ 3) แก้ปัญหาล้นขอบจอมือถือ — root cause คือทุก
               element ในนี้ไม่เคยตั้ง box-sizing มาก่อนเลย (ค่า default คือ
               content-box) ทำให้ padding/border ถูกบวกเพิ่มเข้าไปในความกว้างจริง
               นอกเหนือจากที่ระบุไว้ เช่น input ตั้ง width:70px แต่บวก padding 8px
               2 ข้าง + border 1.5px 2 ข้าง กลายเป็นกว้างจริง ~89px โดยไม่รู้ตัว —
               ตั้ง border-box ให้ทุกอย่างในวิดเจ็ตนี้ครอบคลุมกันไว้เลยกันพลาดซ้ำ */
            #kiosk-exchange, #kiosk-exchange * { box-sizing: border-box; }

            .tm-kiosk-box {
                font-family: 'Prompt', sans-serif;
                background: #ffffff;
                border-radius: 20px;
                padding: 22px;
                border: 1px solid #f1f2f6;
                box-shadow: 0 4px 20px rgba(0,0,0,0.03);
                margin: 20px auto;
                max-width: 800px;
                width: 100%;

                /* ==========================================================
                   🔴 แก้ 2026-09-20 — ต้นเหตุที่ตู้ล้นกรอบบนมือถือ
                   ==========================================================
                   บรรทัด width:100% ด้านบนเคยมีคอมเมนต์กำกับว่า
                   "กันล้นขอบกรณีจอแคบกว่า max-width เอง"
                   ⚠️ ซึ่งตรงข้ามกับความจริง — มันคือตัวที่ทำให้ล้น

                   เพราะโดยค่าเริ่มต้น 100% หมายถึง "เนื้อในกว้างเท่ากรอบ"
                   แล้วขอบใน 22px สองข้าง กับเส้นขอบ 1px สองข้าง
                   จะถูกบวกเพิ่มไปอีก = กล่องกว้างเกินกรอบ 46px เสมอ ทุกขนาดจอ

                   🔴 ผลคือการ์ดคอลัมน์ขวาถูกตัดหายไปครึ่งปุ่มบนจอแคบ
                      วัดจริงที่จอ 375px: กรอบกว้าง 355 แต่กล่องกิน 401

                   ✅ บรรทัดเดียวข้างล่างนี้สั่งให้นับขอบในรวมอยู่ในความกว้าง
                      หลังแก้: กล่อง 355 พอดีกรอบ ไม่ยื่นออกไปสักพิกเซล
                   ========================================================== */
                box-sizing: border-box;
            }
            .tm-kiosk-head {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f1f2f6;
                padding-bottom: 15px;
                margin-bottom: 20px;
                flex-wrap: wrap;
                gap: 10px;
            }
            .tm-kiosk-wallet-bar {
                display: flex;
                gap: 10px;
            }
            .tm-kiosk-badge {
                padding: 5px 12px;
                border-radius: 20px;
                font-size: 12px;
                font-weight: bold;
            }
            .badge-diamond { background: #e3f2fd; color: #0984e3; }
            .badge-event { background: #fff3e0; color: #e67e22; }

            .tm-kiosk-cards {
                display: grid;
                /* 🔧 (2026-09-04) เดิมใช้ auto-fit responsive (จำนวนคอลัมน์เปลี่ยน
                   ตามความกว้างจอ) พอเพิ่มเป็น 4 การ์ดแล้ว บังคับให้เป็น 2 คอลัมน์
                   คงที่เสมอแทน (4 การ์ด = 2 แถวพอดี ไม่ว่าจอกว้างแค่ไหน) */
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }
            .tm-kiosk-item {
                background: #fcfcfd;
                border: 1.5px solid #e9ecef;
                /* 🔧 (2026-09-04 รอบ 3) ลดขนาดลงอีกรอบ — padding 14px→10px กัน
                   ล้นขอบจอมือถือจอแคบ (320-375px) ที่ 2 คอลัมน์ยังแน่นไปสำหรับ
                   ข้อความยาวๆ อย่าง "ซื้อจรวดดันกระทู้ (Auto Bump)" */
                border-radius: 12px;
                padding: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                text-align: center;
                /* 🔧 กันคำยาวๆ (เช่นชื่ออังกฤษในวงเล็บ) ดันความกว้างล้นออกไป */
                overflow-wrap: break-word;
                word-break: break-word;
                min-width: 0;
            }
            .tm-kiosk-icon { font-size: 26px; margin-bottom: 4px; line-height: 1; }
            /* 🆕 (2026-09-05) รองรับไอคอนแบบรูปภาพจริงสำหรับการ์ดกล่องสุ่ม (แทน
               อีโมจิ 🎁 เดิม) — ขนาดคงที่ 40x40px กึ่งกลาง object-fit:contain กัน
               รูปเบี้ยว ไม่กระทบการ์ดอื่นที่ยังใช้อีโมจิปกติ (กุญแจ/จรวด/เพชร) */
            .tm-kiosk-icon img { width: 40px; height: 40px; object-fit: contain; display: block; margin: 0 auto; }
            .tm-kiosk-name { font-size: 11.5px; font-weight: bold; color: #2d3436; margin-bottom: 8px; line-height: 1.3; }
        
            .tm-kiosk-qty-row {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
                margin-bottom: 10px;
                flex-wrap: wrap;
            }
            .tm-kiosk-qty-input {
                width: 46px;
                padding: 5px 4px;
                border: 1.5px solid #dcdde1;
                border-radius: 8px;
                text-align: center;
                font-weight: bold;
                font-family: 'Prompt', sans-serif;
                font-size: 12px;
                outline: none;
            }
            .tm-kiosk-actions {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }
            /* 26 ต.ค. กุญแจเหลือปุ่มเพชรปุ่มเดียว ให้เต็มความกว้าง */
            .tm-kiosk-actions > :only-child { grid-column: 1 / -1; }
            .tm-btn-buy.btn-buy-gold { background: #2d3436 !important; color: #ffd257 !important; } /* 26 ต.ค. ปุ่มจ่ายเหรียญทอง */
            .tm-btn-buy {
                border: none;
                padding: 8px 4px;
                border-radius: 9px;
                font-weight: bold;
                font-size: 10.5px;
                cursor: pointer;
                transition: 0.2s;
                font-family: 'Prompt', sans-serif;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2px;
            }
            .btn-buy-diamond { background: linear-gradient(135deg, #74b9ff, #0984e3); color: #fff; }
            .btn-buy-diamond:hover { box-shadow: 0 4px 10px rgba(9, 132, 227, 0.3); }

            .btn-buy-event { background: linear-gradient(135deg, #fab1a0, #e17055); color: #fff; }
            .btn-buy-event:hover { box-shadow: 0 4px 10px rgba(225, 112, 85, 0.3); }

            /* ==============================================================
               🆕 2026-09-20 — ปุ่มต้องยอมแคบตามการ์ด
               ==============================================================
               ปุ่มเป็นช่องในตาราง ซึ่งโดยค่าเริ่มต้นจะไม่ยอมแคบกว่า
               คำที่ยาวที่สุดในตัวมันเอง

               🔴 พอปุ่มไม่ยอมแคบ การ์ดก็ไม่ยอมแคบตาม แล้วตารางการ์ด
                  ก็ดันล้นกรอบตู้ออกไปอีกชั้นหนึ่ง

               ⚠️ ใส่ไว้ถึงแม้จอแคบจะเหลือการ์ดละแถวแล้วก็ตาม
                  เพราะวันหน้าถ้าเพิ่มไอเทมที่ชื่อหน่วยยาวกว่านี้
                  หรือราคาขึ้นเป็นหลักหมื่น อาการเดิมจะกลับมาเงียบๆ
               ============================================================== */
            .tm-btn-buy { min-width: 0; overflow-wrap: anywhere; }
            .tm-btn-buy > span,
            .tm-btn-buy > small { min-width: 0; max-width: 100%; }

            /* ==============================================================
               🆕 2026-09-20 — จอแคบเหลือการ์ดละแถว
               ==============================================================
               🔴 ของเดิมบังคับ 2 คอลัมน์ทุกขนาดจอ (คอมเมนต์ด้านบนเขียนไว้
                  ตอนที่ยังมี 4 การ์ด ตอนนี้มี 6 แล้ว)

               ⚠️ ที่จอ 375px การ์ดเหลือกว้าง 160px ต้องยัดปุ่มสองปุ่ม
                  = ปุ่มละ 75px ซึ่งไม่พอสำหรับคำว่า "⚪ จ่ายอีเวนต์" ด้วยซ้ำ

               ✅ เหลือการ์ดละแถว → การ์ดกว้าง 325px ปุ่มละ 160px
                  เท่ากับบนจอคอมพอดี ทุกปุ่มจึงอยู่บรรทัดเดียวจบเหมือนกัน

               📌 แลกมาด้วยตู้ที่ยาวขึ้นเป็น 6 แถวบนมือถือ
                  เจ้าของเว็บรับข้อแลกเปลี่ยนนี้แล้วเมื่อ 20 ก.ย.

               📌 ขอบในของการ์ดเพิ่มจาก 10 เป็น 12 และชื่อการ์ดโตจาก 11.5
                  เป็น 13px — ทำได้เพราะมีเนื้อที่เหลือแล้ว ของเดิมที่บีบไว้
                  เป็นผลจากการยัด 2 คอลัมน์ ไม่ใช่ความตั้งใจด้านการออกแบบ
               ============================================================== */
            @media (max-width: 600px) {
                .tm-kiosk-cards { grid-template-columns: 1fr; }
                .tm-kiosk-box  { padding: 14px; }
                .tm-kiosk-item { padding: 12px; }
                .tm-kiosk-name { font-size: 13px; }
                .tm-btn-buy    { padding: 10px 6px; font-size: 11.5px; min-height: 46px; }
            }