/* ------------------------------------------------------------------ *
 * MUABAN BIZ visual identity — Product Owner redesign (2026-09).
 * Deep Navy (structure, surfaces, primary action) + white/light neutral
 * surfaces + Earthy Metallic Gold as the one signature accent. Aqua/cyan
 * is kept, narrowly, as the AI/system-authored signal inside the
 * Composer's assistant region — it never competes with Navy or Gold for
 * chrome, brand or interaction states.
 * ------------------------------------------------------------------ */
:root {
  --mb-navy-950: #061321;
  --mb-navy-900: #0B2036;
  --mb-navy-800: #12304C;
  --mb-navy-700: #1A4269;
  --mb-navy-600: #29527D;
  --mb-primary-700: #0B4E92;
  --mb-primary-600: #0F62B5;
  --mb-primary-500: #2A7FD4;
  --mb-primary-100: #E4EFFB;
  --mb-primary-050: #F2F7FD;
  --mb-accent-700: #0A7E8F;
  --mb-accent-500: #12B5C9;
  --mb-accent-100: #DCF4F7;

  /* Earthy metallic gold — the MUABAN BIZ signature accent. One family, used
     consistently: -600/-700 where it must read as text, -500 and lighter for
     borders, indicators, tints and small branding surfaces only. */
  --mb-gold-900: #4A3814;
  --mb-gold-800: #5C4718;
  --mb-gold-700: #70551D;
  --mb-gold-600: #8C6D28;
  --mb-gold-500: #AB8B3E;
  --mb-gold-400: #C7AC63;
  --mb-gold-300: #D9C489;
  --mb-gold-100: #F3E9CE;
  --mb-gold-gradient: linear-gradient(135deg, #D3B36A 0%, #A9832E 55%, #6B5417 100%);

  --mb-n-050: #F6F8FB;
  --mb-n-100: #EDF1F7;
  --mb-n-200: #DCE4EF;
  --mb-n-300: #C3CFE0;
  --mb-n-500: #6B7F99;
  --mb-n-600: #4E6178;
  --mb-surface: #FFFFFF;
  --mb-success: #0E7C5A;
  --mb-danger: #B3261E;
  --mb-danger-050: #FBEAE9;
  /* Rectangular, structured, transaction-oriented (PO corrective): subtle corner
     radius everywhere, not pill silhouettes. --mb-r-full survives only for the thin
     gold active-tab indicator bar, never for a control's own outline. */
  --mb-r-sm: 4px;
  --mb-r-md: 8px;
  --mb-r-lg: 12px;
  --mb-r-full: 999px;
  --mb-sh-1: 0 1px 2px rgba(11, 32, 54, .06), 0 1px 3px rgba(11, 32, 54, .04);
  --mb-sh-2: 0 4px 12px rgba(11, 32, 54, .08);

  /* The P0 shell inherits the brand rather than carrying a second palette.
     Primary interactive chrome (buttons, links, generic focus) is Navy —
     the "supporting blue" family no longer carries primary actions. */
  --ink: var(--mb-navy-900);
  --muted: var(--mb-n-600);
  --line: var(--mb-n-200);
  --page: var(--mb-n-050);
  --accent: var(--mb-navy-700);
}

/* Shared site alignment first: the Composer's shell reads the SAME --shell-max as
   the header/Home for the entire range below the wide-composer breakpoint (90rem),
   so .mb-back and .mb-composer land on the exact same left edge as the logo — both
   derive from the identical max-width/margin:auto formula against the same
   containing block, not just a matching numeric constant. At 90rem+ (see the media
   query below) the wrap explicitly pins that same left inset instead of
   re-centering a widened shell independently, which is what used to produce a jump
   at the breakpoint (Section 21 / PO responsive-shell corrective).
   --mb-composer-w mirrors .mb-composer's own column math (interaction + gap + rail)
   below, so anything that needs to sit on the composer's actual left content edge —
   currently just .mb-back — can align to it without re-deriving or hardcoding that
   width a second time. */
.mb-wide { --mb-composer-w: calc(42rem + 1.5rem + 22.5rem); }

/* --- Wordmark (Section 15): Navy anchor, Gold signature detail --- */
.brand { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.brand-mark { width: 1.35rem; height: 1.35rem; flex: none; }
.brand-mark .bm-navy { fill: var(--mb-navy-800); }
.brand-mark .bm-gold { fill: var(--mb-gold-500); }
.brand-word { font-weight: 800; letter-spacing: -.01em; font-size: 1.05rem; white-space: nowrap; }
.brand-mua { color: var(--mb-navy-900); }
.brand-biz {
  background: var(--mb-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (forced-colors: active) {
  .brand-biz { background: none; -webkit-text-fill-color: currentColor; color: var(--mb-gold-700); }
}

/* --- Home (Sections 3, 8, 16, 21) ---
   .mb-home-top and .mb-home-composer sit inside .mb-home-left (a plain wrapper div, no CSS
   of its own) below the wide breakpoint they simply stack in normal flow (.mb-spotlight
   stays display:none), so the centered max-width:42rem rule below still applies unmodified.
   At the wide breakpoint .mb-home-main becomes a 2-column grid with .mb-home-left and
   .mb-spotlight as its only two (independent-height) children — see that media query. */
.mb-home-top, .mb-home-composer { max-width: 42rem; margin-left: auto; margin-right: auto; text-align: center; }
.mb-home-top { margin-top: 2.4rem; margin-bottom: .5rem; }

.mb-proposition {
  margin: 0 0 1.3rem; color: var(--mb-navy-800); font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.32rem); line-height: 1.4;
}

/* The MUA/BÁN mode selector: the user's transaction purpose, not decorative nav — a
   compact rectangular switch, not two pills (PO corrective). */
.mb-mode {
  display: inline-flex; gap: .2rem; padding: .25rem; margin: 0 0 1.5rem;
  background: var(--mb-n-100); border: 1px solid var(--mb-n-200); border-radius: var(--mb-r-md);
}
.mb-mode-btn {
  position: relative; margin: 0; padding: .6rem 1.6rem; min-height: 2.75rem;
  border: 0; border-radius: var(--mb-r-sm); background: transparent;
  color: var(--mb-n-600); font: inherit; font-weight: 700; font-size: .95rem;
  letter-spacing: .02em; cursor: pointer;
}
.mb-mode-btn:hover { color: var(--mb-navy-800); }
.mb-mode-btn:focus-visible { outline: 2px solid var(--mb-gold-600); outline-offset: 2px; }
.mb-mode-btn[aria-selected="true"] { background: var(--mb-surface); color: var(--mb-navy-900); box-shadow: var(--mb-sh-1); }
.mb-mode-btn[aria-selected="true"]::after {
  content: ""; position: absolute; left: 34%; right: 34%; bottom: .38rem; height: 2px;
  background: var(--mb-gold-500); border-radius: var(--mb-r-full);
}

.mb-home-composer h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--mb-navy-900); margin: 0 0 .4rem; letter-spacing: -.01em; }
.mb-home-composer h1:focus-visible { outline: none; }
.mb-home-composer .mb-sub { color: var(--mb-n-600); margin: 0 0 1.4rem; }

.mb-say { display: flex; gap: .5rem; align-items: stretch; }
.mb-say input {
  flex: 1; height: 3.5rem; padding: 0 1rem; font-size: 1rem;
  border: 1px solid var(--mb-n-300); border-radius: var(--mb-r-md); background: var(--mb-surface);
}
.mb-say input:focus-visible {
  outline: none; border-color: var(--mb-gold-600);
  box-shadow: 0 0 0 3px var(--mb-gold-100);
}
.mb-say button {
  margin: 0; height: 3.5rem; padding: 0 1.4rem; border-radius: var(--mb-r-md);
  background: var(--mb-navy-700); font-weight: 600;
}
.mb-say button:hover { background: var(--mb-navy-800); }
.mb-seeds { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }

/* Homepage composer corrective (PO 2026-10-01): one natural-language textarea, the full-width CTA under
   it, then quiet suggestions. Scoped to the Home composer — Compose/DangTin keep their own rules. */
.mb-home-composer .mb-say { flex-direction: column; gap: .7rem; }
.mb-home-composer .mb-say textarea {
  display: block; width: 100%; height: 5rem; margin: 0; padding: .75rem 1rem;
  font: inherit; font-size: 1rem; line-height: 1.45; text-align: left; color: var(--mb-navy-900);
  border: 1px solid var(--mb-n-300); border-radius: var(--mb-r-md); background: var(--mb-surface);
  resize: none; overflow-y: auto;
}
.mb-home-composer .mb-say textarea::placeholder { color: var(--mb-n-500); }
.mb-home-composer .mb-say textarea:focus-visible {
  outline: none; border-color: var(--mb-gold-600);
  box-shadow: 0 0 0 3px var(--mb-gold-100);
}
.mb-home-composer .mb-say button { width: 100%; height: 3.125rem; }

.mb-suggest { margin-top: 1.1rem; }
.mb-suggest-label { margin: 0 0 .45rem; font-size: .82rem; font-weight: 600; color: var(--mb-n-600); }
.mb-suggest .mb-seeds { margin-top: 0; gap: .4rem .5rem; }
.mb-suggest-chip {
  margin: 0; padding: .4rem .75rem; min-height: 2.25rem;
  border: 0; border-radius: var(--mb-r-md); background: rgba(26, 58, 110, .06);
  color: var(--mb-navy-800); font-size: .875rem; font-weight: 500; line-height: 1.3; cursor: pointer;
}
.mb-suggest-chip:hover { background: rgba(26, 58, 110, .12); }
.mb-suggest-chip:active { background: rgba(26, 58, 110, .16); }
.mb-suggest-chip:focus-visible { outline: 2px solid var(--mb-gold-600); outline-offset: 2px; background: rgba(26, 58, 110, .12); }

/* Honest, restrained SELL boundary (Section 6): no fake flow, no silent Buy reinterpretation. */
.mb-soon {
  max-width: 30rem; margin: 1.1rem auto 0; padding: .9rem 1.1rem;
  border: 1px solid var(--mb-gold-300); border-left: 3px solid var(--mb-gold-500);
  border-radius: var(--mb-r-md); background: var(--mb-gold-100);
  color: var(--mb-navy-800); font-size: .92rem; text-align: left;
}
.mb-soon:focus-visible { outline: none; }
.mb-soon p { margin: 0 0 .6rem; }
.mb-soon strong { color: var(--mb-navy-900); }
.mb-soon button { margin: 0; }

/* --- Spotlight panel (Section 21, PO Hero-panel directive 2026-09-24): the wide-desktop
   companion to the composer. Both brand colors used deliberately as strong emphasis — a
   Navy gradient surface (not another white card) with Gold as the signature accent on the
   step numbers, top rule and CTA — so it reads as a real focal point next to the plain
   white composer column instead of blending into it. Content is real comprehension copy
   (mode-aware 3-step explainer + a CTA that jumps focus to the composer input via its own
   #mb-open-input fragment link, no JS required) — it replaces the old plain-white "Cách
   hoạt động" card entirely, not duplicates it. Hidden below the wide breakpoint, where the
   composer column alone already reads as complete. */
.mb-spotlight { display: none; }
.mb-spotlight-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-gold-400); margin: 0 0 1.2rem; }
.mb-spotlight-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
.mb-spotlight-step { display: flex; gap: .85rem; align-items: flex-start; }
.mb-spotlight-num {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mb-gold-gradient);
  color: var(--mb-navy-950); font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center;
}
.mb-spotlight-step h2 { font-size: .96rem; font-weight: 700; color: #FFFFFF; margin: 0 0 .2rem; }
.mb-spotlight-step p { font-size: .86rem; color: rgba(255, 255, 255, .74); margin: 0; line-height: 1.5; }
.mb-spotlight-cta {
  align-self: flex-start; margin-top: 1.5rem; padding: .7rem 1.2rem; border-radius: var(--mb-r-md);
  background: var(--mb-gold-gradient); color: var(--mb-navy-950); font-weight: 700; font-size: .9rem;
  text-decoration: none; display: inline-block;
}
.mb-spotlight-cta:hover { filter: brightness(1.06); }
.mb-spotlight-cta:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* --- Tìm tin đã đăng (Section 4, PO directive 2026-09-24): looks up already-posted
   listings, right before the Mua/Bán listing sections. Deliberately plain/neutral (a
   light surface, thin border) rather than the Navy+Gold spotlight or the composer's own
   input styling, so it reads unmistakably as a DIFFERENT action from the Hero composer
   above — that one starts a new need/offer, this one searches what already exists. */
.mb-find { margin: 2.2rem auto 0; padding: 1.1rem 1.2rem; background: var(--mb-n-050); border: 1px solid var(--mb-n-200); border-radius: var(--mb-r-lg); }
.mb-find-title { margin: 0 0 .7rem; font-size: .82rem; font-weight: 700; color: var(--mb-n-600); }
.mb-find-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
.mb-find-form input[type="search"] {
  flex: 1 1 16rem; min-width: 0; height: 2.75rem; padding: 0 .9rem; font-size: .95rem;
  border: 1px solid var(--mb-n-300); border-radius: var(--mb-r-md); background: var(--mb-surface);
}
.mb-find-form input[type="search"]:focus-visible { outline: none; border-color: var(--mb-gold-600); box-shadow: 0 0 0 3px var(--mb-gold-100); }
.mb-find-scope {
  display: inline-flex; gap: .2rem; padding: .2rem; flex: none;
  background: var(--mb-surface); border: 1px solid var(--mb-n-300); border-radius: var(--mb-r-md);
}
.mb-find-scope-opt {
  position: relative; margin: 0; padding: .5rem .85rem; min-height: 2.35rem; display: flex; align-items: center;
  border-radius: var(--mb-r-sm); color: var(--mb-n-600); font-size: .88rem; font-weight: 600; cursor: pointer;
}
.mb-find-scope-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mb-find-scope-opt:has(input:checked) { background: var(--mb-navy-700); color: #FFFFFF; }
.mb-find-scope-opt:has(input:focus-visible) { outline: 2px solid var(--mb-gold-600); outline-offset: 1px; }
.mb-find-submit { margin: 0; height: 2.75rem; padding: 0 1.3rem; border-radius: var(--mb-r-md); background: var(--mb-navy-700); font-weight: 600; flex: none; }
.mb-find-submit:hover { background: var(--mb-navy-800); }

@media (max-width: 30rem) {
  /* flex-basis follows the main axis: switching to column would otherwise reinterpret the
     row layout's "16rem" width basis as a height basis, inflating the search input to
     16rem tall instead of its usual 2.75rem — reset it to auto here. */
  .mb-find-form { flex-direction: column; align-items: stretch; }
  .mb-find-form input[type="search"] { flex: none; }
  .mb-find-scope { justify-content: center; }
  .mb-find-scope-opt { flex: 1; justify-content: center; }
}

/* --- Chips: lightweight actionable tags, not capsules (PO corrective) --- */
.mb-chip {
  margin: 0; padding: .6rem .9rem; min-height: 2.75rem;
  border: 1px solid var(--mb-n-300); border-radius: var(--mb-r-md);
  background: var(--mb-surface); color: var(--mb-navy-800); font-size: .93rem; font-weight: 500;
  cursor: pointer;
}
.mb-chip:hover { border-color: var(--mb-gold-500); color: var(--mb-gold-700); background: var(--mb-gold-100); }
.mb-chip:focus-visible { outline: 2px solid var(--mb-gold-600); outline-offset: 2px; }
.mb-chip[aria-pressed="true"] { border-color: var(--mb-gold-500); background: var(--mb-gold-100); color: var(--mb-gold-700); font-weight: 700; }
/* OD-39 §6.1: pick several details, then add them in one answer. */
.mb-chip-check { display: inline-flex; align-items: center; gap: .4rem; }
.mb-chip-check input { flex: none; width: auto; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 0; accent-color: var(--mb-gold-600); }
.mb-chip-check:has(input:checked) { border-color: var(--mb-gold-500); background: var(--mb-gold-100); color: var(--mb-gold-700); font-weight: 700; }
.mb-chip-add { border-color: var(--mb-navy-700); color: var(--mb-navy-800); font-weight: 700; }
.mb-chip-add:disabled { opacity: .5; cursor: not-allowed; }

/* --- Composer layout (design 11.2 / 11.3 / 21) ---
   The interaction column is a bounded track, not 1fr: on a wide shell a flexible
   track stretches far past the readable content it holds, stranding the Intent
   Card rail off to the right with a dead gap between them. justify-content: start
   packs both columns onto the shared shell edge the header/Home already use
   ("shared site alignment first") at every width, including the wide breakpoint
   below — the wide rule widens the columns themselves and the shell's room to hold
   them, but never re-centers the composer away from that shared left edge. */
.mb-composer {
  display: grid; grid-template-columns: minmax(0, 42rem) 22.5rem;
  justify-content: start; gap: 1.5rem; align-items: start; margin: 1rem auto 3rem;
}
/* Sits on the same left axis as .mb-composer's actual rendered content (see
   --mb-composer-w above): both are flush against the same shared shell edge at
   every width, so this never needs its own centering rule. */
.mb-back { display: block; max-width: var(--mb-composer-w); margin: 0 0 .8rem; color: var(--mb-n-600); text-decoration: none; font-size: .9rem; }
.mb-back:hover { color: var(--mb-navy-700); }

.mb-said { font-size: .78rem; color: var(--mb-n-500); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 .3rem; }
.mb-said-text {
  background: var(--mb-surface); border: 1px solid var(--mb-n-200); border-radius: var(--mb-r-md);
  padding: .7rem .9rem; color: var(--mb-navy-900); margin: 0 0 1.4rem;
}

/* The one region the aqua accent belongs to: what the assistant authored (Section 14 — narrow AI signal). */
.mb-ai { border-left: 2px solid var(--mb-accent-500); padding-left: .9rem; margin-bottom: 1.2rem; }
.mb-ai-label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--mb-accent-700); text-transform: uppercase; }
.mb-ai-question { font-size: 1.12rem; color: var(--mb-navy-900); margin: .25rem 0 .1rem; font-weight: 600; }
.mb-ai-note { font-size: .85rem; color: var(--mb-n-600); margin: .35rem 0 0; }
.mb-ai-choices { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; align-items: center; }
.mb-inline-form { display: contents; }
.mb-skip { margin: 0; background: none; border: 0; color: var(--mb-n-500); text-decoration: underline; padding: .6rem .3rem; cursor: pointer; }
.mb-skip:hover { color: var(--mb-navy-800); }

