/* community.css — trang cộng đồng + hội viên (v39). Dùng biến màu của styles.css. */

.cm-main { padding: 24px 0 64px; }

/* ── Tabs điều hướng cộng đồng (trần 5 mục kiểu Skool) ── */
.cm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 20px; }
.cm-tabs a { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: inherit; border: 1px solid rgba(0,0,0,.12); background: #fff; font-weight: 600; font-size: 14px; }
.cm-tabs a.on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* ── Trang bán ── */
.cm-hero { text-align: center; max-width: 760px; margin: 24px auto 8px; }
.cm-hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 12px; }
.cm-lead { font-size: 17px; color: rgba(0,0,0,.72); }
.cm-counter { display: inline-block; margin: 16px auto; padding: 10px 18px; border-radius: 999px; background: #fff3e6; border: 1px solid #f4a261; font-size: 14px; }
.cm-hero__alt { margin: 8px 0 0; font-size: 14px; color: rgba(0,0,0,.6); }
.cm-hero__alt a { color: inherit; text-decoration: underline; }
.cm-sec { margin: 40px 0; }
.cm-sec h2 { font-size: 24px; margin: 0 0 16px; }

.cm-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
.cm-tier { position: relative; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; }
.cm-tier--hot { border: 2px solid #f47c30; box-shadow: 0 6px 24px rgba(244,124,48,.15); }
.cm-tier__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #f47c30; color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cm-tier h3 { margin: 0 0 4px; font-size: 20px; }
.cm-tier__tag { margin: 0 0 12px; color: rgba(0,0,0,.6); font-size: 14px; min-height: 2.6em; }
.cm-tier__price { font-size: 28px; font-weight: 800; }
.cm-tier__price span { font-size: 14px; font-weight: 600; color: rgba(0,0,0,.55); }
.cm-tier__was { font-size: 13px; color: rgba(0,0,0,.55); margin-top: 2px; }
.cm-tier ul { margin: 14px 0 18px; padding-left: 18px; font-size: 14px; line-height: 1.7; flex: 1; }
.cm-tier__cta { width: 100%; text-align: center; }

.cm-dwy { margin: 24px 0; padding: 16px 20px; border-left: 4px solid #f47c30; background: #fff; border-radius: 0 12px 12px 0; }
.cm-dwy p { margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: rgba(0,0,0,.75); }

/* 3 cột × 2 hàng (6 space) trên desktop — quyết định 2026-08-24; hẹp dần 2 → 1 cột. */
.cm-spacegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .cm-spacegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cm-spacegrid { grid-template-columns: 1fr; } }
.cm-spacecard { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.cm-spacecard__emoji { font-size: 24px; }
.cm-spacecard__name { font-weight: 700; }
.cm-spacecard__desc { font-size: 13px; color: rgba(0,0,0,.6); }
.cm-lock { font-size: 12px; color: #a05a00; background: #fff3e6; border-radius: 999px; padding: 2px 10px; align-self: flex-start; }

.cm-faq details { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
.cm-faq summary { font-weight: 700; cursor: pointer; }
.cm-faq p { margin: 10px 0 2px; font-size: 14px; line-height: 1.7; }

/* ── Trang chủ cộng đồng ── */
.cm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .cm-layout { grid-template-columns: 1fr; } }
.cm-feedhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cm-feedhead h1 { margin: 0; font-size: 24px; }
.cm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cm-chip { padding: 6px 12px; border-radius: 999px; font-size: 13px; text-decoration: none; color: inherit; background: #fff; border: 1px solid rgba(0,0,0,.12); }
.cm-chip.on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.cm-chip.locked { opacity: .65; }

/* Thẻ bài trong feed.

   CẢ THẺ bấm được, không chỉ dòng tiêu đề. Cách làm: `.cm-post__title::after` phủ kín thẻ —
   vẫn đúng MỘT thẻ <a> trong DOM, nên trình đọc màn hình nghe tên bài chứ không nghe cả đoạn
   tóm tắt làm nhãn link, và người dùng bàn phím vẫn Tab đúng một lần cho mỗi bài.
   Đổi lại: mọi link THẬT bên trong thẻ (tên tác giả) phải nổi lên trên lớp phủ đó bằng
   position:relative + z-index, nếu không sẽ bị lớp phủ nuốt mất. */
.cm-post { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cm-post:hover { border-color: rgba(0,0,0,.28); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.cm-post:has(.cm-post__title:focus-visible) { outline: 2px solid #f47c30; outline-offset: 2px; }
.cm-post--pinned { border-color: #f4a261; background: #fffdf7; }
.cm-pin { font-size: 12px; color: #a05a00; font-weight: 700; }
/* Bài có ảnh: chữ bên trái, thumbnail bên phải (khổ 16:9 như thẻ recording). */
.cm-post--thumbed { display: grid; grid-template-columns: minmax(0,1fr) 148px; grid-template-areas: "pin pin" "main thumb" "stats stats"; gap: 0 16px; }
.cm-post--thumbed .cm-pin { grid-area: pin; }
.cm-post--thumbed .cm-post__main { grid-area: main; }
.cm-post--thumbed .cm-post__stats { grid-area: stats; }
.cm-post__thumb { grid-area: thumb; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #f2f2f2; }
.cm-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) { .cm-post--thumbed { grid-template-columns: minmax(0,1fr) 96px; } }
.cm-post__title { display: block; font-size: 17px; font-weight: 700; color: inherit; text-decoration: none; margin: 2px 0 6px; }
.cm-post__title::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.cm-post:hover .cm-post__title { text-decoration: underline; }
.cm-post__h1 { font-size: 24px; margin: 2px 0 8px; display: inline; }
.cm-post__meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(0,0,0,.6); flex-wrap: wrap; }
.cm-post__meta a { color: inherit; position: relative; z-index: 1; }
.cm-ava { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.cm-ava--ph { display: inline-grid; place-items: center; background: #eee; font-size: 12px; }
.cm-space-chip { background: #f5efd9; border-radius: 999px; padding: 1px 8px; }
/* Tóm tắt là CHỮ THUẦN, cắt bằng CSS chứ không cắt chuỗi — không bao giờ hở thẻ giữa chừng. */
.cm-post__excerpt { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: rgba(0,0,0,.8); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cm-post__body { margin-top: 8px; font-size: 14px; line-height: 1.7; color: rgba(0,0,0,.8); overflow-wrap: anywhere; }
.cm-post__body--full { font-size: 15px; }
.cm-post__stats { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(0,0,0,.55); flex-wrap: wrap; }
.cm-stat { background: #f6f6f6; border-radius: 999px; padding: 3px 10px; }
.cm-stat--fresh { background: #eaf2ff; color: #14509a; font-weight: 600; }
/* Lời mời bấm — hiện mờ, rõ lên khi rê chuột. Nó là dấu hiệu, không phải nút thứ hai. */
.cm-post__more { margin-left: auto; font-weight: 600; color: rgba(0,0,0,.45); transition: color .15s; }
.cm-post:hover .cm-post__more { color: #f47c30; }
.cm-badge { font-size: 12px; background: #e8f4ea; color: #1d6b30; border-radius: 999px; padding: 2px 10px; }
.cm-badge--pending { background: #fff3e6; color: #a05a00; }

/* Bù chiều cao thanh app (app.css đặt --app-bar-h). Bản cũ để top:16px trần, tính cho trang
   KHÔNG có header dính — nên rail vẫn trượt xuống DƯỚI thanh nav marketing (sticky, z-index 50).
   Trang marketing không nạp app.css nên biến không có, fallback 0px giữ nguyên hành vi cũ. */
.cm-rail { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--app-bar-h, 0px) + 16px); }
.cm-card { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.cm-card h3 { margin: 0 0 10px; font-size: 15px; }
.cm-card h2 { margin: 0 0 10px; font-size: 19px; }
.cm-card__row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 0; border-top: 1px dashed rgba(0,0,0,.08); }
.cm-card__row:first-of-type { border-top: 0; }
.cm-card__row a { color: inherit; font-weight: 600; }
.cm-card__row span:last-child { color: rgba(0,0,0,.55); white-space: nowrap; }
.cm-card--focus { border: 2px solid #f47c30; }
.cm-muted { color: rgba(0,0,0,.55); font-size: 13px; }
.cm-empty { background: #fff; border: 1px dashed rgba(0,0,0,.2); border-radius: 12px; padding: 32px; text-align: center; color: rgba(0,0,0,.6); }
.cm-lockpanel { background: #fff; border: 1px solid #f4a261; border-radius: 12px; padding: 32px; text-align: center; }
.cm-pager { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 2px; }

.cm-narrow { max-width: 760px; margin: 0 auto; }
.cm-back { display: inline-block; margin-bottom: 12px; font-size: 14px; color: inherit; }
.cm-comments h2 { font-size: 18px; margin: 20px 0 10px; }
/* Bình luận = BONG BÓNG xám, avatar NGOÀI bên trái. Bản cũ là thẻ trắng viền tròn y hệt
   thẻ bài, nên nhìn lướt không phân biệt được bài với lời bàn. */
.cm-comment { display: flex; gap: 10px; margin-bottom: 12px; background: none; border: 0; padding: 0; }
.cm-comment > .cm-ava { width: 34px; height: 34px; flex: none; }
.cm-comment__main { flex: 1; min-width: 0; }
.cm-bubble { background: #f2f2f0; border-radius: 14px; padding: 9px 14px; }
.cm-bubble__head { font-size: 13px; color: rgba(0,0,0,.55); margin-bottom: 2px; }
.cm-bubble__head a, .cm-bubble__head > span:first-child { font-weight: 700; color: rgba(0,0,0,.85); text-decoration: none; }
.cm-comment__foot { display: flex; align-items: center; gap: 16px; padding: 5px 8px 0; }
.cm-mention { color: #1668c7; font-weight: 600; }
.cm-comment__body { font-size: 14px; line-height: 1.7; margin-top: 6px; overflow-wrap: anywhere; }
.cm-replylink { font-size: 13px; color: rgba(0,0,0,.55); text-decoration: none; }

.cm-composer { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 16px 18px; margin-top: 14px; }
.cm-composer label { font-weight: 700; font-size: 14px; }
.cm-composer input, .cm-composer textarea, .cm-composer select { padding: 10px 12px; border: 1px solid rgba(0,0,0,.18); border-radius: 8px; font: inherit; }
.cm-composer button { align-self: flex-start; }

.cm-terms { display: flex; flex-direction: column; gap: 8px; }
.cm-term { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 10px; cursor: pointer; background: #fff; }
.cm-term:has(input:checked) { border-color: #f47c30; background: #fff8f2; }
.cm-terms .btn { align-self: flex-start; margin-top: 6px; }
.cm-mine { border: 2px solid #1a1a1a; }

/* ── Lớp học /cong-dong/khoa-hoc (v40) ────────────────────────────────────────
   Thẻ dùng chung .ev-card/.ev-grid với /su-kien + danh mục khóa học (styles.css mục 24) —
   một thẻ, mọi trang. Ở đây CHỈ thêm hai thứ .ev-card không có: thanh tiến độ, và trạng
   thái "khóa" kiểu Skool. Tất cả là class CON của thẻ, không sửa .ev-card, nên ba trang
   kia không bị đụng. */
.cm-classroom { display: flex; flex-direction: column; gap: 8px; }
.cm-classroom .cm-feedhead { margin-bottom: 6px; }

/* Thanh tiến độ trong thân thẻ — cùng ngôn ngữ với .course-track ở portal tài khoản. */
.cm-ccbar { display: block; height: 6px; border-radius: 999px; background: rgba(0,0,0,.1); overflow: hidden; margin-top: 4px; }
.cm-ccbar__fill { display: block; height: 100%; background: #f47c30; border-radius: 999px; }

/* Thẻ KHÓA: mờ + bìa xám như .ev-card.is-past, nhưng KHÔNG có hiệu ứng hover — nó là <div>,
   không bấm được cả thẻ. Lối ra duy nhất là nút nâng gói bên dưới, nên nó phải nổi lên. */
.cm-cclocked { opacity: .72; }
.cm-cclocked:hover { transform: none; box-shadow: none; }
/* Bìa thật là <img>; khóa chưa có bìa thì cover-template.ts dựng .cover-ph (inline-style,
   KHÔNG phải .ev-ph của thẻ sự kiện) — phải xám cả hai, không thì thẻ khóa nào chưa có ảnh
   vẫn rực cam như thẻ mở được. */
.cm-cclocked .ev-card__media img,
.cm-cclocked .cover-ph { filter: grayscale(.7); }
.cm-cclocked__cta {
  align-self: flex-start; margin-top: auto; padding-top: 8px;
  font-size: .88rem; font-weight: 800; color: #d9651c; text-decoration: none;
}
.cm-cclocked__cta:hover { text-decoration: underline; }
.cm-cclocked__cta:focus-visible { outline: 2px solid #f47c30; outline-offset: 3px; border-radius: 4px; }

/* Thanh "bạn đang là hội viên" trên trang bán — cửa vào portal, không phải redirect. */
.cm-memberbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff8f2; border: 1.5px solid #f47c30; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 24px; font-size: 15px;
}

/* Dải "Đã là hội viên?" trên trang bán — lối ĐĂNG NHẬP CHÍNH của hội viên cũ từ 2026-08-27,
   khi menu chính bỏ mục "Đăng nhập". Nhẹ đô có chủ ý: nó nằm ngay dưới hero, mà hero còn
   phải bán cho người chưa biết gì — to bằng CTA mua là dựng rào ngay câu đầu tiên. */
.cm-signin {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  max-width: 720px; margin: 0 auto 8px; padding: 12px 18px;
  border: 1px solid var(--line, #e5dfc8); border-radius: 12px;
  background: #fff; font-size: .94rem;
}
.cm-signin span { color: var(--muted, #6b6455); }
@media (max-width: 560px) { .cm-signin { flex-direction: column; text-align: center; gap: 10px; } }

/* ── Recording /cong-dong/recording (v43) ─────────────────────────────────────
   Lưới thẻ dùng chung .ev-card/.ev-grid với Lớp học và /su-kien; thẻ khoá tái dùng nguyên
   .cm-cclocked ở trên (mờ + bìa xám + không hover). Ở đây CHỈ thêm ba thứ: tỉ lệ bìa 16:9,
   nút play trên bìa thẻ mở được, và khung player 16:9 của trang chi tiết — portal không nạp
   courses.css nên .pl-video bên đó không dùng lại được. */

/* Bìa 16:9, KHÔNG phải 1:1 của .ev-card__media dùng chung. Thẻ recording là thẻ VIDEO —
   khung vuông cắt mất hai bên của mọi khung hình 16:9, mà bìa recording thường chính là một
   frame lấy từ video (slide, mặt người nói) nên cắt là mất đúng phần mang thông tin.
   Ghi đè có PHẠM VI (.cm-recgrid), không sửa .ev-card__media: khung vuông vẫn đúng cho poster
   sự kiện và bìa khoá học — ba lưới đó dùng chung một class. */
.cm-recgrid .ev-card__media { aspect-ratio: 16 / 9; }

/* Huy hiệu play GÓC DƯỚI-TRÁI, không phải lớp phủ giữa bìa: bìa mặc định là placeholder có
   TÊN BUỔI in giữa, nên một glyph ▶ đặt chính giữa vừa đè lên chữ vừa chìm nghỉm trên các mẫu
   nền sáng (kem, sọc cam). Nền tối + viền sáng để nó đọc được trên cả 8 mẫu bìa lẫn ảnh thật. */
.cm-recplay {
  position: absolute; left: 10px; bottom: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; line-height: 1; color: #fff;
  background: rgba(10,10,10,.72); border: 1.5px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  padding-left: 2px; /* bù trọng tâm hình tam giác */
  pointer-events: none;
}
.cm-video {
  position: relative; width: 100%; aspect-ratio: 16/9; margin-bottom: 18px;
  border: 2px solid #1a1a1a; border-radius: 14px; overflow: hidden; background: #000;
}
.cm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cm-rectitle { font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 6px; }
/* "▶ Xem lại" ở /cong-dong/lich — cạnh tên sự kiện, phải đọc ra ngay là một hành động khác. */
.cm-replay { font-size: 13px; font-weight: 800; color: #d9651c; text-decoration: none; white-space: nowrap; }
.cm-replay:hover { text-decoration: underline; }

/* ── Nội dung rich text (bài + bình luận) ──────────────────────────────────────────────
   HTML ở đây do renderRichText() sinh từ Markdown rút gọn — danh sách thẻ đúng bằng danh
   sách thẻ file đó viết ra. Thêm thẻ mới ở đó thì thêm luật ở đây, không có chỗ thứ ba. */
.cm-rich > *:first-child { margin-top: 0; }
.cm-rich > *:last-child { margin-bottom: 0; }
.cm-rich p { margin: 0 0 12px; }
.cm-rich h2 { font-size: 20px; margin: 22px 0 8px; }
.cm-rich h3 { font-size: 17px; margin: 18px 0 6px; }
.cm-rich h4, .cm-rich h5, .cm-rich h6 { font-size: 15px; margin: 16px 0 6px; }
.cm-rich ul, .cm-rich ol { margin: 0 0 12px; padding-left: 24px; }
.cm-rich li { margin: 3px 0; }
.cm-rich blockquote { margin: 0 0 12px; padding: 6px 0 6px 14px; border-left: 3px solid #f4a261; color: rgba(0,0,0,.7); }
.cm-rich code { background: rgba(0,0,0,.06); border-radius: 4px; padding: 1px 5px; font-size: .92em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cm-rich pre { background: #1e1e22; color: #f2f2f2; border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 0 0 12px; }
.cm-rich pre code { background: none; padding: 0; color: inherit; font-size: 13px; line-height: 1.55; }
.cm-rich img { max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0; display: block; }
.cm-rich hr { border: 0; border-top: 1px solid rgba(0,0,0,.12); margin: 18px 0; }
.cm-rich a { color: #c2560f; }

/* ── Ô soạn thảo có thanh công cụ ──────────────────────────────────────────────────────
   Vẫn là <textarea> thật: JS hỏng thì mất thanh công cụ chứ KHÔNG mất ô nhập, và bài vẫn
   gửi được. Đó là lý do không dùng contenteditable. */
.cm-editor { border: 1px solid rgba(0,0,0,.18); border-radius: 8px; overflow: hidden; background: #fff; }
.cm-editor textarea { border: 0 !important; border-radius: 0 !important; width: 100%; display: block; resize: vertical; font: inherit; color: inherit; background: transparent; }
/* `display: block` ở trên THẮNG luật [hidden]{display:none} của trình duyệt, nên nút "Xem
   trước" đặt ta.hidden = true mà ô nhập vẫn hiện — người dùng thấy cả bản xem trước lẫn ô
   Markdown, gõ tiếp thì bản xem trước lặng lẽ cũ đi. Phải nói lại cho rõ ràng ở đây. */
.cm-editor textarea[hidden] { display: none; }
.cm-editor textarea:focus { outline: none; }
.cm-editor:focus-within { border-color: #f47c30; box-shadow: 0 0 0 3px rgba(244,124,48,.15); }
.cm-tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px; border-bottom: 1px solid rgba(0,0,0,.1); background: #fafafa; }
.cm-tool { border: 0; background: none; border-radius: 6px; padding: 5px 9px; font-size: 14px; line-height: 1; cursor: pointer; color: rgba(0,0,0,.75); align-self: auto !important; }
.cm-tool:hover { background: rgba(0,0,0,.07); }
.cm-tool[disabled] { opacity: .5; cursor: default; }
.cm-tool--b { font-weight: 800; }
.cm-tool--i { font-style: italic; }
.cm-tool__sep { width: 1px; height: 18px; background: rgba(0,0,0,.12); margin: 0 4px; }
.cm-tool--preview { margin-left: auto; font-size: 13px; font-weight: 600; }
.cm-tool--preview.on { background: #1a1a1a; color: #fff; }
.cm-preview { padding: 12px 14px; font-size: 14px; line-height: 1.7; min-height: 120px; }
.cm-preview:empty::before { content: 'Chưa có gì để xem trước.'; color: rgba(0,0,0,.45); }
.cm-editor__hint { font-size: 12px; color: rgba(0,0,0,.5); padding: 6px 10px; border-top: 1px solid rgba(0,0,0,.08); background: #fafafa; }
.cm-editor__hint code { background: rgba(0,0,0,.06); border-radius: 3px; padding: 0 4px; }
.cm-upstatus { font-size: 12px; color: rgba(0,0,0,.55); }
.cm-upstatus--err { color: #b3261e; }

/* ── Popup bài viết (kiểu Skool) ───────────────────────────────────────────────────────
   <dialog> gốc: bẫy focus, Esc, và nền `inert` là hành vi sẵn có của trình duyệt. */
.cm-modal { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); padding: 0; border: 0; border-radius: 14px; background: var(--cm-bg, #f5efd9); overflow: visible; }
.cm-modal::backdrop { background: rgba(0,0,0,.5); }
.cm-modal__body { max-height: calc(100dvh - 64px); overflow-y: auto; padding: 22px; outline: none; }
.cm-modal__body > .cm-post--detail { margin-top: 0; }
.cm-modal__x { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: #fff; font-size: 15px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); z-index: 1; }
.cm-modal__x:hover { background: #f2f2f2; }
@media (max-width: 560px) {
  .cm-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .cm-modal__body { max-height: 100dvh; padding: 18px 16px 32px; }
  .cm-modal__x { top: 8px; right: 8px; }
}

/* ── Thích + trả lời ── */
.cm-post__acts { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.cm-likeform { margin: 0; }
.cm-like { border: 1px solid rgba(0,0,0,.15); background: #fff; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.cm-like:hover { border-color: rgba(0,0,0,.35); }
.cm-like.on { background: #fff1e6; border-color: #f47c30; color: #b4560f; font-weight: 600; }
.cm-editlink { font-size: 13px; color: rgba(0,0,0,.6); text-decoration: none; }
.cm-editlink:hover { text-decoration: underline; }
.cm-comment__foot .cm-like { border: 0; background: none; padding: 0; font-size: 13px; color: rgba(0,0,0,.55); border-radius: 0; }
.cm-comment__foot .cm-like:hover { color: #c2560f; }
.cm-comment__foot .cm-like.on { background: none; color: #b4560f; }
.cm-replylink { font-size: 13px; color: rgba(0,0,0,.55); cursor: pointer; text-decoration: none; font-weight: 600; }
.cm-replylink:hover { color: #c2560f; }
/* Trả lời lồng 1 mức — đúng bằng độ sâu tối đa mà storage cho phép (xem createCommunityComment). */
.cm-comment--reply { margin-left: 30px; margin-top: 10px; }
.cm-comment--reply > .cm-ava { width: 28px; height: 28px; }
@media (max-width: 560px) { .cm-comment--reply { margin-left: 14px; } }
/* Ô trả lời TẠI CHỖ: thụt bằng đúng mức trả lời để mắt thấy nó thuộc về bình luận nào. */
.cm-replyslot:empty { display: none; }
.cm-reply--inline { margin: 10px 0 0 30px; }
@media (max-width: 560px) { .cm-reply--inline { margin-left: 14px; } }
.cm-reply--inline .cm-reply__foot { display: flex; }
.cm-reply--inline .cm-tools--compact { display: flex; }
.cm-replying { font-size: 13px; color: rgba(0,0,0,.6); margin: 0; background: #fff6ee; border-radius: 8px; padding: 6px 10px; }
.cm-replycancel { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: #c2560f; cursor: pointer; text-decoration: underline; }

/* ── Ô bình luận NGANG (kiểu Skool) ────────────────────────────────────────────────────
   Ô soạn BÀI và ô TRẢ LỜI là hai việc khác nhau. Bản đầu dùng chung một cái thẻ to: nhãn
   "Trả lời", ô cao bốn dòng, mười một nút và một dòng gợi ý cú pháp — để trả lời đúng một
   câu. Ở đây thu về một dòng; hàng nút và nút Gửi chỉ hiện khi con trỏ vào ô hoặc đã có chữ
   (.has-text do JS gắn, nên bản nháp không biến mất khi rời ô). */
.cm-reply { margin-top: 14px; }
.cm-reply__box { display: flex; align-items: flex-start; gap: 10px; }
.cm-reply__box .cm-ava { width: 32px; height: 32px; flex: none; margin-top: 2px; }
.cm-reply__box .cm-editor { flex: 1; min-width: 0; border-radius: 20px; }
.cm-reply:focus-within .cm-reply__box .cm-editor,
.cm-reply.has-text .cm-reply__box .cm-editor { border-radius: 14px; }
.cm-editor--compact textarea { padding: 9px 14px; line-height: 1.5; min-height: 38px; overflow-y: auto; font-size: 15px; }

/* Hàng nút rút gọn: ẩn cho tới khi thực sự soạn — đó là điểm khác biệt so với ô soạn bài. */
.cm-tools--compact { display: none; border-bottom: 0; border-top: 1px solid rgba(0,0,0,.08); padding: 4px 6px; }
.cm-reply:focus-within .cm-tools--compact,
.cm-reply.has-text .cm-tools--compact { display: flex; }

.cm-reply__foot { display: none; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; padding-left: 42px; }
.cm-reply:focus-within .cm-reply__foot,
.cm-reply.has-text .cm-reply__foot { display: flex; }
.cm-reply__hint { font-size: 12px; color: rgba(0,0,0,.45); }
.cm-reply__send { padding: 7px 20px; font-size: 14px; }
.cm-reply .cm-replying { margin-bottom: 8px; }
@media (max-width: 560px) {
  .cm-reply__hint { display: none; }
  .cm-reply__foot { padding-left: 0; }
}

/* Hàng lịch của buổi NGOÀI BẬC — <div> chứ không phải <a> (cùng lệ thẻ khoá ở kho recording:
   cả hàng bấm được mà nhảy sang trang bán thì người ta tưởng vừa bấm vào xem). Vì .ev-row:hover
   trong events.css nhắm mọi phần tử mang class đó, phải TẮT hiệu ứng nhấc lên ở đây — một khối
   không bấm được mà vẫn nhúc nhích khi rê chuột là lời hứa sai. */
.ev-row.is-locked { cursor: default; opacity: .72; }
.ev-row.is-locked:hover { transform: none; box-shadow: none; }
.ev-row.is-locked .ev-row__thumb img { filter: grayscale(.5); }

/* Hàng lịch trong portal: <div> + "stretched link" thay cho <a> bọc cả hàng.
   Lý do nằm ở server/community-pages.ts (hàng có link "▶ Xem lại" → <a> lồng <a> → vỡ layout).
   Chỉ nhắm .cm-evrow: trang /su-kien công khai vẫn dùng <a class="ev-row"> như cũ. */
.cm-evrow { position: relative; }
.cm-evrow .cm-evrow__link { color: inherit; text-decoration: none; }
.cm-evrow .cm-evrow__link::after { content: ''; position: absolute; inset: 0; z-index: 0; }
/* Ảnh có position riêng (events.css) nên nó nằm TRÊN vùng phủ và nuốt cú bấm — bấm vào ảnh
   không ra gì cả, trong khi bấm chỗ khác trong hàng thì mở được. Cho ảnh trong suốt với chuột
   để cú bấm rơi xuống link phủ bên dưới. Trang /su-kien không cần vì cả hàng ở đó là <a>. */
.cm-evrow .ev-row__thumb { pointer-events: none; }
/* Link phụ phải nổi LÊN TRÊN vùng phủ, không thì bấm vào là mở trang sự kiện. */
.cm-evrow .cm-replay { position: relative; z-index: 1; }
.cm-evrow:hover { transform: translate(-2px, -2px); box-shadow: var(--stamp, 5px 5px 0 var(--ink)); }
.cm-evrow.is-past:hover, .cm-evrow.is-locked:hover { transform: none; box-shadow: none; }

/* ── Hộp hỏi trước khi đóng popup lúc còn chữ chưa gửi ─────────────────────────────────
   <dialog> LỒNG trong popup bài, không phải window.confirm: confirm() chặn cả luồng, không
   dịch được, không tô theo giao diện trang, và trên mobile hiện ra trông như lỗi trình duyệt.
   Nằm ở top layer TRÊN .cm-modal nên bẫy focus và Esc là của hộp này — Esc ở đây quay lại
   viết tiếp chứ không xuyên xuống đóng popup.
   Lề trong nằm ở .cm-leave__box chứ không ở <dialog>: nhờ vậy JS phân biệt được "bấm ra nền
   tối" với "bấm vào lề trong của hộp" chỉ bằng ev.target, khỏi so tọa độ. */
.cm-leave { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.cm-leave::backdrop { background: rgba(0,0,0,.35); }
.cm-leave__box { padding: 22px; }
.cm-leave__title { margin: 0 0 6px; font-size: 18px; }
.cm-leave__text { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: rgba(0,0,0,.7); }
.cm-leave__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Lựa chọn AN TOÀN là cái to, cam, nhận focus sẵn. "Thoát" cố tình nhẹ đô: nó là hành động
   không hoàn tác được, không được nhìn như nút mặc định. */
.cm-leave__stay { flex: 1 1 170px; padding: 10px 18px; border: 0; border-radius: 999px; background: #f47c30; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.cm-leave__stay:hover { background: #d9651c; }
.cm-leave__go { padding: 10px 12px; border: 0; background: none; font: inherit; font-size: 14px; color: rgba(0,0,0,.55); cursor: pointer; text-decoration: underline; }
.cm-leave__go:hover { color: #b3261e; }
.cm-leave__stay:focus-visible, .cm-leave__go:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
@media (max-width: 560px) { .cm-leave__acts { flex-direction: column; align-items: stretch; text-align: center; } }

/* ── Sửa / xoá bình luận ───────────────────────────────────────────────────────────────
   Cả ô sửa lẫn dải hỏi-xoá do SERVER dựng sẵn và mang thuộc tính `hidden`; JS chỉ bật/tắt
   `hidden`. Vì vậy mọi rule display ở đây BẮT BUỘC có cặp [hidden] đi kèm — `display:flex`
   trần sẽ đè mất `hidden` của trình duyệt và cả hai form hiện thường trực dưới từng bình luận. */
.cm-cedit[hidden], .cm-cdel[hidden] { display: none; }
/* .cm-comment__foot đã có display:flex ở trên, mà rule đó THẮNG `[hidden]` của trình duyệt:
   thiếu dòng này thì lúc mở ô sửa, hàng nút cũ vẫn nằm đó — hai nút Xoá cùng hiện, một cái
   mở dải hỏi, một cái xoá thật. */
.cm-comment__foot[hidden] { display: none; }
.cm-edited { font-style: italic; }
.cm-dellink:hover { color: #b3261e; }

.cm-cedit { margin-top: 6px; }
/* Chỉ ô CHƯA được trình soạn thảo bọc (không JS) mới cần khung riêng: sau enhance(), textarea
   nằm trong .cm-editor và không còn là con trực tiếp — rule này tự tắt, khỏi đá nhau. */
.cm-cedit > textarea { width: 100%; display: block; padding: 9px 14px; border: 1px solid rgba(0,0,0,.18); border-radius: 8px; font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
/* Hàng nút rút gọn ở ô trả lời chỉ hiện khi đang gõ; ô sửa thì luôn hiện — người vào đây là
   đã chủ động sửa chữ, giấu bộ nút đi chỉ tổ bắt bấm thêm một nhịp. */
.cm-cedit .cm-tools--compact { display: flex; }
.cm-cedit__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cm-cedit__hint { font-size: 12px; color: rgba(0,0,0,.5); margin-right: auto; }
.cm-cedit__cancel { font-size: 13px; color: rgba(0,0,0,.55); text-decoration: underline; }
.cm-cedit__save { padding: 6px 18px; font-size: 14px; }

/* Dải hỏi trước khi xoá: đỏ nhạt, nằm ĐÚNG chỗ bình luận sắp mất, không phải hộp giữa màn
   hình. Nút "Giữ lại" là chữ thường, nút "Xoá" là nút đặc — nhưng đặt sau, để mắt đọc câu
   hỏi rồi mới tới lựa chọn không hoàn tác được. */
.cm-cdel { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; padding: 10px 14px; background: #fdf3f2; border: 1px solid rgba(179,38,30,.25); border-radius: 12px; }
.cm-cdel__q { font-size: 13px; color: rgba(0,0,0,.75); margin-right: auto; }
.cm-cdel__cancel { font-size: 13px; color: rgba(0,0,0,.6); text-decoration: underline; }
.cm-cdel__go { border: 0; border-radius: 999px; padding: 6px 18px; background: #b3261e; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cm-cdel__go:hover { background: #90201a; }

/* BIA của bình luận đã xoá — chỉ còn khi nhánh trả lời của nó vẫn sống. Viền đứt + chữ nhạt:
   đủ để hiểu "ở đây từng có một câu", không đủ để tranh chỗ với những câu còn đọc được. */
.cm-comment--gone > .cm-ava--ph { background: none; opacity: .5; }
.cm-bubble--gone { background: none; border: 1px dashed rgba(0,0,0,.18); color: rgba(0,0,0,.45); font-style: italic; }
.cm-bubble--gone .cm-comment__body { margin-top: 0; font-size: 13px; }