/*
 * toon.css — ชั้นบนสุดของธีม "ครามน่ารัก" (โหลดหลัง soft.css ทั้งหน้าแรก + หน้าข่าว)
 *   1) เต็มจอขึ้น: หน้าแรกกว้างถึง 1680px, หน้าข่าว 1440px (คอลัมน์อ่านยังไม่ยาวเกินจนอ่านยาก)
 *   2) ตัวหนังสือใหญ่ขึ้นทุกการ์ด
 *   3) cel-shade: ขอบเข้ม + เงาแข็งแบบการ์ตูน (ไม่ฟุ้ง) + แถบสีหมวดบนการ์ด (--cat จาก index_core.js getCatPastel)
 *   4) หัวข้อแต่ละส่วนคนละสี + ตัวการ์ตูนเกาะหัวข้อ (assets/brand/pets)
 * แก้แล้วเพิ่ม ?v= ใน index.php และ topic_template.php (Cloudflare cache css)
 */
:root {
    --tn-ink: #0c0f1c;                 /* เส้นขอบการ์ตูน */
    --tn-pop: 0 5px 0 var(--tn-ink), 0 12px 26px rgba(5, 8, 20, .35);
    --tn-pop-h: 0 9px 0 var(--tn-ink), 0 18px 34px rgba(5, 8, 20, .45);
}

/* ───────────── 1) ความกว้าง ───────────── */
.pg-home .main-container { max-width: none !important; width: 100% !important; padding: 0 clamp(8px, 1.2vw, 20px) !important; box-sizing: border-box; }
.pg-home .content-wrapper { padding: 20px 0 !important; }
@media (min-width: 1200px) {
    .pg-home .main-content { grid-template-columns: minmax(260px, 1fr) minmax(0, 2.4fr) minmax(300px, 1.1fr) !important; gap: clamp(16px, 1.4vw, 28px) !important; }
}
.pg-home .ah-header, .pg-home .hl2-wrap { max-width: none !important; }

.pg-topic .main-container { max-width: min(1760px, 100%) !important; grid-template-columns: minmax(0, 1fr) 340px !important; gap: 26px !important; }
.pg-topic .topic-page-header-wrapper .ah-header,
.pg-topic .topic-page-header-wrapper .hl2-wrap { max-width: min(1760px, 100%) !important; }
@media (max-width: 1024px) { .pg-topic .main-container { grid-template-columns: 1fr !important; } }

/* ───────────── 2) ตัวหนังสือ ───────────── */
.pg-home, .pg-topic { font-size: 17px; }
.pg-home .main-title { font-size: clamp(20px, 1.6vw, 26px) !important; line-height: 1.35 !important; }
.pg-home .main-description { font-size: 15.5px !important; line-height: 1.6 !important; }
.pg-home .double-title { font-size: 17px !important; line-height: 1.4 !important; }
.pg-home .double-description { font-size: 14.5px !important; }
.pg-home .left-title, .pg-home .right-title { font-size: 15px !important; line-height: 1.45 !important; }
.pg-home .left-meta, .pg-home .right-meta, .pg-home .double-meta { font-size: 12.5px !important; }
.pg-home .mfeed-hero-title { font-size: 21px !important; line-height: 1.35 !important; }
.pg-home .mfeed-row-title { font-size: 16px !important; line-height: 1.4 !important; }
.pg-home .mfeed-hero-desc { font-size: 15px !important; }
.pg-topic .ai-summary { font-size: 18px; }
.pg-topic .ai-summary p:not([style*="font-size"]) { font-size: 1.06rem; }

