/* Cộng đồng "Nhà Mình": feed, bài viết, bình luận, thành viên, thông báo.
   Bố cục co giãn: màn hình rộng (≥1280), laptop (1000–1280), máy tính bảng (600–1000), điện thoại (<600).
   Nội dung luôn căn giữa trong khung, chữ ≥ 13px, nút và ô nhập cao tối thiểu 40px (44px trên điện thoại). */

/* ---------- Khung trang ---------- */
.cm{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1.75rem;align-items:start;max-width:68rem;margin-inline:auto}
.cm.cm-one{display:block;max-width:49rem}
.cm.cm-one:has(.cm-wide){max-width:64rem}
.cm-main{min-width:0;display:flex;flex-direction:column;gap:1.1rem}
@media(max-width:1060px){.cm{grid-template-columns:minmax(0,1fr);max-width:49rem}.cm-side{order:2;position:static}}

.cm-hd h1{font-size:1.75rem;line-height:1.2;letter-spacing:-.015em;margin:0 0 .3rem}
.cm-hd p{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
.cm-hd-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cm-back{display:inline-flex;align-items:center;gap:.35rem;font-size:.875rem;font-weight:600;color:var(--muted);text-decoration:none;width:fit-content;padding:.25rem 0}.cm-back:hover{color:var(--brand)}
.cm-h2{font-size:1.125rem;margin:.75rem 0 0;letter-spacing:-.005em}
.cm-empty{background:#fff;border:1px dashed #E3D2B8;border-radius:18px;padding:2.25rem 1.5rem;text-align:center;color:var(--muted);margin:0;font-size:.9375rem;line-height:1.6}
.cm-empty .cm-empty-ic{display:flex;width:3.25rem;height:3.25rem;margin:0 auto .9rem;border-radius:50%;background:var(--red-soft);color:var(--brand);align-items:center;justify-content:center}
.cm-empty a{color:var(--brand);font-weight:600}
.cm .av{border-radius:50%;object-fit:cover;object-position:center top;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;line-height:1}

/* ---------- Ô soạn bài ---------- */
.cm-compose{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(66,40,21,.04)}
.cm-compose>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;color:var(--muted);font-size:1rem}
.cm-compose>summary::-webkit-details-marker{display:none}
.cm-compose>summary span{flex:1;min-height:2.75rem;display:flex;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 1.1rem}
.cm-compose>summary:hover span{border-color:#E3D2B8;background:#fff}
.cm-compose[open]>summary{border-bottom:1px solid var(--line)}
.cm-form{display:flex;flex-direction:column;gap:.85rem;padding:1.1rem}
.cm-form input[type=text],.cm-form select,.cm-form textarea{border-radius:12px;padding:.7rem .9rem;font-size:1rem;min-height:2.75rem}
.cm-form textarea{line-height:1.6}
.cm-attach{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}.cm-attach input[type=text]{flex:1;min-width:14rem}
.cm-file{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;border:1px dashed #CBB59A;border-radius:12px;padding:0 1rem;font-size:.9375rem;font-weight:600;cursor:pointer;color:var(--fg);position:relative;overflow:hidden}
.cm-file:hover{background:var(--bg)}.cm-file input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.cm-hint{margin:0;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.cm-actions{display:flex;gap:.7rem;align-items:center}
.cm-actions .btn,.cm-actions .btn-ghost{min-height:2.75rem;padding:0 1.4rem}
.cm-edit{background:#fff;border:1px solid var(--line);border-radius:18px}.cm-edit h1{font-size:1.4rem;margin:0}

/* ---------- Thanh danh mục ---------- */
.cm-cats{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.55rem;font-size:inherit;padding:.15rem .1rem .35rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}.cm-cats::-webkit-scrollbar{display:none}
.cm-cats a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:2.5rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 1.05rem;font-size:.875rem;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.cm-cats a:hover{background:var(--bg);color:var(--fg)}.cm-cats a.on{background:var(--fg);border-color:var(--fg);color:#fff}

/* ---------- Thẻ bài trong feed ---------- */
.cm-card{display:flex;gap:1.15rem;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.35rem;text-decoration:none;color:var(--fg);box-shadow:0 1px 2px rgba(66,40,21,.04);transition:border-color .15s,box-shadow .15s,transform .15s}
.cm-card:hover{border-color:#E3D2B8;box-shadow:0 14px 28px -16px rgba(66,40,21,.3);transform:translateY(-1px)}
.cm-card.pinned{border-color:#EBCF9E;background:linear-gradient(180deg,#FFFBF3,#fff)}
.cm-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.cm-by{display:flex;align-items:center;gap:.75rem;min-width:0}
.cm-who{display:flex;flex-direction:column;line-height:1.35;min-width:0}.cm-who strong{font-size:1rem}.cm-who small{color:var(--muted);font-size:.8125rem}.cm-who a{color:inherit;text-decoration:none}
.cm-pin{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:700;color:var(--gold-dark);background:rgba(223,156,51,.18);border-radius:999px;padding:.25rem .7rem;white-space:nowrap}
.cm-title{font-size:1.1875rem;line-height:1.35;letter-spacing:-.01em}
.cm-ex{color:#5E4A3A;font-size:.9375rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-stats{display:flex;gap:1.1rem;font-size:.875rem;color:var(--muted);margin-top:.2rem;flex-wrap:wrap;font-weight:500}.cm-stats span{display:inline-flex;align-items:center;gap:.35rem}.cm-stats .liked{color:var(--brand);font-weight:700}
.cm-thumb{flex:0 0 auto;width:9rem;height:7rem;border-radius:14px;overflow:hidden;background:var(--bg);align-self:center}.cm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){
  .cm-card{flex-direction:column;gap:.8rem;padding:1rem}
  .cm-thumb{order:-1;width:100%;height:auto;aspect-ratio:16/9;align-self:stretch}
  .cm-title{font-size:1.125rem}
}
.cm-pager{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.cm-pager .btn-ghost{min-height:2.5rem;padding:0 1.1rem}

/* ---------- Cột bên ---------- */
.cm-side{display:flex;flex-direction:column;gap:.9rem;position:sticky;top:1.25rem}
.cm-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.35rem}
.cm-box h2{font-size:1.25rem;margin:0 0 .4rem;letter-spacing:-.01em}.cm-sub{font-size:.875rem;color:var(--muted);line-height:1.65;margin:0 0 1.1rem}
.cm-stat{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.9rem 0;text-align:center}
.cm-stat strong{display:block;font-size:1.4rem;line-height:1.2}.cm-stat small{color:var(--muted);font-size:.8125rem}
.cm-faces{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0}.cm-faces a{display:inline-flex}
.cm-all{width:100%;min-height:2.5rem;text-align:center;justify-content:center;display:flex;align-items:center}
.cm-note{font-size:.75rem;line-height:1.6;color:var(--muted);margin:0 .25rem}

/* ---------- Bài viết chi tiết ---------- */
.cm-post{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.6rem 1.75rem;display:flex;flex-direction:column;gap:1rem;box-shadow:0 1px 2px rgba(66,40,21,.04)}
.cm-post h1{font-size:1.75rem;line-height:1.3;letter-spacing:-.015em;margin:0}
.cm-text,.cm-ctext{font-size:1rem;line-height:1.8;overflow-wrap:anywhere}.cm-text a,.cm-ctext a{color:var(--brand);text-decoration:underline}
.cm-video{border-radius:14px}
.cm-gallery{display:grid;gap:.55rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.cm-gallery.n1{grid-template-columns:minmax(0,1fr)}
.cm-gallery a{display:block;border-radius:14px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.cm-gallery img{width:100%;display:block;max-height:30rem;object-fit:cover}
.cm-gallery.n1 img{object-fit:contain;max-height:28rem;background:#fff}
.cm-bar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:.95rem}
.cm-grow{flex:1}
.cm-inl{margin:0;display:inline}
.cm-btn{display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 1.1rem;font:inherit;font-size:.875rem;font-weight:600;color:var(--fg);cursor:pointer;text-decoration:none}
.cm-btn:hover{background:var(--bg)}.cm-btn.on{background:var(--red-soft);border-color:rgba(205,31,49,.35);color:var(--brand)}.cm-btn.static{cursor:default;color:var(--muted)}.cm-btn.static:hover{background:#fff}.cm-btn.del{color:var(--danger)}
.cm-imgs-edit{display:flex;gap:.7rem;flex-wrap:wrap}.cm-imgs-edit label{display:flex;flex-direction:column;gap:.35rem;font-size:.8125rem;align-items:flex-start}.cm-imgs-edit img{width:6.5rem;height:5.25rem;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
@media(max-width:600px){.cm-post{padding:1.15rem 1rem}.cm-post h1{font-size:1.4rem}.cm-text{font-size:1rem}.cm-grow{display:none}.cm-bar{gap:.45rem}}

/* ---------- Bình luận ---------- */
.cm-comments{display:flex;flex-direction:column;gap:.95rem}.cm-comments h2{font-size:1.125rem;margin:.35rem 0 0}
.cm-cmt{display:flex;gap:.75rem;align-items:flex-start;scroll-margin-top:5rem}
.cm-cmt.reply{margin-left:3rem}
.cm-cbody{flex:1;min-width:0}
.cm-cbub{background:#fff;border:1px solid var(--line);border-radius:16px;padding:.75rem 1rem}
.cm-cmt:target .cm-cbub{border-color:var(--brand);box-shadow:0 0 0 3px rgba(205,31,49,.12)}
.cm-chead{display:flex;gap:.65rem;align-items:baseline;margin-bottom:.2rem;flex-wrap:wrap}.cm-chead a{color:inherit;text-decoration:none}.cm-chead strong{font-size:.9375rem}.cm-chead small{color:var(--muted);font-size:.75rem}
.cm-ctext{font-size:.9375rem;line-height:1.7}
.cm-cact{display:flex;gap:1.1rem;padding:.3rem .6rem}
.cm-lk{background:none;border:0;padding:.25rem 0;font:inherit;font-size:.8125rem;font-weight:700;color:var(--muted);cursor:pointer}.cm-lk:hover{color:var(--brand)}.cm-lk.on{color:var(--brand)}.cm-lk.del:hover{color:var(--danger)}
.cm-newc{display:flex;gap:.75rem;align-items:flex-start;margin-top:.35rem}
.cm-newc-f{flex:1;display:flex;flex-direction:column;gap:.6rem}.cm-newc-f textarea{border-radius:16px;padding:.75rem 1rem;font-size:1rem;line-height:1.6}
.cm-newc-f .btn{min-height:2.5rem;padding:0 1.4rem;align-self:flex-start}
.cm-replying{margin:0;font-size:.875rem;color:var(--muted)}.cm-replying button{background:none;border:0;color:var(--brand);font:inherit;font-weight:700;cursor:pointer;padding:0 0 0 .4rem}
@media(max-width:600px){.cm-cmt.reply{margin-left:1.6rem}.cm-cbub{padding:.65rem .85rem}}

/* ---------- Thành viên ---------- */
.cm-search{display:flex;gap:.65rem}.cm-search input{flex:1;min-height:2.75rem;border-radius:12px;padding:0 1rem;font-size:1rem;border:1px solid var(--line);background:#fff}
.cm-search .btn{min-height:2.75rem;padding:0 1.5rem}
.cm-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1rem}
.cm-mem{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.2rem;text-decoration:none;color:var(--fg);min-height:6.5rem;transition:border-color .15s,box-shadow .15s}
.cm-mem:hover{border-color:#E3D2B8;box-shadow:0 14px 28px -16px rgba(66,40,21,.3)}
.cm-mem-t{display:flex;flex-direction:column;min-width:0;line-height:1.45;gap:.1rem}.cm-mem-t strong{font-size:1rem}.cm-mem-t small{color:var(--muted);font-size:.875rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cm-mem-t em{font-style:normal;color:var(--muted);font-size:.8125rem}
.cm-badge{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);background:var(--red-soft);border-radius:999px;padding:.15rem .55rem;vertical-align:middle;white-space:nowrap}
.cm-profile{display:flex;gap:1.5rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.6rem}
.cm-profile h1{font-size:1.6rem;margin:0 0 .25rem;letter-spacing:-.01em}.cm-profile .cm-sub{margin:0 0 .6rem}.cm-bio{margin:0 0 .75rem;font-size:1rem;line-height:1.7}
@media(max-width:600px){.cm-profile{flex-direction:column;text-align:center;padding:1.3rem}.cm-members{grid-template-columns:minmax(0,1fr)}}

/* ---------- Thông báo ---------- */
.cm-notifs{display:flex;flex-direction:column;gap:.6rem}
.cm-notif{display:flex;gap:.9rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:.95rem 1.15rem;text-decoration:none;color:var(--fg);transition:background .15s,border-color .15s}
.cm-notif:hover{background:var(--bg)}.cm-notif.unread{border-color:rgba(205,31,49,.3);background:#FFFBFB}
.cm-ntx{flex:1;display:flex;flex-direction:column;gap:.2rem;font-size:.9375rem;line-height:1.55;min-width:0}.cm-ntx small{color:var(--muted);font-size:.8125rem}
.cm-dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--brand);flex:0 0 auto}

/* ---------- Câu hỏi thường gặp (trang giới thiệu) ---------- */
.cm-faq details{border-top:1px solid var(--line);padding:.9rem 0}.cm-faq details:first-child{border-top:0;padding-top:0}
.cm-faq summary{cursor:pointer;font-weight:600;font-size:1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:1.75rem}
.cm-faq summary::-webkit-details-marker{display:none}.cm-faq summary::after{content:"+";color:var(--brand);font-weight:700;font-size:1.25rem;line-height:1}
.cm-faq details[open] summary::after{content:"\2212"}
.cm-faq p{margin:.65rem 0 0;font-size:.9375rem;line-height:1.75;color:var(--muted)}.cm-faq a{color:var(--brand);text-decoration:underline}

/* ---------- Trang Tài khoản và danh sách khóa học trong khung học viên: cùng cách căn giữa ---------- */
.lr-main .ac{margin-inline:auto}
.lr-main .cl-shell>div{max-width:68rem;margin-inline:auto}

/* ---- Classroom ---- */
.lr-main .cr{max-width:68rem;margin-inline:auto;padding:.5rem 0 2.5rem}
.cr-head h1{font-size:1.75rem;margin:0;letter-spacing:-.01em}
.cr-tabs{display:flex;justify-content:flex-start;font-size:inherit;gap:1.75rem;margin:1.1rem 0 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}.cr-tabs::-webkit-scrollbar{display:none}
.cr-tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:.6rem .1rem;font:inherit;font-size:.9375rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.cr-tabs button span{font-weight:500;opacity:.8;margin-left:.15rem}.cr-tabs button:hover{color:var(--fg)}.cr-tabs button.on{color:var(--fg);border-bottom-color:var(--brand)}
.cr-sec{margin-top:2rem}.cr-sec[hidden],.cr-card[hidden]{display:none}.cr-sec h2{font-size:1.125rem;margin:0 0 1rem;letter-spacing:-.005em}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.4rem}
.cr-card{display:flex;flex-direction:column;gap:.55rem;padding:.65rem .65rem 1rem;background:#fff;border:1px solid var(--line);border-radius:18px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.cr-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px -18px rgba(66,40,21,.34);border-color:#E3C9A6}
.cr-card>*:not(.cr-cover){margin-inline:.6rem}
.cr-cover{position:relative;display:block;aspect-ratio:16/10;border-radius:13px;background:#2b2118 center/cover no-repeat;margin-bottom:.35rem}
.cr-cover.noimg{background:linear-gradient(135deg,#F9E3D5,#F3C9B4 55%,#E8A98F);color:var(--brand)}
.cr-cic{position:absolute;inset:0;margin:auto;width:3.6rem;height:3.6rem;border-radius:50%;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center}
.cr-tag{position:absolute;top:.7rem;left:.7rem;display:inline-flex;align-items:center;gap:.3rem;font-size:.6875rem;font-weight:700;padding:.3rem .65rem;border-radius:999px;background:#fff;color:var(--muted);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.cr-tag.own{color:#17663b}.cr-tag.promo{color:#8a4b00;background:#FFF1D6}.cr-tag.done{background:#17663b;color:#fff}
.cr-pricetag{position:absolute;right:.7rem;bottom:.7rem;background:#2b2118;color:#fff;font-weight:700;font-size:.8125rem;padding:.3rem .7rem;border-radius:9px}
.cr-title{font-size:1.0625rem;line-height:1.35;letter-spacing:-.005em}
.cr-sum{font-size:.875rem;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-meta{display:flex;align-items:center;gap:1rem;font-size:.8125rem;color:var(--muted);font-weight:600;margin-top:.15rem}.cr-meta span{display:inline-flex;align-items:center;gap:.35rem}.cr-meta svg{color:var(--brand)}.cr-pct{margin-left:auto}
.cr-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line)}
.cr-by{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:700;min-width:0}.cr-by img{width:1.875rem;height:1.875rem;border-radius:50%;object-fit:cover}
.cr-cta{display:inline-flex;align-items:center;gap:.2rem;font-weight:700;font-size:.8125rem;color:var(--brand);white-space:nowrap}
@media(max-width:700px){.cr-head h1{font-size:1.5rem}.cr-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- Yêu cầu chủ đề ---- */
.tp-new{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:.75rem;margin-top:1.1rem;padding:1rem;background:#fff;border:1px solid var(--line);border-radius:18px}
.tp-new input{min-height:2.75rem;padding:0 .9rem;border-radius:12px;width:100%;box-sizing:border-box}
.tp-list{display:flex;flex-direction:column;gap:.7rem;margin-top:.9rem}
.tp{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;background:#fff;border:1px solid var(--line);border-radius:16px}
.tp:target{border-color:var(--brand);box-shadow:0 0 0 3px rgba(205,31,49,.12)}
.tp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}.tp-tx>strong{font-size:1rem;line-height:1.4}.tp-tx small{color:var(--muted);font-size:.8125rem}.tp-note{font-size:.875rem;color:var(--muted);line-height:1.5}
.tp-vote{margin:0}
.tp-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;width:3.4rem;height:3.4rem;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--muted);cursor:pointer;font:inherit}
.tp-btn strong{font-size:1rem;color:var(--fg)}.tp-btn:hover{border-color:var(--brand);color:var(--brand)}.tp-btn.on{background:var(--red-soft);border-color:rgba(205,31,49,.4);color:var(--brand)}.tp-btn.on strong{color:var(--brand)}
.tp-votes{display:flex;flex-direction:column;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;border-radius:14px;background:var(--bg)}.tp-votes strong{font-size:1rem}.tp-votes small{font-size:.6875rem;color:var(--muted)}
.tp-doing{border-color:#E9C98B;background:#FFFBF2}.tp-done{opacity:.95}
.tp-del{background:none;border:0;color:var(--muted);cursor:pointer;padding:.4rem;display:flex}.tp-del:hover{color:var(--brand)}
@media(max-width:700px){.tp-new{grid-template-columns:minmax(0,1fr)}.tp{flex-wrap:wrap}}

.cr-deadline{display:block;margin:.2rem .6rem 0;font-size:.75rem;font-weight:600;color:#8a4b00;background:rgba(240,180,60,.14);border-radius:8px;padding:.35rem .6rem}
.pr-st{display:inline-block}