.mb-answer { display: flex; gap: .5rem; margin-top: 1.1rem; }
.mb-answer input {
  flex: 1; height: 3rem; padding: 0 .9rem; border: 1px solid var(--mb-n-300);
  border-radius: var(--mb-r-md); background: var(--mb-surface);
}
.mb-answer input:focus-visible { outline: none; border-color: var(--mb-gold-600); box-shadow: 0 0 0 3px var(--mb-gold-100); }
.mb-answer button { margin: 0; height: 3rem; padding: 0 1.1rem; border-radius: var(--mb-r-md); background: var(--mb-navy-700); }
.mb-answer button:hover { background: var(--mb-navy-800); }

/* --- Intent Card: the card's recognizable identity carries the gold detail (Section 19) --- */
.mb-rail { position: sticky; top: 1rem; }
.mb-card { background: var(--mb-surface); border: 1px solid var(--mb-n-200); border-radius: var(--mb-r-lg); box-shadow: var(--mb-sh-1); overflow: hidden; }
.mb-card-head { border-left: 4px solid var(--mb-gold-500); padding: .9rem 1rem; border-bottom: 1px solid var(--mb-n-100); }
.mb-card-kicker { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-n-500); }
.mb-card-title { font-size: 1.02rem; font-weight: 700; color: var(--mb-navy-900); margin: .15rem 0 0; }
.mb-card-ready { display: inline-block; margin-top: .45rem; font-size: .8rem; font-weight: 600; color: var(--mb-success); }
.mb-rows { list-style: none; margin: 0; padding: 0; }
.mb-row { border-bottom: 1px solid var(--mb-n-100); }
.mb-row:last-child { border-bottom: 0; }
.mb-row-button {
  display: block; width: 100%; margin: 0; padding: .7rem 1rem; border: 0; border-radius: 0;
  background: none; color: inherit; text-align: left; cursor: pointer;
}
.mb-row-button:hover { background: var(--mb-gold-100); }
.mb-row-label { display: block; font-size: .76rem; color: var(--mb-n-500); }
.mb-row-value { display: block; font-size: .96rem; color: var(--mb-navy-900); font-weight: 600; }
.mb-row-value.is-empty { color: var(--mb-n-500); font-weight: 400; }
.mb-row-value.is-needed { color: var(--mb-danger); font-weight: 600; }
.mb-badge { display: inline-block; margin-top: .2rem; font-size: .7rem; padding: .1rem .45rem; border-radius: 999px; background: var(--mb-n-100); color: var(--mb-n-600); }
.mb-badge.is-ai { background: var(--mb-accent-100); color: var(--mb-accent-700); }
.mb-why { display: block; font-size: .78rem; color: var(--mb-accent-700); margin-top: .2rem; }
.mb-row.is-changed { animation: mb-flash .6s ease-out; }
@keyframes mb-flash { from { background: var(--mb-gold-100); } to { background: transparent; } }