/* ───────────── 3) การ์ด cel-shade + สีหมวด ───────────── */
.pg-home .main-card, .pg-home .double-card, .pg-home .left-card, .pg-home .right-card, .pg-home .mfeed-card {
    border: 2px solid var(--tn-ink) !important;
    border-top: 6px solid var(--cat, var(--sf-mint)) !important;
    box-shadow: var(--tn-pop) !important;
    border-radius: 18px !important;
    transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s !important;
}
.pg-home .main-card:hover, .pg-home .double-card:hover, .pg-home .left-card:hover, .pg-home .right-card:hover, .pg-home .mfeed-card:hover {
    transform: translateY(-4px) rotate(-.25deg) !important;
    box-shadow: var(--tn-pop-h) !important;
}
.pg-home .main-card:hover .main-title, .pg-home .double-card:hover .double-title,
.pg-home .left-card:hover .left-title, .pg-home .right-card:hover .right-title { color: var(--cat, var(--sf-mint)) !important; }
/* ป้ายหมวด = สติกเกอร์การ์ตูน: สีหมวด + ขอบเข้ม + เงาแข็ง */
.pg-home .card-category-badge:not(.an-gold-badge), .pg-home .mfeed-row-tag:not(.an-gold-badge) {
    background: var(--cat, var(--sf-mint)) !important;
    color: #1b2033 !important;
    border: 2px solid var(--tn-ink) !important;
    box-shadow: 2px 3px 0 var(--tn-ink) !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}
