/* Moved from styles.css (P18/P19/MVP Cloud blocks, P21 lượt 4) — kept first to preserve cascade order */
/* P18 — chỉ Cloud: thanh trên thông minh, danh sách gọn và Tài khoản */
body.reos-cloud .mobile-topbar { position:sticky; top:0; z-index:35; min-height:calc(56px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); grid-template-columns:44px minmax(0,1fr) auto auto; background:var(--surface); }
body.reos-cloud .mobile-topbar.is-scrolled { border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(12px); }
body.reos-cloud .topbar-brand { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reos-topbar-actions { display:flex; flex:none; }
.reos-action-n { position:absolute; top:1px; right:1px; width:8px; height:8px; overflow:hidden; border-radius:50%; background:var(--st-wait); color:transparent; }
body.reos-cloud #profile-view > .page-head,body.reos-cloud #profile-view > #ops-grid { display:none!important; }
body.reos-cloud .reos-acct [hidden] { display:none!important; }
body.reos-cloud .reos-account-identity { border:1px solid var(--border); border-radius:14px; background:var(--surface); }
body.reos-cloud .reos-account-identity .reos-avatar-preview { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; }
.reos-verified { width:max-content; padding:2px 8px; border:1px solid var(--accent-gold); border-radius:999px; color:var(--ink)!important; }
.reos-setting-icon { width:32px; height:32px; display:grid!important; place-items:center; border-radius:9px; background:var(--forest-50); color:var(--forest-700); }
.reos-notify-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.reos-notify-head h3 { margin:18px 0 6px; }
.reos-notify-head button { min-height:44px; border:0; background:transparent; color:var(--forest-700); font:inherit; font-weight:600; }
.mk-mobile-sort { min-height:44px; border:0; padding:0; background:transparent; color:var(--ink-2); font:inherit; }
.mk-mobile-rail { display:flex; flex-wrap:nowrap; gap:8px; width:100%; max-width:100%; height:52px; overflow-x:auto; overflow-y:hidden; padding:0 24px 0 0; box-sizing:border-box; scrollbar-width:none; mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent); }
.mk-mobile-rail::-webkit-scrollbar { display:none; }
.mk-mobile-rail > * { flex:0 0 auto; white-space:nowrap; }
.mk-sort-sheet { display:grid; gap:4px; }
.mk-sort-sheet button { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 12px; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--ink); font:inherit; text-align:left; }
@media (max-width:767px) {
  body.reos-cloud .main { padding-top:0; }
  body.reos-cloud .mk-view > .page-head,body.reos-cloud .f2-host > .page-head,body.reos-cloud #deals-view > .page-head,body.reos-cloud .cl-host > .page-head { margin:0; }
  body.reos-cloud .mk-view > .page-head .eyebrow,body.reos-cloud .mk-view > .page-head h2,body.reos-cloud .f2-host > .page-head .eyebrow,body.reos-cloud .f2-host > .page-head h2,body.reos-cloud #deals-view > .page-head .eyebrow,body.reos-cloud #deals-view > .page-head h2 { display:none; }
  body.reos-cloud .mk-smart { position:sticky; top:calc(56px + env(safe-area-inset-top)); z-index:20; margin:0; border-radius:0; border-width:0 0 1px; }
  body.reos-cloud .mk-main > [data-p11-top],body.reos-cloud .pj-list .mk-main > [data-pj-top] { position:sticky; top:calc(104px + env(safe-area-inset-top)); z-index:19; min-height:52px; padding:8px 0 0; background:var(--bg); }
  body.reos-cloud .mk-main > [data-p11-top] > :not(.mk-mobile-rail) { display:none!important; }
  body.reos-cloud .mk-toolbar { display:none; }
  body.reos-cloud .mk-layout { gap:8px; }
  body.reos-cloud .mk-main { min-width:0; max-width:100%; }
  body.reos-cloud .mk-p11 .mk-main { padding-bottom:72px; }
  body.reos-cloud .mk-view .mk-thumb { max-height:none; }
  body.reos-cloud .mk-save { position:absolute; top:8px; right:8px; width:40px; height:40px; min-width:40px; min-height:40px; border:0; border-radius:50%; background:color-mix(in srgb,var(--surface) 88%,transparent); }
  body.reos-cloud .reos-account-child > header { display:none; }
  body.reos-cloud .reos-account-home { gap:8px; }
  body.reos-cloud .reos-settings-list { border-radius:14px; }
  body.reos-cloud .reos-settings-list > button { min-height:56px; }
}

/* reos-ui — P19 shared Cloud presentation; never affects demo. */
body.reos-cloud { --ui-selected: #185344; --ui-on-selected: #ffffff; --ui-overlay: rgba(10,24,20,.48); }
body.reos-cloud .reos-ui-tabs { display:flex;flex-wrap:nowrap;overflow-x:auto;gap:20px;border-bottom:1px solid var(--border);background:var(--surface);padding:0; }
body.reos-cloud .reos-ui-tabs > button { flex:0 0 auto;white-space:nowrap;background:transparent!important;color:var(--ink)!important;border:0;border-bottom:3px solid transparent;border-radius:0;min-height:48px;padding:10px 2px; }
body.reos-cloud .reos-ui-tabs > button[aria-selected=true],body.reos-cloud .reos-ui-tabs > button[aria-pressed=true] { color:var(--ui-selected)!important;border-bottom-color:var(--ui-selected);font-weight:700;background:transparent!important; }
body.reos-cloud .reos-chiprow { display:flex;flex-wrap:nowrap!important;align-items:center;gap:8px;overflow-x:auto;min-width:0;max-width:100%;padding:3px 0 7px;mask-image:linear-gradient(to right,black 94%,transparent); }
body.reos-cloud .reos-chiprow > * { flex:0 0 auto;white-space:nowrap; }
body.reos-cloud .reos-chiprow .active,body.reos-cloud .reos-chiprow [aria-pressed=true] { background:var(--ui-selected);color:var(--ui-on-selected);border-color:var(--ui-selected); }
body.reos-cloud .reos-ui-overlay { display:flex;justify-content:flex-end;align-items:stretch;background:var(--ui-overlay); }
body.reos-cloud .reos-ui-sheet { height:var(--ui-viewport,100dvh)!important;max-height:100dvh!important;width:min(540px,94vw)!important;max-width:94vw;display:flex;flex-direction:column;border-radius:0!important;padding:0!important;overflow:hidden; }
body.reos-cloud .reos-ui-sheet .reos-sheet-head { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;flex:0 0 auto;padding:16px;border-bottom:1px solid var(--border); }
body.reos-cloud .reos-sheet-close { display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--ink); }
body.reos-cloud .reos-ui-body { display:flex;flex-direction:column;overflow:auto;min-height:0;flex:1;padding:16px; }
body.reos-cloud .reos-ui-footer { position:sticky;bottom:-16px;z-index:4;margin-top:auto;display:flex;justify-content:space-between;gap:12px;flex:0 0 auto;background:var(--surface);border-top:1px solid var(--border);padding:12px 0 calc(12px + env(safe-area-inset-bottom)); }
body.reos-cloud .reos-ui-footer button { min-height:44px; }
body.reos-cloud .reos-ui-sheet form { min-height:100%;display:flex;flex-direction:column;gap:14px;margin:0;width:100%; }
body.reos-cloud .reos-ui-sheet :is(form,fieldset,label,input,textarea,select,.mk-range,.smart-select) { min-width:0;max-width:100%;box-sizing:border-box; }
body.reos-cloud .reos-ui-sheet :is(input,textarea,select,.smart-select) { width:100%; }
body.reos-cloud .reos-ui-select .smart-control { width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px;padding:10px 12px;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:8px;text-align:left; }
body.reos-cloud .reos-ui-select .smart-control span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; }
body.reos-cloud .reos-sort-list { display:grid; }
body.reos-cloud .reos-sort-list button { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px;text-align:left;background:var(--surface);color:var(--ink);border:0;border-bottom:1px solid var(--border); }
body.reos-cloud .reos-sort-list button[aria-pressed=true] { color:var(--ui-selected);font-weight:700; }
body.reos-cloud .reos-detail-header { display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;margin:0 0 10px; }
body.reos-cloud .reos-detail-header h2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:22px;line-height:1.3;margin:0; }
body.reos-cloud .reos-detail-header p { margin:4px 0 8px;color:var(--ink-2);font-size:13px; }
body.reos-cloud .reos-detail-symbol { display:grid;place-items:center;min-width:44px;width:44px;height:44px;background:var(--surface-alt);border-radius:8px;color:var(--ui-selected); }
body.reos-cloud .reos-infolist { display:grid;gap:0; }
body.reos-cloud .reos-infolist > div { display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--border); }
body.reos-cloud .reos-infolist > div > .ico { display:none; }
body.reos-cloud .reos-infolist dt { color:var(--ink-2);font-size:13px; }
body.reos-cloud .reos-infolist dd { margin:0;text-align:left;overflow-wrap:anywhere; }
body.reos-cloud .reos-desc-clamp:not(.expanded) { display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; }
body.reos-cloud .reos-list-summary { display:flex;align-items:center;gap:6px;padding:8px 0;background:transparent;color:var(--ink-2);border:0;font-size:13px;min-height:44px; }
body.reos-cloud .st-pill { display:inline-flex;align-items:center;gap:5px;font-size:13px;white-space:nowrap; }
body.reos-cloud .st-pill .ico { width:16px;height:16px; }
@media(max-width:767px) {
 body.reos-cloud .reos-ui-sheet .mk-range { display:grid;grid-template-columns:minmax(0,1fr)!important; }
 body.reos-cloud .pj-detail { padding:0;gap:0; }
 body.reos-cloud .pj-detail > .reos-ui-tabs { position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:10; }
 body.reos-cloud .pj-detail .mk-back,body.reos-cloud .pj-panel [data-pedit],body.reos-cloud .pj-panel [data-ucsv],body.reos-cloud .pj-panel .mk-sort { display:none!important; }
 body.reos-cloud .pj-panel { padding-top:8px;gap:4px; }
 body.reos-cloud .pj-panel > .reos-actions { display:none; }
 body.reos-cloud .pj-stats { margin:0 0 8px; }
 body.reos-cloud .pj-bar { height:5px; }
 body.reos-cloud .pj-legend { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:7px 0;font-size:13px; }
 body.reos-cloud .pj-legend li { display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:13px; }
 body.reos-cloud .pj-legend li:last-child { display:none; }
 body.reos-cloud .pj-dot { display:none; }
 body.reos-cloud .pj-ufilters { margin:0;gap:0; }
 body.reos-cloud .pj-ucards { margin:0;padding:0;gap:0; }
 body.reos-cloud .pj-block { margin:0; }
 body.reos-cloud .pj-ucard { position:relative;border-radius:0;border:0;border-bottom:1px solid var(--border);padding:12px 46px 12px 0;gap:4px; }
 body.reos-cloud .pj-ucard p { margin:4px 0;font-size:13px; }
 body.reos-cloud .pj-ucard .mk-price { font-size:17px; }
 body.reos-cloud .pj-ucard [data-uedit] { position:absolute;right:0;bottom:12px;width:40px;min-height:40px;padding:0;display:grid;place-items:center;border-radius:50%; }
 body.reos-cloud .pj-ucard [data-uedit] span { display:none; }
 body.reos-cloud .pj-unit-filter { display:grid;gap:16px; }
 body.reos-cloud .pj-panel [data-lres] > .mk-sub { display:none; }
 body.reos-cloud .pj-panel .mk-toolbar { margin-bottom:10px; }
}
@media(max-width:359px) { body.reos-cloud .reos-infolist > div { grid-template-columns:minmax(0,1fr);gap:4px; } }

