/* ===========================================================================
 * mes789-system / assets/css/mpc-post-cards.css
 * ---------------------------------------------------------------------------
 * ระบบสัดส่วนการ์ดโพสต์ 3 แบบ — พอร์ตมาจาก mes789-profile-core
 * (assets/css/profile-posts.css) ของฝั่ง WordPress
 *
 * เก็บตรรกะสัดส่วนเดิมไว้ทั้งหมด รวมถึงบทเรียนสำคัญที่แลกมาด้วยการแก้หลายรอบ:
 *
 *   ❗ ความสูงการ์ดคำนวณด้วย JS แล้วเซ็ตเป็นพิกเซล ไม่ใช้ CSS aspect-ratio
 *      เหตุผล: สัดส่วนที่ต้องการคือ "การ์ดทั้งใบ" ซึ่งรวมแถบหัว (.post-head)
 *      และแถบท้าย (.post-actions) ที่อยู่นอกกล่องเนื้อหา — CSS ไม่มีทางรู้
 *      ความสูงของ element พี่น้องกันได้ ต้องวัดด้วย JS เท่านั้น
 *      (รอบก่อนใช้ aspect-ratio คุมแค่กล่องเนื้อหา ผลคือการ์ดรวมผิดสัดส่วนหมด)
 *
 * 3 โหมด (โหมด "ข้อความ+รูป" เดิม/mpc-cover-mode ถูกลบแล้ว — ดูท้ายไฟล์):
 *   1. mpc-theme-card   การ์ดธีม (มีพื้นหลัง/สี)      → การ์ดรวม 1:1
 *   2. mpc-plain-boxed  ข้อความล้วน ไม่มีรูป          → การ์ดรวม 3:2 (แนวนอน)
 *   3. mpc-image-only   รูปล้วน ไม่มีคำบรรยาย         → เต็มสัดส่วนจริงของภาพ
 * =========================================================================== */

/* ---------- กล่องเนื้อหาหลัก ---------- */
.post-body {
    line-height: 1.75;
    word-break: break-word;
    position: relative;
    transition: height .25s ease;
    /* [เพิ่ม 23 ส.ค. 2026 — ลดงานหนัก] บอกเบราว์เซอร์ว่าการเปลี่ยนความสูง/
       เนื้อหาข้างในกล่องนี้ไม่กระทบ layout นอกกล่อง (พี่น้อง/พ่อแม่)
       ลดขอบเขตการคำนวณ layout ซ้ำตอน mpc-post-cards.js ปรับ style.height
       ทุกครั้งที่ scan() ทำงาน — ไม่เปลี่ยนหน้าตาเลย เป็นแค่คำใบ้ให้ engine
       (ไม่ใส่ contain:size เพราะ JS ยังต้องอ่าน scrollHeight ตามธรรมชาติจริง
       ของเนื้อหาอยู่ — contain:size จะบังคับความสูง 0 ก่อนมีเนื้อหา ทำให้
       วัดค่าผิดได้) */
    contain: layout style;
}

/* ===========================================================================
   โหมด 1 — การ์ดธีม
   ความสูงจริงถูกเซ็ตเป็น inline style (px) โดย JS เสมอ
   =========================================================================== */
.post-body .mpc-theme-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px !important;
    border-radius: 16px !important;
    width: 100%;
    max-width: 100%;   /* [แก้] เดิม 480px ทำให้การ์ดแคบกว่าคอลัมน์ = ดูเป็นกล่องเล็กในกล่องใหญ่ */
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 0 !important;   /* ล้างค่าที่โพสต์เก่าอาจติดมา */
    background-size: cover;
    background-position: center;
}

/* พื้นหลังรูป — ใส่ชั้นมืดทับเพื่อให้ตัวอักษรอ่านออกเสมอ */
.post-body .mpc-theme-card.has-bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .28);
    pointer-events: none;
}
.post-body .mpc-theme-card.has-bg-image > * {
    position: relative;
    z-index: 1;
}

