/* ⚠️ ทุกคลาสขึ้นต้นด้วย tms-cm- เพื่อไม่ให้ไปทับสไตล์หน้าอื่น */
        .tms-cm{font-family:'Prompt',sans-serif;margin-top:22px;padding-top:16px;border-top:1px solid #f1f2f6}
        .tms-cm-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:13px}
        .tms-cm-title{font-size:15px;font-weight:600;color:#2d3436}
        .tms-cm-n{color:#a4b0be;font-weight:normal}
        .tms-cm-sorts{display:flex;gap:5px}
        .tms-cm-sort{font-size:12px;padding:5px 10px;background:none;border:none;border-radius:8px;cursor:pointer;font-family:inherit;color:#7f8fa6}
        .tms-cm-sort.is-on{background:#e8f4fd;color:#0984e3;font-weight:600}
        .tms-cm-box{display:flex;gap:9px;margin-bottom:16px}
        /* ==============================================================
           🔴 แก้รูปโปรไฟล์ยืด 2026-09-14
           ==============================================================
           ⭐ สาเหตุ: รูปโปรไฟล์ที่สมาชิกอัปโหลดเอง (สนิปเป็ต 1469)
           เป็นรูปสัดส่วนอะไรก็ได้ ไม่ได้ถูกครอปเป็นจัตุรัสตอนอัปโหลด

           เดิมกฎนี้ตั้งไว้แค่ขอบมน ไม่ได้บังคับความกว้างและความสูง
           ธีมส่วนใหญ่ตั้งให้รูปปรับความสูงอัตโนมัติตามสัดส่วน
           รูปที่ไม่ใช่จัตุรัสจึงกลายเป็นวงรีแทนที่จะเป็นวงกลม

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

           ✅ ต้องมีครบ 3 อย่างเสมอ ขาดอันใดอันหนึ่งจะเพี้ยน
             กำหนดความกว้างและความสูงเท่ากัน  → กรอบเป็นจัตุรัส
             สั่งให้ครอปแทนการบีบ              → ภาพไม่ผิดสัดส่วน
             ขอบมนครึ่งหนึ่ง                    → ได้วงกลม

           ⚠️ ถ้าใส่แต่ขอบมนโดยไม่บังคับขนาด จะได้วงรีทุกครั้งที่รูปไม่จัตุรัส
           ============================================================== */
        .tms-cm-avatar{
            width:34px;
            height:34px;
            object-fit:cover;
            border-radius:50%;
            flex:0 0 auto;
        }
        .tms-cm-boxin{flex:1;min-width:0}
        .tms-cm-input{width:100%;box-sizing:border-box;font-size:14px;font-family:inherit;padding:9px 11px;border:1px solid #e8eaed;border-radius:10px;resize:vertical;outline:none}
        .tms-cm-boxfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
        .tms-cm-count{font-size:11px;color:#a4b0be}
        .tms-cm-send{font-size:13px;padding:8px 17px;font-weight:bold;background:#0984e3;color:#fff;border:none;border-radius:9px;cursor:pointer;font-family:inherit}
        .tms-cm-send:disabled{opacity:.55;cursor:default}
        .tms-cm-err{font-size:11px;color:#c62828;min-height:15px}
        .tms-cm-login{background:#f8f9fa;border-radius:11px;padding:14px;text-align:center;font-size:13px;color:#7f8fa6;margin-bottom:14px}
        .tms-cm-login a{color:#0984e3;font-weight:600}
        .tms-cm-row{display:flex;gap:9px;padding:11px 0;border-bottom:1px solid #f8f9fa}
        /* ความเห็นยอดนิยม — พื้นหลังต่างเพื่อให้เห็นว่าถูกปักไว้ ไม่ใช่เรียงผิด */
        .tms-cm-row.is-pin{background:#fffdf5;border:1px solid #ffeaa7;border-radius:12px;padding:11px 12px;margin-bottom:8px}
        .tms-cm-face{width:34px;height:34px;border-radius:50%;background:#f1f2f6;display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto;overflow:hidden}
        .tms-cm-face img{width:100%;height:100%;object-fit:cover}

        /* 🆕 2026-09-14 ลิงก์ไปโปรไฟล์จากรูปและชื่อคนคอมเมนต์
           📌 ให้ดูเหมือนข้อความปกติจนกว่าจะเอาเมาส์ชี้
           เพราะถ้าทำเป็นสีลิงก์ ชื่อคนจะเด่นกว่าข้อความความเห็น
           ซึ่งสลับความสำคัญกัน คนอ่านมาอ่านความเห็น ไม่ได้มาอ่านชื่อ */
        .tms-cm-row .tms-cm-facelink{overflow:hidden;text-decoration:none;border-bottom:none}
        .tms-cm-row .tms-cm-facelink:hover img{filter:brightness(.92)}
/* 🔴 เอาขีดเส้นใต้ตอนชี้ออก 2026-09-14
           ⚠️ เส้นใต้ทำให้บรรทัดชื่อดูรก โดยเฉพาะในรายการที่มีหลายแถว
           เพราะเส้นจะกระพริบตามเมาส์ที่เลื่อนผ่าน

           ✅ ใช้การจางลงแทน บอกได้ว่ากดได้เหมือนกัน แต่เงียบกว่ามาก
           และบนมือถือไม่มีการชี้เมาส์อยู่แล้ว จึงไม่เสียอะไรเลย */
/* 🔴 แก้รอบสอง 2026-09-14 — เส้นใต้ไม่ยอมหาย
           ==============================================================
           ⚠️ สาเหตุ: มีกฎจากธีมหรือปลั๊กอินอื่นตั้งเส้นใต้ให้ลิงก์ไว้
           ด้วยรูปแบบที่เจาะจงกว่ากฎของเรา กฎเราจึงแพ้และไม่มีผล

           ✅ แก้โดยเขียนให้เจาะจงขึ้น คือระบุกล่องแม่ไว้ข้างหน้าด้วย
           ไม่ใช่ใส่คำสั่งบังคับ

           📌 ทำไมไม่ใช้คำสั่งบังคับ:
           มันจะชนะทุกอย่างรวมถึงกฎที่เราอาจอยากให้ชนะในอนาคต
           และเมื่อมีคนมาแก้ทีหลังจะงงว่าทำไมแก้ยังไงก็ไม่เปลี่ยน
           การเพิ่มความเจาะจงแก้ปัญหาเดียวกันได้โดยไม่ทิ้งกับดักไว้

           ⚠️ ถ้าวันหนึ่งยังไม่หายอีก แปลว่ามีกฎที่เจาะจงกว่านี้อีกชั้น
           ให้กด F12 คลิกขวาที่ชื่อ แล้วดูว่ากฎไหนกำลังชนะอยู่
           อย่าเดาแล้วเพิ่มความเจาะจงไปเรื่อยๆ */
        .tms-cm-row .tms-cm-meta .tms-cm-aulink,
        .tms-cm-row .tms-cm-meta .tms-cm-aulink:hover,
        .tms-cm-row .tms-cm-meta .tms-cm-aulink:focus{
            color:inherit;
            text-decoration:none;
            border-bottom:none;
            box-shadow:none;
            transition:opacity .15s;
        }
        .tms-cm-row .tms-cm-meta .tms-cm-aulink:hover{opacity:.62}
        .tms-cm-body{flex:1;min-width:0}
        .tms-cm-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
        .tms-cm-au{font-size:13px;font-weight:600;color:#2d3436}
        .tms-cm-when{font-size:11px;color:#a4b0be}
        .tms-cm-badge{font-size:10px;padding:1px 8px;border-radius:8px}
        .tms-cm-badge-me{background:#e8f4fd;color:#0984e3}
        .tms-cm-badge-pin{background:#ffeaa7;color:#8b6914;font-weight:600}
        /* ⚠️ word-break จำเป็น ไม่งั้นข้อความยาวไม่มีเว้นวรรคจะดันกรอบจนหน้าเพี้ยน */
        .tms-cm-text{font-size:14px;color:#2d3436;line-height:1.75;margin-top:3px;word-break:break-word;white-space:pre-wrap}
        .tms-cm-acts{display:flex;gap:12px;align-items:center;margin-top:7px;flex-wrap:wrap}
        .tms-cm-act{background:none;border:none;padding:0;cursor:pointer;font-size:12px;font-family:inherit;color:#a4b0be}
        .tms-cm-act.is-liked{color:#0984e3;font-weight:600}
        .tms-cm-act.is-del{color:#c62828}
        /* ⚠️ ปุ่มรายงานในความเห็นต้องดูเหมือนปุ่มข้อความอื่น
           ไม่ใช่วงกลมสีดำแบบที่ใช้บนรูป ซึ่งออกแบบมาให้ทับบนภาพ
           ถ้าใช้แบบเดียวกันจะดูแปลกแยกและเด่นเกินไปในแถวปุ่ม */
        .tms-cm-reportwrap .tms-report-btn{
            background:none; color:#a4b0be; width:auto; height:auto;
            border-radius:0; font-size:12px; font-family:inherit; padding:0;
        }
        .tms-cm-reportwrap .tms-report-btn:hover{background:none; color:#c62828}
        /* 🔴 ไม่เติมคำต่อท้ายปุ่มรายงาน 2026-09-15
           ปุ่มต้นแบบในไฟล์ 1859 มีคำว่า report อยู่ในตัวอยู่แล้ว
           การเติมคำว่ารายงานเข้าไปอีกทำให้ได้ reportรายงาน ติดกันเป็นคำเดียว

           ⚠️ อาการนี้มีมาตั้งแต่ก่อนหน้านี้ ไม่ได้เพิ่งเกิด
           เพิ่งเห็นตอนวางปุ่มเดียวกันในกำแพงสถานะแล้วสังเกตว่าอ่านแปลก */
        .tms-cm-empty{text-align:center;padding:30px;color:#a4b0be;font-size:13px}
        .tms-cm-emptyico{font-size:32px;opacity:.4;margin-bottom:6px}
        .tms-cm-pginfo{font-size:12px;color:#a4b0be;text-align:center;margin:13px 0 6px}
        .tms-cm-pg{display:flex;align-items:center;justify-content:center;gap:10px}
        .tms-cm-pg button{min-width:104px;min-height:40px;border:0;border-radius:999px;background:#eaf3ff;color:#0984e3;font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;cursor:pointer}
        .tms-cm-pg button:hover,.tms-cm-pg button:focus{background:#d6e8ff}
        .tms-cm-pg button[disabled]{background:#f3f2f8;color:#b7b3c9;cursor:default}
        .tms-cm-pg span{font-size:12.5px;color:#747d8c;min-width:74px;text-align:center}
        .tms-cm-pg b{color:#2d3436}
        .tms-cm-pgwrap[hidden]{display:none}
        .tms-cm-msg{display:none;margin-top:11px;font-size:12px;padding:9px 12px;border-radius:10px}