body.reos-cloud .reos-tabs:not(.reos-ui-tabs) {flex-wrap:nowrap;overflow-x:auto;}
body.reos-cloud .dr-tabs {background:transparent;}
@media(max-width:767px){body.reos-cloud .dr-tabs button[aria-selected=true]{background:transparent;color:var(--ui-selected);}body.reos-cloud #deals-view [data-back]{display:none;}body.reos-cloud .ls-row{grid-template-columns:minmax(0,1fr)!important;}body.reos-cloud .ls-editor :is(input,textarea,label,.smart-select){min-width:0;max-width:100%;box-sizing:border-box;}body.reos-cloud .pj-panel .pj-ucard{scroll-margin-top:120px;}}
/* P19: units tab on phones — project name is already in the top bar */
@media(max-width:767px){body.reos-cloud .pj-detail:has([data-ptab="units"][aria-selected="true"]) .reos-detail-header{display:none;}body.reos-cloud .pj-panel .reos-list-summary{min-height:44px;margin:0;}}
/* MVP 2 — nhu cầu & gợi ý (Cloud) */
body.reos-cloud .dm-box{margin-top:24px;display:grid;gap:12px;}
body.reos-cloud .dm-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
body.reos-cloud .dm-head h3{margin:0;font-size:18px;}
body.reos-cloud .dm-list,body.reos-cloud .dm-matches{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
body.reos-cloud .dm-row{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);}
body.reos-cloud .dm-row p{margin:4px 0 0;color:var(--ink-2);font-size:14px;}
body.reos-cloud .dm-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto;}
body.reos-cloud .dm-types{display:flex;flex-wrap:wrap;gap:8px;}
body.reos-cloud .dm-check{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:999px;}
body.reos-cloud .dm-form{display:grid;gap:12px;}
body.reos-cloud .dm-form fieldset{border:0;padding:0;margin:0;}
body.reos-cloud .dm-match{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;min-height:44px;}
body.reos-cloud .dm-match small{display:block;color:var(--ink-2);font-size:13px;margin-top:2px;}
body.reos-cloud .dm-score{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--ui-selected);color:var(--ui-on-selected);}
@media(max-width:767px){body.reos-cloud .dm-row{flex-direction:column;}}
body.reos-cloud .ls-actions-row{display:flex;flex-wrap:wrap;gap:8px;}
body.reos-cloud .pj-hold{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;}body.reos-cloud .pj-hold small{color:var(--ink-2);font-size:13px;}body.reos-cloud .pj-hold .mk-btn{min-height:44px;}
/* MVP 5 — sổ thu chi (Cloud) */
body.reos-cloud #deals-view .page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
body.reos-cloud .lg-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
body.reos-cloud .lg-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px;}
body.reos-cloud .lg-sum>div{padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface);min-width:0;}
body.reos-cloud .lg-sum small{display:block;color:var(--ink-2);font-size:13px;}
body.reos-cloud .lg-sum strong{display:block;font-size:15px;overflow-wrap:anywhere;}
body.reos-cloud .lg-in{color:var(--st-open);}body.reos-cloud .lg-out{color:var(--st-urgent,#9b2c2c);}
body.reos-cloud .lg-list{list-style:none;margin:0;padding:0;}
body.reos-cloud .lg-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
body.reos-cloud .lg-list li>div{flex:1;}body.reos-cloud .lg-list small{display:block;color:var(--ink-2);font-size:13px;}
body.reos-cloud .lg-list li>span{font-weight:700;white-space:nowrap;}
body.reos-cloud .ls-estimate:not(:empty){border:1px solid var(--border);border-radius:14px;padding:10px 12px;background:var(--surface);display:grid;gap:4px;}body.reos-cloud .ls-estimate p{margin:0;}body.reos-cloud .ls-est-warn{color:var(--st-urgent,#9b2c2c);font-weight:600;}body.reos-cloud .ls-est-ok{color:var(--st-open);font-weight:600;}
body.reos-cloud .ls-dupes:not(:empty){border:1px solid var(--st-urgent,#9b2c2c);border-radius:14px;padding:10px 12px;background:var(--surface);}body.reos-cloud .ls-dupes p,body.reos-cloud .ls-dupes ul{margin:0 0 4px;}body.reos-cloud .ls-dupes ul{padding-left:18px;font-size:14px;}
body.reos-cloud .dm-care{margin:4px 0 0;font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center;}body.reos-cloud .dm-care .mk-link{min-height:44px;}body.reos-cloud .dm-late{color:var(--st-urgent,#9b2c2c);font-weight:600;}

/* ===== v2 design system ===== */
/* REOS P21 — token theo bản mẫu docs/design/reos-mau-v2.html (P20 base) (Cloud). Nạp sau styles.css; mọi quy tắc chỉ dưới body.reos-cloud, demo không đổi. */
body.reos-cloud {
  --bg: #F7F7F5; --surface: #FFFFFF; --surface-2: #F0F0EC; --surface-alt: #F0F0EC;
  --line: #E4E3DE; --line-2: #D4D2CB; --line-strong: #D4D2CB; --border: #E4E3DE;
  --ink: #1A1A18; --ink-2: #5C5B56; --ink-3: #6F6D66;
  --brand: #234A3F; --brand-soft: #E6EEEA; --on-brand: #FFFFFF; --gold: #A8834F; --scrim: rgba(20,20,18,.42);
  --ok: #2E7D4F; --ok-soft: #E7F3EC; --warn: #9A5B00; --warn-soft: #FBF0DD; --info: #2F5E8C; --danger: #B42318;
  --ok-bg: rgba(46,125,79,.1); --warn-bg: rgba(178,106,0,.1); --info-bg: rgba(47,94,140,.1); --danger-bg: rgba(180,35,24,.1);
  --st-available: #2E7D4F; --st-available-bg: rgba(46,125,79,.1); --st-soon: #8A5300; --st-soon-bg: rgba(178,106,0,.1);
  --st-info: #2F5E8C; --st-info-bg: rgba(47,94,140,.1); --st-error: #B42318; --st-error-bg: rgba(180,35,24,.1);
  --forest-700: var(--brand); --forest-50: var(--surface-2); --forest-100: var(--brand-soft);
  --grad-primary: var(--brand); --overlay-photo: rgba(0,0,0,.35); --glass-bg: var(--brand);
  --shadow-1: 0 1px 2px rgba(0,0,0,.04); --shadow-sheet: 0 -8px 24px rgba(0,0,0,.08);
  --sh-1: var(--shadow-1); --sh-2: var(--shadow-1); --sh-3: var(--shadow-sheet);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --font: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
  --dur: 200ms;
  background: var(--bg) !important; color: var(--ink); font-family: var(--font); line-height: 1.45;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body.reos-cloud { --bg:#161615; --surface:#1F1F1D; --surface-2:#262624; --surface-alt:#262624; --line:#33332F; --line-2:#44443F; --line-strong:#44443F; --border:#33332F; --ink:#F1F0EC; --ink-2:#B9B7B0; --ink-3:#A4A29B; --brand:#7FB8A6; --brand-soft:#22332D; --on-brand:#0E1A16; --gold:#C9A46C; --ok:#7CC79A; --ok-soft:#1D2E24; --warn:#E3AE5E; --warn-soft:#33281A; --scrim:rgba(0,0,0,.6); } }
:root[data-theme="dark"] body.reos-cloud { --bg:#161615; --surface:#1F1F1D; --surface-2:#262624; --surface-alt:#262624; --line:#33332F; --line-2:#44443F; --line-strong:#44443F; --border:#33332F; --ink:#F1F0EC; --ink-2:#B9B7B0; --ink-3:#A4A29B; --brand:#7FB8A6; --brand-soft:#22332D; --on-brand:#0E1A16; --gold:#C9A46C; --ok:#7CC79A; --ok-soft:#1D2E24; --warn:#E3AE5E; --warn-soft:#33281A; --scrim:rgba(0,0,0,.6); }
/* Không gradient, không kính mờ ở bất kỳ phần tử Cloud nào */
body.reos-cloud *, body.reos-cloud *::before, body.reos-cloud *::after { backdrop-filter: none !important; }
body.reos-cloud, body.reos-cloud *:not(select), body.reos-cloud *::before, body.reos-cloud *::after { background-image: none !important; }
body.reos-cloud select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235E5C57' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; }
body.reos-cloud .app-shell, body.reos-cloud .main, body.reos-cloud .workspace { background: var(--bg) !important; }
@media (prefers-reduced-motion: reduce) { body.reos-cloud * { transition: none !important; animation: none !important; } }

/* ---------- Thanh trên ---------- */
body.reos-cloud .mobile-topbar { background: var(--bg) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; }
body.reos-cloud .mobile-topbar.is-scrolled { border-bottom: 1px solid var(--line) !important; background: var(--bg) !important; }
body.reos-cloud .mobile-topbar button { width: 44px; height: 44px; min-width: 44px; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 10px; color: var(--ink); display: grid; place-items: center; }
body.reos-cloud .mobile-topbar button:active { background: rgba(0,0,0,.06) !important; }
body.reos-cloud .mobile-topbar button .ico, body.reos-cloud .mobile-topbar button svg { width: 22px; height: 22px; }
body.reos-cloud .mobile-topbar h1, body.reos-cloud .mobile-topbar .topbar-title, body.reos-cloud .mobile-topbar strong { font-size: 18px; font-weight: 600; text-align: left; }

/* ---------- Sidebar / ngăn kéo ---------- */
body.reos-cloud .sidebar { background: var(--surface-2) !important; border-right: 1px solid var(--line) !important; box-shadow: none !important; border-radius: 0 !important; }
body.reos-cloud .sidebar-overlay:not([hidden]) { background: rgba(0,0,0,.4) !important; }
body.reos-cloud .sidebar .brand { gap: 10px; }
body.reos-cloud .sidebar .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--brand) !important; box-shadow: none !important; }
body.reos-cloud .sidebar .sidebar-close, body.reos-cloud .sidebar .sidebar-toggle { border: 0 !important; background: transparent !important; box-shadow: none !important; width: 40px; height: 40px; }
body.reos-cloud .p20-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; margin: 8px 0 4px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); font: 500 15px/1 var(--font); cursor: pointer; }
body.reos-cloud .sidebar .new-chat { display: flex !important; align-items: center; justify-content: flex-start; gap: 12px; height: 44px; min-height: 44px; padding: 0 12px; border: 0 !important; border-radius: 10px; background: transparent !important; color: var(--ink) !important; box-shadow: none !important; font: 500 15px/1 var(--font); }
body.reos-cloud .sidebar .new-chat::before { content: "+"; display: grid; place-items: center; width: 20px; font-size: 22px; font-weight: 400; color: var(--brand); }
body.reos-cloud .sidebar .new-chat svg { display: none; }
body.reos-cloud .sidebar .new-chat span { display: inline !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; }
body.reos-cloud .sidebar .new-chat:hover, body.reos-cloud .sidebar .nav-item:hover { background: rgba(0,0,0,.04) !important; }
body.reos-cloud .sidebar .nav-group { margin: 16px 12px 4px; font: 600 12px/1.4 var(--font); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-3) !important; }
body.reos-cloud .sidebar .nav-group[hidden] { display: none !important; }
body.reos-cloud .sidebar .nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; height: 44px; padding: 0 12px; border: 0 !important; border-radius: 10px; background: transparent !important; box-shadow: none !important; color: var(--ink) !important; font: 500 15px/1.2 var(--font); }
body.reos-cloud .sidebar .nav-item .nav-ico, body.reos-cloud .sidebar .nav-item svg { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
body.reos-cloud .sidebar .nav-item.active { background: var(--surface) !important; font-weight: 600; box-shadow: var(--shadow-1) !important; }
body.reos-cloud .sidebar .nav-item .f2-count, body.reos-cloud .sidebar .nav-item .mk-n:not([hidden]) { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand) !important; color: var(--on-brand) !important; font: 600 12px/20px var(--font); text-align: center; }
body.reos-cloud .sidebar .recent { display: none !important; }
body.reos-cloud .sidebar .profile-pill { display: flex !important; align-items: center; gap: 10px; min-height: 56px; margin-top: auto; padding: 8px 10px; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; }
body.reos-cloud .sidebar .profile-pill .avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--brand) !important; color: var(--on-brand); display: grid; place-items: center; font: 600 14px/1 var(--font); }
body.reos-cloud .sidebar .profile-pill > div:not(.avatar) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
body.reos-cloud .sidebar .profile-pill strong, body.reos-cloud .sidebar .profile-pill span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.reos-cloud .sidebar .profile-pill strong { font: 600 14px/1.3 var(--font); color: var(--ink); }
body.reos-cloud .sidebar .profile-pill span { font: 400 13px/1.3 var(--font); color: var(--ink-2); }
body.reos-cloud .sidebar .profile-pill small, body.reos-cloud .sidebar .profile-pill .reos-logout { display: none !important; }
@media (max-width: 767px) {
  body.reos-cloud .sidebar { width: min(300px, 86vw) !important; max-width: min(300px, 86vw) !important; transition: transform var(--dur) ease-out !important; }
}
@media (min-width: 768px) {
  body.reos-cloud .sidebar { width: 260px !important; }
  body.reos-cloud { --sidebar-w: 260px; }
}

/* P21 dọn dẹp — chuyển từ styles.css sang: ẩn dock/menu-more của demo, đáy nội dung, thanh trên và composer trên điện thoại */
body.reos-cloud .bottom-nav, body.reos-cloud .reos-dock, body.reos-cloud .reos-more-root { display: none !important; }
body.reos-cloud .main { padding-bottom: calc(var(--composer-h) + 48px); }
@media (max-width: 767px) {
  body.reos-cloud .topbar-brand { display: block; min-width: 0; overflow: hidden; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  body.reos-cloud .composer { bottom: calc(8px + env(safe-area-inset-bottom)); }
}


/* ---------- Sheet ---------- */
body.reos-cloud .reos-sheet-overlay { position: fixed !important; inset: 0 !important; z-index: 80; display: flex !important; background: rgba(0,0,0,.4) !important; padding: 0 !important; }
body.reos-cloud .reos-sheet { box-sizing: border-box !important; display: flex !important; flex-direction: column; background: var(--surface) !important; box-shadow: var(--shadow-sheet) !important; border: 0 !important; overflow: hidden !important; padding: 0 !important; }
body.reos-cloud .reos-sheet * { box-sizing: border-box; min-width: 0; }
body.reos-cloud .reos-sheet-head { position: relative; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 12px 12px 20px !important; border-bottom: 1px solid var(--line) !important; background: var(--surface) !important; flex: none; }
body.reos-cloud .reos-sheet-head h2 { margin: 0; font: 600 18px/1.3 var(--font) !important; color: var(--ink); }
body.reos-cloud .reos-sheet-close { width: 44px !important; height: 44px !important; min-width: 44px; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 10px !important; display: grid; place-items: center; color: var(--ink); }
body.reos-cloud .reos-sheet > :not(.reos-sheet-head):not(.reos-ui-footer):not(.mk-fsheet-foot) { overflow-y: auto; overflow-x: hidden; }
body.reos-cloud .reos-sheet > .reos-ui-body, body.reos-cloud .reos-sheet > .mk-fsheet-body { flex: 1 1 auto; padding: 8px 20px 16px !important; }
body.reos-cloud .reos-ui-footer, body.reos-cloud .mk-fsheet-foot { position: sticky !important; bottom: 0; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)) !important; border-top: 1px solid var(--line) !important; background: var(--surface) !important; flex: none; box-shadow: none !important; }
body.reos-cloud .reos-ui-footer > *, body.reos-cloud .mk-fsheet-foot > * { width: auto !important; }
body.reos-cloud .reos-ui-footer .primary, body.reos-cloud .mk-fsheet-foot .primary { flex: 1 1 auto; }
body.reos-cloud .mk-fsheet-foot .mk-link, body.reos-cloud .reos-ui-footer [data-ui-reset] { flex: none; height: 48px; padding: 0 8px; border: 0 !important; background: transparent !important; color: var(--brand) !important; font: 600 15px/1 var(--font); text-decoration: none; }
@media (max-width: 767px) {
  body.reos-cloud .reos-sheet-overlay { align-items: flex-end !important; justify-content: stretch !important; }
  body.reos-cloud .reos-sheet { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; height: auto !important; max-height: 90vh !important; border-radius: 20px 20px 0 0 !important; transform: none; animation: p20-up var(--dur) ease-out; }
  body.reos-cloud .reos-sheet::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 999px; background: var(--line-strong); z-index: 2; }
  body.reos-cloud .reos-sheet-head { padding-top: 18px !important; }
}
@media (min-width: 768px) {
  body.reos-cloud .reos-sheet-overlay { justify-content: flex-end !important; align-items: stretch !important; }
  body.reos-cloud .reos-sheet { position: relative !important; width: 440px !important; max-width: 100vw !important; height: 100% !important; max-height: 100vh !important; border-radius: 0 !important; animation: p20-left var(--dur) ease-out; }
}
@keyframes p20-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes p20-left { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Sắp xếp: dòng phẳng */
body.reos-cloud .reos-sort-list { display: flex !important; flex-direction: column; gap: 0 !important; padding: 4px 8px 12px !important; }
body.reos-cloud .reos-sort-list button { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; color: var(--ink) !important; font: 400 16px/1.3 var(--font); text-align: left; }
body.reos-cloud .reos-sort-list button > .ico:first-child { color: var(--ink-2); }
body.reos-cloud .reos-sort-list button[data-ui-menu] { justify-content: flex-start; }
body.reos-cloud .reos-sort-list button[aria-pressed="true"] { font-weight: 600; }
body.reos-cloud .reos-sort-list button[aria-pressed="true"]::after { content: ""; width: 20px; height: 20px; flex: none; background: var(--brand); -webkit-mask: url("./icons.svg#check") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
body.reos-cloud .reos-sort-list button[aria-pressed="true"] > .ico:last-child { color: var(--brand); }

/* Bộ lọc trong sheet */
body.reos-cloud .mk-fsheet-body fieldset, body.reos-cloud .mk-fsheet-body .ff-group, body.reos-cloud .mk-fsheet-body section { margin: 0 !important; padding: 16px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; }
body.reos-cloud .mk-fsheet-body legend, body.reos-cloud .mk-fsheet-body h3 { padding: 0 !important; margin: 0 0 10px !important; font: 600 15px/1.3 var(--font) !important; color: var(--ink); }
body.reos-cloud .mk-fsheet-body .mk-pp, body.reos-cloud .reos-sheet .mk-pp.reos-chiprow { flex-wrap: wrap !important; overflow: visible !important; }
body.reos-cloud .mk-fsheet-body .mk-range, body.reos-cloud .mk-fsheet-body .mk-minmax { display: grid !important; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }

/* ---------- Ô tìm thông minh ---------- */
body.reos-cloud .mk-smart { display: flex !important; align-items: center; gap: 10px; height: 48px; padding: 0 16px !important; border: 1px solid var(--line) !important; border-radius: 24px !important; background: var(--surface) !important; box-shadow: none !important; }
body.reos-cloud .mk-smart:focus-within { border-color: var(--brand) !important; box-shadow: 0 0 0 2px var(--brand-soft) !important; }
body.reos-cloud .mk-smart > .ico { width: 18px; height: 18px; color: var(--ink-2); flex: none; }
body.reos-cloud .mk-smart input { flex: 1; min-width: 0; height: 46px; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; font: 400 16px/1.3 var(--font); color: var(--ink); padding: 0 !important; }

/* ---------- Chip ---------- */
body.reos-cloud .chip, body.reos-cloud .mk-fchip, body.reos-cloud .reos-chiprow > button { display: inline-flex !important; align-items: center; gap: 6px !important; height: 34px; min-height: 34px; padding: 0 12px !important; border: 1px solid var(--line) !important; border-radius: 999px !important; background: var(--surface) !important; color: var(--ink) !important; box-shadow: none !important; font: 500 14px/1 var(--font) !important; white-space: nowrap; flex: none; }
body.reos-cloud .chip .ico, body.reos-cloud .mk-fchip .ico { width: 16px; height: 16px; flex: none; }
body.reos-cloud .chip.active, body.reos-cloud .chip[aria-pressed="true"], body.reos-cloud .reos-chiprow > button[aria-pressed="true"], body.reos-cloud .mk-fchip { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: var(--brand) !important; }
body.reos-cloud .chip .mk-n { color: inherit; opacity: .8; font-weight: 500; }
body.reos-cloud .mk-fchip button { width: 24px; height: 24px; margin-right: -6px; border: 0 !important; background: transparent !important; color: inherit; display: grid; place-items: center; }
body.reos-cloud .mk-mobile-rail, body.reos-cloud .reos-chiprow { gap: 8px !important; }
body.reos-cloud [data-p11-top] { position: relative; z-index: 3; background: var(--bg); margin-bottom: 12px !important; }
body.reos-cloud .mk-main { display: flex; flex-direction: column; min-width: 0; }
body.reos-cloud [data-results] { position: relative; z-index: 1; }

/* ---------- Thẻ tin ---------- */
body.reos-cloud .mk-grid { gap: 16px !important; }
body.reos-cloud .mk-view .mk-card, body.reos-cloud .mk-card { border: 0 !important; border-radius: 16px !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
body.reos-cloud .mk-view .mk-thumb, body.reos-cloud .mk-card .mk-thumb { position: relative; aspect-ratio: 16 / 10 !important; height: auto !important; max-height: none !important; width: 100%; border-radius: 12px !important; overflow: hidden; background: var(--surface-2) !important; color: var(--ink-3) !important; display: grid; place-items: center; padding: 0 !important; }
body.reos-cloud .mk-card .mk-thumb > .ico { width: 28px; height: 28px; }
body.reos-cloud .mk-card .mk-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.reos-cloud .mk-card .mk-thumb .st-pill { position: absolute; left: 8px; top: 8px; }
body.reos-cloud .mk-card .mk-save { position: absolute !important; right: 8px; top: 8px; width: 36px !important; height: 36px !important; min-height: 36px; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.9) !important; color: var(--ink) !important; box-shadow: var(--shadow-1) !important; display: grid; place-items: center; }
body.reos-cloud .mk-card .mk-save.is-saved { color: var(--brand) !important; }
body.reos-cloud .mk-card .mk-body { display: flex !important; flex-direction: column; gap: 4px !important; padding: 10px 2px 0 !important; }
body.reos-cloud .mk-card .mk-price { order: 1; margin: 0 !important; font: 700 18px/1.3 var(--font) !important; color: var(--ink) !important; }
body.reos-cloud .mk-card h3 { order: 2; margin: 0 !important; font: 500 15px/1.4 var(--font) !important; }
body.reos-cloud .mk-card h3 .mk-open { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 !important; border: 0 !important; background: none !important; color: var(--ink) !important; font: inherit !important; text-align: left; min-height: 0 !important; }
body.reos-cloud .mk-card .mk-specs { order: 3; display: flex !important; flex-wrap: wrap; gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none; font: 400 13px/1.4 var(--font); color: var(--ink-2); }
body.reos-cloud .mk-card .mk-specs li { display: inline; padding: 0 !important; background: none !important; border: 0 !important; }
body.reos-cloud .mk-card .mk-specs li + li::before { content: " · "; white-space: pre; }
body.reos-cloud .mk-card .mk-specs .ico, body.reos-cloud .mk-card .mk-addr .ico { display: none; }
body.reos-cloud .mk-card .mk-addr { order: 4; margin: 0 !important; font: 400 13px/1.4 var(--font); color: var(--ink-2) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.reos-cloud .mk-card .mk-tags { order: 5; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px !important; }
body.reos-cloud .mk-card .mk-tags > * { font: 500 12px/1 var(--font) !important; padding: 4px 8px !important; border-radius: 999px !important; background: var(--surface-2) !important; color: var(--ink-2) !important; border: 0 !important; }
body.reos-cloud .mk-card .mk-contact { display: none !important; }
@media (min-width: 1024px) { body.reos-cloud .mk-view .mk-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; } }

/* ---------- Trạng thái rỗng ---------- */
body.reos-cloud .mk-state.mk-empty { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin: 32px auto !important; padding: 16px !important; max-width: 420px; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; grid-column: 1 / -1; }
body.reos-cloud .mk-state.mk-empty > .ico { box-sizing: content-box; width: 24px; height: 24px; padding: 16px; margin: 0 !important; border-radius: 50%; background: var(--surface-2); color: var(--ink-2) !important; }
body.reos-cloud .mk-state.mk-empty h3 { margin: 0 0 4px; font: 600 17px/1.35 var(--font) !important; }
body.reos-cloud .mk-state.mk-empty p { margin: 0; font: 400 15px/1.45 var(--font); color: var(--ink-2); }
body.reos-cloud .mk-state.mk-empty .reos-actions { display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; margin-top: 16px; }
body.reos-cloud .mk-state.mk-empty [data-clearall] { background: var(--brand) !important; color: var(--on-brand) !important; border: 0 !important; }
body.reos-cloud .mk-state.mk-empty [data-droplast] { background: transparent !important; border: 0 !important; color: var(--brand) !important; }

/* ---------- Nút ---------- */
body.reos-cloud button.primary, body.reos-cloud .mk-btn.primary, body.reos-cloud .btn-primary, body.reos-cloud .reos-ui-footer .primary, body.reos-cloud button[type="submit"]:not(.mk-link) { min-height: 48px; padding: 0 20px; border: 0 !important; border-radius: 12px !important; background: var(--brand) !important; color: var(--on-brand) !important; box-shadow: none !important; font: 600 15px/1 var(--font); }
body.reos-cloud .mk-btn:not(.primary):not(.mk-save), body.reos-cloud .reos-actions > button:not(.primary) { min-height: 48px; padding: 0 16px; border: 1px solid var(--line-strong) !important; border-radius: 12px !important; background: transparent !important; color: var(--ink) !important; box-shadow: none !important; font: 500 15px/1 var(--font); }
body.reos-cloud .mk-link { border: 0 !important; background: transparent !important; color: var(--brand) !important; font-weight: 600; }
body.reos-cloud button.primary:hover, body.reos-cloud button[type="submit"]:hover { filter: brightness(.94); }
@media (min-width: 768px) { body.reos-cloud button.primary, body.reos-cloud .mk-btn, body.reos-cloud button[type="submit"] { min-height: 40px; } }

/* ---------- Ô nhập ---------- */
body.reos-cloud input:where(:not([type="checkbox"],[type="radio"],[type="file"],[type="range"])), body.reos-cloud select, body.reos-cloud .smart-control, body.reos-cloud textarea { box-sizing: border-box; min-height: 48px; border: 1px solid var(--line) !important; border-radius: 12px !important; background-color: var(--surface) !important; color: var(--ink); font: 400 16px/1.4 var(--font); box-shadow: none !important; }
body.reos-cloud .mk-smart input { min-height: 0 !important; border: 0 !important; }
body.reos-cloud input:focus, body.reos-cloud select:focus, body.reos-cloud textarea:focus, body.reos-cloud .smart-control:focus { outline: 0; border-color: var(--brand) !important; box-shadow: 0 0 0 2px var(--brand-soft) !important; }
body.reos-cloud label { color: var(--ink-2); font-size: 13px; font-weight: 500; }
body.reos-cloud .reos-login-err, body.reos-cloud .field-error { color: var(--danger) !important; font-size: 13px; }

/* ---------- Danh sách cài đặt / thẻ ---------- */
body.reos-cloud .reos-card, body.reos-cloud .lg-list { border: 1px solid var(--line) !important; border-radius: 16px !important; background: var(--surface) !important; box-shadow: none !important; }
body.reos-cloud .lg-list { padding: 0 !important; overflow: hidden; }
body.reos-cloud .lg-list > li { min-height: 56px; padding: 10px 16px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: transparent !important; border-radius: 0 !important; }
body.reos-cloud .lg-list > li:last-child { border-bottom: 0 !important; }
body.reos-cloud .reos-acct .ico-box, body.reos-cloud .reos-acct .nav-ico-box { background: transparent !important; }

/* ---------- Nhãn trạng thái ---------- */
body.reos-cloud .st-pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px !important; border: 0 !important; border-radius: 999px !important; font: 600 12px/1 var(--font) !important; box-shadow: none !important; }
body.reos-cloud .st-pill .ico { width: 14px; height: 14px; }
body.reos-cloud .mk-card .mk-thumb .st-pill { background: rgba(255,255,255,.92) !important; }
body.reos-cloud .sample-badge { font-size: 12px !important; }
body.reos-cloud .mk-verified { color: var(--gold) !important; }

/* ---------- Toast ---------- */
body.reos-cloud .toast, body.reos-cloud .mk-toast, body.reos-cloud .reos-toast { background: var(--ink) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: var(--shadow-sheet) !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; }

/* ---------- Khung trang ---------- */
body.reos-cloud .page-head h2 { font: 600 22px/1.3 var(--font); }
body.reos-cloud .mk-detail-body h3, body.reos-cloud .view h3 { font-weight: 600; }
@media (max-width: 767px) {
  body.reos-cloud .view { padding-left: 16px !important; padding-right: 16px !important; }
  body.reos-cloud { font-size: 16px; }
}
@media (min-width: 768px) {
  body.reos-cloud .view > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
  body.reos-cloud .view { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ---------- P20 sửa sau đo ---------- */
body.reos-cloud form.mk-smart input[data-smartq] { min-height: 0 !important; height: 46px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
body.reos-cloud .sidebar button.p20-search { height: 44px !important; min-height: 44px !important; padding: 0 14px !important; border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--surface) !important; justify-content: flex-start; }
body.reos-cloud .reos-sheet .reos-sort-list > button, body.reos-cloud .reos-sheet .mk-sort-sheet > button { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important; min-height: 48px !important; }
body.reos-cloud .reos-sheet .reos-sort-list > button:active { background: rgba(0,0,0,.05) !important; }
body.reos-cloud .reos-sheet .reos-sort-list > button[aria-pressed="true"] > .ico { color: var(--brand) !important; }
body.reos-cloud .reos-sheet .reos-sort-list > button[aria-pressed="true"]::after { display: none; }
body.reos-cloud .mk-state.mk-empty .reos-actions > button[data-clearall] { min-height: 48px; padding: 0 20px; background: var(--brand) !important; color: var(--on-brand) !important; border: 0 !important; border-radius: 12px !important; }
body.reos-cloud .mk-state.mk-empty .reos-actions > button[data-droplast] { min-height: 44px; background: transparent !important; border: 0 !important; color: var(--brand) !important; font-weight: 600; }
body.reos-cloud .reos-settings-list { border: 1px solid var(--line) !important; border-radius: 16px !important; background: var(--surface) !important; box-shadow: none !important; overflow: hidden; }
body.reos-cloud .reos-settings-list > button { min-height: 56px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; position: relative; }
body.reos-cloud .reos-settings-list > button + button::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; height: 1px; background: var(--line); }
body.reos-cloud .reos-settings-list > button > .ico:last-child { color: var(--ink-3); }
body.reos-cloud .reos-setting-icon { background: transparent !important; border: 0 !important; color: var(--ink-2) !important; width: 24px !important; }
body.reos-cloud .reos-settings-list strong { font: 500 15px/1.3 var(--font); }
body.reos-cloud .reos-settings-list small { font-size: 13px; }
body.reos-cloud .reos-account-identity { border: 1px solid var(--line) !important; border-radius: 16px !important; background: var(--surface) !important; box-shadow: none !important; }

/* P20 — chip nhìn cao 34 nhưng vùng chạm 44 */
/* P22: một lớp chip duy nhất — viên 34px nhìn thấy, vùng chạm 44px bằng viền trong suốt 5px trên/dưới (không ::before) */
body.reos-cloud .chip, body.reos-cloud .mk-fchip, body.reos-cloud .reos-chiprow > button { position: relative; box-sizing: border-box !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; vertical-align: middle; border-style: solid !important; border-color: transparent !important; border-width: 5px 0 !important; background: var(--surface) !important; background-clip: padding-box !important; box-shadow: inset 0 0 0 1px var(--line) !important; align-self: center; }
body.reos-cloud .chip::before, body.reos-cloud .mk-fchip::before, body.reos-cloud .reos-chiprow > button::before { content: none !important; }
body.reos-cloud .chip.active, body.reos-cloud .chip[aria-pressed="true"], body.reos-cloud .reos-chiprow > button[aria-pressed="true"], body.reos-cloud .mk-fchip { background: var(--brand-soft) !important; border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--brand) !important; color: var(--brand) !important; }
@media (max-width: 767px) {
  body.reos-cloud .mk-mobile-rail, body.reos-cloud .mk-chips, body.reos-cloud .reos-chiprow { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; overflow-x: auto !important; overflow-y: hidden; scrollbar-width: none; height: auto !important; padding: 0 16px 0 0 !important; scroll-padding-inline: 16px; mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent) !important; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent) !important; }
  body.reos-cloud .mk-chips > * { flex: 0 0 auto !important; white-space: nowrap; }
}
body.reos-cloud .mk-fchip button { width: 44px !important; height: 44px !important; min-height: 44px; margin: 0 -14px 0 -10px !important; }
/* ===== P21 — Danh sách tin theo bản mẫu v2 (docs/design/reos-mau-v2.html) ===== */
body.reos-cloud .mk-bar21 { display: flex !important; width: 100%; align-items: center; justify-content: space-between; margin: 0 0 8px !important; padding: 0 !important; min-height: 44px; border: 0 !important; background: none !important; font: 400 15px/1.3 var(--font) !important; color: var(--ink-2) !important; }
body.reos-cloud .mk-bar21 .mk-bar-s { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--ink); }
body.reos-cloud .mk-card .mk-price { font: 700 22px/1.2 var(--font) !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
body.reos-cloud .mk-card .mk-body { gap: 2px !important; padding-top: 12px !important; }
body.reos-cloud .mk-card .mk-specs { gap: 4px 12px !important; margin-top: 4px !important; }
body.reos-cloud .mk-card .mk-specs li { display: inline-flex !important; align-items: center; gap: 4px; }
body.reos-cloud .mk-card .mk-specs li + li::before { content: none !important; }
body.reos-cloud .mk-card .mk-specs .ico, body.reos-cloud .mk-card .mk-addr .ico { display: inline-block !important; width: 16px; height: 16px; flex: none; }
body.reos-cloud .mk-card .mk-addr { display: flex; align-items: center; gap: 4px; margin-top: 4px !important; }
body.reos-cloud .mk-card .mk-tags { margin-top: 6px !important; }
body.reos-cloud .mk-card .mk-tags > * { border-radius: 6px !important; padding: 3px 8px !important; }
body.reos-cloud .mk-card .mk-tags .sample-badge { background: transparent !important; border: 1px dashed var(--line-2) !important; color: var(--ink-3) !important; }
body.reos-cloud .mk-card .mk-thumb { border-radius: 16px !important; }
@media (max-width: 767px) {
  body.reos-cloud .mk-card.no-photo { display: grid !important; grid-template-columns: 96px minmax(0,1fr); column-gap: 14px; position: relative; padding: 14px 40px 14px 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; }
  body.reos-cloud .mk-card.no-photo .mk-thumb { position: static; width: 96px !important; height: 96px !important; aspect-ratio: 1 !important; border-radius: 12px !important; display: grid; place-items: center; position: relative; }
  body.reos-cloud .mk-card.no-photo .mk-thumb .st-pill { left: 6px; top: auto; bottom: 6px; width: 10px; height: 10px; min-height: 0; padding: 0 !important; border-radius: 50% !important; background: var(--ok) !important; box-shadow: 0 0 0 2px var(--surface-2); overflow: hidden; font-size: 0 !important; }
  body.reos-cloud .mk-card.no-photo .mk-thumb .st-pill > * { display: none !important; }
  body.reos-cloud .mk-card.no-photo .mk-save { position: absolute !important; right: 0; top: 8px; background: transparent !important; color: var(--ink-2) !important; box-shadow: none !important; }
  body.reos-cloud .mk-card.no-photo .mk-body { padding: 0 !important; }
}
body.reos-cloud .mk-card { position: relative; }
body.reos-cloud .mk-bar21 .ico { display: inline-block !important; width: 18px; height: 18px; }
@media (max-width: 767px) {
  body.reos-cloud .mk-card.no-photo .mk-thumb > .ico { width: 22px; height: 22px; }
  body.reos-cloud .mk-card.no-photo .mk-specs li:nth-child(n+3) { display: none !important; }
  body.reos-cloud .mk-card.no-photo .mk-tags > :nth-child(n+3) { display: none !important; }
  body.reos-cloud .mk-card.no-photo .mk-tags { flex-wrap: nowrap; overflow: hidden; }
  body.reos-cloud .mk-card.no-photo .mk-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 767px) { body.reos-cloud .mk-card.no-photo .mk-tags > * { white-space: nowrap; flex: none; } }
/* ===== P21 — Chi tiết tin ===== */
body.reos-cloud .mk-d21 .d21-top { display: flex !important; align-items: center; gap: 4px; height: 56px; padding: 0 6px !important; background: var(--bg) !important; border-bottom: 1px solid var(--line); }
body.reos-cloud .mk-d21 .d21-h { flex: 1; margin: 0; font: 600 18px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
body.reos-cloud .mk-d21 .d21-ib, body.reos-cloud .mk-d21 .d21-top .mk-save { position: static !important; width: 44px !important; height: 44px !important; min-height: 44px; display: grid !important; place-items: center; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; color: var(--ink) !important; }
body.reos-cloud .mk-d21 .d21-top .mk-save.is-saved { color: var(--brand) !important; }
body.reos-cloud .mk-d21 .mk-detail-body { padding: 0 16px 110px !important; }
body.reos-cloud .mk-d21 .mk-gal-empty, body.reos-cloud .mk-d21 .mk-gallery { margin: 0 -16px !important; aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; align-content: center; color: var(--ink-3); border-radius: 0 !important; }
body.reos-cloud .mk-d21 .mk-gal-empty p { font-size: 14px; margin: 6px 0 0; }
body.reos-cloud .mk-d21 .mk-gal-empty .ico { width: 34px; height: 34px; }
body.reos-cloud .mk-d21 .mk-tags { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 6px; }
body.reos-cloud .mk-d21 .mk-tags > .mk-type, body.reos-cloud .mk-d21 .mk-tags > .sample-badge { font: 500 12px/1.2 var(--font) !important; padding: 3px 8px !important; border-radius: 6px !important; background: var(--surface-2) !important; color: var(--ink-2) !important; border: 0 !important; }
body.reos-cloud .mk-d21 .mk-tags > .sample-badge { background: transparent !important; border: 1px dashed var(--line-2) !important; color: var(--ink-3) !important; }
body.reos-cloud .mk-d21 .d21-price { margin: 18px 0 0 !important; font: 700 30px/1.15 var(--font) !important; letter-spacing: -.02em; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
body.reos-cloud .mk-d21 .d21-price small { font: 500 15px/1 var(--font); color: var(--ink-2); letter-spacing: 0; }
body.reos-cloud .mk-d21 .d21-title { margin: 6px 0 0 !important; font: 600 18px/1.35 var(--font) !important; color: var(--ink); }
body.reos-cloud .mk-d21 .d21-loc { display: flex; gap: 6px; align-items: center; margin: 8px 0 0 !important; font-size: 15px !important; color: var(--ink-2) !important; }
body.reos-cloud .mk-d21 .d21-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
body.reos-cloud .mk-d21 .d21-facts > div { background: var(--surface); padding: 12px 14px; min-width: 0; }
body.reos-cloud .mk-d21 .d21-facts dt { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); }
body.reos-cloud .mk-d21 .d21-facts dd { margin: 2px 0 0; font: 600 16px/1.3 var(--font); color: var(--ink); overflow-wrap: anywhere; }
body.reos-cloud .mk-d21 .mk-fields { margin-top: 12px; }
body.reos-cloud .mk-d21 .d21-sec, body.reos-cloud .mk-d21 .mk-map { margin-top: 26px; }
body.reos-cloud .mk-d21 .d21-sec h3, body.reos-cloud .mk-d21 .mk-map h3 { margin: 0 0 8px; font: 600 17px/1.3 var(--font); color: var(--ink); }
body.reos-cloud .mk-d21 .d21-sec p { color: var(--ink-2); font-size: 15px; }
body.reos-cloud .mk-d21 .d21-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
body.reos-cloud .mk-d21 .d21-clamp.is-open { display: block; }
body.reos-cloud .mk-d21 .d21-more, body.reos-cloud .mk-d21 .mk-map .mk-btn { display: inline-flex !important; align-items: center; gap: 6px; min-height: 44px; margin-top: 2px; padding: 0 !important; border: 0 !important; background: none !important; color: var(--brand) !important; font: 600 15px/1 var(--font) !important; }
body.reos-cloud .mk-d21 .d21-row { display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px !important; border: 1px solid var(--line) !important; border-radius: 16px !important; background: var(--surface) !important; text-align: left; color: var(--ink); }
body.reos-cloud .mk-d21 .d21-row > .ico { color: var(--ink-3); }
body.reos-cloud .mk-d21 .d21-av { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 600; }
body.reos-cloud .mk-d21 .d21-av.sq { border-radius: 12px; }
body.reos-cloud .mk-d21 .d21-tx { flex: 1; min-width: 0; display: block !important; }
body.reos-cloud .mk-d21 .d21-tx b { display: block; font: 600 15px/1.35 var(--font); }
body.reos-cloud .mk-d21 .d21-tx > span { font-size: 13px; color: var(--ink-2); }
body.reos-cloud .mk-d21 .mk-verified { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--font); color: var(--gold) !important; }
body.reos-cloud .mk-d21 [data-rephost] .mk-rep { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
body.reos-cloud .mk-d21 [data-rephost] .mk-rep .ico { display: none; }
body.reos-cloud .mk-d21 .mk-lead { margin: 0; }
body.reos-cloud .mk-d21 .mk-map iframe { height: 150px !important; border: 1px solid var(--line) !important; border-radius: 16px !important; }
body.reos-cloud .mk-d21 .d21-cta { display: flex !important; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom,0px)) !important; background: var(--bg) !important; border-top: 1px solid var(--line) !important; box-shadow: none !important; }
body.reos-cloud .mk-d21 .d21-cta button { height: 48px; min-height: 48px; border-radius: 12px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1 var(--font) !important; box-shadow: none !important; }
body.reos-cloud .mk-d21 .d21-cta .d21-sq { width: 48px; flex: none; padding: 0 !important; border: 1px solid var(--line-2) !important; background: var(--surface) !important; color: var(--ink) !important; }
body.reos-cloud .mk-d21 .d21-cta .d21-pri { flex: 1; padding: 0 18px !important; border: 0 !important; background: var(--brand) !important; color: var(--on-brand) !important; }
body.reos-cloud .mk-d21 .d21-facts { height: auto !important; max-height: none !important; grid-template-rows: none !important; grid-auto-rows: auto !important; padding: 0 !important; }
body.reos-cloud .mk-d21 .mk-detail-body > * { flex-shrink: 0 !important; }
body.reos-cloud .mk-d21 .mk-detail-body { gap: 0 !important; }
body.reos-cloud .mk-d21 .d21-facts > div:last-child:nth-child(odd) { grid-column: span 2; }
/* ===== P21 — Sắp xếp + Bộ lọc ===== */
body.reos-cloud .reos-sheet .mk-sort-sheet, body.reos-cloud .reos-sheet .reos-sort-list { display: block !important; padding: 0 !important; }
body.reos-cloud .reos-sheet .mk-sort-sheet button, body.reos-cloud .reos-sheet .reos-sort-list button { display: flex !important; width: 100%; align-items: center; justify-content: space-between; height: 52px; min-height: 52px; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; font: 400 16px/1 var(--font) !important; color: var(--ink) !important; box-shadow: none !important; }
body.reos-cloud .reos-sheet .mk-sort-sheet button:last-child, body.reos-cloud .reos-sheet .reos-sort-list button:last-child { border-bottom: 0 !important; }
body.reos-cloud .reos-sheet .mk-sort-sheet button[aria-pressed="true"], body.reos-cloud .reos-sheet .reos-sort-list button[aria-pressed="true"] { font-weight: 600 !important; }
body.reos-cloud .reos-sheet .mk-sort-sheet button .ico, body.reos-cloud .reos-sheet .reos-sort-list button .ico { color: var(--brand); }
body.reos-cloud .mk-ff.f21 fieldset { margin: 0 !important; padding: 18px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; }
body.reos-cloud .mk-ff.f21 fieldset:last-child { border-bottom: 0 !important; }
body.reos-cloud .mk-ff.f21 legend { float: left; width: 100%; margin: 0 0 12px !important; padding: 0 !important; font: 600 15px/1.3 var(--font) !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
body.reos-cloud .mk-ff.f21 legend + * { clear: both; }
body.reos-cloud .mk-ff.f21 .mk-pp { display: flex !important; flex-wrap: wrap !important; gap: 8px; overflow: visible !important; }
body.reos-cloud .mk-ff.f21 .f21-range { display: grid !important; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important; gap: 10px !important; align-items: center; margin-top: 12px; }
body.reos-cloud .mk-ff.f21 fieldset > legend + .f21-range { margin-top: 0; }
body.reos-cloud .mk-ff.f21 .f21-fld { position: relative; display: block !important; margin: 0 !important; min-width: 0; }
body.reos-cloud .mk-ff.f21 .f21-fld input { width: 100% !important; min-width: 0; height: 48px; padding: 0 44px 0 14px !important; }
body.reos-cloud .mk-ff.f21 .f21-u { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ink-3); pointer-events: none; }
body.reos-cloud .mk-ff.f21 .f21-d { color: var(--ink-3); }
body.reos-cloud .mk-ff.f21 .f21-sel label { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 0 !important; border-bottom: 1px solid var(--line); font: 400 16px/1.3 var(--font) !important; color: var(--ink) !important; }
body.reos-cloud .mk-ff.f21 .f21-sel label:last-child { border-bottom: 0; }
body.reos-cloud .mk-ff.f21 .f21-sel .smart-select { flex: 0 1 auto; min-width: 0; width: auto !important; margin: 0 !important; }
body.reos-cloud .mk-ff.f21 .f21-sel .smart-control { min-height: 44px !important; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; display: inline-flex !important; align-items: center; gap: 4px; font-size: 15px !important; color: var(--ink-2) !important; }
body.reos-cloud .mk-ff.f21 .f21-sel .smart-control span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.reos-cloud .mk-ff.f21 .f21-sel .smart-control .ico { transform: rotate(-90deg); }
body.reos-cloud .mk-ff.f21 .f21-sel input { width: 96px !important; }
/* ===== P21 — Menu (sidebar) theo bản mẫu ===== */
body.reos-cloud .sidebar { background: var(--surface-2) !important; }
body.reos-cloud .sidebar .brand-mark { width: 30px !important; height: 30px !important; border-radius: 9px !important; background: var(--brand) !important; color: var(--on-brand) !important; display: grid !important; place-items: center; }
body.reos-cloud .sidebar .brand-mark .ico { width: 18px; height: 18px; }
body.reos-cloud .sidebar .nav-group { padding: 16px 10px 6px !important; margin: 0 !important; font: 600 13px/1.3 var(--font) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink-3) !important; }
body.reos-cloud .sidebar .nav-item { min-height: 44px; border-radius: 10px !important; font: 500 15px/1.2 var(--font) !important; color: var(--ink) !important; }
body.reos-cloud .sidebar .nav-item .ico { color: var(--ink-2); }
body.reos-cloud .sidebar .nav-item.active { background: var(--surface) !important; font-weight: 600 !important; }
body.reos-cloud .sidebar .nav-item.active .ico { color: var(--brand); }
body.reos-cloud .sidebar .nav-item .reos-bell-n, body.reos-cloud .sidebar .nav-item .reos-nav-c, body.reos-cloud .sidebar .nav-item .nav-count { margin-left: auto !important; position: static !important; min-width: 0; height: auto; padding: 1px 7px !important; border-radius: 999px !important; background: var(--brand-soft) !important; color: var(--brand) !important; font: 600 12px/1.4 var(--font) !important; box-shadow: none !important; }
body.reos-cloud .sidebar .reos-admin-sub { display: none !important; }
body.reos-cloud .reos-admin-links { display: block; margin: 0 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
body.reos-cloud .reos-admin-links button { display: flex; width: 100%; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--line); background: none; font: 500 15px/1.2 var(--font); color: var(--ink); text-align: left; }
body.reos-cloud .reos-admin-links button:last-child { border-bottom: 0; }
body.reos-cloud .reos-admin-links button span { flex: 1; }
body.reos-cloud .reos-admin-links button .ico { color: var(--ink-2); }
body.reos-cloud .reos-admin-links button .ico:last-child { color: var(--ink-3); }
body.reos-cloud .reos-admin-links button[aria-current="true"] { font-weight: 600; color: var(--brand); }
body.reos-cloud .reos-admin-links button[aria-current="true"] .ico:first-child { color: var(--brand); }
/* ===== P21 — Trang toàn màn hình, công tắc, nút chuyển, chip chọn nhiều ===== */
@media (max-width: 767px) {
  body.reos-cloud .reos-page-overlay { background: var(--bg) !important; }
  body.reos-cloud .reos-sheet.reos-page { top: 0 !important; bottom: 0 !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; box-shadow: none !important; background: var(--bg) !important; animation: none !important; }
  body.reos-cloud .reos-sheet.reos-page::before { display: none !important; }
}
body.reos-cloud .reos-sheet.reos-page .reos-sheet-head { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 4px; height: 56px; padding: 0 6px !important; background: var(--bg) !important; border-bottom: 0 !important; }
body.reos-cloud .reos-sheet.reos-page .reos-sheet-head h2 { flex: 1; font: 600 18px/1.2 var(--font) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.reos-cloud .reos-sheet.reos-page .reos-ui-body { padding: 0 16px !important; background: var(--bg); }
body.reos-cloud .reos-sheet.reos-page .reos-ui-footer { background: var(--bg) !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom,0px)) !important; gap: 10px; }
body.reos-cloud .reos-sheet.reos-page .reos-ui-footer > * { flex: 1 1 auto; }
body.reos-cloud .reos-sheet.reos-page .reos-ui-footer > button[type="button"] { flex: 0 0 auto; padding: 0 18px !important; }
body.reos-cloud .p21-form { display: block !important; }
body.reos-cloud .p21-form > label, body.reos-cloud .p21-form .p21-row2 > label, body.reos-cloud .p21-form .p21-lbl, body.reos-cloud .p21-form legend { display: block !important; margin: 18px 0 0 !important; font: 500 14px/1.3 var(--font) !important; color: var(--ink-2) !important; text-transform: none !important; letter-spacing: 0 !important; }
body.reos-cloud .p21-form > label > input, body.reos-cloud .p21-form > label > textarea, body.reos-cloud .p21-form > label > .smart-select, body.reos-cloud .p21-form .p21-row2 input, body.reos-cloud .p21-form .p21-fld { display: block; width: 100% !important; margin-top: 6px !important; }
body.reos-cloud .p21-form textarea { min-height: 88px; padding: 12px 14px !important; resize: vertical; }
body.reos-cloud .p21-form input:where(:not([type="checkbox"],[type="radio"],[type="hidden"])) { height: 48px; padding: 0 14px !important; }
body.reos-cloud .p21-hint { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); }
body.reos-cloud .p21-muted { font-weight: 400; color: var(--ink-3); }
body.reos-cloud .p21-row2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; align-items: end; }
body.reos-cloud .p21-row2 > label { margin-top: 18px !important; }
body.reos-cloud .p21-fld { position: relative; }
body.reos-cloud .p21-fld input { margin: 0 !important; padding-right: 56px !important; }
body.reos-cloud .p21-u { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 400 14px/1 var(--font); color: var(--ink-3); pointer-events: none; }
body.reos-cloud .p21-consent { margin-top: 22px; padding: 14px; border-radius: 12px; background: var(--surface-2); }
body.reos-cloud .reos-switch-row { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 12px; margin: 0 !important; min-width: 0; cursor: pointer; font: 400 14px/1.45 var(--font) !important; color: var(--ink-2) !important; }
body.reos-cloud .reos-switch-row > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.reos-cloud .reos-switch { position: relative; flex: none; width: 44px; height: 26px; margin-top: 2px; border-radius: 999px; background: var(--line-2); transition: background var(--dur) ease-out; }
body.reos-cloud .reos-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: transform var(--dur) ease-out; }
body.reos-cloud .reos-switch-row > input:checked + .reos-switch { background: var(--brand); }
body.reos-cloud .reos-switch-row > input:checked + .reos-switch::after { transform: translateX(18px); }
body.reos-cloud .reos-switch-row > input:focus-visible + .reos-switch { outline: 2px solid var(--brand); outline-offset: 2px; }
body.reos-cloud .reos-switch-tx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
body.reos-cloud .reos-switch-tx b { display: block; font: 600 15px/1.35 var(--font); color: var(--ink); }
body.reos-cloud .reos-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 6px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
body.reos-cloud .reos-seg label { position: relative; display: block !important; margin: 0 !important; }
body.reos-cloud .reos-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.reos-cloud .reos-seg span { display: grid; place-items: center; height: 40px; border-radius: 9px; font: 600 15px/1 var(--font); color: var(--ink-2); cursor: pointer; }
body.reos-cloud .reos-seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
body.reos-cloud .reos-seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
body.reos-cloud .p21-form fieldset { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.reos-cloud .p21-form .dm-types { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
body.reos-cloud .p21-form .dm-check { position: relative; display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; height: 36px; min-height: 36px; margin: 0 !important; padding: 0 14px !important; border: 1px solid var(--line) !important; border-radius: 999px !important; background: var(--surface) !important; font: 500 14px/1 var(--font) !important; color: var(--ink) !important; cursor: pointer; white-space: nowrap; }
body.reos-cloud .p21-form .dm-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
body.reos-cloud .p21-form .dm-check .ico { display: none; width: 16px; height: 16px; }
body.reos-cloud .p21-form .dm-check:has(input:checked) { background: var(--brand-soft) !important; border-color: var(--brand) !important; color: var(--brand) !important; }
body.reos-cloud .p21-form .dm-check:has(input:checked) .ico { display: inline-block; }
body.reos-cloud .p21-form .dm-check:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
body.reos-cloud input[type="checkbox"], body.reos-cloud input[type="radio"] { min-height: 0 !important; border-radius: revert !important; }
body.reos-cloud .p21-form fieldset { margin-top: 18px !important; } body.reos-cloud .p21-form fieldset legend { margin-top: 0 !important; margin-bottom: 0 !important; }
/* P21 lượt 4 — thẻ ngang gọn ≤140px: thông số + nhãn chung một hàng; ô ẩn của công tắc không tràn màn */
@media (max-width: 767px) {
  body.reos-cloud .mk-card.no-photo { padding: 10px 40px 10px 0 !important; }
  body.reos-cloud .mk-card.no-photo .mk-body { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-content: flex-start; align-items: center; column-gap: 8px; row-gap: 2px; }
  body.reos-cloud .mk-card.no-photo .mk-body > * { flex: 0 0 100%; min-width: 0; margin: 0 !important; }
  body.reos-cloud .mk-card.no-photo .mk-body > .mk-specs { flex: 0 1 auto; order: 3; }
  body.reos-cloud .mk-card.no-photo .mk-body > .mk-tags { flex: 0 1 auto; order: 3; }
  body.reos-cloud .mk-card.no-photo .mk-body > .mk-addr { order: 4; }
}
body.reos-cloud .reos-switch-row { position: relative; }
body.reos-cloud .reos-switch-row > input { width: 1px !important; max-width: 1px !important; min-width: 0 !important; left: 0; top: 0; }

/* P22 — thẻ không ảnh ≤120px: tiêu đề 2 dòng, 1 dòng thông số+khu vực, bỏ hàng nhãn, "Mẫu" ở góc ô biểu tượng */
body.reos-cloud .mk-card .mk-line, body.reos-cloud .mk-mau { display: none; }
@media (max-width: 767px) {
  body.reos-cloud .mk-card.no-photo { grid-template-columns: 80px minmax(0,1fr) !important; column-gap: 12px !important; padding: 10px 44px 10px 0 !important; min-width: 0; overflow: hidden; }
  body.reos-cloud .mk-card.no-photo .mk-thumb { width: 80px !important; height: 80px !important; }
  body.reos-cloud .mk-card.no-photo .mk-mau { display: block; position: absolute; right: 4px; bottom: 4px; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 6px; background: var(--surface); color: var(--ink-2); }
  body.reos-cloud .mk-card.no-photo .mk-save { width: 40px; height: 40px; min-height: 40px; }
  body.reos-cloud .mk-card.no-photo .mk-body { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 2px !important; min-width: 0; overflow: hidden; }
  body.reos-cloud .mk-card.no-photo .mk-body > .mk-tags, body.reos-cloud .mk-card.no-photo .mk-body > .mk-specs, body.reos-cloud .mk-card.no-photo .mk-body > .mk-addr { display: none !important; }
  body.reos-cloud .mk-card.no-photo .mk-price { order: 1; font-size: 20px !important; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
  body.reos-cloud .mk-card.no-photo h3 { order: 2; font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; max-height: 2.7em; }
  body.reos-cloud .mk-card.no-photo h3 .mk-open { display: inline; font: inherit; text-align: left; }
  body.reos-cloud .mk-card.no-photo .mk-line { order: 3; display: block; font-size: 13px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
  body.reos-cloud .mk-card.no-photo .mk-line-f2 { color: var(--brand); font-weight: 600; }
}
@media (max-width: 767px) {
  body.reos-cloud .mk-card.no-photo .mk-body > * { flex: none !important; width: 100%; text-align: left; }
  body.reos-cloud .mk-card.no-photo .mk-line-sub { order: 3; }
  body.reos-cloud .mk-card.no-photo .mk-line:not(.mk-line-sub) { order: 4; }
}

/* ===== P22 lượt 2 — khuôn mật độ danh sách (< 768px) + Phần B ===== */
@media (max-width: 767px) {
  body.reos-cloud { min-height: 100vh; min-height: 100dvh; }
  body.reos-cloud .mobile-topbar { min-height: calc(52px + env(safe-area-inset-top)) !important; height: calc(52px + env(safe-area-inset-top)); transition: transform 200ms ease-out; will-change: transform; }
  body.reos-cloud.reos-tb-hide .mobile-topbar { transform: translateY(-100%); }
  body.reos-cloud .main { padding-bottom: calc(var(--composer-h, 0px) + env(safe-area-inset-bottom) + 72px) !important; }
  body.reos-cloud .main > .view.mk-view { padding-left: 0 !important; padding-right: 0 !important; }
  body.reos-cloud .mk-view .page-head:empty, body.reos-cloud .mk-view .page-head { margin: 0 !important; }
  body.reos-cloud .mk-view .mk-smart { margin: 4px 0 0 !important; min-height: 44px !important; height: 44px; }
  body.reos-cloud .mk-view .mk-smart input { height: 42px !important; min-height: 42px !important; }
  /* hàng chip + dòng đếm dính dưới thanh trên */
  body.reos-cloud .mk-main > [data-p11-top], body.reos-cloud #projects-view [data-pj-top] { position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 20; background: var(--bg); margin: 0 !important; padding: 4px 0 0 !important; transition: transform 200ms ease-out; }
  body.reos-cloud .mk-main > [data-p11-top] .mk-mobile-rail { height: 44px !important; }
  body.reos-cloud .mk-bar21 { position: sticky; top: calc(52px + 48px + env(safe-area-inset-top)); z-index: 19; background: var(--bg) !important; min-height: 32px !important; height: 32px; margin: 0 0 4px !important; transition: transform 200ms ease-out; }
  body.reos-cloud .mk-bar21::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -6px; }
  body.reos-cloud.reos-tb-hide .mk-main > [data-p11-top], body.reos-cloud.reos-tb-hide #projects-view [data-pj-top], body.reos-cloud.reos-tb-hide .mk-bar21 { transform: translateY(calc(-52px - env(safe-area-inset-top))); }
  body.reos-cloud .mk-grid { gap: 0 !important; }
  body.reos-cloud .mk-card, body.reos-cloud .mk-card * { min-width: 0; }
  body.reos-cloud .mk-card h3, body.reos-cloud .page-head h2 { overflow-wrap: anywhere; }
  body.reos-cloud .mk-price, body.reos-cloud .d21-price { font-variant-numeric: tabular-nums; }
}
@media (max-width: 360px) { body.reos-cloud .main { padding-left: 12px !important; padding-right: 12px !important; } body.reos-cloud .mobile-topbar { padding-left: 4px; padding-right: 4px; } }

/* ===== P22 lượt 3 ===== */
/* Bảng thao tác: biểu tượng + chữ căn trái; nguy hiểm màu --danger */
body.reos-cloud .reos-sheet .reos-act-list > button, body.reos-cloud .reos-act-list > button { justify-content: flex-start !important; gap: 12px !important; min-height: 52px !important; text-align: left !important; }
body.reos-cloud .reos-act-list > button > span { flex: 1 1 auto; text-align: left; }
body.reos-cloud .reos-act-list > button > .ico { width: 20px; height: 20px; flex: none; }
body.reos-cloud .reos-act-list > button.is-danger, body.reos-cloud .reos-act-list > button.is-danger > .ico { color: var(--danger) !important; }
/* Thông báo trống */
body.reos-cloud .reos-notes .reos-note-empty { display: block; text-align: center; padding: 32px 16px !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--ink-2); }
@media (max-width: 767px) {
  /* bỏ eyebrow/H1 lặp với thanh trên */
  body.reos-cloud .view > .page-head .eyebrow, body.reos-cloud .view > .page-head h2, body.reos-cloud #assistant-view .hero-prompt { display: none !important; }
  body.reos-cloud .view > .page-head:not(:has(> :not(div))):not(:has(.mk-sub, button, a)) { display: none !important; }
  /* Chi tiết dự án: tên chỉ ở thanh trên; tab dính, gạch chân */
  body.reos-cloud .pj-detail .reos-detail-header > :first-child:not(div), body.reos-cloud .pj-detail .reos-detail-header h2, body.reos-cloud .pj-detail .reos-detail-header .reos-detail-icon { display: none !important; }
  body.reos-cloud .pj-detail .reos-detail-header { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px !important; }
  body.reos-cloud .pj-detail .reos-detail-header p { margin: 0 !important; }
  body.reos-cloud .pj-detail .reos-tabs { position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 18; display: flex !important; gap: 20px !important; margin: 0 -16px 12px !important; padding: 0 16px !important; background: var(--bg) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; transition: transform 200ms ease-out; }
  body.reos-cloud.reos-tb-hide .pj-detail .reos-tabs { transform: translateY(calc(-52px - env(safe-area-inset-top))); }
  body.reos-cloud .pj-detail .reos-tabs [role=tab] { flex: none !important; min-height: 44px; padding: 0 !important; background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; color: var(--ink-2) !important; font-weight: 500; }
  body.reos-cloud .pj-detail .reos-tabs [role=tab][aria-selected=true] { color: var(--ink) !important; border-bottom-color: var(--brand) !important; font-weight: 600; }
  /* Bảng hàng: mỗi căn ≤ 84px, thao tác trong ⋮ */
  body.reos-cloud .pj-ucards { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none; }
  body.reos-cloud .pj-ucard { position: relative; display: block !important; min-height: 0 !important; padding: 8px 48px 8px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: hidden; }
  body.reos-cloud .pj-ucard > * { margin: 0 !important; }
  body.reos-cloud .pj-uc-top { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  body.reos-cloud .pj-uc-top strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  body.reos-cloud .pj-uc-top .st-pill { flex: none; }
  body.reos-cloud .pj-uc-sub, body.reos-cloud .pj-uc-price { font-size: 13px !important; line-height: 1.4; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.reos-cloud .pj-uc-price .mk-price { font-size: 14px !important; font-weight: 600; color: var(--ink); }
  body.reos-cloud .pj-umenu { position: absolute !important; right: 0; top: 50%; transform: translateY(-50%); width: 40px !important; height: 40px !important; min-height: 40px !important; }
  body.reos-cloud .pj-umenu::after { content: ""; position: absolute; inset: -2px; }
  body.reos-cloud .pj-block h3 { margin: 12px 0 0 !important; font-size: 13px; color: var(--ink-2); font-weight: 600; }
  /* Ô soạn Trợ lý: một viên thuốc */
  body.reos-cloud:not(.reos-no-composer) #composer-form { display: flex !important; align-items: flex-end; gap: 4px; box-sizing: border-box; max-width: calc(100% - 24px); left: 12px !important; right: 12px !important; width: auto !important; padding: 4px !important; min-height: 48px; border: 1px solid var(--line-2) !important; border-radius: 24px !important; background: var(--surface) !important; box-shadow: 0 1px 2px rgba(0,0,0,.06) !important; overflow: hidden; }
  body.reos-cloud #composer-form > * { flex: none; margin: 0 !important; }
  body.reos-cloud #composer-form .composer-icon { width: 40px !important; height: 40px !important; min-height: 40px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ink-2) !important; border-radius: 50% !important; }
  body.reos-cloud #composer-form textarea { flex: 1 1 auto !important; min-width: 0; width: auto !important; min-height: 40px !important; max-height: 120px; padding: 9px 4px !important; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; resize: none; font-size: 16px !important; line-height: 22px; overflow-y: auto; white-space: pre-wrap; }
  body.reos-cloud #composer-form textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.reos-cloud #composer-form .send-button { width: 36px !important; height: 36px !important; min-height: 36px; margin: 2px !important; border-radius: 50% !important; background: var(--brand) !important; color: var(--on-brand, #fff) !important; border: 0 !important; display: grid; place-items: center; }
  body.reos-cloud #composer-form.is-empty .send-button { opacity: .4; }
  body.reos-cloud #composer-form .send-button::after { content: ""; position: absolute; width: 44px; height: 44px; }
  body.reos-cloud #composer-form .reos-ui-footer { display: none !important; }
}
/* P22: dòng thao tác Tin của tôi (≤ 84px + ⋮) */
body.reos-cloud .ls-card .ls-m { display: none; }
@media (max-width: 767px) {
  body.reos-cloud .ls-card { display: block !important; position: relative; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: hidden; }
  body.reos-cloud .ls-card > .ls-cover, body.reos-cloud .ls-card > .ls-body, body.reos-cloud .ls-card > .ls-acts { display: none !important; }
  body.reos-cloud .ls-card .ls-m { display: block; padding: 10px 48px 10px 0; min-width: 0; }
  body.reos-cloud .ls-m > * { margin: 0 !important; }
  body.reos-cloud .ls-m1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
  body.reos-cloud .ls-m1 strong { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.reos-cloud .ls-m-st { flex: none; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
  body.reos-cloud .ls-m2 { font-size: 13px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.reos-cloud .ls-m3 { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  body.reos-cloud .ls-more { position: absolute !important; right: 0; top: 50%; transform: translateY(-50%); width: 40px !important; height: 40px !important; min-height: 40px !important; }
  body.reos-cloud .ls-more::after { content: ""; position: absolute; inset: -2px; }
  /* bỏ eyebrow/tiêu đề lặp trong page-head của mọi màn (giữ nút thao tác) */
  body.reos-cloud .main .page-head .eyebrow, body.reos-cloud .main .page-head h2 { display: none !important; }
  body.reos-cloud #assistant-view .page-head + .ls-hint { display: none !important; }
  body.reos-cloud .main .page-head { margin-bottom: 8px !important; min-height: 0 !important; }
}
/* P22: dòng khách hàng ≤ 84px + ⋮ */
body.reos-cloud .f2-more { display: none; }
@media (max-width: 767px) {
  body.reos-cloud .pj-umenu, body.reos-cloud .ls-more, body.reos-cloud .f2-more { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  body.reos-cloud .f2-list { margin: 0 !important; padding: 0 !important; }
  body.reos-cloud .f2-row { position: relative; display: block !important; padding: 10px 48px 10px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: hidden; }
  body.reos-cloud .f2-row .f2-main { display: grid !important; grid-template-columns: minmax(0,1fr) auto; column-gap: 8px; row-gap: 2px; align-items: center; min-width: 0; }
  body.reos-cloud .f2-row .f2-main > * { margin: 0 !important; min-width: 0; }
  body.reos-cloud .f2-row h3 { font-size: 15px !important; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.reos-cloud .f2-row h3 .mk-open { display: inline; font: inherit; }
  body.reos-cloud .f2-row .f2-prot { justify-self: end; font-size: 12px !important; padding: 2px 8px !important; min-height: 0 !important; white-space: nowrap; }
  body.reos-cloud .f2-row .f2-main > p, body.reos-cloud .f2-row .dm-care { grid-column: 1 / -1; font-size: 13px !important; line-height: 1.4; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.reos-cloud .f2-row .mk-phone, body.reos-cloud .f2-row .reos-tag, body.reos-cloud .f2-row [data-contacted] { display: none !important; }
  body.reos-cloud .f2-more { display: grid; position: absolute !important; right: 0; top: 50%; transform: translateY(-50%); width: 40px !important; height: 40px !important; min-height: 40px !important; }
  body.reos-cloud .f2-more::after { content: ""; position: absolute; inset: -2px; }
}
@media (max-width: 767px) {
  body.reos-cloud .mk-mobile-rail .mk-chips { margin: 0 !important; padding: 0 !important; overflow: visible !important; mask-image: none !important; -webkit-mask-image: none !important; align-self: center; height: 44px !important; flex: none; }
  body.reos-cloud .f2-row h3 .mk-open, body.reos-cloud .mk-card.no-photo h3 .mk-open { min-height: 0 !important; height: auto !important; padding: 0 !important; }
  body.reos-cloud .f2-row h3 .mk-open::after, body.reos-cloud .mk-card.no-photo h3 .mk-open::after { content: ""; position: absolute; inset: 0 48px 0 0; }
  body.reos-cloud .f2-row .f2-main { position: static; }
  body.reos-cloud .mk-card.no-photo h3, body.reos-cloud .f2-row h3 { position: static !important; }
}
@media (max-width: 767px) { body.reos-cloud .pj-card.no-photo h3 { -webkit-line-clamp: 1 !important; max-height: 1.35em; } }

/* P23 — Dự án | Chủ đầu tư, danh sách chủ đầu tư, mục thông tin dự án */
body.reos-cloud .pj-mode { display: flex; gap: 8px; margin: 0 0 12px; }
body.reos-cloud .dv-list { list-style: none; margin: 0; padding: 0; }
body.reos-cloud .dv-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; text-align: left; background: var(--surface, transparent); border: 0; border-bottom: 1px solid var(--border); color: inherit; cursor: pointer; }
body.reos-cloud .dv-row .min-w-0 { flex: 1; min-width: 0; display: flex; flex-direction: column; }
body.reos-cloud .dv-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.reos-cloud .dv-row small, body.reos-cloud .dv-row > span { color: var(--muted-foreground, var(--muted)); font-size: 13px; }
body.reos-cloud .dv-row > span { white-space: nowrap; }
body.reos-cloud .pj-sec { border-top: 1px solid var(--border); padding: 10px 0; }
body.reos-cloud .pj-sec summary { cursor: pointer; font-weight: 600; }
body.reos-cloud .pj-sec .mk-desc { white-space: pre-line; margin-top: 8px; }

/* ===== P24 — Khuôn mật độ chung (mobile/tablet/desktop), kiểu Lovable: chữ gọn, khoảng cách 4/8/12/16, thẻ thoáng ===== */
body.reos-cloud { --d-pad: 12px; --d-gap: 8px; --d-card: 12px; --fs-body: 15px; --fs-sm: 13px; --fs-xs: 12px; --fs-h2: 20px; --fs-h3: 15px; font-size: var(--fs-body); line-height: 1.45; }
@media (min-width:768px) { body.reos-cloud { --d-pad: 20px; --d-gap: 10px; --d-card: 14px; --fs-body: 14.5px; --fs-h2: 22px; } }
@media (min-width:1200px) { body.reos-cloud { --d-pad: 28px; --d-gap: 12px; --fs-body: 14px; --fs-h2: 24px; } }
body.reos-cloud .main { padding-left: var(--d-pad) !important; padding-right: var(--d-pad) !important; }
@media (min-width:768px) { body.reos-cloud .main { padding-top: 16px; } }
body.reos-cloud .page-head { margin-bottom: 12px; }
body.reos-cloud .page-head h2 { font-size: var(--fs-h2); line-height: 1.25; letter-spacing: -.01em; margin-top: 2px; }
body.reos-cloud .page-head .eyebrow { font-size: var(--fs-xs); margin: 0; }
body.reos-cloud :is(.mk-sub, .ls-hint, small, .reos-infolist dt, .mk-addr, .mk-line-sub) { font-size: var(--fs-sm); }
body.reos-cloud :is(section, .pj-panel) > h3, body.reos-cloud .mk-card h3 { font-size: var(--fs-h3); line-height: 1.35; margin: 0 0 4px; }
body.reos-cloud section > h3 { margin-top: 16px; }
/* thẻ & lưới */
body.reos-cloud .mk-grid { gap: var(--d-gap); }
@media (min-width:768px) { body.reos-cloud .mk-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
body.reos-cloud .mk-card { border-radius: 14px; box-shadow: none; }
body.reos-cloud .mk-card .mk-body { padding: var(--d-card); gap: 4px; }
body.reos-cloud :is(.lg-list, .dv-list) > li { padding-top: 0; padding-bottom: 0; }
body.reos-cloud .dv-row { min-height: 52px; padding: 8px 12px; gap: 10px; }
body.reos-cloud .dv-list, body.reos-cloud .reos-infolist, body.reos-cloud .mk-fields { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; padding: 0; }
body.reos-cloud .reos-infolist > div { padding: 9px 12px; gap: 8px; }
body.reos-cloud .reos-infolist > div:last-child, body.reos-cloud .dv-list > li:last-child .dv-row { border-bottom: 0; }
body.reos-cloud .pj-sec { padding: 10px 2px; }
/* chip, ô tìm, thanh công cụ */
body.reos-cloud .chip { min-height: 34px; padding: 0 12px; font-size: var(--fs-sm); border-radius: 999px; }
body.reos-cloud .pj-mode { gap: 6px; margin-bottom: 10px; }
body.reos-cloud .mk-smart { min-height: 44px; margin-bottom: 10px; }
body.reos-cloud .mk-smart input { font-size: var(--fs-body); }
body.reos-cloud .mk-toolbar { gap: 8px; margin: 8px 0; }
body.reos-cloud .mk-layout { gap: 16px; }
@media (min-width:1200px) { body.reos-cloud .mk-filter-col { width: 260px; } }
/* biểu mẫu & sheet */
body.reos-cloud .mk-ff { gap: 12px; }
body.reos-cloud .mk-ff fieldset { padding: 0; margin: 0; border: 0; display: grid; gap: 6px; }
body.reos-cloud .mk-ff legend { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; }
body.reos-cloud .mk-ff :is(input, select) { min-height: 40px; font-size: var(--fs-body); }
body.reos-cloud .reos-ui-sheet .reos-sheet-head, body.reos-cloud .reos-ui-body { padding: 12px 16px; }
@media (max-width:767px) { body.reos-cloud .mk-ff :is(input, select) { min-height: 44px; font-size: 16px; } }
/* nút */
body.reos-cloud .mk-btn { min-height: 38px; padding: 0 14px; font-size: var(--fs-sm); border-radius: 10px; }
@media (max-width:767px) { body.reos-cloud .mk-btn { min-height: 44px; } }
/* P24 — tablet/desktop: hàng chip 1 dòng cuộn ngang; thẻ không ảnh thành ô ngang gọn; thanh bên thu gọn chỉ còn biểu tượng tìm */
@media (min-width:768px) {
  body.reos-cloud .mk-chips { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-bottom: 2px; mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  body.reos-cloud .mk-chips::-webkit-scrollbar { display: none; }
  body.reos-cloud .mk-chips > * { flex: 0 0 auto; white-space: nowrap; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) { display: grid !important; grid-template-columns: 72px minmax(0,1fr); column-gap: 12px; align-items: start; padding: 12px !important; position: relative; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-thumb { position: relative; width: 72px !important; height: 72px !important; min-height: 0 !important; aspect-ratio: 1 !important; border-radius: 10px !important; display: grid; place-items: center; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-thumb .st-pill { position: absolute; left: 6px; bottom: 6px; top: auto; width: 10px; height: 10px; min-height: 0; padding: 0 !important; border-radius: 50% !important; background: var(--ok) !important; font-size: 0 !important; overflow: hidden; box-shadow: 0 0 0 2px var(--surface-2); }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-thumb .st-pill > * { display: none !important; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-save { position: absolute !important; top: 6px; right: 6px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; background: transparent !important; box-shadow: none !important; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-body { padding: 0 32px 0 0 !important; min-width: 0; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) :is(h3, .mk-addr span) { overflow: hidden; text-overflow: ellipsis; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-addr span { white-space: nowrap; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-price { font-size: 17px; margin: 0; }
  body.reos-cloud .mk-card .mk-line { display: none !important; }
  body.reos-cloud .mk-view .mk-grid, body.reos-cloud .pj-list .mk-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-body { display: flex !important; flex-direction: column; gap: 3px; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-body > * { order: 0 !important; margin: 0 !important; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) :is(.mk-specs, .mk-tags) { display: flex !important; flex-wrap: wrap; gap: 2px 10px; padding: 0; margin: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-2); }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-specs li { width: auto !important; flex: 0 0 auto !important; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-specs li:nth-child(n+5) { display: none; }
  body.reos-cloud .mk-card:not(:has(.mk-thumb img)) .mk-tags { order: -1 !important; gap: 4px; }
  body.reos-cloud .sidebar-collapsed .p20-search { width: 44px; height: 44px; padding: 0; justify-content: center; overflow: hidden; }
  body.reos-cloud .sidebar-collapsed .p20-search span { display: none; }
}

/* P23 consent and legal links: Cloud only. */
body.reos-cloud .reos-login-panel .p23-consent { display:flex; flex-direction:row; align-items:flex-start; gap:10px; }
body.reos-cloud .reos-login-panel .p23-consent input { flex:0 0 20px; width:20px; height:20px; min-height:20px; padding:0; margin-top:3px; accent-color:var(--ui-selected); }
body.reos-cloud .p23-consent span { min-width:0; font-size:13px; line-height:1.6; }
body.reos-cloud .p23-consent a,body.reos-cloud .p23-legal-links a { color:var(--ui-selected); text-decoration:underline; overflow-wrap:anywhere; }
body.reos-cloud .p23-legal-links { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:12px; line-height:1.6; }
body.reos-cloud #sidebar > .p23-legal-links { padding:8px 10px; border-top:1px solid var(--border); }