/* ===========================================================================
 * mes789-system / assets/css/hub.css
 * หน้าฮับ M ทอง (8 แถว) — ดูโครงสร้างที่ app/hub.php
 * ---------------------------------------------------------------------------
 * ใช้ตัวแปรสีจาก :root ใน app.css ทั้งหมด (--gold, --surface, --line, ...)
 * ไม่ประดิษฐ์ชุดสีใหม่ เพื่อให้กลืนกับธีมทองของทั้งเว็บที่มีอยู่แล้ว
 * =========================================================================== */

.hub-page {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-bottom: 40px;
}

.hub-head {
    text-align: center;
    padding: 8px 0 4px;
}
.hub-head h1 {
    margin: 0 0 4px;
    font-size: 1.6rem;
    background: linear-gradient(160deg, #f4e0a0 10%, var(--gold) 45%, var(--gold-dim) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hub-head p {
    margin: 0;
    color: var(--text-dim);
    font-size: .9rem;
}

/* ---- หัวข้อแถว ---- */
.hub-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: var(--text);
}

/* ---- แบนเนอร์ "กำลังพัฒนา" (แถวที่ยังไม่มีเนื้อหาจริงในรอบนี้) ---- */
.hub-soon-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px;
    border-radius: var(--radius);
    border: 1px dashed var(--line);
    background: rgba(255, 255, 255, .02);
}
.hub-soon-banner p {
    margin: 0;
    color: var(--text-dim);
    font-size: .85rem;
    flex: 1 1 240px;
}
.hub-soon-tag {
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 700;
    color: var(--gold-soft);
    border: 1px solid var(--gold-dim);
    border-radius: 999px;
    padding: 3px 10px;
}

/* ---- แถวที่ 2: การ์ดพื้นที่กำลังพัฒนาใบเดียว (สัดส่วน 1:1 ย่อ ตามแผน) ---- */
.hub-placeholder-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    padding: 16px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    /* ลายทแยงบาง ๆ แทนรูปจริง (โหมด 0 ไบต์) ให้ดูตั้งใจออกแบบ ไม่ใช่กล่องว่างพัง */
    background:
        repeating-linear-gradient(135deg, rgba(212,175,55,.05) 0 10px, transparent 10px 20px),
        var(--surface);
    justify-content: flex-end;
    cursor: not-allowed;
}
.hub-placeholder-ribbon {
    position: absolute;
    top: 12px;
    right: -28px;
    transform: rotate(40deg);
    background: linear-gradient(160deg, #e8c46a, #c9a132);
    color: #241a08;
    font-size: .62rem;
    font-weight: 800;
    padding: 3px 34px;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.hub-placeholder-icon { font-size: 1.6rem; opacity: .8; }
.hub-placeholder-title { font-weight: 700; color: var(--text); font-size: .9rem; }
.hub-placeholder-desc { color: var(--text-mute); font-size: .72rem; line-height: 1.4; }

/* ---- แถวเลื่อนแนวนอน (ใช้กับแถวโพลตอนนี้ เผื่อแถวอื่นในรอบถัดไป) ---- */
.hub-scroll-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.hub-scroll-row::-webkit-scrollbar { height: 6px; }
.hub-scroll-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.hub-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-dim);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: .85rem;
}

/* ---- การ์ดโพล (แถวที่ 8) ---- */
.hub-poll-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease;
}
.hub-poll-card:hover { border-color: var(--gold-dim); }

.hub-poll-q {
    font-weight: 700;
    font-size: .88rem;
    color: var(--text);
    /* ตัดให้ไม่เกิน 3 บรรทัด กันการ์ดสูงไม่เท่ากันเวลาคำถามยาว */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-poll-opts { display: flex; flex-direction: column; gap: 6px; }
.hub-poll-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    overflow: hidden;
    font-size: .74rem;
}
.hub-poll-opt-bar {
    position: absolute;
    inset: 0;
    width: var(--pct, 0%);
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    opacity: .35;
    z-index: 0;
}
.hub-poll-opt-label,
.hub-poll-opt-pct {
    position: relative;
    z-index: 1;
    color: var(--text);
}
.hub-poll-opt-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}
.hub-poll-opt-pct { flex-shrink: 0; color: var(--text-dim); }

.hub-poll-foot {
    display: flex;
    justify-content: space-between;
    font-size: .7rem;
    color: var(--text-mute);
}

@media (max-width: 640px) {
    .hub-poll-card { flex-basis: 200px; }
}

/* ---- การ์ดสนาม (แถวที่ 5/6 — ระบบสนามแข่งขันกลาง) ---- */
.hub-arena-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease;
}
.hub-arena-card:hover { border-color: var(--gold-dim); }
.hub-arena-card-drama { border-color: rgba(179, 32, 42, .35); }
.hub-arena-card-drama:hover { border-color: var(--red-soft); }