/* ===========================================================================
   โหมด 2 — ข้อความล้วน ไม่มีรูป ไม่มีธีม
   เป้าหมาย: การ์ดทั้งใบ (แถบบน + เนื้อหา + แถบล่าง) = 3:2 แนวนอน
   ไม่บังคับจัดกึ่งกลางแนวนอน — เคารพซ้าย/กลาง/ขวาที่ผู้เขียนพิมพ์มา
   =========================================================================== */
.post-body.mpc-plain-boxed {
    max-width: 100%;   /* [แก้] เดิม 480px ทำให้การ์ดแคบกว่าคอลัมน์ = ดูเป็นกล่องเล็กในกล่องใหญ่ */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    border-radius: 16px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .02);
}

/* ===========================================================================
   โหมด 3 — โพสต์ที่มีสื่อ (รูป/วิดีโอ/ฝัง)
   ---------------------------------------------------------------------------
   ⭐ กติกาใหม่: สื่อต้องเต็มขนาดที่ผู้โพสต์เลือกไว้เสมอ
   ไม่ครอบ ไม่ตัด ไม่บังคับสัดส่วน และห้ามมีปุ่มใด ๆ ไปแปะบนรูปเด็ดขาด
   ถ้ามีคำบรรยายด้วย ตัวอักษรจะถูกหนีบเหลือ 2 บรรทัดแยกต่างหาก
   (ดูส่วน "ดูเพิ่มเติม" ท้ายไฟล์) — ตัวรูปไม่ถูกแตะเลยแม้แต่นิดเดียว
   =========================================================================== */
.post-body.mpc-image-only {
    padding: 0 !important;
    max-width: 100%;   /* [แก้] เดิม 480px ทำให้การ์ดแคบกว่าคอลัมน์ = ดูเป็นกล่องเล็กในกล่องใหญ่ */
    margin: 0 auto;
}
.post-body.mpc-image-only img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
}
/* รูปที่ผ่านสตูดิโอมีกล่องครอบของตัวเองพร้อม aspect-ratio ที่ผู้ใช้เลือกไว้
   (inline style จาก LensFx) ห้ามไปเขียนทับ ไม่งั้นสัดส่วนที่ครอบมาจะเพี้ยน */
.post-body.mpc-image-only .fx-frame { border-radius: 12px; overflow: hidden; }

/* คำบรรยายที่อยู่คู่กับรูป — ต้องมีระยะขอบของตัวเอง
   เพราะกล่องโหมดนี้ padding:0 เพื่อให้รูปชิดขอบการ์ดพอดี */
.post-body.mpc-image-only .mpc-text {
    padding: 2px 4px 10px;
}

/* ===========================================================================
   ครอบเนื้อหา + ปุ่มอ่านต่อ / ย่อโพสต์
   =========================================================================== */
.post-body.mpc-truncated {
    overflow: hidden;
}
.post-body.mpc-truncated::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, transparent, var(--mes-bg-card, #141013) 78%);
    pointer-events: none;
    border-radius: 0 0 16px 16px;
}

/* ===========================================================================
   ⭐ กติกาใหม่ — "ดูเพิ่มเติม" ต่อท้ายตัวอักษรเท่านั้น
   ===========================================================================
   คำว่า "อ่านต่อ" และ "ย่อโพสต์" ถูกยกเลิกทั้งระบบแล้ว เหลือคำเดียวคือ
   "ดูเพิ่มเติม" และมันเกิดได้ที่เดียว: ต่อท้ายกล่องข้อความที่ถูกหนีบ
   ห้ามไปโผล่บนรูป ห้ามลอยกลางการ์ด ห้ามมีปุ่ม "ย่อ" ขึ้นมาแทนหลังกาง

   การหุบกลับไม่มีปุ่ม — จิ้มที่ข้อความอีกครั้งก็หุบ เป็นเรื่องที่ระบบรู้กันเอง
   =========================================================================== */

/* กล่องข้อความที่ถูกหนีบเหลือ 2 บรรทัด (ความสูงจริงคำนวณด้วย JS) */
.post-body .mpc-text {
    position: relative;
}
.post-body .mpc-text.is-clamped {
    overflow: hidden;
}
/* ตัดระยะขอบบน-ล่างของย่อหน้าแรก/สุดท้ายตอนหนีบ
   ไม่งั้นระยะขอบจะกินความสูงที่คำนวณไว้ ทำให้เห็นไม่ครบ 2 บรรทัดจริง */