.pg-home .main-card .hashtag-tag, .pg-home .double-card .hashtag-tag {
    background: color-mix(in srgb, var(--cat, #8fdcc6) 16%, transparent) !important;
    color: var(--cat, var(--sf-mint)) !important;
    border: 1px solid color-mix(in srgb, var(--cat, #8fdcc6) 45%, transparent) !important;
}
.pg-home .source-dot { background: var(--cat) !important; box-shadow: 0 0 0 2px var(--tn-ink); }

/* ───────────── 4) กล่องหัวข้อ: คนละสี + ตัวการ์ตูน ───────────── */
.pg-home .left-sidebar, .pg-home .right-sidebar {
    border: 2px solid var(--tn-ink) !important;
    box-shadow: var(--tn-pop) !important;
    border-radius: 20px !important;
    position: relative;
    overflow: visible !important;
}
.pg-home .left-sidebar  { border-top: 6px solid var(--sf-mint) !important; }
.pg-home .right-sidebar { border-top: 6px solid var(--sf-sakura) !important; }
.pg-home .left-sidebar > h3, .pg-home .right-sidebar > h3 {
    position: relative;
    font-size: 1.05rem !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    border-bottom: 0 !important;
    padding: 6px 70px 6px 0 !important;
    text-shadow: 0 2px 0 var(--tn-ink);
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}
.pg-home .left-sidebar > h3  { color: var(--sf-mint) !important; }
.pg-home .right-sidebar > h3 { color: var(--sf-sakura) !important; }
.pg-home .left-sidebar > h3::after, .pg-home .right-sidebar > h3::after {
    content: ''; position: absolute; right: -6px; bottom: -8px; width: 72px; height: 72px;
    background: center / contain no-repeat; pointer-events: none;
    filter: drop-shadow(2px 3px 0 var(--tn-ink));
    animation: tnBob 3.4s ease-in-out infinite;
}
.pg-home .left-sidebar > h3::after  { background-image: url('/assets/brand/pets/robocat-news.webp'); }
.pg-home .right-sidebar > h3::after { background-image: url('/assets/brand/pets/robocat-megaphone.webp'); animation-delay: -1.2s; }
@keyframes tnBob { 50% { transform: translateY(-5px) rotate(3deg); } }

/* หัว "กระทู้น่าสนใจ" — ตัวหนังสือการ์ตูน (สีเนย) */
.pg-home .fhx-title { font-size: 1.35rem !important; color: var(--sf-butter) !important; text-shadow: 0 3px 0 var(--tn-ink); }
.pg-home .fhx-eyebrow { color: var(--sf-butter) !important; }
.pg-home .fhx-hero, .pg-home .fhx-sk-col, .pg-home #fhxLeftCol {
    border: 2px solid var(--tn-ink) !important;
    box-shadow: var(--tn-pop) !important;
}
.pg-home .fhx-hero { border-top: 6px solid var(--sf-butter) !important; }

/* แถบสถิติ / แถบข่าววิ่ง ให้เข้าชุด */
.pg-home .lp-bar, .pg-home .lv-ticker, .pg-home .trending-ribbon {
    border: 2px solid var(--tn-ink) !important;
    box-shadow: 0 3px 0 var(--tn-ink) !important;
}
.pg-home .lv-ticker { margin-top: -2px !important; }

/* ปุ่ม/แท็บทั่วไปในหน้า: กดแล้วยุบแบบปุ่มการ์ตูน */
.pg-home .fhx-all-link, .pg-home .lv-tab.on {
    border: 2px solid var(--tn-ink) !important;
    box-shadow: 2px 3px 0 var(--tn-ink) !important;
}

/* หน้าข่าว: การ์ดข้างขวา/กล่องเนื้อหาเข้าชุด cel-shade */
.pg-topic .sidebar-card {
    border: 2px solid var(--tn-ink) !important;
    box-shadow: var(--tn-pop) !important;
    border-radius: 18px !important;
}
.pg-topic .rt-sidebar-card { border-top: 6px solid var(--sf-mint) !important; }
.pg-topic .jp-tags-card { border-top: 6px solid var(--sf-sakura) !important; }

@media (prefers-reduced-motion: reduce) {
    .pg-home .left-sidebar > h3::after, .pg-home .right-sidebar > h3::after { animation: none; }
}
@media (max-width: 768px) {
    .pg-home .main-card, .pg-home .double-card, .pg-home .left-card, .pg-home .right-card, .pg-home .mfeed-card { box-shadow: 0 4px 0 var(--tn-ink) !important; }
    .pg-home .left-sidebar > h3::after, .pg-home .right-sidebar > h3::after { width: 56px; height: 56px; }
}

/* หน้าข่าวจอกว้าง: กล่องบทความ (inline max-width 760px) ขยายตามคอลัมน์ แต่ไม่เกิน 980px ให้บรรทัดยังอ่านสบาย */
.pg-topic .ai-summary > div[style*="max-width"] { max-width: 980px !important; }

/* ───────────── 5) ลูกเล่น (fun.js) ───────────── */
/* กล่องคำพูดของน้องการ์ตูน */
.fn-bubble{position:absolute;z-index:9998;width:260px;box-sizing:border-box;padding:10px 14px;border-radius:16px;background:#fffdf5;color:#1b2033;font:700 14px/1.45 'Sarabun',sans-serif;
  border:2px solid var(--tn-ink);box-shadow:3px 4px 0 var(--tn-ink);transform:translateY(-100%) scale(.6);opacity:0;pointer-events:none;transition:transform .22s cubic-bezier(.3,1.7,.5,1),opacity .18s}
.fn-bubble::after{content:'';position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:#fffdf5;border-right:2px solid var(--tn-ink);border-bottom:2px solid var(--tn-ink);transform:translateX(-50%) rotate(45deg)}
.fn-bubble.on{opacity:1;transform:translateY(calc(-100% - 6px)) scale(1)}
/* กดแล้วกระโดด */
.fn-hop{animation:fnHop .55s cubic-bezier(.3,1.6,.5,1)!important}
@keyframes fnHop{0%{transform:translateY(0) scale(1,1)}25%{transform:translateY(2px) scale(1.12,.86)}55%{transform:translateY(-22px) scale(.92,1.1) rotate(-6deg)}80%{transform:translateY(0) scale(1.06,.94)}100%{transform:none}}
/* เด้งเข้ามาตอนเลื่อนถึง */
.fn-pre{opacity:0;transform:translateY(18px) scale(.98)}
.fn-in{opacity:1;transform:none;transition:opacity .45s ease,transform .5s cubic-bezier(.3,1.5,.5,1)}
/* การ์ดข่าวใหม่ (มีป้าย "ใหม่"): ขอบบนวิ่งเป็นแสงสีหมวด */
.pg-home .main-card:has(.card-new-badge), .pg-home .double-card:has(.card-new-badge),
.pg-home .left-card:has(.card-new-badge), .pg-home .right-card:has(.card-new-badge), .pg-home .mfeed-card:has(.card-new-badge) {
    border-top-color: transparent !important;
    background-image: linear-gradient(var(--sf-card, #232a3e), var(--sf-card, #232a3e)), linear-gradient(90deg, var(--cat, #8fdcc6), #fff, var(--cat, #8fdcc6)) !important;
    background-origin: border-box !important; background-clip: padding-box, border-box !important;
    background-size: 100% 100%, 200% 100% !important;
    animation: tnShine 2.6s linear infinite;
}
@keyframes tnShine { to { background-position: 0 0, -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fn-pre { opacity: 1; transform: none; } .pg-home [class*="-card"]:has(.card-new-badge) { animation: none; } }

/* ───────────── 6) กระทู้น่าสนใจ: แต่ละกระทู้คนละสีตามหมวด (--tc จาก index_forum_hot.php topicOf) ───────────── */
.pg-home #fhxLeftCol { background: linear-gradient(180deg, var(--sf-card-2), var(--sf-card)) !important; padding: 6px 0 8px; }
.pg-home .fhx-group { display: flex; flex-direction: column; gap: 7px; padding: 0 10px; }
.pg-home .fhx-row {
    border: 2px solid transparent !important; border-left: 6px solid var(--tc, var(--sf-lav)) !important;
    border-radius: 14px; padding: 9px 12px !important; gap: 12px !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--tc, #bdb5f5) 18%, transparent), color-mix(in srgb, var(--tc, #bdb5f5) 5%, transparent) 75%) !important;
    transition: transform .16s cubic-bezier(.3,1.6,.5,1), box-shadow .16s, border-color .16s !important;
}
.pg-home .fhx-row::before { display: none !important; }
.pg-home .fhx-row:hover {
    transform: translateX(4px) rotate(-.3deg);
    border-color: var(--tn-ink) !important; border-left-color: var(--tc) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--tc, #bdb5f5) 28%, transparent), color-mix(in srgb, var(--tc, #bdb5f5) 10%, transparent) 80%) !important;
    box-shadow: 3px 4px 0 var(--tn-ink);
}
.pg-home .fhx-ico {
    display: grid !important; place-items: center; width: 36px !important; height: 36px; font-size: 1.1rem !important;
    border-radius: 50%; background: var(--tc, #bdb5f5); border: 2px solid var(--tn-ink); box-shadow: 2px 3px 0 var(--tn-ink);
}
.pg-home .fhx-row:hover .fhx-ico { animation: tnWiggle .5s ease; }
@keyframes tnWiggle { 25% { transform: rotate(-14deg) scale(1.12); } 60% { transform: rotate(10deg) scale(1.05); } }
.pg-home .fhx-rtitle { font-size: .95rem !important; font-weight: 700 !important; color: var(--sf-ink) !important; }
.pg-home .fhx-row:hover .fhx-rtitle { color: var(--tc) !important; }
.pg-home .fhx-rmeta { font-size: .74rem !important; gap: 6px !important; }
.pg-home .fhx-tag {
    font-size: .68rem; font-weight: 800; padding: 1px 8px; border-radius: 999px;
    background: var(--tc); color: #1b2033; border: 1.5px solid var(--tn-ink);
}
.pg-home .fhx-rreply { color: var(--tc) !important; }
/* กระทู้ใหม่ล่าสุด (การ์ดใหญ่บนสุด) */
.pg-home .fhx-featured {
    margin: 4px 10px 8px !important; border-radius: 18px !important; border: 2px solid var(--tn-ink) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tc, #8fdcc6) 34%, var(--sf-card)) 0%, color-mix(in srgb, var(--tc, #8fdcc6) 10%, var(--sf-card)) 70%) !important;
    box-shadow: 0 4px 0 var(--tn-ink) !important; transition: transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s !important;
}
.pg-home .fhx-featured:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: 0 7px 0 var(--tn-ink) !important; }
.pg-home .fhx-feat-bar { background: var(--tc) !important; height: 5px !important; }
.pg-home .fhx-feat-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tc); border: 2px solid var(--tn-ink); box-shadow: 2px 3px 0 var(--tn-ink); font-size: 1.25rem; }
.pg-home .fhx-feat-pin { background: var(--tc) !important; color: #1b2033 !important; border: 1.5px solid var(--tn-ink); font-weight: 800 !important; }
.pg-home .fhx-feat-title { font-size: 1.08rem !important; color: var(--sf-ink) !important; }
.pg-home .fhx-feat-reply { color: var(--tc) !important; }
.pg-home .fhx-glabel { padding: 6px 12px 2px !important; }