.hub-arena-title {
    font-weight: 700;
    font-size: .88rem;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-arena-meta {
    display: flex;
    gap: 10px;
    font-size: .72rem;
    color: var(--text-dim);
}

/* ---- การ์ดบทความ (แถวที่ 1) — อัตราส่วน 9:16 ตามแผน + เลื่อนอัตโนมัติ ---- */
.hub-article-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    /* คลาสเดียวกับ .hub-scroll-row แต่แยกไว้เผื่อปรับสัดส่วนการ์ดแยกทีหลัง
       โดยไม่กระทบแถวอื่นที่ใช้ .hub-scroll-row อยู่ */
    cursor: grab;
}
.hub-article-row:active { cursor: grabbing; }
.hub-article-row::-webkit-scrollbar { height: 6px; }
.hub-article-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.hub-article-card {
    position: relative;
    flex: 0 0 130px;
    aspect-ratio: 9 / 16;
    scroll-snap-align: start;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.hub-article-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* กันลากรูปค้างระหว่างลากเลื่อนแถว */
}
.hub-article-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--surface-2);
    opacity: .5;
}
.hub-article-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 100%);
    pointer-events: none;
}
.hub-article-title {
    position: relative;
    z-index: 1;
    padding: 0 8px;
    font-size: .76rem;
    font-weight: 700;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-article-author {
    position: relative;
    z-index: 1;
    padding: 2px 8px 8px;
    font-size: .64rem;
    color: rgba(255,255,255,.75);
}

/* ---- การ์ดตัวอย่าง (แถวที่ 1 ตอนยังไม่มีบทความจริง) ---- */
.hub-article-mock { cursor: default; }
.hub-article-mock .hub-article-title { padding-bottom: 10px; }
.hub-mock-tag {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    font-size: .6rem;
    font-weight: 700;
    color: #241a08;
    background: var(--gold-soft);
    border-radius: 999px;
    padding: 2px 8px;
}
/* ไล่เฉดสีพื้นหลังการ์ดตัวอย่าง 4 แบบ หมุนเวียน (ไม่มีรูปจริงให้ใช้ — โหมด 0 ไบต์) */
.hub-grad-1 { background: linear-gradient(155deg, #7c5a2e, #2a1f10); }
.hub-grad-2 { background: linear-gradient(155deg, #4a4a6a, #17151f); }
.hub-grad-3 { background: linear-gradient(155deg, #6a3a3a, #1f1414); }
.hub-grad-4 { background: linear-gradient(155deg, #2f5a4a, #10201a); }

@media (max-width: 640px) {
    .hub-article-card { flex-basis: 110px; }
}

/* ===========================================================================
   แถวที่ 3 — เวทีคำคม "Quote Hot คำคมสุดชิค"
   =========================================================================== */

/* ---- หัวข้อแถวที่มีการแข่งขัน — ป้ายเด่นกว่าหัวข้อธรรมดา + โชว์รหัสประจำสัปดาห์ ---- */
.hub-contest-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.hub-row-title-contest {
    margin: 0;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: linear-gradient(100deg, #3a2a06, #241a08 60%, #3a2a06);
    border: 1px solid var(--gold-dim);
    box-shadow: 0 0 0 1px rgba(212,175,55,.12), 0 4px 14px rgba(212,175,55,.12);
}
.hub-row-title-contest span:first-child {
    display: inline-flex;
    filter: drop-shadow(0 0 4px rgba(212,175,55,.5));
}
.hub-contest-code {
    font-size: .72rem;
    color: var(--text-dim);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 12px;
}
.hub-contest-code b { color: var(--gold-soft); font-weight: 800; }

/* ---- การ์ดตัวอย่างแถวที่ 3 (ยังไม่มีคำคมเข้าเวทีจริง) ---- */
.hub-quote-mock { cursor: default; position: relative; }
.hub-quote-mock .hub-mock-tag {
    position: absolute; top: 8px; left: 8px; z-index: 1;
}
.hub-quote-mock .hub-quote-text { margin-top: 22px; }

/* ---- ชิ้นที่ 1: Podium (component กลาง — เขียนให้ไม่ผูกกับ "คำคม" เจาะจง
   ตั้งใจ ใช้ชื่อคลาส hub-podium-* ทั่วไป เผื่อเวทีอื่นในอนาคตดึงไปใช้ต่อได้
   ตามส่วนที่ 9 ของแผน) ---- */
.hub-podium {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    align-items: end;
    gap: 10px;
    margin-bottom: 14px;
}
.hub-podium-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    aspect-ratio: 4 / 5;
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(165deg, var(--surface-2), var(--surface));
    text-decoration: none;
    overflow: hidden;
}
.hub-podium-rank-1 {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-dim), 0 8px 24px rgba(212,175,55,.15);
}
.hub-podium-rank-2, .hub-podium-rank-3 {
    aspect-ratio: 4 / 5;
    transform: scale(.86);
    transform-origin: bottom center;
    opacity: .92;
}
.hub-podium-crown {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.hub-podium-rank {
    font-size: .65rem;
    font-weight: 800;
    color: var(--gold-soft);
}

/* ---- [เพิ่มใหม่] ทำให้ทุกคำคมในเวทีนี้ดูเด่น ต่างจากโพสต์ธรรมดาในโปรไฟล์ —
   ใช้กับทั้งคนที่ใช้เครื่องมือ Quote และคนที่พิมพ์ข้อความธรรมดาเข้ามาเหมือนกัน
   (เครื่องหมายคำพูดใหญ่ + ตัวเอียง + แสงนวลด้านหลัง) ไม่งั้นคนที่ไม่ใช้เครื่องมือ
   Quote จะเห็นการ์ดตัวเองเป็นแค่ตัวหนังสือเฉย ๆ ไม่ต่างจากหน้าโปรไฟล์เลย ---- */
.hub-podium-slot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 20%, rgba(212,175,55,.16), transparent 65%);
    pointer-events: none;
}
.hub-podium-quotemark {
    position: relative;
    z-index: 1;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.6rem;
    line-height: .6;
    color: var(--gold-soft);
    opacity: .75;
}
.hub-podium-quotemark-open { align-self: flex-start; }
.hub-podium-quotemark-close { align-self: flex-end; }
.hub-podium-text {
    position: relative;
    z-index: 1;
    font-size: .78rem;
    font-weight: 700;
    font-style: italic;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-podium-rank-1 .hub-podium-text { font-size: .86rem; -webkit-line-clamp: 5; }
.hub-podium-user { font-size: .64rem; color: var(--text-dim); }
.hub-podium-score { font-size: .68rem; color: var(--gold-soft); font-weight: 700; }

/* ---- ชิ้นที่ 2: แถว A — การ์ด 16:9 ย่อ ---- */
.hub-quote-row-a { margin-bottom: 14px; }
.hub-quote-card {
    flex: 0 0 220px;
    aspect-ratio: 16 / 9;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
}
.hub-quote-card:hover { border-color: var(--gold-dim); }
.hub-quote-rank { font-size: .64rem; font-weight: 800; color: var(--text-mute); }

/* .hub-quote-featured = การ์ดที่ "เข้าเวทีจริง" (Podium/แถว A) ต่างจาก
   .hub-quote-mock (ตัวอย่าง) ทั้งสองแบบใช้ลูกเล่นเครื่องหมายคำพูดเหมือนกัน
   เพื่อให้ดูเป็น "การ์ดคำคมที่ได้รับคัดเลือก" ไม่ใช่โพสต์เฉย ๆ ที่ยกมาวาง */
.hub-quote-featured {
    position: relative;
    background: linear-gradient(165deg, rgba(212,175,55,.06), var(--surface) 55%);
    overflow: hidden;
}
.hub-quote-quotemark {
    position: absolute;
    top: -6px;
    left: 10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.6rem;
    color: var(--gold-dim);
    opacity: .35;
    line-height: 1;
    pointer-events: none;
}
.hub-quote-text {
    position: relative;
    font-size: .8rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-quote-foot {
    display: flex;
    justify-content: space-between;
    font-size: .68rem;
    color: var(--text-dim);
}

/* ---- ชิ้นที่ 3: แถว B — ตัววิ่งข่าวไหลต่อเนื่อง ---- */
.hub-ticker {
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
}
.hub-ticker-track {
    display: flex;
    gap: 32px;
    white-space: nowrap;
    width: max-content;
    /* วนซ้ำเนื้อหา 2 รอบใน PHP แล้วเลื่อนแค่ 50% ของความกว้าง = ดูต่อเนื่องไม่มีรอยต่อ */
    animation: hub-ticker-scroll 30s linear infinite;
}
.hub-ticker:hover .hub-ticker-track { animation-play-state: paused; }
.hub-ticker-item { font-size: .78rem; color: var(--text-dim); }
.hub-ticker-item strong { color: var(--gold-soft); }
@keyframes hub-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hub-ticker-track { animation: none; overflow-x: auto; }
}

/* ===========================================================================
   ฟีดผสม — แถว 3-8 เดิม รวมเป็นฟีดเดียว การ์ดหลากหลายขนาดสลับกัน
   =========================================================================== */

.hub-mixed-feed-section { margin-top: 4px; }

.hub-mixed-feed {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ===========================================================================
   [เพิ่ม 4 ก.ย. 2569 — เลนแม่บท 3] แถบยาวเต็มแถว สลับกับบล็อก
   ---------------------------------------------------------------------------
   เดิมทุกการ์ดในฟีดผสมกว้างเท่ากันหมด หน้าจึงเป็นตารางสี่เหลี่ยมเรียงรัว ๆ
   ไม่มีจังหวะให้สายตาพัก และการ์ดที่ควรเด่น (เสียงของเว็บไซต์เอง) ถูกบีบ
   เท่ากับการ์ดห้องธรรมดา

   .is-wide = กินเต็มแถว — ใช้กับการ์ดที่เป็น "เสียงของเว็บ" หรือมีเนื้อหา
   ข้างในต้องการที่ (ประกาศ · สภากาแฟ LIVE · คลิปอันดับ 1)
   ที่เหลือคงเป็นบล็อกเหมือนเดิม จึงได้จังหวะแถบยาว-บล็อก-แถบยาว สลับกันไป

   ใช้ flex-basis: 100% ไม่ใช่ width — เพราะ .hub-mixed-feed เป็น flex-wrap
   อยู่แล้ว ตัวถัดไปจะถูกดันขึ้นบรรทัดใหม่เองอัตโนมัติ ไม่ต้องแตะโครงเดิมเลย
   =========================================================================== */
.hub-mixed-feed .hub-feed-card.is-wide {
    flex: 0 0 100%;
    max-width: 100%;
    aspect-ratio: auto;      /* ยกเลิกสัดส่วนตายตัวของการ์ดบล็อก */
    min-height: 0;
}

/* กรอบพื้นฐานของทุกการ์ดในฟีดผสม — แต่ละ kind กำหนด flex-basis/aspect-ratio
   ของตัวเองทับอีกที เพื่อให้ขนาดสลับกันไปตามที่ต้องการ ไม่ใช่ทุกใบเท่ากันหมด */
.hub-feed-card {
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* ---- คำคม #1 (มงกุฎ เดี่ยว 4:5) ---- */
.hub-feed-quote-rank1 {
    flex: 0 1 220px;
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    padding: 14px;
    position: relative;
    border: 1px solid var(--gold);
    background: linear-gradient(165deg, var(--surface-2), var(--surface));
    box-shadow: 0 0 0 1px var(--gold-dim), 0 8px 24px rgba(212,175,55,.15);
}
.hub-feed-quote-rank1::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 20%, rgba(212,175,55,.18), transparent 65%);
}
.hub-feed-quote-rank1 .hub-podium-crown { position: absolute; top: 8px; right: 10px; font-size: 1.4rem; }
.hub-feed-quote-rank1 .hub-podium-text { position: relative; font-size: .92rem; font-weight: 700; font-style: italic; }

/* ---- คำคม #2/#3 (คู่กัน) ---- */
.hub-feed-quote-rank23 {
    flex: 0 1 260px;
    display: flex;
    gap: 8px;
}
.hub-feed-quote-rank23 .hub-podium-slot {
    flex: 1 1 0;
    aspect-ratio: 4 / 5;
}

/* ---- ตัววิ่งข่าว เป็นการ์ดกว้างเต็มแถวของตัวเอง ---- */
.hub-feed-ticker-card {
    flex: 1 1 100%;
    padding: 4px 0;
}

/* ---- คลิปของฉัน (9:16 แนวตั้ง) ---- */
.hub-myclip-card {
    position: relative;
    flex: 0 1 150px;
    aspect-ratio: 9 / 16;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(160deg, #1e2a3a, #0d1420);
    border: 1px solid var(--line);
    padding: 10px;
}
.hub-myclip-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(255,255,255,.85);
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.hub-myclip-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.8) 100%);
}
.hub-myclip-caption {
    position: relative;
    font-size: .74rem;
    font-weight: 600;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-myclip-user { position: relative; font-size: .64rem; color: rgba(255,255,255,.7); }

/* ---- โหวตโพสต์ (1:1) ---- */
.hub-postvote-card {
    flex: 0 1 200px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    border: 1px solid var(--line);
    background: var(--surface);
}
.hub-postvote-card:hover { border-color: var(--gold-dim); }
.hub-postvote-text {
    font-size: .8rem;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-postvote-foot {
    display: flex;
    justify-content: space-between;
    font-size: .68rem;
    color: var(--text-dim);
}

/* ---- การ์ดพากย์อัตโนมัติ ---- */
.hub-announcer-card {
    flex: 0 1 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius);
    border: 1px dashed var(--gold-dim);
    background: rgba(212,175,55,.05);
}
.hub-announcer-icon { font-size: 1.2rem; flex-shrink: 0; }
/* [8 ก.ย. 2569 — เลนฟีด · เจ้าของสั่ง +4px] .8rem(12.8px) → 1.05rem(16.8px) */
.hub-announcer-text { font-size: 1.05rem; color: var(--text); line-height: 1.5; }

/* ---- ปรับ arena/poll/quote-single card เดิมให้เข้ากับ flex-wrap ผสม (ไม่ใช้ scroll-row เดี่ยว ๆ แล้ว) ---- */
.hub-mixed-feed .hub-arena-card,
.hub-mixed-feed .hub-postvote-card,
.hub-mixed-feed .hub-poll-card,
.hub-mixed-feed .hub-quote-card {
    flex: 0 1 200px;
}
.hub-mixed-feed .hub-poll-card { aspect-ratio: auto; }

@media (max-width: 640px) {
    .hub-feed-quote-rank1, .hub-feed-quote-rank23 { flex-basis: 44%; }
    .hub-myclip-card { flex-basis: 32%; }
    .hub-mixed-feed .hub-arena-card,
    .hub-mixed-feed .hub-postvote-card,
    .hub-mixed-feed .hub-quote-card { flex-basis: 44%; }
}

/* ===========================================================================
   ชุด A — การ์ดเวทีคลิป/หนัง (แถว 4 + แถว 5)
   =========================================================================== */

/* ---- การ์ดอันดับ 1 (TOP ONE) — ป้ายแดง + มงกุฎ ตามม็อบอัพ ---- */
.hub-clip-top1 {
    flex: 1 1 100%;
    max-width: 520px;
    background: #000;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}
.hub-clip-banner {
    background: #d32029;
    color: #fff;
    font-weight: 800;
    font-size: .92rem;
    padding: 8px 16px;
    border-radius: 8px;
    margin: 10px 10px 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
}
.hub-clip-banner span { font-size: 1.3rem; }

.hub-clip-body {
    display: flex;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
}
/* 5.1 คลิปแนวนอน — รูปกว้าง 16:9 อยู่บน ข้อความอยู่ล่าง */
.hub-clip-landscape .hub-clip-body { flex-direction: column; }
.hub-clip-landscape .hub-clip-thumb { aspect-ratio: 16 / 9; width: 100%; }
/* 5.2 คลิปแนวตั้ง — รูป 9:16 อยู่ซ้าย ข้อความอยู่ขวา */
.hub-clip-portrait .hub-clip-body { flex-direction: row; }
.hub-clip-portrait .hub-clip-thumb { aspect-ratio: 9 / 16; width: 38%; flex-shrink: 0; }

.hub-clip-thumb {
    position: relative;
    display: block;
    border-radius: var(--radius-sm);
    background: linear-gradient(160deg, #253242, #0d1218);
    overflow: hidden;
}
.hub-clip-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    color: rgba(255,255,255,.85);
}
.hub-clip-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hub-clip-title { font-weight: 700; font-size: .9rem; color: var(--text); }
.hub-clip-by { font-size: .74rem; color: var(--gold-soft); }
.hub-clip-pitch {
    font-size: .76rem;
    color: var(--text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-clip-foot {
    display: flex;
    justify-content: flex-end;
    padding: 0 12px 12px;
}
.hub-clip-vote {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: .76rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.hub-clip-vote:hover { border-color: var(--gold-dim); }
.hub-clip-vote.is-voted { background: rgba(212,175,55,.16); border-color: var(--gold); }

/* ---- 5.3 การ์ดอันดับรอง (เลื่อนดูได้ในฟีดผสม) ---- */
.hub-clip-card {
    flex: 0 1 200px;
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: relative;
}
.hub-clip-card .hub-clip-thumb { width: 100%; }
.hub-clip-card.hub-clip-landscape .hub-clip-body { flex-direction: column; }
.hub-clip-card.hub-clip-portrait .hub-clip-body { flex-direction: column; }
.hub-clip-card.hub-clip-portrait .hub-clip-thumb { aspect-ratio: 9 / 16; width: 100%; }
.hub-clip-rank {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    background: rgba(0,0,0,.7);
    color: var(--gold-soft);
    font-size: .66rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
}

/* ---- 5.4 การ์ดชวนดู "ไม่ได้มีแค่ 10 อันดับ" (สัดส่วนเตี้ยกว่าใบอื่น) ---- */
.hub-clip-more {
    flex: 1 1 100%;
    max-width: 460px;
    aspect-ratio: 3 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    background: linear-gradient(140deg, rgba(212,175,55,.10), var(--surface) 60%);
    border: 1px dashed var(--gold-dim);
}
.hub-clip-more-head { font-size: 1rem; font-weight: 800; color: var(--gold-soft); }
.hub-clip-more-body { font-size: .84rem; color: var(--text); }
.hub-clip-more-pick { font-size: .76rem; color: var(--text-dim); }

@media (max-width: 640px) {
    .hub-clip-top1, .hub-clip-more { max-width: 100%; }
    .hub-clip-card { flex-basis: 44%; }
}

/* ---- การ์ดสภากาแฟในฟีดผสม (สแนปช็อตสด) ---- */
.hub-cafe-card {
    flex: 0 1 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(120,90,40,.45);
    background: linear-gradient(155deg, rgba(140,100,50,.16), var(--surface) 70%);
}
.hub-cafe-live { font-size: .64rem; font-weight: 800; color: #ff6b6b; }
.hub-cafe-topic { font-weight: 700; font-size: .86rem; color: var(--text); }
.hub-cafe-last {
    font-size: .76rem; color: var(--text-dim);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hub-cafe-meta { font-size: .7rem; color: var(--gold-soft); }

/* ===========================================================================
   🔄 การ์ดแบบโพสต์ (hub-postcard) — แก้ตามที่ทักท้วง
   ---------------------------------------------------------------------------
   หลักการ: การ์ดบนหน้าฮับต้อง "หน้าตาเหมือนโพสต์จริง" คือมีรูปจริงของโพสต์นั้น
   เป็นพระเอก แล้วมีแถบข้อมูล (ใครโพสต์/คะแนน) อยู่ใต้รูป — ไม่ใช่กล่องสีไล่เฉด
   ที่มีแต่ตัวหนังสือแบบเดิม
   =========================================================================== */

.hub-postcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.hub-postcard:hover { border-color: var(--gold-dim); }
.hub-postcard-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }

/* ---- รูปจริงของโพสต์ = พระเอกของการ์ด ---- */
.hub-postcard-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0b0f14;
    overflow: hidden;
}
.hub-postcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- [เพิ่มใหม่] การ์ดที่ฝัง fx-frame จริง (รูปหนอน — รูป+ข้อความคำคมจริง) ----
   fx-frame เองไม่มี aspect-ratio ตายตัว (ขนาดตามภาพต้นฉบับ) ต้องบังคับให้เต็ม
   กล่องการ์ดเสมอ กันภาพเบี้ยว/ล้นออกนอกกรอบการ์ดที่ขนาดคงที่ */
.hub-postcard-media.has-fx {
    display: flex;
}
.hub-postcard-media.has-fx .fx-frame,
.hub-postcard-media.has-fx .fx-dome {
    width: 100%;
    height: 100%;
}
.hub-postcard-media.has-fx .fx-frame > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* คลิปแนวนอน 16:9 / แนวตั้ง 9:16 ตามม็อบอัพ 5.1 กับ 5.2 */
.hub-postcard.is-landscape .hub-postcard-media { aspect-ratio: 16 / 9; }
.hub-postcard.is-portrait  .hub-postcard-media { aspect-ratio: 9 / 16; }

/* ไม่มีรูปจริง (โพสต์ข้อความล้วน) — โชว์ข้อความบนพื้นเข้ม ยังดูเป็นการ์ดโพสต์อยู่ */
.hub-postcard-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    font-size: .9rem;
    font-style: italic;
    font-weight: 600;
    color: var(--text);
    background: linear-gradient(160deg, #1c2430, #0b0f14);
}
.hub-postcard-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(255,255,255,.9);
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
    pointer-events: none;
}

/* ---- แถบข้อมูลใต้รูป ---- */
.hub-postcard-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
}
.hub-postcard-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-postcard-by { font-size: .74rem; color: var(--text-dim); }
.hub-postcard-by b { color: var(--gold-soft); }
.hub-postcard-text {
    font-size: .76rem;
    color: var(--text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-postcard-score { font-size: .72rem; color: var(--gold-soft); font-weight: 700; }

/* ---- ป้ายมุมการ์ด ---- */
.hub-postcard-banner {
    background: #d32029;
    color: #fff;
    font-weight: 800;
    font-size: .8rem;
    padding: 7px 14px;
    text-align: center;
}
.hub-postcard-rankbadge {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    background: rgba(0,0,0,.75);
    color: var(--gold-soft);
    font-size: .68rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
}
.hub-postcard-foot {
    display: flex;
    justify-content: flex-end;
    padding: 0 12px 10px;
}

/* ---- ขนาดการ์ดในฟีดผสม ---- */
.hub-postcard-rank1 {
    flex: 1 1 100%;
    max-width: 440px;
    border-color: var(--gold-dim);
    box-shadow: 0 6px 22px rgba(212,175,55,.12);
}
.hub-postcard-single { flex: 0 1 210px; }
.hub-postcard-pair {
    flex: 0 1 300px;
    display: flex;
    gap: 10px;
    background: none;
    border: none;
}
.hub-postcard-pair .hub-postcard-small { flex: 1 1 0; min-width: 0; }

@media (max-width: 640px) {
    .hub-postcard-rank1 { max-width: 100%; }
    .hub-postcard-single { flex-basis: 46%; }
    .hub-postcard-pair { flex-basis: 100%; }
}

/* ---- การ์ดห้องสภากาแฟในฟีดหน้าฮับ (กดแล้วเข้าห้องคุยได้จริง) ---- */
.hub-cafe-card {
    flex: 0 1 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(155deg, rgba(120,80,40,.14), var(--surface) 65%);
    text-decoration: none;
    color: inherit;
}
.hub-cafe-card:hover { border-color: var(--gold-dim); }
.hub-cafe-pvp { background: linear-gradient(155deg, rgba(179,32,42,.18), var(--surface) 65%); }
.hub-cafe-vip { background: linear-gradient(155deg, rgba(212,175,55,.16), var(--surface) 65%); }
.hub-cafe-type { font-size: .68rem; font-weight: 800; color: var(--gold-soft); }
.hub-cafe-title { font-size: .92rem; font-weight: 700; color: var(--text); }
.hub-cafe-topic {
    font-size: .76rem; color: var(--text-dim);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hub-cafe-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .72rem; color: var(--text-dim); margin-top: 2px;
}
.hub-cafe-live { color: #ff6b6b; font-weight: 700; }

/* ---- การ์ดเสียงพากย์แบบยาวเต็มแถบ (สลับกับแบบสั้น ให้ฟีดมีจังหวะ) ---- */
.hub-announcer-card.is-wide {
    flex: 1 1 100%;
    max-width: 100%;
    justify-content: center;
    padding: 16px 20px;
}
.hub-announcer-card.is-wide .hub-announcer-text { font-size: 1.13rem; }   /* [8 ก.ย.] +4px */

/* ---- ป้าย "ตัวอย่าง" บนการ์ดพากย์ (ตอนยังไม่มีข้อมูลจริงให้พูดเลยทั้งฟีด) ---- */
.hub-announcer-card { position: relative; }
.hub-announcer-card .hub-mock-tag { position: absolute; top: -8px; left: 10px; }

/* ===========================================================================
   🧪 โหมดเดโม่ — ป้ายมุมการ์ดทุกใบในฟีดผสม (CSS ล้วน ไม่ต้องแก้ทีละการ์ด)
   =========================================================================== */
.hub-mixed-feed.is-demo .hub-feed-card,
.hub-mixed-feed.is-demo .hub-postcard,
.hub-mixed-feed.is-demo .hub-clip-top1,
.hub-mixed-feed.is-demo .hub-clip-card,
.hub-mixed-feed.is-demo .hub-cafe-card {
    position: relative;
}
.hub-mixed-feed.is-demo .hub-feed-card::before,
.hub-mixed-feed.is-demo .hub-postcard::before,
.hub-mixed-feed.is-demo .hub-clip-top1::before,
.hub-mixed-feed.is-demo .hub-clip-card::before,
.hub-mixed-feed.is-demo .hub-cafe-card::before {
    content: var(--demo-label, '🧪 DEMO');
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    font-size: .6rem;
    font-weight: 800;
    color: #241a08;
    background: var(--gold-soft);
    padding: 2px 8px;
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
}
/* การ์ดที่เนื้อหาซ้อนเต็มพื้นที่ (เช่นมีรูปเต็มการ์ด) เลื่อนป้ายเข้ามาหน่อยกันบัง */
.hub-mixed-feed.is-demo .hub-postcard-rank1::before,
.hub-mixed-feed.is-demo .hub-clip-top1::before {
    top: 44px;
}

/* ---- การ์ดโปรโมทร้านค้าในฟีดผสม ---- */
.hub-shop-promo {
    flex: 0 1 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid var(--gold-dim);
    background: linear-gradient(155deg, rgba(212,175,55,.14), var(--surface) 65%);
    text-decoration: none;
    color: inherit;
}
.hub-shop-promo:hover { border-color: var(--gold); }
.hub-shop-promo-icon { font-size: 2rem; }
.hub-shop-promo-title { font-weight: 700; font-size: .9rem; color: var(--text); }
.hub-shop-promo-price { font-size: .78rem; color: var(--gold-soft); font-weight: 700; }
.hub-shop-promo-cta { font-size: .72rem; color: var(--text-dim); margin-top: 4px; }

/* ===========================================================================
   🎯 แผงเควสประจำวัน
   =========================================================================== */
.hub-quest-panel { margin: 16px 0; }
.hub-quest-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.hub-quest-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
}
.hub-quest-item.is-done { border-color: var(--gold-dim); background: rgba(212,175,55,.06); }
.hub-quest-item.is-closed { opacity: .55; }
.hub-quest-icon { font-size: 1.6rem; flex-shrink: 0; }
.hub-quest-body { flex: 1; min-width: 0; }
.hub-quest-title { font-weight: 700; font-size: .88rem; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hub-quest-final {
    font-size: .62rem;
    font-weight: 800;
    color: #241a08;
    background: var(--gold-soft);
    padding: 1px 8px;
    border-radius: 999px;
}
.hub-quest-desc { font-size: .74rem; color: var(--text-dim); margin-top: 2px; }
.hub-quest-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin-top: 8px;
}
.hub-quest-progress-bar { height: 100%; background: var(--gold-soft); border-radius: 999px; transition: width .3s ease; }
.hub-quest-item.is-done .hub-quest-progress-bar { background: #4caf50; }
.hub-quest-meta { font-size: .7rem; color: var(--text-dim); margin-top: 6px; }

/* [เปิดท่อแล้ว] แถวที่ 2 — การ์ดบอร์ดจากลานสนทนา */
.hub-row-more { float: right; font-size: .78rem; font-weight: 600; color: var(--gold-dim); text-decoration: none; }
.hub-row-more:hover { color: var(--gold); }
.hub-board-row {
  display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.hub-board-row::-webkit-scrollbar { height: 4px; }
.hub-board-row::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }
.hub-board-card {
  flex: 0 0 auto; width: 168px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .35rem;
  padding: .7rem .65rem; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.hub-board-card:hover { border-color: var(--gold-dim); }
.hbc-cat {
  align-self: flex-start; padding: .12rem .45rem; border-radius: 999px;
  font-size: .62rem; font-weight: 700;
  border: 1px solid var(--chip, #94a3b8); color: var(--chip, #94a3b8);
}
.hbc-title {
  font-size: .8rem; font-weight: 700; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hbc-meta { font-size: .66rem; color: var(--text-dim); margin-top: auto; }

/* [เพิ่ม 4 ก.ย. 2569 — เลนแม่บท 3] รูปในการ์ดบอร์ด
   แถว 2 บังคับ "ต้องมีรูป" แล้ว การ์ดจึงต้องวาดรูปได้จริง (เดิมไม่เคยมีเลย)
   อัตราส่วน 16:9 ตายตัว — ให้ทุกใบสูงเท่ากันเป๊ะ ไม่ว่ารูปต้นทางจะทรงไหน
   แถวจึงไม่ฟันหลอเวลารูปสัดส่วนต่างกัน */
.hbc-thumb {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-sm) - 2px); overflow: hidden;
  background: var(--surface-2, #1a1a1a);
}
.hbc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===========================================================================
   ⭐ [แก้อาการกระตุก/จอดำที่หน้าฮับ — คู่กับ loading=lazy ใน hub.php]
   ---------------------------------------------------------------------------
   content-visibility: auto = บอกเบราว์เซอร์ว่า "การ์ดที่ยังไม่ถึงจอ ไม่ต้อง
   คำนวณผัง ไม่ต้องวาด ไม่ต้องเปลืองหน่วยความจำกราฟิก" — พอไถลงใกล้ถึงค่อยวาด
   เอฟเฟกต์ทุกอย่าง (แอนิเมชันตัววิ่ง/เงา/ฟิลเตอร์) ของการ์ดนอกจอหยุดทำงาน
   ให้เองอัตโนมัติด้วย นี่คือเครื่องมือมาตรฐานของหน้าฟีดยาว ๆ ที่มีสื่อหนัก
   (เฟซบุ๊ก/ทวิตเตอร์ใช้หลักการเดียวกัน) และไม่เปลี่ยนหน้าตาใด ๆ ทั้งสิ้น

   contain-intrinsic-size = ความสูงที่ให้ "จองที่ไว้ก่อน" ระหว่างยังไม่วาดจริง
   ค่า auto ข้างหน้าแปลว่า พอเคยวาดแล้วให้จำความสูงจริงไว้ใช้แทน — แถบเลื่อน
   จะได้ไม่กระโดดตอนไถกลับขึ้น

   เบราว์เซอร์เก่าที่ไม่รู้จักคำสั่งนี้จะข้ามบรรทัดเฉย ๆ ทุกอย่างเหมือนเดิม
   ปลอดภัย 100% (Chrome/Android รองรับมานานแล้ว ซึ่งตรงกับเครื่องที่เจออาการ)
   =========================================================================== */
.hub-mixed-feed .hub-feed-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px; /* ประมาณความสูงการ์ดทั่วไปในฟีดผสม */
}

/* แถวการ์ดบทความ (เลื่อนข้าง) — ใบที่ยังอยู่นอกจอด้านขวาก็ไม่ต้องวาดเช่นกัน */
.hub-article-row .hub-article-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 250px;
}

/* ===========================================================================
   🐞🐞 [แก้กระตุกรอบ 3 — เกราะชั้น CSS คู่กับการปอกสไตล์ใน hub.php]
   ---------------------------------------------------------------------------
   contain: paint = สั่งว่า "สีของการ์ดใบนี้ห้ามรั่วออกนอกกรอบ" เครื่องจึงวาด
   แต่ละใบจบในตัว ไม่ต้องเผื่อการผสมสีข้ามใบ — ถูกลงทันทีทั้งฟีด

   ส่วนกฎ !important ข้างล่างคือเข็มขัดนิรภัย: ต่อให้วันหน้ามีเครื่องมือใหม่
   แอบใส่การผสมสี/เบลอฉากหลังมากับก้อน fx ทางไหนก็ตาม (ผ่านคลาสหรือ inline)
   บนฮับจะถูกปิดเสมอ — หน้าโพสต์จริงไม่โดนกฎนี้ ยังเต็มยศเหมือนเดิม
   =========================================================================== */
.hub-mixed-feed .hub-feed-card { contain: paint; }
.hub-mixed-feed .fx-frame,
.hub-mixed-feed .fx-frame *,
.hub-mixed-feed .fx-dome,
.hub-mixed-feed .fx-dome * {
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ===========================================================================
   ☕ การ์ดสภากาแฟ LIVE — บทสนทนาเป็นบับเบิล + อีโมจิเกาะรูปโปรไฟล์
   [เพิ่ม 4 ก.ย. 2569 — เลนแม่บท 3]
   ---------------------------------------------------------------------------
   ใช้ span ทั้งหมดเพราะการ์ดทั้งใบเป็น <a> — <div> ซ้อนใน <a> ผิด HTML
   จึงต้องสั่ง display:flex/block ให้ span เอง
   =========================================================================== */
.hub-cafe-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface-2, #16151a);
    border: 1px solid var(--line, #2a2830);
}
.hub-cafe-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.hub-cafe-topic { font-size: .82rem; font-weight: 500; color: var(--text, #e8e6ea); }
.hub-cafe-live  { font-size: .62rem; color: #e2534f; white-space: nowrap; }

.hub-cafe-thread { display: flex; flex-direction: column; gap: 7px; }

/* บับเบิลชิดซ้ายทั้งหมดในการ์ดพรีวิว — ไม่สลับซ้ายขวาเหมือนในห้องจริง
   เพราะบนหน้าฮับคนดูยังไม่ได้เข้าห้อง จึงไม่มีแนวคิด "ข้อความของฉัน"
   (ในห้องจริง cafe.php สลับซ้าย/ขวาตามปกติ ไม่กระทบกัน) */
.hub-cafe-msg { display: flex; align-items: flex-start; gap: 7px; }

.hub-cafe-ava {
    position: relative;
    flex: 0 0 auto;
    width: 26px; height: 26px;
}
.hub-cafe-ava img,
.hub-cafe-ava-blank {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-3, #232128);
    color: var(--text-dim, #8b8892);
    font-size: .66rem;
}
/* อีโมจิเกาะมุมล่างขวา ชี้ออกนอกรูป ไม่ทับหน้าคน */
.hub-cafe-ava-emoji {
    position: absolute;
    right: -3px; bottom: -2px;
    font-size: .8rem;
    line-height: 1;
    pointer-events: none;
}
.hub-cafe-bubble {
    background: var(--surface-3, #232128);
    border-radius: 11px;
    border-top-left-radius: 3px;
    padding: 5px 9px;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--text, #e8e6ea);
    word-break: break-word;
}
.hub-cafe-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .64rem;
    color: var(--text-dim, #8b8892);
    margin-top: 2px;
}
.hub-cafe-join { color: var(--gold, #d8b45a); }

/* ===========================================================================
   🔮 การ์ดดวงรายวัน — [เพิ่ม 4 ก.ย. 2569 เลนแม่บท 3]
   ไพ่ใบเดิมทั้งวัน เปลี่ยนแค่ประโยคนำตามช่วงเวลา — ไม่มีปุ่มจั่วใหม่โดยตั้งใจ
   =========================================================================== */
.hub-fortune-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 14px;
    background: var(--surface-2, #16151a);
    border: 1px solid var(--line, #2a2830);
}
.hub-fortune-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hub-fortune-title { font-size: .82rem; font-weight: 500; color: var(--text, #e8e6ea); }
.hub-fortune-slot  { font-size: .62rem; color: var(--text-dim, #8b8892); }

.hub-fortune-body { display: flex; gap: 12px; align-items: flex-start; }
.hub-fortune-card-face {
    position: relative; flex: 0 0 auto;
    width: 54px; height: 84px; border-radius: 6px;
    background: var(--surface-3, #232128);
    display: flex; align-items: center; justify-content: center;
}
/* ไพ่กลับหัว = หมุนภาพ แต่ป้ายข้อความยังอ่านได้ปกติ
   (หลักการเดียวกับที่เกมทาโรต์ใช้ — ห้ามหมุนตัวหนังสือไปด้วย) */
.hub-fortune-card-face.is-reversed .hub-fortune-icon { transform: rotate(180deg); }
.hub-fortune-icon { font-size: 1.6rem; line-height: 1; }
.hub-fortune-rev {
    position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    font-size: .52rem; color: var(--text-dim, #8b8892); white-space: nowrap;
}
.hub-fortune-text { min-width: 0; }
.hub-fortune-lead    { font-size: .7rem;  color: var(--gold, #d8b45a); margin-bottom: 3px; }
.hub-fortune-name    { font-size: .82rem; font-weight: 500; color: var(--text, #e8e6ea); margin-bottom: 3px; }
.hub-fortune-meaning { font-size: .72rem; color: var(--text-dim, #b5b2ba); line-height: 1.55; }

.hub-fortune-remedy-btn {
    width: 100%; padding: 7px 10px;
    background: transparent; color: var(--gold, #d8b45a);
    border: 1px solid var(--line, #2a2830); border-radius: var(--radius-sm, 6px);
    font-size: .72rem; cursor: pointer;
}
.hub-fortune-remedy-btn:hover { border-color: var(--gold-dim, #6b5a2e); }
.hub-fortune-remedy-inner { display: flex; gap: 10px; align-items: flex-start; padding-top: 4px; }
.hub-fortune-remedy-icon  { font-size: 1.2rem; line-height: 1; flex: 0 0 auto; }
.hub-fortune-remedy-title { font-size: .74rem; font-weight: 500; color: var(--text, #e8e6ea); margin-bottom: 3px; }
.hub-fortune-remedy-body  { font-size: .7rem; color: var(--text-dim, #b5b2ba); line-height: 1.55; white-space: pre-line; }
.hub-fortune-remedy-fallback { font-size: .66rem; color: var(--text-dim, #8b8892); line-height: 1.5; margin-top: 5px; }
/* คำกำกับความรับผิดชอบ — ต้องอยู่เสมอ ห้ามซ่อน */
.hub-fortune-remedy-note { font-size: .6rem; color: var(--text-dim, #77747d); line-height: 1.5; margin-top: 6px; }
/* [เพิ่ม 24 ก.ย. 2569 — LANE-PATH] บรรทัดใบ้ฤๅษี แยกจากคำทำนาย/ทางแก้ จงใจให้จาง/ลึกลับกว่า */
.rishi-hint-line { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line, rgba(148,163,184,.25));
  font-size: .66rem; color: var(--text-mute, #6f6360); line-height: 1.7; font-style: italic;
  display: flex; gap: 6px; align-items: flex-start; }
.rishi-hint-line .rishi-hint-ico { flex: 0 0 auto; opacity: .6; }
.hub-fortune-remedy-err  { font-size: .7rem; color: #e2534f; }


/* ===========================================================================
   [เพิ่ม 5 ก.ย. 2569 — หัวหน้าใหญ่ ตามคำสั่งเจ้าของ] หัว M HUB ชิดซ้าย +
   กิจกรรมประจำวันแบบย่อ (บรรทัดเดียวต่อกิจกรรม) + ระยะห่างแต่ละบล็อกเท่ากัน
   เป็นคลาสเสริมทั้งหมด — ไม่แก้ .hub-head/.hub-quest-* เดิม ถอยกลับได้โดยลบคลาสออก
   =========================================================================== */
.hub-head.hub-head--left { text-align: left; padding: 10px 0 0; }
.hub-head.hub-head--left h1 { font-size: 1.5rem; letter-spacing: .02em; }
.hub-head.hub-head--left p { font-size: .85rem; }

/* ระยะห่างระหว่าง หัว → กิจกรรม → เรื่องแนะนำ ให้เท่ากัน (18px) */
.hub-head.hub-head--left + * { margin-top: 18px; }
.hub-quest-panel--compact { margin: 18px 0; }

/* กิจกรรมแบบย่อ: 1 บรรทัด = ไอคอน · ชื่อ+คำอธิบาย · แถบความคืบหน้า · ผล */
.hub-quest-panel--compact .hub-quest-list { gap: 6px; margin-top: 8px; }
.hub-quest-panel--compact .hub-quest-item {
    padding: 7px 10px; gap: 10px; align-items: center; border-radius: 10px;
}
.hub-quest-panel--compact .hub-quest-icon { font-size: 1.15rem; }
.hub-quest-panel--compact .hub-quest-body {
    display: grid; grid-template-columns: minmax(0, 1fr) 90px auto;
    grid-template-areas: "title bar meta" "desc bar meta"; column-gap: 10px; row-gap: 0;
    align-items: center;
}
.hub-quest-panel--compact .hub-quest-title { grid-area: title; font-size: .82rem; }
.hub-quest-panel--compact .hub-quest-desc  { grid-area: desc;  font-size: .7rem; margin-top: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-quest-panel--compact .hub-quest-progress { grid-area: bar; margin: 0; height: 5px; }
.hub-quest-panel--compact .hub-quest-meta { grid-area: meta; margin-top: 0; font-size: .7rem;
    white-space: nowrap; text-align: right; }
.hub-quest-panel--compact .hub-quest-final { font-size: .62rem; padding: 1px 6px; }
@media (max-width: 480px) {
    /* จอแคบ: ซ่อนคำอธิบายบรรทัดสอง เหลือชื่อ+แถบ+ผล ยังอ่านครบ 5 ข้อได้ */
    .hub-quest-panel--compact .hub-quest-body { grid-template-columns: minmax(0, 1fr) 64px auto; grid-template-areas: "title bar meta"; }
    .hub-quest-panel--compact .hub-quest-desc { display: none; }
}

/* [เพิ่ม 6 ก.ย. 2569] ดวงรายวัน — โหมดเลือกไพ่เอง (ไพ่คว่ำ) */
.hub-fortune-pick-fan { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px 0 4px; }
.hub-fortune-pick-back {
    width: 40px; height: 62px; border-radius: 7px; cursor: pointer; color: rgba(212,175,55,.6);
    border: 1px solid rgba(212,175,55,.45); font-size: 1rem;
    background: repeating-linear-gradient(45deg, rgba(212,175,55,.10) 0 4px, transparent 4px 8px), linear-gradient(160deg,#2a1a24,#140c12);
    transition: transform .15s, border-color .15s;
}
.hub-fortune-pick-back:hover, .hub-fortune-pick-back:focus-visible { transform: translateY(-5px); border-color: #f472b6; }
.hub-fortune-pick-back:disabled { opacity: .35; cursor: default; transform: none; }
.hub-fortune-pick-err { font-size: .72rem; color: #e2534f; text-align: center; }

/* ===========================================================================
   [เพิ่ม 8 ก.ย. 2569 — แชทแม่บทที่ 4 ตามที่เจ้าของสั่ง] ดวงรายวัน: รูปไพ่จริง + กางไพ่ทางแก้ให้เลือก
   เพิ่มต่อท้ายไฟล์อย่างเดียว ไม่แตะกฎเดิม (ไฟล์นี้เลนฮับเป็นเจ้าของ)
   =========================================================================== */
/* รูปไพ่จริงในช่องหน้าไพ่ — ขนาดตามกล่องเดิม 54x84 ไม่ขยับ layout */
.hub-fortune-img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
/* ไพ่กลับหัว = หมุนรูปด้วย หลักการเดียวกับไอคอน (ห้ามหมุนตัวหนังสือ) */
.hub-fortune-card-face.is-reversed .hub-fortune-img { transform: rotate(180deg); }
/* รูปไพ่ทางแก้ที่เลือกแล้ว — โชว์ในกล่องผล */
.hub-fortune-remedy-img { width: 44px; height: 68px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; }
/* ตารางไพ่คว่ำให้เลือก — 4 ใบต่อแถวบนมือถือ กดง่าย ไม่เล็กเกิน */
.hub-fortune-oracle-hint { font-size: .84rem; color: var(--text-dim, #a1938c); margin: 6px 0 8px; }
.hub-fortune-oracle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 560px) { .hub-fortune-oracle-grid { grid-template-columns: repeat(6, 1fr); } }
.hub-fortune-oracle-card {
    position: relative; aspect-ratio: 54 / 84; border-radius: 6px; padding: 0; overflow: hidden;
    border: 1px solid var(--line, #2e2323); background: var(--surface-3, #232128);
    cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
    display: flex; align-items: center; justify-content: center;
}
.hub-fortune-oracle-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-fortune-oracle-back { position: absolute; font-size: 1.3rem; pointer-events: none; }
.hub-fortune-oracle-card img + .hub-fortune-oracle-back { display: none; }   /* มีรูปหลังไพ่ = ซ่อนอีโมจิ */
.hub-fortune-oracle-card img[style*="display: none"] + .hub-fortune-oracle-back { display: block; }
.hub-fortune-oracle-card:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(212,175,55,.25); }
.hub-fortune-oracle-card:disabled { opacity: .45; cursor: default; }
.hub-fortune-oracle-card.is-picked { opacity: 1; border-color: var(--gold, #d4af37); box-shadow: 0 0 0 2px var(--gold, #d4af37); }


/* ===========================================================================
   [8 ก.ย. 2569 — เลนฟีด · เจ้าของเคาะ] 🔮 บล็อกไพ่ทาโรต์ใต้กิจกรรมประจำวัน + การ์ดจับคู่
   =========================================================================== */
.hub-fortune-block { margin: 6px 0 16px; }
.hub-fortune-block .hub-mixed-feed { margin-top: 0; }
.hub-fortune-fold { border: 1px solid var(--gold-dim); border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #1e1810, var(--surface)); }
.hub-fortune-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; font-size: .92rem; color: var(--text); }
.hub-fortune-fold > summary::-webkit-details-marker { display: none; }
.hub-fortune-fold > summary b { color: var(--gold-soft); }
.hub-fortune-fold-hint { margin-left: auto; font-size: .75rem; color: var(--text-mute); }
.hub-fortune-fold[open] .hub-fortune-fold-hint { visibility: hidden; }
.hub-fortune-fold-body { padding: 0 .6rem .6rem; }
/* การ์ดเว็บที่มาจับคู่การ์ดเดี่ยว — ทรงเดียวกับการ์ดเวทีอื่น */
.hub-pair-card .fwc { margin: 0; height: 100%; box-shadow: none; }

/* [เพิ่ม 12 ก.ย. 2569 — แม่บท 4/2] ทางแก้ที่เลือกไว้แล้ว วาดค้างตั้งแต่โหลดหน้า (ไม่มีปุ่มกดอีก) */
.hub-fortune-remedy--open { margin-top: .7rem; }
.hub-fortune-remedy-chosen { display: inline-block; font-size: .66rem; font-weight: 400; color: var(--gold-soft, #f0d98a);
  border: 1px solid var(--gold-dim, #8a7128); border-radius: 999px; padding: 1px 7px; vertical-align: middle; margin-left: .3rem; }
.hub-fortune-slot { border: 1px solid var(--line, #2e2323); border-radius: 999px; padding: 2px 8px; }

/* ===== [17 ก.ย. 2569 — ซิป 110] 🧭 รู้จัก mes789 + 📣 แถบเชิญชวน (ม็อคอัพ mockup-hub-guide-and-ticker ผ่าน) ===== */
.hub-guide { background: linear-gradient(160deg, #1e1712, #141010); border: 1px solid rgba(212, 175, 55, .45); border-radius: 16px; margin: 0 0 14px; overflow: hidden; }
.hub-guide-head { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: none; border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.hub-guide-head strong { color: #f0d98a; font-size: 1rem; display: block; }
.hub-guide-head small { color: #a1938c; font-size: .78rem; display: block; margin-top: 2px; }
.hub-guide-arrow { color: #a1938c; font-size: 1.1rem; transition: transform .25s; }
.hub-guide.is-folded .hub-guide-arrow { transform: rotate(-90deg); }
.hub-guide.is-folded .hub-guide-rail { display: none; }
.hub-guide-rail { display: flex; gap: 10px; overflow-x: auto; padding: 0 14px 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.hub-guide-card { flex: 0 0 190px; scroll-snap-align: start; background: #1a1415; border: 1px solid #3a2f2a; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.hub-guide-card.is-tip { border-color: rgba(212, 175, 55, .5); background: #1d1712; }
.hub-guide-ic { font-size: 1.7rem; }
.hub-guide-card b { font-size: .95rem; }
.hub-guide-card p { margin: 0; color: #a1938c; font-size: .8rem; line-height: 1.45; flex: 1; }
.hub-guide-card a { align-self: flex-start; background: #d4af37; color: #1a1310; border-radius: 9px; padding: 6px 11px; font-size: .82rem; font-weight: 700; text-decoration: none; }
.hub-invite { display: flex; gap: 8px; align-items: center; background: #161112; border: 1px solid #3a2f2a; border-radius: 14px; padding: 10px 14px; margin: 0 0 14px; }
.hub-invite-text { flex: 1; font-size: .92rem; min-height: 1.4em; position: relative; }
.hub-invite-line { display: none; }
.hub-invite-line.is-on { display: block; animation: hub-invite-in .35s ease; }
.hub-invite-live { color: #f0d98a; }
@keyframes hub-invite-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hub-invite-line.is-on { animation: none; } }

/* [ซิป 110 · schema/160] หัวหมวดเควสแรกเข้า (once) ใต้เควสรายวัน */
.hub-quest-once-head { margin: 10px 0 4px; font-size: .88rem; color: #f0d98a; font-weight: 700; }
.hub-quest-once-head .muted { color: #a1938c; font-weight: 400; font-size: .78rem; margin-left: 6px; }

/* 📖 [25 ต.ค. 2569] 2 ปุ่มใต้หัว M HUB + ขยับหัวเข้ามาจากขอบซ้าย (เฉพาะ .hub-head--left ที่ใช้แค่ใน hub.php) */
.hub-head.hub-head--left { padding-left: 14px; padding-right: 14px; }
/* [25 ต.ค. 16:47 · มติเจ้าของ] ปุ่มอยู่บรรทัดเดียวกับ "M HUB / สังคมแห่งโซเชียล" ชิดขวา · จอแคบมากค่อยตกลงบรรทัดใต้ */
.hub-head.hub-head--left { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hub-head-text { min-width: 0; }
.hub-head-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; justify-content: flex-end; margin-left: auto; }
@media (max-width: 420px) { .hub-head-btns { margin-left: 0; justify-content: flex-start; } }
.hub-head-btn { border: 1px solid var(--gold-dim); border-radius: 999px; padding: 4px 12px; font-size: .82rem; color: var(--gold-soft); text-decoration: none; background: rgba(212, 175, 55, .08); }