.mb-editor { padding: .7rem 1rem .9rem; background: var(--mb-n-050); border-top: 1px solid var(--mb-n-100); }
.mb-editor input { height: 2.6rem; }
.mb-editor input:focus-visible { outline: none; border-color: var(--mb-gold-600); box-shadow: 0 0 0 3px var(--mb-gold-100); }
.mb-editor-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.mb-editor-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.mb-editor-actions button { margin: 0; padding: .45rem .8rem; font-size: .88rem; border-radius: var(--mb-r-sm); }
.mb-editor-actions button:not(.mb-secondary) { background: var(--mb-navy-700); }
.mb-editor-actions button:not(.mb-secondary):hover { background: var(--mb-navy-800); }
.mb-secondary { background: var(--mb-surface); color: var(--mb-navy-800); border: 1px solid var(--mb-n-300); }
.mb-secondary:hover { background: var(--mb-n-050); }

.mb-cta { display: block; width: 100%; margin-top: 1rem; height: 3.1rem; border-radius: var(--mb-r-md); background: var(--mb-navy-700); font-size: 1rem; font-weight: 600; }
.mb-cta:hover { background: var(--mb-navy-800); }
.mb-cta.is-ghost { background: var(--mb-surface); color: var(--mb-n-500); border: 1px solid var(--mb-n-300); }
.mb-cta-note { font-size: .82rem; color: var(--mb-n-500); margin: .5rem 0 0; }
.mb-banner { margin-top: .8rem; padding: .7rem .9rem; border-radius: var(--mb-r-md); background: var(--mb-danger-050); color: var(--mb-danger); font-size: .9rem; }
.mb-banner[hidden] { display: none; }

