/* Community Page */
.cm-main { background: var(--surface-page); min-height: calc(100vh - 120px); }

.cm-page-header { margin-bottom: 16px; padding-top: 12px; }
.cm-page-header h1 { font-size: 22px; font-weight: var(--font-bold); color: var(--gray-900); margin: 0 0 2px; }
.cm-page-header p { font-size: var(--text-sm); color: var(--gray-500); margin: 0; }

/* Composer */
.cm-composer { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.cm-composer-row { display: flex; gap: 10px; }
.cm-composer-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cm-composer-body { flex: 1; min-width: 0; }
.cm-composer-title { width: 100%; padding: 6px 0; border: none; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: var(--font-semibold); font-family: var(--font-family); color: var(--gray-900); margin-bottom: 6px; outline: none; }
.cm-composer-title::placeholder { color: var(--gray-400); font-weight: normal; }
/* Rich text toolbar */
.cm-rt-toolbar {
    display: flex; align-items: center; gap: 1px; padding: 3px 4px;
    background: var(--gray-100); border-radius: 6px; margin-bottom: 8px;
}
.cm-rt-toolbar button, .cm-rt-btn {
    background: none; border: none; color: var(--gray-500); cursor: pointer;
    padding: 5px 7px; border-radius: 4px; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.1s;
}
.cm-rt-toolbar button:hover, .cm-rt-btn:hover { background: var(--white); color: var(--gray-900); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.cm-rt-sep { width: 1px; height: 18px; background: var(--gray-300); margin: 0 3px; }

/* Editor area */
.cm-composer-editor {
    min-height: 80px; max-height: 300px; overflow-y: auto;
    padding: 10px 12px; font-size: 14px; font-family: var(--font-family); color: var(--gray-800);
    line-height: 1.7; outline: none;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--white);
}
.cm-composer-editor:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.cm-composer-editor:empty::before { content: attr(data-placeholder); color: var(--gray-400); pointer-events: none; }
.cm-composer-editor img { max-width: 100%; max-height: 300px; border-radius: 6px; margin: 6px 0; display: block; }
.cm-composer-editor a { color: var(--primary); }
.cm-composer-editor ul, .cm-composer-editor ol { padding-left: 20px; margin: 4px 0; }

/* Emoji picker */
.cm-emoji-picker { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 6px; max-height: 180px; overflow-y: auto; }
.cm-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.cm-emoji-btn { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px; border-radius: 4px; text-align: center; }
.cm-emoji-btn:hover { background: var(--gray-100); }
.cm-composer-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.cm-composer-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cm-tool-btn { cursor: pointer; color: var(--gray-400); font-size: 16px; padding: 4px; }
.cm-tool-btn:hover { color: var(--primary); }
.cm-category-select { padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; font-family: var(--font-family); color: var(--gray-600); }
.cm-tags-input { padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; width: 120px; font-family: var(--font-family); }
.cm-composer-loc { font-size: 10px; color: var(--gray-400); align-items: center; gap: 3px; margin-left: auto; }
.cm-composer-loc i { font-size: 9px; }

.cm-image-preview { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cm-img-thumb { width: 60px; height: 60px; border-radius: 6px; background-size: cover; background-position: center; position: relative; }
.cm-img-remove { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: #fff; border: none; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.cm-login-prompt { text-align: center; padding: 14px; background: var(--gray-100); border-radius: 8px; margin-bottom: 14px; font-size: 13px; color: var(--gray-500); }
.cm-login-prompt a { color: var(--primary); font-weight: var(--font-semibold); }

/* Filters — sticky on scroll */
/* Sticky filter bar.
   top: --cf-h is the flat header's real height, published by chrome-flat.css and
   measured, not guessed. The old --header-height token says 56px while the flat
   header renders at 75px, so the bar was tucking 19px underneath it. The
   fallback chain keeps the old arm on its own token.
   The background must be opaque or post text scrolls through the bar — it was
   transparent in the flat arm, where nothing re-declared the grey below. */
.cm-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
  position: sticky; top: var(--cf-h, var(--header-height, 56px)); z-index: 20;
  background: var(--surface-page, #F9FAFB); padding: 10px 0 12px; transition: box-shadow .15s; }
/* The rule earns its place only while the bar is floating over content; sitting
   in normal flow it already has a post card beneath it. .is-stuck is set by an
   IntersectionObserver sentinel in community.js. */
.cm-filters.is-stuck { box-shadow: 0 6px 0 -5px var(--border, #E5E7EB); }
.cm-filters-sentinel { height: 1px; margin: 0; padding: 0; }
.cm-filters.stuck { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

/* Floating new-post bar — shows when scrolling up */
.cm-float-composer { position: sticky; top: calc(var(--header-height, 56px) + 46px); z-index: 19; display: none; margin-bottom: 10px; }
.cm-float-composer.visible { display: flex; }
.cm-float-composer-inner { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; transition: border-color 0.15s; }
.cm-float-composer-inner:hover { border-color: var(--primary); }
.cm-float-composer-inner img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.cm-float-composer-inner span { flex: 1; font-size: 13px; color: var(--gray-400); }
.cm-float-composer-inner .btn { flex-shrink: 0; }
.cm-tabs { display: flex; gap: 4px; }
.cm-tab { padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; background: var(--white); color: var(--gray-600); cursor: pointer; font-family: var(--font-family); }
.cm-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.cm-search-wrap { position: relative; flex: 1; min-width: 100px; }
.cm-search-wrap i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 12px; }
.cm-search-input { width: 100%; padding: 6px 8px 6px 28px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: var(--font-family); }

/* Post Cards (feed) */
.cm-post-card { display: block; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; text-decoration: none; color: inherit; transition: border-color 0.15s; }
.cm-post-card:hover { border-color: var(--primary); }
.cm-pc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cm-pc-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cm-pc-author { flex: 1; min-width: 0; }
.cm-pc-name { font-size: 13px; font-weight: var(--font-semibold); color: var(--gray-900); display: block; }
.cm-pc-meta { font-size: 10px; color: var(--gray-400); }
.cm-cat-badge { font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: var(--font-semibold); flex-shrink: 0; }
.cm-cat-discussion { background: #DBEAFE; color: #1E40AF; }
.cm-cat-question { background: #FEF3C7; color: #92400E; }
.cm-cat-resource { background: #D1FAE5; color: #065F46; }
.cm-cat-announcement { background: #FEE2E2; color: #991B1B; }
.cm-pc-title { font-size: 15px; font-weight: var(--font-bold); color: var(--gray-900); margin-bottom: 4px; line-height: 1.3; }
.cm-pc-content { font-size: 13px; color: var(--gray-600); line-height: 1.5; margin-bottom: 6px; }
/* Image grid: 1 = full, 2 = side-by-side, 3 = 1 big + 2 small */
.cm-pc-images {
    display: grid !important;
    gap: 4px;
    margin-bottom: 8px;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}
.cm-pc-images.img-1 { grid-template-columns: 1fr !important; }
.cm-pc-images.img-2 { grid-template-columns: 1fr 1fr !important; }
.cm-pc-images.img-3 { grid-template-columns: 1fr 1fr !important; }
.cm-pc-images.img-3 .cm-pc-img:first-child { grid-column: 1 / -1 !important; }
.cm-pc-img {
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: var(--gray-200);
    border-radius: 0;
    min-height: 100px;
}
.cm-pc-images.img-1 .cm-pc-img { height: 280px !important; }
.cm-pc-images.img-2 .cm-pc-img { height: 200px !important; }
.cm-pc-images.img-3 .cm-pc-img:first-child { height: 220px !important; }
.cm-pc-images.img-3 .cm-pc-img:not(:first-child) { height: 140px !important; }

/* Post detail page images — full size */
.cm-post-images {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.cm-post-images img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
    border-radius: 10px;
    cursor: pointer;
}
.cm-pc-footer { display: flex; gap: 12px; font-size: 11px; color: var(--gray-400); }

/* Post Detail */
.cm-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-500); text-decoration: none; margin-bottom: 14px; }
.cm-back:hover { color: var(--primary); }
.cm-post-detail { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.cm-post-author { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.cm-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cm-author-name { font-size: 14px; font-weight: var(--font-semibold); color: var(--gray-900); }
.cm-post-meta-line { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--gray-400); flex-wrap: wrap; }
.cm-time { color: var(--gray-400); }
.cm-loc { color: var(--gray-400); }
.cm-post-title { font-size: 20px; font-weight: var(--font-bold); color: var(--gray-900); margin-bottom: 10px; line-height: 1.3; }
.cm-post-content { font-size: 14px; color: var(--gray-700); line-height: 1.8; margin-bottom: 12px; white-space: pre-wrap; word-break: break-word; }

/* YouTube embed */
.cm-yt-embed { position: relative; padding-bottom: 56.25%; height: 0; margin: 12px 0; border-radius: 8px; overflow: hidden; background: var(--gray-100); }
.cm-yt-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* URL links in posts */
.cm-url-link { color: var(--primary); word-break: break-all; }
.cm-url-link:hover { text-decoration: underline; }

/* YouTube thumbnail in feed cards */
.cm-pc-yt-thumb { position: relative; width: 100%; border-radius: 8px; overflow: hidden; margin-top: 8px; background: var(--gray-100); aspect-ratio: 16/9; }
.cm-pc-yt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cm-pc-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(0,0,0,0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; pointer-events: none; }
.cm-post-images { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cm-post-images img { max-width: 100%; max-height: 400px; border-radius: 8px; cursor: pointer; object-fit: cover; }
.cm-post-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cm-tag { font-size: 11px; color: var(--primary); text-decoration: none; background: var(--primary-lighter, #EFF6FF); padding: 2px 8px; border-radius: 4px; }
.cm-tag:hover { background: var(--primary-light, #DBEAFE); }
.cm-post-stats { display: flex; gap: 12px; font-size: 12px; color: var(--gray-400); padding-top: 10px; border-top: 1px solid var(--border); }
.cm-delete-btn { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 11px; }
.cm-delete-btn:hover { color: var(--error); }

/* Responses */
.cm-responses-section { margin-bottom: 20px; }
.cm-responses-title { font-size: 15px; font-weight: var(--font-bold); color: var(--gray-900); margin-bottom: 12px; }
.cm-reply-form { display: flex; gap: 8px; margin-bottom: 14px; }
.cm-reply-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cm-reply-body { flex: 1; }
.cm-reply-body textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: var(--font-family); resize: vertical; margin-bottom: 6px; }
.cm-response { display: flex; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cm-response:last-child { border-bottom: none; }
.cm-response-header { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.cm-response-header strong { font-size: 12px; color: var(--gray-900); }
.cm-response-content { font-size: 13px; color: var(--gray-700); line-height: 1.6; white-space: pre-wrap; }
.cm-empty-responses { text-align: center; padding: 20px; color: var(--gray-400); font-size: 13px; }

/* Inline notice */
.cm-notice { padding: 8px 14px; border-radius: 6px; font-size: 12px; margin-top: 8px; animation: cmFadeIn 0.2s; }
.cm-notice-error { background: #FEE2E2; color: #991B1B; }
.cm-notice-success { background: #D1FAE5; color: #065F46; }
@keyframes cmFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Loading & Empty */
.cm-loading { text-align: center; padding: 20px; color: var(--gray-400); font-size: 13px; }
.cm-empty-feed { text-align: center; padding: 40px 20px; color: var(--gray-400); font-size: 14px; }

/* Responsive */
@media (max-width: 768px) {
    .cm-page-header h1 { font-size: 18px; }
    .cm-composer { padding: 10px; }
    .cm-composer-avatar { width: 30px; height: 30px; }
    .cm-composer-row { flex-direction: column; gap: 8px; }
    .cm-composer-row .cm-composer-avatar { display: none; }
    .cm-composer-title { font-size: 13px; }
    .cm-rt-toolbar { gap: 2px; }
    .cm-rt-toolbar button, .cm-rt-btn { padding: 4px 6px; font-size: 12px; }
    .cm-composer-editor { min-height: 60px; font-size: 13px; padding: 8px 10px; }
    /* The footer used to become a column here, which is why Đăng sat alone on
       a row of its own at the bottom. Instead let everything wrap in ONE
       context: .cm-composer-tools becomes display:contents so its controls are
       direct flex items of the footer, and the location — which is a note, not
       a control — is ordered last onto its own line. Đăng then follows the
       visibility select and shares its row. */
    .cm-composer-footer { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    .cm-composer-tools { display: contents; }
    .cm-category-select { flex: 1 1 40%; min-width: 0; }
    .cm-tags-input { flex: 1 1 45%; min-width: 0; width: auto; }
    #postVisibility { flex: 1 1 auto; min-width: 0; }
    #postBtn { flex: 0 0 auto; margin-left: auto; }
    .cm-composer-loc { order: 99; flex: 1 1 100%; margin-left: 0; }

    /* Icon only, so it stays on the toolbar's row instead of wrapping under it.
       The title attribute still carries the words for anyone who hovers, and
       the icon is the same expand glyph used in the long editor. */
    .cm-rt-long { padding: 4px 8px; }
    .cm-rt-long-t { display: none; }
    .cm-filters { flex-direction: column; gap: 6px; }
    .cm-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .cm-tab { flex-shrink: 0; }
    .cm-search-wrap { width: 100%; }
    .cm-post-card { padding: 12px; }
    .cm-pc-avatar { width: 28px; height: 28px; }
    .cm-post-detail { padding: 14px; }
    .cm-post-title { font-size: 17px; }
    .cm-post-content { font-size: 13px; }
}

/* ============================================================
   Document attachments — composer preview + feed/detail chips
   ============================================================ */

/* Composer preview row (sits below the image preview) */
.cm-doc-preview {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 6px;
}
.cm-doc-preview:empty { display: none; }

/* Download chip — used in composer preview AND feed/detail render */
.cm-doc-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--gray-100, #F9FAFB);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--radius, 6px);
    text-decoration: none; color: var(--gray-800, #374151);
    font-size: 13px; line-height: 1.3;
    transition: background 0.15s, border-color 0.15s;
    max-width: 100%;
}
.cm-doc-chip:hover {
    background: var(--primary-lighter, #EFF6FF);
    border-color: var(--primary-light, #DBEAFE);
    color: var(--gray-900, #1F2937);
}

/* File-type icon color */
.cm-doc-chip > i.fa-file-pdf { color: #DC2626; font-size: 18px; flex-shrink: 0; }
.cm-doc-chip > i.fa-file-powerpoint { color: var(--accent, #D97706); font-size: 18px; flex-shrink: 0; }

.cm-doc-name {
    font-weight: 600; color: var(--gray-900, #1F2937);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.cm-doc-size {
    color: var(--gray-500, #9CA3AF); font-size: 12px; flex-shrink: 0;
}
.cm-doc-dl {
    color: var(--gray-400, #D1D5DB); font-size: 12px; flex-shrink: 0;
    margin-left: 4px;
}
.cm-doc-chip:hover .cm-doc-dl { color: var(--primary, #2563EB); }

/* Remove "x" button in composer preview (only present while pending) */
.cm-doc-remove {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--error, #DC2626); color: #FFF;
    border: none; font-size: 14px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-left: 4px;
    padding: 0;
}
.cm-doc-remove:hover { background: #991B1B; }

/* Feed/detail render wrapper */
.cm-post-docs {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .cm-doc-chip { padding: 8px 10px; font-size: 12px; }
    .cm-doc-chip > i.fa-file-pdf,
    .cm-doc-chip > i.fa-file-powerpoint { font-size: 16px; }
}

/* ============================================================
   Document preview modal — inline PDF viewer / PPT fallback
   ============================================================ */

.cm-doc-modal {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(17, 24, 39, 0.72);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
.cm-doc-modal.is-open { display: flex; }

.cm-doc-modal-shell {
    width: 100%; max-width: 960px; height: 90vh; max-height: 900px;
    background: var(--white, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    display: flex; flex-direction: column; overflow: hidden;
}

.cm-doc-modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--border, #E5E7EB);
    background: var(--white, #FFF);
    flex-shrink: 0;
}
.cm-doc-modal-meta {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.cm-doc-modal-icon { font-size: 22px; flex-shrink: 0; }
.cm-doc-modal-icon.fa-file-pdf { color: #DC2626; }
.cm-doc-modal-icon.fa-file-powerpoint { color: var(--accent, #D97706); }

.cm-doc-modal-fname {
    font-weight: 600; color: var(--gray-900, #1F2937); font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.cm-doc-modal-fsize {
    color: var(--gray-500, #9CA3AF); font-size: 12px; flex-shrink: 0;
}

.cm-doc-modal-actions {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.cm-doc-modal-close {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--gray-100, #F9FAFB); color: var(--gray-600, #6B7280);
    border: none; font-size: 20px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.cm-doc-modal-close:hover { background: var(--gray-200, #F3F4F6); color: var(--gray-900, #1F2937); }

.cm-doc-modal-body {
    flex: 1; min-height: 0;
    background: var(--gray-100, #F9FAFB);
    position: relative; overflow: hidden;
}
.cm-doc-modal-iframe {
    width: 100%; height: 100%; border: none; display: block;
    background: #FFFFFF;
}

.cm-doc-modal-fallback {
    height: 100%; padding: 40px 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; text-align: center;
}
.cm-doc-modal-fallback > i {
    font-size: 56px; color: var(--accent, #D97706); opacity: 0.85;
}
.cm-doc-modal-fallback > p {
    max-width: 480px; font-size: 14px; line-height: 1.55;
    color: var(--gray-700, #4B5563); margin: 0;
}

@media (max-width: 600px) {
    .cm-doc-modal { padding: 0; }
    .cm-doc-modal-shell { height: 100vh; max-height: 100vh; border-radius: 0; max-width: 100%; }
    .cm-doc-modal-head { padding: 10px 12px; }
    .cm-doc-modal-fname { font-size: 13px; }
    .cm-doc-modal-fsize { display: none; }
    .cm-doc-modal-actions .btn { padding: 6px 10px; font-size: 12px; }
}

/* ── entry points on the feed and the post page ─────────────────────────────
   These live here, not in community-write.css: they render on the feed and the
   post page, and those two never load the editor's stylesheet — putting them
   there meant the controls appeared unstyled everywhere they actually exist. */
/* "Bài dài" lives at the far end of the formatting toolbar (option C): opening a
   bigger editor is an editing command, and the footer had no room left — the
   location string and the Đăng button were already competing for that row. */
.cm-rt-spacer { flex: 1 1 auto; }
.cm-rt-long { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 600; text-decoration: none; color: var(--gray-600, #4B5563);
  padding: 4px 10px; border: 1px solid var(--border, #E5E7EB); border-radius: 6px;
  white-space: nowrap; }
.cm-rt-long:hover { color: var(--primary, #2563EB); border-color: var(--primary, #2563EB);
  text-decoration: none; }
.cm-rt-toolbar { flex-wrap: wrap; }

/* Two children now — the meta controls and the post button — so space-between
   does the right thing again and the location can sit at the end of the tools
   without colliding with anything. */
.cm-composer-footer { gap: 12px; flex-wrap: wrap; }
.cm-composer-tools { flex: 1 1 auto; min-width: 0; }
.cm-edit-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  text-decoration:none;color:#0a0a0a;border:1px solid #e6e6e6;padding:5px 11px;border-radius:6px}
.cm-edit-btn:hover{border-color:#0a0a0a;text-decoration:none;color:#0a0a0a}
.cm-vis-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:#a15c00;border:1px solid #a15c00;padding:4px 10px;border-radius:6px}

/* ── post actions ───────────────────────────────────────────────────────────
   One right-aligned cluster. Before this only the delete button carried
   margin-left:auto, so it sat hard against the edge while "Sửa" stayed beside
   the view counter and the two read as unrelated controls. */
.cm-post-stats { align-items: center; flex-wrap: wrap; }
.cm-post-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-act { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  line-height: 1; padding: 7px 13px; border: 1px solid var(--border, #E5E7EB); border-radius: 8px;
  background: #fff; color: var(--gray-700, #374151); cursor: pointer; text-decoration: none;
  font-family: inherit; }
.cm-act:hover { border-color: var(--gray-900, #111827); color: var(--gray-900, #111827);
  text-decoration: none; }
.cm-act:focus-visible { outline: 2px solid var(--primary, #2563EB); outline-offset: 2px; }
.cm-act[disabled] { opacity: .6; cursor: default; }
.cm-act-danger { color: #B42318; border-color: #f0c9c4; }
.cm-act-danger:hover { background: #B42318; border-color: #B42318; color: #fff; }

/* The confirmation replaces the button in place, so the answer appears exactly
   where the question was asked. */
.cm-confirm { display: inline-flex; align-items: center; }
/* [hidden] is display:none at (0,1,0) from the UA sheet, so any display rule on
   these elements outranks it and the confirmation renders open on page load —
   next to the very button meant to summon it. Same trap as the lazy-load
   sentinel on meet-offline; guard the display rule instead of adding another. */
.cm-confirm-ask:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; }
.cm-confirm [hidden] { display: none !important; }
.cm-confirm-q { font-size: 12.5px; font-weight: 600; color: var(--gray-700, #374151); }

/* ── rich post bodies ───────────────────────────────────────────────────────
   .cm-post-content is white-space:pre-wrap because a plain-text post stores its
   line breaks as real newlines. Rich HTML has newlines BETWEEN its tags as well,
   and under pre-wrap each one becomes a blank line stacked on top of the element
   margins — which is why a post looked correctly spaced in the editor and
   loose on the page. Rich bodies opt out and get real typographic rhythm. */
.cm-post-content.is-rich { white-space: normal; }
.cm-post-content.is-rich > *:first-child { margin-top: 0; }
.cm-post-content.is-rich > *:last-child { margin-bottom: 0; }
.cm-post-content.is-rich p { margin: 0 0 15px; }
.cm-post-content.is-rich h2 { font-size: 20px; font-weight: 700; line-height: 1.3;
  color: var(--gray-900, #111827); margin: 28px 0 10px; }
.cm-post-content.is-rich h3 { font-size: 17px; font-weight: 700; line-height: 1.35;
  color: var(--gray-900, #111827); margin: 24px 0 8px; }
.cm-post-content.is-rich h4 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; }
.cm-post-content.is-rich ul,
.cm-post-content.is-rich ol { margin: 0 0 15px; padding-left: 24px; }
.cm-post-content.is-rich li { margin-bottom: 7px; }
.cm-post-content.is-rich li > p { margin: 0; }
.cm-post-content.is-rich blockquote { margin: 18px 0; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--border, #E5E7EB); color: var(--gray-600, #4B5563); }
.cm-post-content.is-rich hr { border: 0; border-top: 1px solid var(--border, #E5E7EB);
  margin: 26px 0; }
.cm-post-content.is-rich code { background: var(--gray-100, #F3F4F6); padding: 2px 6px;
  border-radius: 4px; font-size: 13px; }
.cm-post-content.is-rich pre { background: var(--gray-50, #F9FAFB);
  border: 1px solid var(--border, #E5E7EB); border-radius: 8px; padding: 14px;
  overflow-x: auto; margin: 0 0 15px; }
.cm-post-content.is-rich pre code { background: none; padding: 0; }
.cm-post-content.is-rich a { color: var(--primary, #2563EB); }

/* ── feed + sidebar ─────────────────────────────────────────────────────────
   One column until 840px, two above it. The sidebar is display:none on mobile
   rather than stacked below the feed: three supplementary boxes placed after
   twenty posts are scrolled past by almost everyone, while still costing the
   queries on the device least able to afford them. */
.cm-with-side { display: block; }
.cm-with-side-main { min-width: 0; }
.cm-side { display: none; }

@media (min-width: 840px) {
  .cm-with-side { display: grid; grid-template-columns: minmax(0,1fr) 296px; gap: 24px;
                  align-items: start; }
  .cm-side { display: flex; flex-direction: column; gap: 16px;
             position: sticky; top: calc(var(--cf-h, 64px) + 16px); }
}

.cm-side-box { border: 1px solid var(--border, #E5E7EB); border-radius: 10px; overflow: hidden;
               background: #fff; }
.cm-side-h { display: flex; align-items: center; gap: 8px; padding: 10px 13px;
  border-bottom: 1px solid var(--border, #E5E7EB); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 800; color: var(--gray-700, #374151); }
.cm-side-h i { color: var(--gray-400, #9CA3AF); }
.cm-side-row { display: flex; gap: 10px; padding: 10px 13px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--gray-100, #F3F4F6); }
.cm-side-row:last-child { border-bottom: 0; }
.cm-side-row:hover { background: var(--gray-50, #F9FAFB); text-decoration: none; }
.cm-side-rank { flex: 0 0 14px; font-size: 12px; font-weight: 800; line-height: 1.45;
  color: var(--gray-400, #9CA3AF); font-variant-numeric: tabular-nums; }
.cm-side-t { display: block; font-size: 13px; font-weight: 600; line-height: 1.4;
  letter-spacing: -.01em; color: var(--gray-900, #111827); }
.cm-side-m { display: block; font-size: 11px; color: var(--gray-500, #6B7280); margin-top: 3px;
  font-variant-numeric: tabular-nums; }

/* The pin toggle drives a sidebar that does not exist on mobile, so the control
   goes with it rather than sitting there doing something invisible. */
.cm-act-pin { display: none; }
@media (min-width: 840px) { .cm-act-pin { display: inline-flex; } }
.cm-act-pin.is-on { background: var(--gray-900, #111827); border-color: var(--gray-900, #111827);
  color: #fff; }
.cm-act-pin.is-on:hover { background: #000; color: #fff; }

/* ── collapsed composer ─────────────────────────────────────────────────────
   The expanded markup is hidden, never removed, so community.js still finds
   every id it binds to at page load. */
.cm-composer { display: none; }
.cm-composer.is-open { display: block; }
.cm-collapsed { display: flex; align-items: center; gap: 12px; }
.cm-collapsed[hidden] { display: none; }
.cm-collapsed-bar { flex: 1 1 auto; min-width: 0; text-align: left; font: inherit;
  font-size: 15px; color: var(--gray-400, #9CA3AF); background: var(--gray-50, #F9FAFB);
  border: 1px solid var(--border, #E5E7EB); border-radius: 999px; padding: 11px 18px;
  cursor: text; }
.cm-collapsed-bar:hover { background: #fff; border-color: var(--gray-900, #111827);
  color: var(--gray-600, #4B5563); }
.cm-collapsed-bar:focus-visible { outline: 2px solid var(--primary, #2563EB); outline-offset: 2px; }
.cm-collapsed-long { flex: 0 0 auto; }
/* Dragging a file over the bar says it is a target. */
.cm-collapsed.is-drop .cm-collapsed-bar { border-color: var(--primary, #2563EB);
  background: var(--primary-light, #DBEAFE); color: var(--primary, #2563EB); }
@media (max-width: 768px) { .cm-collapsed-long .cm-rt-long-t { display: none; } }