/* Community shell, "Khối màu" — the 'new' arm of the community experiment.
 *
 * Loaded ON TOP of page-community.css, not instead of it: community.js renders
 * every post card, and those cards are styled by the old sheet. Replacing it
 * would leave the feed unstyled. So this file dresses the shell only and takes
 * care not to reach into .cm-post-card or anything else the script emits.
 *
 * House rules: radius 0, no shadow, no gradient, no translucency.
 */
body,.cm2-hero,.cm2-body,.cm2-strip{
  --c3-ink:#0a0a0a; --c3-paper:#fff; --c3-dim:#6b7280; --c3-lab:#9aa1ab; --c3-hair:#e6e6e6;
  --c3-blue:#1a3aff; --c3-orange:#e8501e; --c3-green:#0f7a4a;
  --c3-font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --c3-pad:clamp(20px,5vw,72px);
}
.cm2-hero,.cm2-body,.cm2-strip{font-family:var(--c3-font)}
.cm2-in{max-width:1000px;margin:0 auto;padding-left:var(--c3-pad);padding-right:var(--c3-pad)}

.cm2-hero{background:var(--c3-green);color:#fff;padding:clamp(34px,5vw,66px) 0}
.cm2-k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.72)}
.cm2-h1{font-size:clamp(28px,4.6vw,54px);line-height:1.05;letter-spacing:-.05em;font-weight:800;
  margin:13px 0 0;color:#fff}
.cm2-lead{font-size:clamp(14px,1.5vw,17px);line-height:1.55;margin:14px 0 0;max-width:56ch;
  color:rgba(255,255,255,.88)}

.cm2-body{background:var(--c3-paper);padding:clamp(28px,4vw,52px) 0 clamp(44px,6vw,80px)}
.cm2-composer{border:2px solid var(--c3-ink);padding:16px 18px;margin-bottom:24px}
.cm2-composer-h{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--c3-lab);margin-bottom:12px}
.cm2-join{border:2px solid var(--c3-ink);padding:20px 22px;margin-bottom:24px}
.cm2-join b{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--c3-ink)}
.cm2-join span{display:block;font-size:14px;line-height:1.55;color:var(--c3-dim);margin:8px 0 16px;
  max-width:60ch}

/* The filter row keeps its .cm- classes so the script still finds the tabs. */
.cm2-filters{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:22px;padding-bottom:0;border:0;background:none}
.cm2-filters .cm-tabs{display:flex;gap:0;border:2px solid var(--c3-ink);flex-wrap:wrap}
.cm2-filters .cm-tab{background:var(--c3-paper);border:0;border-right:2px solid var(--c3-ink);
  border-radius:0;padding:10px 15px;font-family:inherit;font-size:12.5px;font-weight:700;
  color:var(--c3-ink);cursor:pointer}