/* --- Inline authentication (design 11.5) --- */
.mb-auth { position: fixed; inset: 0; background: rgba(6, 19, 33, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 20; }
.mb-auth[hidden] { display: none; }
.mb-auth-panel { background: var(--mb-surface); border-radius: var(--mb-r-lg); box-shadow: var(--mb-sh-2); padding: 1.25rem; width: 100%; max-width: 26rem; }
.mb-auth-panel h2 { margin: 0 0 .3rem; font-size: 1.15rem; color: var(--mb-navy-900); }
.mb-auth-panel .mb-sub { color: var(--mb-n-600); font-size: .9rem; margin: 0 0 .6rem; }

/* --- Confirmation page --- */
.mb-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.mb-actions .button { margin: 0; }

/* --- Wide desktop (Section 21): a composed layout, not a form centered in
   empty space. The interaction column keeps a readable measure; the rail gets a
   little more room to breathe rather than stretching full width. Root cause of the
   PO responsive-shell corrective: widening --shell-max on .mb-wide and then
   re-centering the composer within it (margin: 0 auto / justify-content: center)
   computed a NEW, independent center for the widened box instead of keeping the
   left edge the narrow layout already shared with the header — the two only lined
   up at whichever viewport made the arithmetic coincide, and jumped everywhere
   else, including right at the 1439/1440 boundary. Pinning margin-left to the same
   (100% - 80rem) / 2 the header's own max-width/margin:auto centering already
   produces keeps the left edge identical to the header at every width in this
   range; only the right edge is free to grow, up to max-width, giving the composer
   its extra room without ever moving off that shared axis. 100% here means 100% of
   .mb-wide's own containing block (<body>), deliberately not 100vw: the header's
   max-width/margin:auto centers against that same containing-block width, which
   excludes the vertical scrollbar's track — 100vw does not, so it would overshoot
   the header's actual inset by the scrollbar's width on every page tall enough to
   scroll. */
@media (min-width: 90rem) {
  .mb-wide {
    max-width: 100rem;
    margin-left: max(0px, calc((100% - 80rem) / 2));
    margin-right: 0;
    --mb-composer-w: calc(44rem + 2rem + 26rem);
  }
  /* 44 + 2 + 26 = 72rem: the header's content box at its widest (80rem shell minus 2 x 4rem gutter),
     so the rail's right edge never runs past the nav's right edge. */
  .mb-composer { grid-template-columns: minmax(0, 44rem) 26rem; gap: 2rem; }
}

@media (min-width: 80rem) {
  /* justify-content: start (not center, PO alignment corrective): a centered row computes its own
     independent inset instead of sharing the row's actual left edge — exactly the class of bug the
     .mb-wide note above already documents and fixes for .mb-composer. Pinning to start keeps the
     composer's left edge flush with .mb-home-top/.mb-proposition above it (already text-align:left
     at this breakpoint) and with the listing sections below it, instead of drifting by however much
     shorter the 42rem+26rem+4rem columns are than the row's full available width.

     Stability corrective (2026-09-24, follow-up to the Hero-panel directive): .mb-home-main is
     a plain 2-column grid now, not grid-template-areas spanning composer's rows — .mb-home-left
     (wrapping .mb-home-top + .mb-home-composer) and .mb-spotlight are its only two children, each
     auto-placed into its own column. align-items: start means the shorter column is never
     stretched to match the taller one, so .mb-spotlight sizes to its OWN content only and cannot
     grow/shrink just because MUA/BÁN swap changed the composer's text length — that coupling
     (.mb-spotlight spanning both of .mb-home-left's rows with height:100%) was exactly what made
     the panel visibly jump on mode swap; removed rather than patched. */
  .mb-home-main {
    display: grid; grid-template-columns: minmax(0, 42rem) 26rem;
    justify-content: start; align-items: start; column-gap: 4rem; margin-top: 2.2rem;
  }
  .mb-home-top { margin: 0 0 .5rem; text-align: left; }
  .mb-home-composer { margin: 0; text-align: left; }
  .mb-home-composer .mb-say { justify-content: flex-start; }
  .mb-home-composer .mb-seeds { justify-content: flex-start; }
  .mb-home-composer .mb-soon { margin-left: 0; }
  /* The MUA and BÁN sub copy are different sentences of different lengths (Section 6 — not a
     label swap on the same text) and one of them wraps to a second line at this column width
     while the other doesn't. Reserving 2 lines' worth of height here (not a plain "taller
     paragraph" fix, and not a big arbitrary number — exactly the height a real second line
     needs) stops the composer's own rendered height from changing on MUA/BÁN swap, which is
     what moved "Tìm tin đã đăng" and the listings up/down under it. min-height only sets a
     floor: a future, longer sentence that wraps to 3 lines still grows normally, never clipped. */
  .mb-home-composer .mb-sub { min-height: 3.1em; }
  .mb-spotlight {
    display: flex; flex-direction: column; box-sizing: border-box; padding: 2rem 1.9rem;
    border-radius: var(--mb-r-lg);
    background: linear-gradient(160deg, var(--mb-navy-800) 0%, var(--mb-navy-900) 62%, var(--mb-navy-950) 100%);
    box-shadow: var(--mb-sh-2); position: relative; overflow: hidden;
  }
  .mb-spotlight::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--mb-gold-gradient); }
}