.post-body .mpc-text.is-clamped > *:first-child { margin-top: 0; }
.post-body .mpc-text.is-clamped > *:last-child  { margin-bottom: 0; }

/* คำว่า "ดูเพิ่มเติม" — เกาะมุมขวาล่างของบรรทัดที่ 2
   มีแถบไล่สีบังด้านซ้าย เพื่อไม่ให้ทับตัวหนังสือจนอ่านไม่ออก */
.post-body .mpc-text.is-clamped > .mpc-more {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding-left: 34px;
    background: linear-gradient(to right,
        transparent 0,
        var(--mes-bg-card, #141013) 26px,
        var(--mes-bg-card, #141013) 100%);
    color: var(--mes-gold, #e8c46a);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.post-body .mpc-text.is-clamped > .mpc-more:hover { text-decoration: underline; }

/* ตอนกางอยู่ ให้รู้ว่าจิ้มที่ข้อความแล้วหุบได้ (ไม่มีตัวหนังสือบอก ตามที่สั่ง) */
.post-body.mpc-expanded { cursor: zoom-out; }

/* ปุ่มของการ์ดข้อความล้วน — ใช้คำเดียวกัน วางท้ายเนื้อหาเหมือนกัน */
.mpc-more-block {
    position: absolute;
    right: 16px;
    bottom: 10px;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 4px 2px;
    color: var(--mes-gold, #e8c46a);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.mpc-more-block:hover { text-decoration: underline; }

/* ===========================================================================
   ปรับสำหรับจอมือถือ
   =========================================================================== */
@media (max-width: 520px) {
    .post-body .mpc-theme-card,
    .post-body.mpc-plain-boxed,
    .post-body.mpc-image-only {
        max-width: 100%;
    }
    .post-body .mpc-theme-card,
    .post-body.mpc-plain-boxed {
        padding: 18px;
    }
}

/* ===========================================================================
   แถบเครื่องมือเลือกสไตล์ในกล่องเขียนโพสต์
   =========================================================================== */
.mpc-style-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 10px 0 4px;
    border-top: 1px solid var(--mes-border, #2a2226);
    margin-top: 10px;
}
.mpc-style-bar button {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--mes-border, #2a2226);
    color: var(--mes-text-muted, #9a9098);
    border-radius: 7px;
    padding: 6px 11px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
.mpc-style-bar button:hover {
    color: var(--mes-text-main, #e4e4e7);
    border-color: var(--mes-gold, #e8c46a);
}
.mpc-style-bar button.active {
    background: var(--mes-gold, #e8c46a);
    border-color: var(--mes-gold, #e8c46a);
    color: #241a08;
    font-weight: 700;
}
.mpc-style-bar .mpc-swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}
.mpc-style-bar .mpc-swatch.active {
    border-color: var(--mes-gold, #e8c46a);
}
.mpc-style-sep {
    width: 1px;
    height: 20px;
    background: var(--mes-border, #2a2226);
    margin: 0 4px;
}

/* พื้นที่พรีวิวสด — เห็นผลลัพธ์ก่อนกดโพสต์จริง */
.mpc-compose-preview {
    min-height: 90px;
    border-radius: 14px;
    padding: 20px;
    margin-top: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, .02);
    border: 1px dashed var(--mes-border, #2a2226);
    white-space: pre-wrap;
    word-break: break-word;
    background-size: cover;
    background-position: center;
}

/* ===========================================================================
   [เพิ่มตามที่สั่ง] อัลบั้มหลายรูปแบบตาราง — สไตล์ตัวอย่างเฟซบุ๊กที่เจ้าของส่งมา
   ===========================================================================
   ทุกช่องจัตุรัส 1:1 เท่ากันหมด (object-fit:cover = ครอบตอนแสดง ไฟล์จริงไม่ถูกตัด)
   โชว์สูงสุด 5 รูป · เกินนั้นช่องสุดท้ายขึ้น +N · รูปที่ซ่อนกางออกตอนกดดูเพิ่มเติม
   ส่วนหัวการ์ด/ข้อความดันความสูงรวมเกิน 1:1 เท่าไหร่ ไม่เป็นไร — ตามที่ตกลงกัน
   =========================================================================== */
.mes-album-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    border-radius: 12px;
    overflow: hidden;
}
.mes-album-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    grid-column: span 3;   /* ค่าตั้งต้น: ครึ่งแถว (2 ช่องต่อแถว) */
    background: #101013;
}
.mes-album-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;   /* มุมโค้งอยู่ที่ตัวตาราง ไม่ใช่รูปย่อยแต่ละใบ */
}
/* [เพิ่มใหม่ ระยะ 16] รูปที่ผ่านเวทีเลนส์แล้วห่อด้วย .fx-frame แทน <img> เปล่า
   บังคับให้เต็มช่อง 1:1 เหมือนกันเป๊ะ (แพทเทิร์นเดียวกับที่ album.css ใช้อยู่แล้ว) */
.mes-album-cell .fx-frame {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* จำนวนรูปต่างกัน เรียงต่างกัน (คลาสจาก buildAlbumHtml ฝั่ง composer.js) */
.mes-album-c1 .mes-album-cell { grid-column: span 6; }                    /* 1 รูปเต็มแถว */
.mes-album-c3 .mes-album-cell:first-child { grid-column: span 6; }        /* 1 ใหญ่บน + 2 ล่าง */
.mes-album-c5 .mes-album-cell:nth-child(n+3) { grid-column: span 2; }     /* 2 บน + 3 ล่าง */

/* รูปที่ 6 ขึ้นไป — ซ่อนไว้จนกว่าจะกาง */
.mes-album-hidden { display: none; }

/* ป้าย +N บอกจำนวนที่เหลือ ทับช่องสุดท้ายที่มองเห็น */
.mes-album-more {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

/* ตอนกางแล้ว: โชว์ทุกรูปเป็นตาราง 2 ช่องต่อแถวเท่ากันหมด และป้าย +N หายไป */
.post-body.mpc-expanded .mes-album-hidden { display: block; }
.post-body.mpc-expanded .mes-album-grid .mes-album-cell { grid-column: span 3; }
.post-body.mpc-expanded .mes-album-more { display: none; }

/* ===========================================================================
   [เพิ่มใหม่] ป้ายเพลงประกอบโพสต์ — โชว์เฉพาะโพสต์ที่มีเพลงติดอยู่
   =========================================================================== */
.post-music-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(52, 211, 153, .08);
    border: 1px solid rgba(52, 211, 153, .28);
    font-size: .8rem;
}
.post-music-ico { line-height: 1; }
.post-music-title { color: #6ee7b7; font-weight: 600; }
.post-music-artist { color: var(--mes-text-mute, #6f6360); }
.post-music-player {
    width: 100%;
    height: 32px;
    margin-top: 2px;
}

/* ===========================================================================
   [เพิ่มใหม่] ป้ายบอกอัลบั้มที่รูปในโพสต์ถูกบันทึกไว้
   =========================================================================== */
.post-album-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(212, 175, 55, .06);
    border: 1px solid rgba(212, 175, 55, .25);
    font-size: .78rem;
}
.post-album-ico { line-height: 1; }
.post-album-label { color: var(--mes-text-mute, #6f6360); }
.post-album-link {
    color: var(--mes-gold, #e8c46a);
    text-decoration: none;
    font-weight: 600;
}
.post-album-link:hover { text-decoration: underline; }

/* ==========================================================================
   🐞🐞 [แก้มุมโค้งแถบดำ MYT — รอบที่ 3 เจอตัวการจริงเสียที]
   --------------------------------------------------------------------------
   ทำไม 2 รอบก่อนแก้ไม่หาย:
     รอบ 1  แก้ที่ .mes-myt-container (กล่องนอก) — ถูกส่วนหนึ่ง แต่ไม่ใช่ตัวการ
     รอบ 2  แก้ที่ app.css `.post-body img` — ถูกกฎ แต่ **แพ้ลำดับโหลด**

   ตัวการจริงคือกฎในไฟล์นี้เอง (บรรทัด ~97):
       .post-body.mpc-image-only img { border-radius: 12px; }

   โพสต์ที่มี "แต่วิดีโออย่างเดียว ไม่มีข้อความ" จะได้คลาส .mpc-image-only
   ซึ่งใส่มุมโค้ง 12px ให้รูปทุกรูปข้างใน — รวมรูปปกวิดีโอและ GIF ที่วางทับ

   และไฟล์นี้ถูกโหลด **หลัง** app.css (layout-head.php บรรทัด 43 vs 40)
   กฎที่ผมแก้ไว้ใน app.css รอบก่อนจึงถูกกฎนี้เขียนทับทุกครั้ง = อาการไม่หาย

   ผลที่เห็น: รูปปกข้างในมุมโค้ง แต่พื้นหลังดำของกล่องเป็นเหลี่ยม
   จึงเห็นเป็น "แถบดำโผล่ที่มุมบน-ล่าง" ตรงกับที่รายงานมาเป๊ะ

   แก้: เจาะจงเฉพาะของที่อยู่ในการ์ดวิดีโอ MYT เท่านั้น
   รูปธรรมดาในโพสต์ยังโค้งมน 12px เหมือนเดิมทุกประการ ไม่กระทบดีไซน์เดิม
   ========================================================================== */
.post-body.mpc-image-only .mes-myt-container,
.post-body.mpc-image-only .mes-myt-container img,
.post-body .mes-myt-container img,
.mes-myt-container .mes-myt-thumb-img,
.mes-myt-container .fx-layer-gif,
.mes-myt-container .mes-myt-lite-player {
    border-radius: 0 !important;
}

/* ==========================================================================
   ⭐ [เพิ่มตามที่ขอ] โพล — ยุบช่องว่าง / ทับบนรูป / รูปแบบกราฟ 4 แบบ
   ========================================================================== */

/* --- 1. โพสต์ที่มีแต่โพล ไม่มีข้อความ/รูป -> ยุบกล่องเนื้อหาทิ้ง ---
   เดิมเหลือพื้นที่ดำเปล่า ๆ สูงลิบเหนือโพล (ตรงที่วงกลมไว้)
   ยังวาด element ไว้เพราะ JS จัดความสูงการ์ดธีมอ้างถึงมันอยู่ */
.post-body.mpc-body-empty {
    display: none !important;
}

/* --- 2. โพลที่มีรูปพื้นหลัง — วาดเป็นก้อนเดียวกัน ---
   [เปลี่ยนวิธี] เดิมใช้ sibling selector ดึงโพลขึ้นไปทับรูปในเนื้อหา
   ซึ่งเปราะมาก (โครง HTML เปลี่ยนนิดเดียวก็หลุด)
   ตอนนี้รูปเป็นของโพลเอง วาดรวมกันตั้งแต่ต้น = ตรงกับพรีวิวเป๊ะ */
.post-poll.has-poll-image {
    position: relative;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 12px;
    border: 0;
    padding: 0;
    /* aspect-ratio / background-size / position มาจาก inline style ที่ PHP ใส่
       ตามค่าที่ผู้ใช้ตั้งไว้ (สัดส่วน/ซูม/มุมรูป) */
}
.post-poll.has-poll-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--dome, .6));
    pointer-events: none;
}
/* ⭐ [แก้บั๊กกรอบช่อง ๆ] แผงโพล — วางตามตำแหน่ง X/Y ที่ผู้ใช้ตั้ง
   เดิม .post-poll เป็น flex ทำให้ลูกทุกตัวเรียงเป็นแถวนอน กลายเป็นช่อง ๆ
   ตอนนี้มีแผงเดียว ข้างในเรียงลงเป็นแถวตามปกติ */
.post-poll.has-poll-image .post-poll-panel {
    position: absolute;
    left: var(--px, 50%);
    top: var(--py, 12%);
    transform: translateX(-50%);
    width: calc(100% - 28px);
    z-index: 1;
    background: rgba(0, 0, 0, .58);
    border-radius: 10px;
    padding: 12px;
}
/* โพลที่ไม่มีรูป — แผงไม่ต้องลอย ใช้โครงปกติ */
.post-poll:not(.has-poll-image) .post-poll-panel {
    position: static;
    transform: none;
    width: auto;
    background: none;
    padding: 0;
}
/* ตัวเลือกเรียงลงเป็นแถว ๆ เต็มความกว้าง (ตามที่เจ้าของต้องการ) */
.post-poll.has-poll-image .post-poll-opts {
    display: block;
}
.post-poll.has-poll-image .post-poll-opt {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(2px);
}
.post-poll.has-poll-image .post-poll-q {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}
.post-poll.has-poll-image .post-poll-opt {
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
}

/* --- 3. รูปแบบกราฟ --- */

/* 3.1 แท่งแนวตั้ง */
.post-poll.poll-style-bar-v .post-poll-opts {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-height: 150px;
}
.post-poll.poll-style-bar-v .post-poll-opt {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    font-size: .74rem;
    padding: 6px 4px;
}
.post-poll.poll-style-bar-v .post-poll-bar {
    order: -1;
    width: 100%;
    /* ความสูงมาจาก --pct ที่ PHP ใส่ไว้ตอนวาด (เดิมใช้เป็นความกว้าง) */
    height: calc(var(--pct, 0) * 1%);
    min-height: 3px;
    border-radius: 6px 6px 0 0;
    transition: height .4s ease;
}

/* 3.2 วงกลม — วาดด้วย conic-gradient จากตัวแปร --pct ของแต่ละข้อ */
.post-poll.poll-style-pie .post-poll-opt {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 10px;
}
.post-poll.poll-style-pie .post-poll-bar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(
        var(--gold, #d4af37) calc(var(--pct, 0) * 1%),
        rgba(255, 255, 255, .12) 0
    );
    transition: background .4s ease;
}

/* 3.3 ตารางสี่เหลี่ยม */
.post-poll.poll-style-grid .post-poll-opts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}
.post-poll.poll-style-grid .post-poll-opt {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.post-poll.poll-style-grid .post-poll-bar {
    position: absolute;
    inset: 0;
    width: calc(var(--pct, 0) * 1%);
    border-radius: 0;
    opacity: .3;
    transition: width .4s ease;
}
.post-poll.poll-style-grid .post-poll-opt > *:not(.post-poll-bar) {
    position: relative;
    z-index: 1;
}

/* --- 4. คำแนะนำให้ใส่ภาพในกล่องพิมพ์ --- */
.poll-img-hint {
    padding: 10px 12px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(212, 175, 55, .08);
    border: 1px solid rgba(212, 175, 55, .3);
    color: var(--gold-soft, #f0d98a);
    font-size: .78rem;
    line-height: 1.6;
}
.poll-img-hint .muted { color: var(--text-mute, #9a938d); font-size: .72rem; }

/* ⭐ [23 ต.ค. 2569 · ชุด 1 ข้อ 1.1] การ์ดโพสต์เฉพาะสมาชิกเพจ (ล็อกสำหรับคนที่ไม่ใช่สมาชิก · มติ 1ก) */
.post-body.pm-lock{position:relative;min-height:84px;border-radius:10px;overflow:hidden}
.pm-lock-blur{filter:blur(5px);opacity:.6;user-select:none;pointer-events:none;padding:.6rem .8rem;line-height:1.6}
.pm-lock-line{display:block;white-space:nowrap;overflow:hidden}
.pm-lock-title{position:relative;z-index:2;margin:.5rem .8rem .2rem;font-size:1.05rem;font-weight:700;color:var(--text,inherit)}
.post-body.pm-lock .pm-lock-ov{top:2.4rem}
.pm-lock-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;background:rgba(12,10,10,.55);text-align:center;padding:.5rem}
.pm-lock-btn{font-size:.85rem;border-radius:999px;padding:.35rem .8rem}
.chip.chip-pm{border-color:var(--gold-dim,#8a7128);color:var(--gold-soft,#f0d98a)}

/* 📍 [23 ต.ค. 2569 · ชุด 1 ข้อ 1.7] บรรทัดเช็คอินบนการ์ด */
.post-checkin{margin:.2rem .8rem .3rem;font-size:.9rem;color:var(--gold-soft,#f0d98a)}
.post-checkin a{color:inherit;text-decoration:underline}