/* ══════════════════════════════════════════════════════════════
   VFoods — จัดจุดตัดบรรทัดเอง (manual line-break control)
   ──────────────────────────────────────────────────────────────
   ภาษาไทยไม่เว้นวรรคระหว่างคำ เบราว์เซอร์จึงเดาจุดตัดเอง และมักตัด
   ผิดที่ (เช่น "ขนมปัง|ปี๊บ") ไฟล์นี้ให้เครื่องมือไว้กำหนดเองว่า
   บรรทัดใหม่ควรเริ่มตรงไหน

   ── วิธีใช้ (3 ขั้น) ──────────────────────────────────────────
   1. ใส่ class="lb" ที่ตัวแม่  → บอกว่า "ข้อความก้อนนี้จัดบรรทัดเอง"
   2. หุ้มแต่ละวรรคด้วย <span class="nb">…</span> → ห้ามตัดกลางวรรค
   3. คั่นระหว่างวรรคด้วย &#8203; → จุดที่ยอมให้ขึ้นบรรทัดใหม่

   <h2 class="lb">
     <span class="nb">ผู้ผลิตขนมปังปี๊บ</span>&#8203;<span
     class="nb">อันดับ 1 ในประเทศไทย</span>
   </h2>
     → ตัดได้จุดเดียว คือหน้าคำว่า "อันดับ 1"
     → จอกว้างพอ = บรรทัดเดียว, จอแคบ = ตัดตรงจุดที่เรากำหนด

   ── ทำไมต้อง .nb ไม่ใช่ word-break ────────────────────────────
   Chrome/Safari ไม่สนใจ word-break:keep-all กับภาษาไทย (ทดสอบแล้ว
   ยังตัดกลางประโยคเหมือนเดิม) วิธีเดียวที่คุมได้จริงคือ nowrap
   ต่อวรรค แล้วเปิดช่องตัดเฉพาะระหว่างวรรคด้วย &#8203;

   ── ข้อควรระวัง ──────────────────────────────────────────────
   • วรรคใน .nb จะไม่ยอมตัดเด็ดขาด ถ้าวรรคยาวเกินความกว้างกล่อง
     ข้อความจะล้น — แบ่งวรรคให้สั้นพอ หรือใส่ .lb-safe ที่ตัวแม่
   • ห้ามใส่ &#8203; ไว้ "ใน" .nb (มันจะถูกกลืน ไม่เกิดจุดตัด)

   ── ภาษาอังกฤษ / i18n ────────────────────────────────────────
   i18n.js รู้จัก class="lb" — จะแปลทั้งก้อนเป็นประโยคเดียว ไม่ต้อง
   แยกคำแปลตามวรรค พจนานุกรมยังใช้คีย์ประโยคไทยเต็มๆ เหมือนเดิม
   สลับกลับเป็นไทย มาร์กอัปที่จัดบรรทัดไว้จะกลับมาครบ
   ══════════════════════════════════════════════════════════════ */

/* ── 1. ตัวแม่: ข้อความก้อนนี้จัดบรรทัดเอง ─────────────────── */
.lb  { overflow-wrap: normal; }
/* กันล้นกล่อง ถ้าวรรคใน .nb ยาวเกินไป — ยอมให้เบราว์เซอร์ตัดช่วย */
.lb.lb-safe .nb { white-space: normal; overflow-wrap: anywhere; }

/* ── 2. วรรคที่ห้ามตัดกลาง ─────────────────────────────────── */
.nb { white-space: nowrap; }

/* ── 3. ปล่อยให้เบราว์เซอร์เกลี่ยเอง (ทางเลือก ไม่ต้องมาร์กมือ) ─ */
.lb-balance { text-wrap: balance; }   /* หัวข้อสั้น: บรรทัดยาวเท่าๆ กัน */
.lb-pretty  { text-wrap: pretty; }    /* ย่อหน้า: กันคำโดดบรรทัดสุดท้าย */

/* ── 4. <br> ที่บังคับตัดเฉพาะบางขนาดจอ ────────────────────── */
br.br-mb, br.br-tb, br.br-dt { display: none; }
@media (max-width: 640px)                          { br.br-mb { display: inline; } }
@media (min-width: 641px) and (max-width: 1024px)  { br.br-tb { display: inline; } }
@media (min-width: 1025px)                         { br.br-dt { display: inline; } }