/* --- Mobile (design 11.3): the card collapses to a strip above the question --- */
@media (max-width: 63.9375rem) {
  .mb-composer { grid-template-columns: minmax(0, 1fr); }

  /* On a phone the question and its answer come first: the card is reference material and must not
     push the thing the user is being asked below the fold. The call to action follows immediately,
     and the card keeps its place underneath, still complete and still editable. */
  .mb-rail { position: static; display: flex; flex-direction: column; }
  .mb-rail .mb-card { order: 3; margin-top: 1rem; }
  .mb-rail form { order: 1; }
  .mb-rail .mb-cta-note { order: 2; }
  .mb-cta { margin-top: 0; }
  .mb-card-fold > summary { list-style: none; cursor: pointer; padding: .8rem 1rem; color: var(--mb-n-600); font-size: .85rem; }
  .mb-card-fold > summary::-webkit-details-marker { display: none; }
  .mb-card-fold:not([open]) .mb-rows { display: none; }
  .mb-answer { position: sticky; bottom: 0; background: var(--mb-n-050); padding: .6rem 0; }
}
@media (min-width: 64rem) {
  .mb-card-fold > summary { display: none; }
}

@media (max-width: 26rem) {
  .mb-home-top { margin-top: 1.6rem; }
  .mb-mode-btn { padding: .6rem 1.15rem; }

  /* A long Vietnamese placeholder has no room next to a button on a narrow phone; stack instead of
     truncating it (Section 30 — no clipped text). */
  .mb-say { flex-direction: column; }
  .mb-say button { width: 100%; }
  .mb-home-composer .mb-say textarea { height: 4.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-row.is-changed { animation: none; }
}

/* Re-declared last: this sheet loads after site.css, so a component rule such as
   .mb-card-ready { display: inline-block } would otherwise win over the shared .hidden. */
.hidden { display: none; }