.cm2-filters .cm-tab:last-child{border-right:0}
.cm2-filters .cm-tab.active{background:var(--c3-ink);color:#fff}
.cm2-filters .cm-search-wrap{flex:1 1 220px;min-width:0}
.cm2-filters .cm-search-input{width:100%;border:2px solid var(--c3-ink);border-radius:0;
  background:var(--c3-paper);color:var(--c3-ink);font-family:inherit;font-size:14px;
  padding:11px 13px;height:44px;-webkit-appearance:none;appearance:none}
.cm2-filters .cm-search-input:focus{outline:3px solid var(--c3-blue);outline-offset:-3px}

.cm2-btn{display:inline-block;padding:12px 22px;font-weight:800;font-size:14px;
  text-decoration:none;border:2px solid var(--c3-ink);background:var(--c3-ink);color:#fff;
  border-radius:0;font-family:inherit;cursor:pointer;line-height:1.2}
.cm2-btn:hover{background:#252525;border-color:#252525}
.cm2-btn-line{background:transparent;color:var(--c3-ink)}
.cm2-btn-line:hover{background:var(--c3-ink);color:#fff}

.cm2-strip{background:var(--c3-ink);color:#fff;padding:clamp(28px,4vw,50px) 0}
.cm2-strip-in{display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cm2-strip-t{font-size:clamp(19px,2.6vw,30px);font-weight:800;letter-spacing:-.032em;
  line-height:1.15;margin:0;color:#fff;max-width:26ch}
.cm2-strip-s{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.7);margin:8px 0 0;
  max-width:56ch}
.cm2-strip .cm2-btn-on{background:#fff;color:var(--c3-ink);border-color:#fff;padding:14px 24px}

/* ── defensive ── */
.cm2-layout a.cm2-btn,.cm2-layout a.cm2-btn:hover{color:#fff;text-decoration:none}
.cm2-layout a.cm2-btn-line{color:var(--c3-ink)}
.cm2-layout a.cm2-btn-line:hover{color:#fff}
.cm2-layout .cm2-strip a.cm2-btn-on,.cm2-layout .cm2-strip a.cm2-btn-on:hover{color:var(--c3-ink)}
.cm2-layout .cm2-h1,.cm2-layout .cm2-strip-t{color:#fff}
.cm2-layout .cm2-lead{color:rgba(255,255,255,.88)}
.cm2-layout .cm2-strip-s{color:rgba(255,255,255,.7)}
.cm2-layout .cm2-join span{color:var(--c3-dim)}
.cm2-layout .cm2-composer-h{color:var(--c3-lab)}

/* ── text protection over the landscape ───────────────────────────────────
   Hosting a scene means the headline sits on a photograph, and the scene's own
   scrim is tuned per palette — 0.22 on the misty-morning one, which measured
   1.57:1 for white text here. Far under the 3.0 that large text needs.

   A gradient of its own, independent of which scene the clock picked, so the
   worst-case palette is still readable. z-index 1 puts it above the canvas
   (hero-nature.css pins that at 0) and the content is lifted to 2 —
   :not(.nature-bg) so the canvas is not lifted along with it. */
.cm2-hero.nature-host::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.68),rgba(10,10,10,.36) 58%,rgba(10,10,10,.06) 88%)}
.cm2-hero.nature-host > *:not(.nature-bg){position:relative;z-index:2}

/* ── post list leftovers ─────────────────────────────────────────────────────
   The feed is the page's main content and it is rendered from the community
   stylesheet's own cm-* classes, which this file restyled only five of. Ten
   elements still carried the old shape inside .cm2-body: 10px cards, 50% avatars
   and play buttons, 99px category pills, 6-8px chips and media corners — the
   only rounded things left in a design whose own header declares radius 0.

   A blanket zero inside the feed rather than a rule per class: the house rule is
   the same for all of them, and the feed renders user content whose class list
   grows (doc chips, YouTube embeds, image grids) faster than this file would. */
.cm2-body [class^="cm-"],.cm2-body [class*=" cm-"]{border-radius:0}
.cm2-body .cm-post-card{border:2px solid var(--c3-ink);box-shadow:none;background:var(--c3-paper)}
.cm2-body .cm-post-card:hover{background:#fafafa}

/* Category badges were pale pastel fills carrying their own hue per category;
   flattened to one ink chip so the feed reads as one system. */
.cm2-body .cm-cat-badge{background:var(--c3-ink);color:#fff;border:0;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.cm2-body .cm-doc-chip{border:2px solid var(--c3-ink);background:var(--c3-paper);
  color:var(--c3-ink);font-weight:700}
.cm2-body .cm-doc-chip:hover{background:var(--c3-ink);color:#fff}
.cm2-body .cm-pc-avatar{border:1px solid var(--c3-hair)}

/* ── composer internals ─────────────────────────────────────────────────────
   .cm2-composer only ever styled the FRAME. Everything inside it — the toolbar,
   the inputs, the post button — came from page-community.css, so a flat
   uppercase frame sat around rounded blue controls: two design languages in one
   block, which is most of what read as "broken" here. These restate the inside
   to match the outside. Scoped to .cm2-composer, so the old arm is untouched. */
.cm2-composer .cm-composer-title{border:0;border-bottom:2px solid var(--c3-hair);
  border-radius:0;font-size:15px;padding:9px 0;background:transparent;color:var(--c3-ink)}
.cm2-composer .cm-composer-title:focus{outline:none;border-bottom-color:var(--c3-ink)}

.cm2-composer .cm-rt-toolbar{background:transparent;border:0;border-bottom:1px solid var(--c3-hair);
  border-radius:0;gap:2px;padding:8px 0;margin-bottom:0}
.cm2-composer .cm-rt-toolbar button,.cm2-composer .cm-rt-btn{border-radius:0;background:transparent;
  color:var(--c3-dim);border:0}
.cm2-composer .cm-rt-toolbar button:hover,.cm2-composer .cm-rt-btn:hover{background:var(--c3-ink);
  color:#fff;box-shadow:none}
.cm2-composer .cm-rt-sep{background:var(--c3-hair)}

/* The long-post action, at the far end of the toolbar. */
.cm2-composer .cm-rt-long{border:2px solid var(--c3-ink);border-radius:0;color:var(--c3-ink);
  font-weight:800;font-size:12px;padding:5px 11px}
.cm2-composer .cm-rt-long:hover{background:var(--c3-ink);color:#fff;border-color:var(--c3-ink)}

.cm2-composer .cm-composer-editor{border:2px solid var(--c3-hair);border-radius:0;
  padding:12px 13px;min-height:96px;font-size:15px;line-height:1.6;color:var(--c3-ink)}
.cm2-composer .cm-composer-editor:focus{outline:none;border-color:var(--c3-ink)}

.cm2-composer .cm-composer-footer{border-top:1px solid var(--c3-hair);gap:12px;flex-wrap:wrap}
.cm2-composer .cm-category-select,.cm2-composer .cm-tags-input{border:2px solid var(--c3-hair);
  border-radius:0;font-size:12.5px;padding:7px 10px;color:var(--c3-ink);background:#fff}
.cm2-composer .cm-category-select:focus,.cm2-composer .cm-tags-input:focus{border-color:var(--c3-ink);
  outline:none}
.cm2-composer .cm-tags-input{width:150px}
.cm2-composer .cm-composer-loc{font-size:11px;color:var(--c3-lab)}

.cm2-composer .btn-primary{background:var(--c3-ink);border:2px solid var(--c3-ink);border-radius:0;
  color:#fff;font-weight:800;font-size:13px;padding:9px 17px;box-shadow:none}
.cm2-composer .btn-primary:hover{background:var(--c3-blue);border-color:var(--c3-blue);color:#fff}
.cm2-composer .cm-composer-avatar{border-radius:0;border:1px solid var(--c3-hair)}

/* Mobile: same two corrections as the old arm, restated for the flat frame —
   the icon-only long-post button and Đăng sharing the visibility row. */
@media (max-width:768px){
  .cm2-composer .cm-rt-long{padding:5px 9px}
  .cm2-composer .cm-composer-footer{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
  .cm2-composer .cm-tags-input{width:auto}
}

/* ── sidebar, flat arm ── */
.cm2-body .cm-side-box{border:2px solid var(--c3-ink);border-radius:0}
.cm2-body .cm-side-h{border-bottom:2px solid var(--c3-ink);color:var(--c3-ink);font-weight:800}
.cm2-body .cm-side-h i{color:var(--c3-lab)}
.cm2-body .cm-side-row{border-bottom:1px solid var(--c3-hair)}
.cm2-body .cm-side-row:hover{background:var(--c3-sunk,#f6f7fb)}
.cm2-body .cm-side-t{color:var(--c3-ink);font-weight:700}
.cm2-body .cm-side-m,.cm2-body .cm-side-rank{color:var(--c3-lab)}
.cm2-post .cm-act-pin.is-on{background:var(--p2-ink);border-color:var(--p2-ink);color:#fff}

/* The container is 1000px, which was right for a single column. With a 296px
   sidebar beside it the feed fell to ~536px — readable but cramped for cards
   carrying an excerpt. Widen only where the sidebar actually appears, so the
   one-column measure below 840px is untouched. */
@media (min-width:1100px){
  .cm2-body .cm2-in{max-width:1180px}
}

/* ── collapsed composer, flat arm ── */
.cm2-composer .cm-collapsed-bar{border:2px solid var(--c3-hair);border-radius:0;
  background:var(--c3-paper);color:var(--c3-lab);font-size:15px;padding:11px 15px}
.cm2-composer .cm-collapsed-bar:hover{border-color:var(--c3-ink);color:var(--c3-dim)}
.cm2-composer .cm-collapsed.is-drop .cm-collapsed-bar{border-color:var(--c3-blue);
  background:#f2f4ff;color:var(--c3-blue)}
.cm2-composer .cm-composer-avatar{border-radius:0;border:1px solid var(--c3-hair)}
/* Huỷ arrives as .btn.btn-outline from the shared markup, which is still the old
   rounded blue in this arm. */
.cm2-composer #composerCancel{background:transparent;border:2px solid var(--c3-hair);
  border-radius:0;color:var(--c3-dim);font-weight:800;font-size:13px;padding:9px 15px}
.cm2-composer #composerCancel:hover{border-color:var(--c3-ink);color:var(--c3-ink);background:transparent}

/* The flat arm's page is white, so the sticky bar takes that rather than the
   old grey — and its stuck rule is the design's own hairline. */
.cm2-body .cm-filters{background:var(--c3-paper)}
.cm2-body .cm-filters.is-stuck{box-shadow:0 6px 0 -5px var(--c3-hair)}