/* ThaiSkillUp CommentHub */
.ch-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%); color: #f8fafc; }
.ch-badge { background: rgba(99, 102, 241, 0.25); color: #c7d2fe; font-weight: 600; }
.ch-hero-title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; }
.ch-hero-lead { color: #cbd5e1; max-width: 36rem; }

.ch-tab {
    display: inline-flex; align-items: center; padding: 0.4rem 1rem; border-radius: 999px;
    text-decoration: none; color: #64748b; font-weight: 600; font-size: 0.9rem;
    border: 1px solid transparent;
}
.ch-tab:hover { color: #0f172a; background: #f1f5f9; }
.ch-tab.active { background: #0f172a; color: #fff; }

.ch-room-card {
    display: block; background: #fff; border-radius: 1rem; overflow: hidden;
    border: 1px solid #e2e8f0; transition: transform 0.15s, box-shadow 0.15s; height: 100%;
}
.ch-room-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1); color: inherit; }

.ch-room-cover {
    aspect-ratio: 16/9; background: #f1f5f9 center/cover no-repeat; position: relative;
}
.ch-room-cover-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 2.5rem; }
.ch-room-type { position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(15,23,42,0.75); color: #fff; }

.ch-room-body { padding: 1rem 1.1rem 1.2rem; }
.ch-room-title { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 0.35rem; line-height: 1.35; }
.ch-room-desc { font-size: 0.85rem; color: #64748b; margin-bottom: 0.5rem; }
.ch-room-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.78rem; color: #94a3b8; }

.ch-form-card { border-radius: 1rem; border: 1px solid #e2e8f0; }
.ch-comment-box { border-radius: 1rem; }
.ch-comment { border-radius: 0.85rem; }
.ch-comment-body { line-height: 1.55; }

.ch-spoiler-wrap .ch-spoiler-hidden { padding: 0.5rem 0; }
.ch-detail-cover { border-radius: 1rem; }
.ch-detail-cover img { aspect-ratio: 16/9; object-fit: cover; }

.ch-preview-banner { border-radius: 0.75rem; background: #f8fafc !important; }
.ch-guest-comment-preview textarea:disabled { cursor: not-allowed; }

@media (max-width: 575.98px) {
    .ch-room-meta { gap: 0.5rem; }
}