/* Mepo5 (PHP) — design system v4. Flatsome-UX-Builder-matched palette (tối #1C2024, cyan #00A0D2, bo góc nhỏ, font hệ thống). Self-contained, no build. */
:root{
  --bg:#1c2024; --panel:#24282d; --border:#343b42; --border-soft:#2b3137;
  --text:#f1f1f1; --muted:#94a0ac; --faint:#6b747c;
  --primary:#00a0d2; --primary-d:#0073aa; --primary-soft:#153039; --accent:#33b8e0;
  --danger:#f0555c; --ok:#22b356;
  --grad:linear-gradient(135deg,#00b8e6 0%,#00a0d2 100%);
  --grad-soft:linear-gradient(135deg,#17323b 0%,#122a30 100%);
  --sh-sm:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.24);
  --sh-md:0 4px 12px rgba(0,0,0,.32),0 12px 32px rgba(0,0,0,.28);
  --sh-lg:0 18px 50px rgba(0,0,0,.4);
  --r:4px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.brand,.rd-hero h1,.lp-hero h1{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;letter-spacing:normal}
a{color:var(--primary);text-decoration:none}
.muted{color:var(--muted)} .sub{color:var(--muted);font-size:14px;margin:0 0 20px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:10px 17px;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:.16s;box-shadow:var(--sh-sm)}
.btn:hover{border-color:#4a545c;transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-primary{background:var(--primary);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(0,160,210,.26)}
.btn-primary:hover{background:var(--primary-d);box-shadow:0 10px 24px rgba(0,160,210,.32)}
.btn-grad{background:var(--grad);border:0;color:#fff;box-shadow:0 8px 22px rgba(0,160,210,.3)}
.btn-grad:hover{filter:brightness(1.05);box-shadow:0 12px 30px rgba(0,160,210,.38)}
.btn-block{display:flex;width:100%}
.btn-sm{padding:7px 13px;font-size:13px;border-radius:4px}
.btn-lg{padding:14px 28px;font-size:16px;border-radius:5px}

/* fields */
.field{display:block;margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:#c7ccd1}
.input{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:4px;font-size:14px;font-family:inherit;background:var(--panel);color:var(--text);transition:.15s}
.input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px rgba(0,160,210,.18)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:22px;box-shadow:var(--sh-sm)}
.alert{background:#3a2222;border:1px solid #5a3030;color:#f0817a;padding:11px 15px;border-radius:4px;margin-bottom:14px;font-size:14px}
.notice{background:var(--primary-soft);border:1px solid #1f4550;color:var(--primary-d);padding:11px 15px;border-radius:4px;margin-bottom:14px;font-size:14px}
.tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}
.tag-muted{background:#2b3137;color:var(--muted)}

/* brand */
.brand{font-weight:800;font-size:20px;display:inline-flex;align-items:center;gap:9px}
.brand .b5{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo-tri{width:28px;height:28px;border-radius:4px;background:var(--grad);clip-path:polygon(50% 6%,94% 90%,6% 90%);box-shadow:0 4px 12px rgba(0,160,210,.3)}
/* real brand logo image (wordmark + square mark) */
.brand-logo{height:30px;width:auto;display:block}
.brand-mark{width:28px;height:28px;object-fit:contain;display:block;flex-shrink:0}

/* auth */
.center{min-height:100vh;display:grid;place-items:center;padding:24px;background:
  radial-gradient(60% 50% at 50% -10%,rgba(0,160,210,.08),transparent 70%),var(--bg)}
.auth-card{width:min(430px,93vw);box-shadow:var(--sh-lg);border-radius:6px;padding:30px}

/* ── app shell ── */
.rd{display:flex;min-height:100vh}
.rd-side{width:248px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh}
.rd-brand{display:flex;align-items:center;gap:9px;padding:4px 8px 20px}
.rd-nav{display:flex;flex-direction:column;gap:3px}
.rd-item{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:4px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;background:none;border:0;cursor:pointer;width:100%;text-align:left;font-family:inherit;transition:.14s}
.rd-item:hover{background:var(--bg);color:var(--text)}
.rd-item.active{background:var(--primary-soft);color:var(--primary)}
.rd-item.active::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
.rd-item .ic{width:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ic-svg{display:block;flex:0 0 auto}
.rd-item .pill{margin-left:auto;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--muted)}
.rd-sep{margin:14px 8px;border:0;border-top:1px solid var(--border-soft)}
.rd-bottom{margin-top:auto}
.rd-user{display:flex;align-items:center;gap:10px;padding:12px 8px 2px;border-top:1px solid var(--border-soft);margin-top:12px}
.rd-avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex-shrink:0;box-shadow:0 3px 8px rgba(0,160,210,.28)}
.rd-up{margin-left:auto;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--grad);color:#fff;box-shadow:0 3px 8px rgba(0,160,210,.28)}
.rd-main{flex:1;min-width:0;overflow-y:auto;height:100vh;background:
  radial-gradient(50% 38% at 50% 0%,rgba(0,160,210,.05),transparent 72%)}
.rd-inner{max-width:1180px;margin:0 auto;padding:64px 40px 84px}

/* hero + prompt */
.rd-hero{text-align:center;margin-bottom:40px}
.rd-hero-logo{width:auto;height:66px;margin:0 auto 20px;display:block;filter:drop-shadow(0 12px 26px rgba(0,160,210,.28))}
.rd-hero h1{font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0 0 10px}
.rd-hero .lead{color:var(--muted);font-size:17px;line-height:1.6;max-width:560px;margin:0 auto 28px}
.rd-tabs{display:inline-flex;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:5px;margin-bottom:18px;box-shadow:var(--sh-sm)}
.rd-tab{padding:9px 17px;border-radius:4px;border:0;background:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:.14s}
.rd-tab:hover{color:var(--text)}
.rd-tab.active{background:var(--primary);color:#fff}
.rd-prompt{max-width:640px;margin:0 auto;background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.24);padding:20px 20px 14px;text-align:left;transition:box-shadow .2s,border-color .2s}
.rd-prompt:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(0,160,210,.18),var(--sh-md)}
.rd-prompt textarea{width:100%;border:0;outline:0;resize:none;font-size:15px;line-height:1.65;color:var(--text);background:none;font-family:inherit;min-height:88px}
.rd-prompt textarea::placeholder{color:var(--faint)}
/* Shared AI-edit floating panel (editor) */
.mae-launch{position:fixed;right:20px;bottom:20px;z-index:9998;border:0;border-radius:24px;padding:11px 18px;background:var(--grad,linear-gradient(135deg,#00b8e6,#00a0d2));color:#fff;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 8px 24px rgba(0,160,210,.4)}
.mae-launch:hover{transform:translateY(-1px)}
.mae-panel{position:fixed;right:20px;bottom:74px;z-index:9999;width:384px;max-width:calc(100vw - 32px);height:540px;max-height:calc(100vh - 96px);background:var(--panel);border:1px solid var(--border,#343b42);border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden}
.mae-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--grad,linear-gradient(135deg,#00b8e6,#00a0d2));color:#fff;font-weight:700;font-size:14px}
.mae-x{border:0;background:rgba(255,255,255,.2);color:#fff;width:26px;height:26px;border-radius:4px;cursor:pointer;font-size:13px}
.mae-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.mae-msg{font-size:13.5px;line-height:1.5;padding:9px 12px;border-radius:5px;max-width:90%}
.mae-a{background:var(--panel);border:1px solid var(--border,#343b42);align-self:flex-start}
.mae-u{background:var(--primary-soft);color:var(--text);align-self:flex-end}
.mae-hint{color:var(--faint,#6b747c);font-size:12px}
.mae-typing{color:var(--faint,#6b747c)}
.mae-reload{border:0;background:var(--primary,#00a0d2);color:#fff;border-radius:4px;padding:4px 10px;font-size:12.5px;cursor:pointer;margin-left:4px}
.mae-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border,#343b42);background:var(--panel)}
.mae-input input{flex:1;border:1.5px solid #3a4149;border-radius:4px;padding:12px 14px;font-size:14.5px;background:#1a1e22;color:var(--text,#f1f1f1);outline:none;transition:border-color .12s,box-shadow .12s,background .12s}
.mae-input input::placeholder{color:var(--faint)}
.mae-input input:focus{border-color:var(--primary,#00a0d2);background:var(--panel);box-shadow:0 0 0 3px rgba(0,160,210,.16)}
.mae-input button{border:0;border-radius:4px;width:46px;min-height:44px;background:var(--grad,linear-gradient(135deg,#00b8e6,#00a0d2));color:#fff;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(0,160,210,.35)}
/* Mandatory site-form chooser (shop / service / hybrid) */
.rd-forms{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:10px 2px 2px}
.rd-forms-q{flex-basis:100%;font-size:12.5px;color:var(--muted);margin-bottom:2px}
.rd-form-opt{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;cursor:pointer;border:1.5px solid var(--border);border-radius:5px;padding:12px 13px;background:var(--panel);transition:border-color .16s,background .16s,box-shadow .16s;position:relative}
.rd-form-opt:hover{border-color:var(--primary);background:var(--primary-soft)}
.rd-form-opt span{font-weight:600;font-size:14px}
.rd-form-opt em{font-style:normal;font-size:11.5px;color:var(--faint);line-height:1.35}
.rd-form-opt input{position:absolute;opacity:0;pointer-events:none}
.rd-form-opt:has(input:checked){border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 3px rgba(0,160,210,.16)}
.rd-forms-err .rd-form-opt{border-color:#f0556e;animation:rdShake .3s}
@keyframes rdShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.rd-prompt-bar{display:flex;align-items:center;gap:8px;margin-top:8px}
.rd-tool{width:32px;height:32px;border-radius:4px;border:0;background:none;color:var(--faint);font-size:15px;cursor:pointer}
.rd-tool:hover{background:var(--bg);color:var(--muted)}
.rd-seg{display:inline-flex;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:3px}
.rd-seg-b{border:0;background:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);padding:6px 13px;border-radius:4px;font-family:inherit}
.rd-seg-b.active{background:var(--panel);color:var(--primary);box-shadow:var(--sh-sm)}
.rd-tpl{cursor:pointer;font-family:inherit;text-align:left;padding:0;border:1px solid var(--border)}
.rd-tpl .rd-thumb{display:grid;place-items:center}
.rd-industry{border:1px solid var(--border);background:var(--panel);border-radius:4px;padding:7px 12px;font-size:13px;font-weight:500;color:var(--text);font-family:inherit;cursor:pointer;box-shadow:var(--sh-sm)}
.rd-industry:hover{border-color:#4a545c}
.rd-thumb-badge{position:absolute;top:10px;right:10px;z-index:3;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--primary);display:grid;place-items:center;font-size:11px;box-shadow:var(--sh-sm)}
.rd-thumb-use{position:absolute;left:50%;bottom:12px;transform:translate(-50%,8px);z-index:3;opacity:0;transition:.18s;background:var(--primary);color:#fff;font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;box-shadow:0 6px 16px rgba(0,160,210,.4);white-space:nowrap}
.rd-tpl:hover .rd-thumb-use{opacity:1;transform:translate(-50%,0)}
.rd-tpl:hover .rd-thumb{filter:brightness(.94)}
.rd-send{width:40px;height:40px;border-radius:4px;border:0;background:var(--grad);color:#fff;font-size:17px;cursor:pointer;box-shadow:0 6px 16px rgba(0,160,210,.38);transition:.15s}
.rd-send:hover{transform:translateY(-1px) scale(1.04)}
.rd-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:18px}
.rd-chip{font-size:13px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;font-family:inherit;box-shadow:var(--sh-sm);transition:.14s}
.rd-chip:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}

/* card grid w/ live preview thumbs */
.rd-sec-head{display:flex;align-items:center;justify-content:space-between;margin:48px 0 20px}
.rd-sec-head h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0}
.rd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:22px}
.rd-card{background:var(--panel);border:1px solid var(--border);border-radius:6px;overflow:hidden;color:inherit;display:block;box-shadow:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.24);transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.rd-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.36);transform:translateY(-4px);border-color:#3a4149}
.rd-thumb{height:172px;position:relative;overflow:hidden;background:var(--grad-soft);border-bottom:1px solid var(--border-soft)}
.rd-thumb .chrome{position:absolute;top:0;left:0;right:0;height:26px;background:var(--panel);border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:5px;padding:0 10px;z-index:2}
.rd-thumb .chrome i{width:8px;height:8px;border-radius:50%;background:#3a4149;display:inline-block}
.rd-thumb iframe{position:absolute;top:26px;left:0;width:200%;height:688px;border:0;transform:scale(.5);transform-origin:top left;pointer-events:none;background:var(--bg)}
.rd-card-body{padding:14px 16px 16px}
.rd-card-body strong{display:block;font-size:14.5px;font-weight:700;margin-bottom:9px}
.rd-card-wrap{position:relative}
.rd-del{position:absolute;top:10px;right:10px;z-index:4;margin:0;opacity:0;transition:.14s}
.rd-card-wrap:hover .rd-del{opacity:1}
.rd-del button{width:28px;height:28px;border-radius:50%;border:0;background:rgba(30,34,38,.9);color:var(--danger);font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--sh-md);display:grid;place-items:center;line-height:1}
.rd-del button:hover{background:var(--danger);color:#fff}
.rd-tags{display:flex;flex-wrap:wrap;gap:6px}
.rd-newcard{border:1.5px dashed #3a4149;display:grid;place-items:center;min-height:248px;color:var(--muted);cursor:pointer;background:linear-gradient(180deg,var(--panel),var(--bg));border-radius:6px;font-family:inherit;font-size:14px;font-weight:600;transition:.16s}
.rd-newcard:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}

/* template gallery (Kho giao diện) */
.tpl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;position:sticky;top:0;z-index:5;padding:8px 0;background:linear-gradient(180deg,var(--bg) 70%,transparent)}
.tpl-chip{padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:var(--sh-sm);transition:.14s}
.tpl-chip:hover{background:var(--bg);color:var(--text)}
.tpl-chip.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(0,160,210,.3)}
.tpl-prev{position:absolute;top:10px;right:10px;z-index:4;padding:6px 11px;border-radius:999px;background:rgba(10,12,14,.8);color:#fff;font-size:12px;font-weight:600;text-decoration:none;opacity:0;transition:.14s}
.tpl-prev:hover{background:#000}
.rd-card-wrap:hover .tpl-prev{opacity:1}
/* thẻ Kho giao diện: cả thẻ = link "Xem thử" (mở tab mới); nút nhỏ nổi góc phải = "Dùng mẫu này" (tạo web thật) */
.tpl-use-form{position:absolute;top:10px;right:10px;z-index:4;margin:0}
.tpl-use-btn{font-family:inherit;border:0;cursor:pointer;padding:7px 13px;border-radius:999px;background:var(--grad);color:#fff;font-size:12px;font-weight:700;box-shadow:0 4px 12px rgba(0,160,210,.35);white-space:nowrap}
.tpl-use-btn:hover{filter:brightness(1.06)}

/* create-form loading overlay (prompt / url-clone / image) */
.mp-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(15,17,19,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mp-overlay-box{text-align:center;max-width:360px;padding:28px}
.mp-spin{width:46px;height:46px;margin:0 auto 18px;border-radius:50%;border:4px solid var(--border);border-top-color:var(--primary);animation:mp-spin .8s linear infinite}
@keyframes mp-spin{to{transform:rotate(360deg)}}
.mp-overlay-msg{font-weight:700;font-size:17px;color:var(--text);margin-bottom:6px}
.mp-overlay-sub{color:var(--muted);font-size:13px}

/* landing */
.lp-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1180px;margin:0 auto}
.lp-wrap{background:radial-gradient(70% 55% at 50% -5%,rgba(0,160,210,.1),transparent 65%),
  radial-gradient(50% 40% at 85% 5%,rgba(0,160,210,.08),transparent 60%)}
.lp-hero{text-align:center;padding:64px 24px 46px;max-width:820px;margin:0 auto}
.lp-badge{display:inline-block;font-size:13px;font-weight:600;color:var(--primary);background:var(--primary-soft);border:1px solid #1f4550;padding:6px 14px;border-radius:999px;margin-bottom:22px}
.lp-hero h1{font-size:52px;font-weight:800;margin:0 0 18px;line-height:1.08}
.lp-hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-hero p{font-size:19px;color:var(--muted);margin:0 0 30px;max-width:600px;margin-left:auto;margin-right:auto}
.lp-sec{max-width:1080px;margin:0 auto;padding:46px 24px}
.lp-sec h2{text-align:center;font-size:30px;font-weight:800;margin:0 0 8px}
.lp-sec .sub{text-align:center;font-size:16px;margin-bottom:34px}
.lp-feat,.lp-price{display:grid;gap:20px}
.lp-feat{grid-template-columns:repeat(4,1fr)}
.lp-price{grid-template-columns:repeat(3,1fr);max-width:960px;margin:0 auto;align-items:start}
.lp-feat .card{text-align:center;padding:26px 20px}
.lp-feat .ic{width:54px;height:54px;border-radius:5px;display:grid;place-items:center;font-size:24px;margin:0 auto 14px;background:var(--grad-soft);box-shadow:inset 0 0 0 1px #1f4550}
.lp-tier{padding:26px;border-radius:6px}
.lp-tier.feat{border-color:var(--primary);box-shadow:0 16px 44px rgba(0,160,210,.18);transform:scale(1.04)}
.lp-price-amt{font-size:30px;font-weight:800;margin:10px 0}
.lp-foot{text-align:center;color:var(--muted);font-size:13px;padding:36px;border-top:1px solid var(--border);margin-top:36px}
.container{max-width:760px;margin:0 auto;padding:46px 24px}

@media(max-width:880px){
  .rd-side{position:fixed;left:-260px;transition:left .22s;z-index:50;box-shadow:var(--sh-lg)}
  .rd-side.open{left:0}
  .rd-inner{padding:24px 16px 48px}.rd-hero h1{font-size:28px}.rd-topbar{display:flex}
  .lp-feat{grid-template-columns:repeat(2,1fr)}.lp-price{grid-template-columns:1fr}
  .lp-hero h1{font-size:34px}.lp-tier.feat{transform:none}
}
/* ── drag-drop editor ── */
.ed{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.ed-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border);z-index:5}
.ed-top-l,.ed-top-r{display:flex;align-items:center;gap:10px}
.ed-top-c{display:flex;gap:3px;background:var(--bg);border-radius:4px;padding:4px}
.ed-dev{display:flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:4px;color:var(--muted);line-height:1}
.ed-dev svg{width:19px;height:19px;flex:0 0 auto}
.ed-dev:hover{color:var(--text)}
.ed-dev.active{background:var(--panel);color:var(--primary);box-shadow:var(--sh-sm)}
/* Đ240: 20px/padding:0 4px → user screenshot — arrow too small/unclear as a control (~20x20px
   target). display:inline-flex+width/height 40px gives a proper ~40px tap target (accessibility
   baseline 36-44px); border-radius+hover bg reuse the .ed-dev hover convention already used by
   the adjacent device-switcher buttons in the same .ed-top toolbar, so it now visibly reads as
   clickable like its neighbors instead of looking like static text. */
.ed-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:26px;line-height:1;text-decoration:none;color:var(--muted);border-radius:4px;flex:0 0 auto}
.ed-back:hover{background:var(--bg);color:var(--text)}
.ed-name{border:1px solid transparent;background:none;font-size:15px;font-weight:600;font-family:inherit;color:var(--text);padding:6px 8px;border-radius:4px;width:230px}
.ed-name:hover{border-color:var(--border)}.ed-name:focus{outline:0;border-color:var(--primary);background:var(--panel)}
.ed-status{font-size:12px;color:var(--muted);min-width:78px;text-align:right}
.ed-body{flex:1;display:flex;min-height:0}
/* Đ234: 248px→288px — user tự nhìn editor thật, phản hồi trực tiếp "cột trái hơi hẹp", đề nghị
   rộng thêm; 288px gần khớp sidebar Flatsome thật (~280-300px). .ed-right giữ nguyên 372px (độc
   lập, không liên quan yêu cầu này).
   Đ243: 288px→336px — user yêu cầu "hẹp tab phải lại, nhường chỗ cho tab trái rộng thêm". .ed-left
   là mặt bằng sửa chính (cây khối + panel Cột/Phần tử, nhiều field cạnh-nhau/slider) — rộng thêm
   giúp các field đó thoáng hơn. Bù lại từ .ed-right (xem dưới), không lấy từ .ed-center. */
/* Đ283: 288px→264px — user yêu cầu tiếp "sửa tab trái và tab phải cho nhỏ chút" (lần 2 sau Đ274),
   phần dôi ra nhường hết cho .ed-center (canvas). */
.ed-left{width:264px;flex-shrink:0;border-right:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;overflow:hidden}
.ed-left-h{padding:14px 16px 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
/* Đ227: 2 view của cột trái (danh sách khối / thông số đối tượng đang chọn) — mirror Flatsome
   (1 sidebar trái duy nhất, Options CHIẾM CHỖ cây khi chọn, không phải panel riêng bên phải). */
.ed-left-list{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#ed-inspector{display:none}
.ed.ed-focused .ed-left-list{display:none}
.ed.ed-focused #ed-inspector{display:block}
/* Đ231: nút Lưu — anh em của .ed-left-list/#ed-inspector (KHÔNG nằm trong 1 trong 2, xem editor.php),
   mirror Flatsome "Update" (luôn ghim đáy sidebar trái, không đổi theo view cây/Options đang hiện).
   flex-shrink:0 giữ chiều cao cố định để 2 flex:1 phía trên tự co lại/cuộn quanh nó, không bị đẩy
   tràn ra ngoài .ed-left (vốn overflow:hidden ở cấp cha). */
.ed-left-foot{flex-shrink:0;padding:12px 16px;border-top:1px solid var(--border)}
.ed-right-h{padding:14px 16px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);color:var(--text);flex-shrink:0}
/* Đ234: "⚙ Cài đặt chung website" (.ed-right, phía trên #ed-aichat) — sibling của .ed-right-h/
   #ed-aichat, KHÔNG nằm trong 1 trong 2 (mirror cách .ed-left-foot tách khỏi 2 khối co-giãn ở
   .ed-left, xem trên). flex-shrink:0 khi ĐÓNG (mặc định) → chỉ chiếm đúng 1 dòng <summary>, không
   tranh chỗ với #ed-aichat (flex:1 riêng, không đổi). Khi MỞ, .ed-sitesettings-body tự giới hạn
   max-height + cuộn riêng — #ed-aichat phía dưới vẫn giữ được chỗ hợp lý thay vì bị bóp xuống 0. */
.ed-sitesettings{flex-shrink:0;border-bottom:1px solid var(--border)}
.ed-sitesettings>summary{cursor:pointer;list-style:none;user-select:none}
.ed-sitesettings>summary::-webkit-details-marker{display:none}
/* Đ263: 10px→13px — user chê "icon ở mọi nơi to ra, sao nó bé xíu vậy" khoanh đỏ đúng mũi tên ▸ này
   (group header "Nền & kiểu dáng"); mirror mức tăng .ed-caret Đ260 (11px→14px, +3px) — giữ cùng nhịp
   tăng cho mọi mũi tên ▸ gập/mở trong editor (bullet này + .ed-grp bên dưới, cùng pattern). */
.ed-sitesettings>summary::before{content:"▸";font-size:13px;color:var(--faint);transition:transform .15s;margin-right:2px}
.ed-sitesettings[open]>summary::before{content:"▾"}
.ed-sitesettings[open]>summary{border-bottom:1px solid var(--border)}
#ed-sitesettings-body{max-height:45vh;overflow-y:auto}
/* multi-page bar */
.ed-pagebar{padding:10px 10px 8px;border-bottom:1px solid var(--border-soft);flex-shrink:0}
.ed-pages-row{display:flex;gap:6px}
.ed-page-cur{flex:1;min-width:0;display:inline-flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--border);border-radius:4px;background:var(--bg);cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--text);transition:.13s}
.ed-page-cur .mic{flex:0 0 auto;color:var(--primary)}
.ed-page-cur .ed-page-name{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-page-cur .ed-page-count{background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.ed-page-cur:hover{border-color:var(--primary)}
.ed-page-cur.open{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,160,210,.12)}
.ed-page-add{width:38px;flex-shrink:0;border:1px solid var(--border);border-radius:4px;background:var(--bg);cursor:pointer;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;transition:.13s}
.ed-page-add:hover{border-color:var(--primary);background:var(--primary-soft)}
.ed-page-menu{margin-top:7px;border:1px solid var(--border);border-radius:4px;background:var(--panel);box-shadow:0 10px 28px rgba(0,0,0,.4);padding:5px;max-height:50vh;overflow-y:auto;overflow-x:hidden}
.ed-page-it{position:relative;display:flex;align-items:center;border-radius:4px}
.ed-page-it.active{background:var(--primary-soft)}
.ed-page-it-nm{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--text);padding:9px 9px;text-align:left}
.ed-page-it-nm .mic{flex:0 0 auto;color:var(--muted)}
.ed-page-it.active .ed-page-it-nm .mic{color:var(--primary)}
.ed-page-it-nm>span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-page-badge{font-style:normal;font-size:10px;font-weight:700;color:var(--primary);background:var(--panel);border:1px solid var(--primary);border-radius:4px;padding:1px 6px;flex-shrink:0;text-transform:uppercase}
/* row actions: hidden until hover / on the active row, so the page name gets the full width */
.ed-page-it-ops{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:flex;gap:1px;padding-left:14px;background:linear-gradient(90deg,transparent,var(--panel) 26%);opacity:0;pointer-events:none;transition:opacity .12s}
.ed-page-it:hover .ed-page-it-ops,.ed-page-it.active .ed-page-it-ops{opacity:1;pointer-events:auto}
.ed-page-it.active .ed-page-it-ops{background:linear-gradient(90deg,transparent,var(--primary-soft) 26%)}
.ed-page-it-ops button{width:27px;height:27px;border:0;background:none;border-radius:4px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;justify-content:center}
.ed-page-it-ops button:hover{background:var(--border-soft);color:var(--primary)}
.ed-page-it-ops .ed-page-del:hover{color:var(--danger);background:rgba(244,63,94,.09)}
.ed-page-addrow{width:100%;display:flex;align-items:center;gap:8px;border:0;background:none;border-top:1px solid var(--border-soft);margin-top:4px;padding:11px 9px 7px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--primary)}
.ed-page-addrow:hover{background:var(--primary-soft)}
.ed-page-airow{color:#fff;background:var(--grad);border-radius:4px;margin:4px 0 2px;padding:11px 9px;border-top:0}
.ed-page-airow .mic{color:#fff}
.ed-page-airow:hover{filter:brightness(1.05);background:var(--grad)}
.ed-pagepick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 12px}
.ed-pagepick-it{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1.5px solid var(--border);border-radius:4px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text);transition:.13s;user-select:none}
.ed-pagepick-it:hover{border-color:var(--primary)}
.ed-pagepick-it.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-d)}
.ed-pagepick-it input{width:17px;height:17px;accent-color:var(--primary);flex:0 0 auto}
/* inspector collapsible groups (Tùy biến khối) */
.ed-grp{border:1px solid var(--border-soft);border-radius:4px;margin:8px 0;background:var(--panel)}
/* Đ259: đo sống demo.trangsuckk.com — tiêu đề nhóm field thật (h3.option-header) là
   font-weight:400 (không phải 700, đậm) + color #94a0ac (xám-xanh mờ, không phải var(--text) gần
   trắng) — chữ Flatsome "nhẹ" hơn hẳn Mepo5 hiện tại. Giữ nguyên khung .ed-grp bo góc + border
   (Đ4's mô hình gập/mở collapsible group, không đổi cấu trúc/hành vi) — chỉ đổi màu/độ đậm chữ. */
.ed-grp>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;padding:10px 12px;font-size:12.5px;font-weight:400;color:var(--muted);user-select:none}
.ed-grp>summary::-webkit-details-marker{display:none}
/* Đ263: 10px→13px — đồng bộ .ed-sitesettings>summary::before ở trên (cùng mũi tên ▸ gập/mở nhóm
   field, panel Options phải "Kiểu thành phần"); mirror mức tăng .ed-caret Đ260. */
.ed-grp>summary::before{content:"▸";font-size:13px;color:var(--faint);transition:transform .15s}
.ed-grp[open]>summary::before{transform:rotate(90deg)}
.ed-grp[open]>summary{border-bottom:1px solid var(--border-soft)}
.ed-grp-b{padding:4px 12px 12px}
.ed-grp-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);display:inline-block;flex:0 0 auto}
/* Đ172: đang xem khung Điện thoại — nhóm "📱 Riêng cho điện thoại" được tô sáng để thấy control responsive áp cho khung đang xem */
.ed-grp-dev{border-color:var(--primary)}
.ed-grp-dev>summary{color:var(--primary)}
.ed-page-sysh{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:10px 9px 5px;margin-top:4px;border-top:1px solid var(--border-soft)}
.ed-page-sys{display:flex;align-items:center;gap:7px;padding:5px 9px}
.ed-page-sys-nm{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-page-sys-nm em{font-style:normal;color:var(--faint);font-size:11px}
.ed-page-sys-open{flex:0 0 auto;color:var(--muted);display:inline-flex;align-items:center;padding:4px;border-radius:4px}
.ed-page-sys-open:hover{color:var(--primary);background:var(--bg)}
.ed-page-sys-tg{flex:0 0 auto;min-width:44px;text-align:center;border:1px solid var(--border);background:var(--bg);color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer;transition:.13s}
.ed-page-sys-tg:hover{border-color:var(--primary)}
.ed-page-sys-tg.on{background:var(--primary);border-color:var(--primary);color:#fff}
.ed-page-it.editing{flex-direction:column;align-items:stretch;gap:7px;padding:10px 9px;background:var(--bg)}
.ed-page-srow{display:flex;align-items:center}
.ed-page-prefix{font-size:12px;color:var(--faint);padding-right:4px;white-space:nowrap}
.ed-page-srow .ed-page-si{flex:1;min-width:0}
.ed-page-brow{display:flex;gap:6px;justify-content:flex-end}
.ed-list{flex:1;overflow-y:auto;padding:0 10px}
/* Đ244: user gửi 2 ảnh so sánh (Flatsome UX Builder thật vs cây Mepo5 sống) — cây thật của
   Flatsome mỗi dòng THẤP/GỌN hơn hẳn (~30-36px, không phải ~44px như trước) → giảm padding dọc
   10px→7px (Section/Row) rút chiều cao dòng ~44px→~34px, nhịp cây dày/gọn hơn, khớp mật độ thật. */
/* Đ246: coordinator-applied correction (not a sub-agent batch — see PRD entry) using values the
   coordinating session live-measured on the real Flatsome UX Builder (getComputedStyle, read-only,
   explicit user authorization) after 2 separate sub-agents correctly refused to trust the same data
   arriving via SendMessage / a fresh task-prompt (indistinguishable from an injected authority claim
   from their own vantage point — the right call for them). Real Flatsome: font-weight 400 (regular),
   not 600; row ~26px tall. Đ244's estimate (600, 7px padding) was a reasonable screenshot-based
   guess but measurably off on both counts — correcting here now that real values are in hand. */
/* Đ250 (mục 3) — fresh dual-real-measurement: Đ246's 5px padding đo ra 30.14px total (không phải
   34px ước lượng của batch đầu Đ250 — số 34px trong lệnh giao việc đã lỗi thời/khác lần đo), Flatsome
   thật đo ĐỀU 26px mọi cấp. Giảm tiếp 5px→3px (còn ~26.15px, sát 26px) — dừng ở 3px thay vì ép sát
   hơn vì cụm ⠿ grip + ⚙ gear + ▸ caret (hộp cố định 16×16px) của Mepo5 nhiều hơn nhãn trần trụi của
   Flatsome, cần biên độ thở tối thiểu quanh caret; đã xác nhận 3px vẫn đủ (caret căn giữa gọn, không
   đè/vỡ). */
.ed-item{position:relative;display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:13px;font-weight:400;margin-bottom:2px}
/* Đ244: TRƯỚC — .active dùng CHUNG background var(--primary-soft) với .ed-secgrp-head (dòng dưới)
   → dòng ĐANG CHỌN THẬT SỰ và dòng header Section (chỉ là mốc cấu trúc, KHÔNG hẳn đang chọn) nhìn
   y hệt nhau, không phân biệt được — khác hẳn ảnh Flatsome thật: dòng đang chọn có nền XANH ĐẶC,
   bão hoà, chữ trắng, rất rõ ràng "đây là dòng đang chọn", tách bạch hẳn với dòng thường quanh nó.
   FIX: .active đổi sang nền ĐẶC var(--primary) (không phải bản mờ -soft) + chữ trắng — mirror đúng
   mức tương phản của ảnh thật. .ed-secgrp-head GIỮ NGUYÊN var(--primary-soft) (không đổi) để 2 vai
   trò (đang-chọn / chỉ-là-header-cấu-trúc) không còn lẫn vào nhau nữa. */
/* Đ250 (mục 1) — fresh dual-real-measurement (getComputedStyle cả 2 tab, không đoán qua ảnh chụp):
   TRƯỚC — hover dùng var(--bg)=#1c2024, TỐI HƠN nền panel #24282d nó nằm trên → hover SẪM đi, ngược
   hướng hoàn toàn với Flatsome thật (hover SÁNG lên rõ rệt: dòng nghỉ rgb(46,53,59) → hover
   rgb(73,83,94), tăng ~27 mỗi kênh RGB). Đây là bug hành vi rõ ràng, không phải lựa chọn thẩm mỹ.
   FIX: đổi sang var(--border)=#343b42 — SÁNG hơn --panel (#24282d) đúng hướng cần, token có sẵn
   trong :root (không bịa màu mới), đã dùng phổ biến cho hover/viền nhạt nơi khác trong file này. */
.ed-item:hover{background:var(--border)}
/* Đ250 (mục 2) — --primary-d:#0073aa (đã có sẵn trong :root, dùng cho hover nút/notice/chip khác)
   KHỚP ĐÚNG màu dòng-đang-chọn đo thật của Flatsome (rgb(0,115,170)); .active trước đó dùng
   var(--primary)=#00a0d2 — màu THƯƠNG HIỆU/nút chung của Mepo5, chỉ TÌNH CỜ khác biệt đủ để nhìn
   "có vẻ đúng" nhưng đo ra lệch. Đổi sang --primary-d cho parity thật; --primary-d vẫn dùng nguyên
   cho các nơi khác (btn-primary:hover/notice/pagepick-it.on/ws-chip:hover) — cùng vai trò "biến thể
   đậm hơn của primary", không xung đột ý nghĩa khi dùng thêm ở đây. */
.ed-item.active{background:var(--primary-d);color:#fff}
.ed-grip{cursor:grab;color:var(--muted);font-size:15px;line-height:1;opacity:0;flex:0 0 auto;padding:0 2px;transition:.12s}
.ed-item:hover .ed-grip,.ed-item.active .ed-grip{opacity:.7} .ed-grip:hover{opacity:1;color:var(--primary)} .ed-item.active .ed-grip:hover{color:#fff} .ed-grip:active{cursor:grabbing}
.ed-item-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-item.is-hidden .ed-item-lbl{opacity:.5;text-decoration:line-through} .ed-item.is-hidden .ed-grip{opacity:.3}
/* Đ158: menu ⚙ luôn hiện (không hover-reveal như .ed-item-ops cũ) — chỉ 1 icon nhỏ, không cần ẩn. */
.ed-item .ed-gear{opacity:.7} .ed-item:hover .ed-gear,.ed-item.active .ed-gear,.ed-item .ed-gear[open]{opacity:1}
/* Đ244: .active nền đặc var(--primary) — nút ⚙ mặc định (viền/màu var(--border)/var(--muted), xem
   .ed-gear>summary) chìm vào nền xanh mới; đổi viền/chữ sang trắng-mờ khi dòng cha đang .active để
   nút vẫn thấy rõ, mirror cách .ed-grip cũng đổi sang #fff ở dòng ngay trên. */
.ed-item.active .ed-gear>summary{border-color:rgba(255,255,255,.55);color:#fff}
.ed-item.active .ed-gear>summary:hover{border-color:#fff;background:rgba(255,255,255,.16)}
/* Đ16 nested tree: expand caret + indented child rows (Flatsome-style structure sidebar) */
.ed-caret{flex:0 0 auto;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:0;background:none;cursor:pointer;color:var(--muted);font-size:14px;border-radius:4px;padding:0}
.ed-caret:hover{background:var(--border-soft);color:var(--primary)} .ed-caret-none{cursor:default;visibility:hidden}
.ed-item.active .ed-caret{color:#fff} .ed-item.active .ed-caret:hover{background:rgba(255,255,255,.16);color:#fff}
/* Đ244: .ed-subitem padding dọc 6px→5px (khớp nhịp gọn hơn của .ed-item cùng batch — Cột/Phần tử
   trong cây cũng thấp lại theo, không chỉ riêng dòng Section/Row cấp cao nhất). */
/* Đ250 (mục 3+5) — đo thật 2 tab: .ed-subitem cao 29.375px (padding 5px dọc + line-height 1.55×
   12.5px), Flatsome thật MỌI cấp cây (Section/Row/Column/Element) đều 26px — .ed-item cũng đo được
   30.14px cùng lúc (không phải ~34px của batch trước, nhưng vẫn cao hơn thật ~4px cả 2 cấp). Giảm
   padding dọc 5px→3px (còn 3+3+20.15=26.15px cho .ed-item, 3+3+19.4≈25.4px cho .ed-subitem — sát
   26px thật, KHÔNG ép về đúng 26.0px vì cụm icon ⠿/⚙/▸ (caret 16×16px cố định) cần biên độ thở, đã
   kiểm tra 3px padding vẫn đủ chỗ căn giữa 16px caret không vỡ/không đè). Đồng thời nâng font-size
   .ed-subitem 12.5px→13px khớp .ed-item (mục 5 — Flatsome dùng ĐỀU 13px mọi cấp, kể cả dòng .active;
   .ed-sub-focused bên dưới giữ nguyên #fff nên không cần sửa riêng theo font). */
.ed-subitem{display:flex;align-items:baseline;gap:7px;padding:3px 10px 3px 0;border-radius:4px;cursor:pointer;font-size:13px;color:var(--muted);margin-bottom:2px}
/* Đ250 (mục 1) — cùng bug hover-đảo-hướng như .ed-item ở trên, cùng fix: var(--bg) (tối hơn nền,
   sai hướng) → var(--border) (sáng hơn nền panel .ed-rpane/.ed-left nằm trên, đúng hướng Flatsome
   thật hover SÁNG lên). */
.ed-subitem:hover{background:var(--border);color:var(--text)}
/* Đ244: TRƯỚC — Cột/Phần tử KHÔNG có trạng thái "đang focus" nào trong cây (chỉ đổi màu ở panel
   bên phải qua .ed-card-focused — rowFocus, Đ159); user bấm chọn 1 Cột/Phần tử, dòng cây KHÔNG
   phản hồi gì khác ngoài background còn sót lại của :hover — không có dấu hiệu "đây là dòng đang
   focus" rõ ràng như Flatsome thật ("Column 2/12" tô xanh trong ảnh mẫu). FIX: thêm class
   .ed-sub-focused (renderList() gắn khi rowFocus.ci/bi khớp dòng Cột/Phần tử này) — dùng CÙNG NGÔN
   NGỮ nền đặc var(--primary)/chữ trắng như .ed-item.active (nhất quán 1 kiểu "đang chọn" cho mọi
   cấp cây, không phát minh ngôn ngữ thứ 2 cho cấp sâu hơn). */
/* Đ250 (mục 2): cùng fix var(--primary)→var(--primary-d) như .ed-item.active — parity màu chọn thật. */
.ed-subitem.ed-sub-focused{background:var(--primary-d);color:#fff}
.ed-subitem.ed-sub-focused:hover{background:var(--primary-d);color:#fff}
.ed-subitem.ed-sub-focused .ed-sub-tag{color:#fff} .ed-subitem.ed-sub-focused .ed-sub-txt{color:#fff}
.ed-subitem.ed-sub-focused .ed-sub-grip{color:#fff}
/* Đ180: "Section" chứa nhiều "Row" trong cây — header hơi khác màu/đậm hơn khối thường để phân
   biệt cấp bậc (Flatsome Section > Row); các Hàng thành viên thụt vào 1 bậc bên dưới header. */
/* Đ250 (mục 5) — đo thật: Flatsome KHÔNG in đậm header cấp Section, mọi cấp cây (kể cả .active) đều
   font-weight:400 phẳng. GIỮ font-weight:700 ở đây (không xoá) — đây là lựa chọn có chủ đích, không
   phải parity đầy đủ: header Section/Row đã có 2 tín hiệu phân biệt khác (nền var(--primary-soft) +
   chữ var(--primary), không đổi) — bold thêm là biên độ nhỏ giúp mắt bắt được ranh giới "đây là mốc
   Section, không phải 1 khối thường" khi cuộn nhanh qua cây dài; xoá bold sẽ khiến chữ nền tối
   var(--primary-soft) khó đọc hơn 1 chút do đã mất tương phản weight. Flatsome không cần việc này vì
   KHÔNG group nhiều Row dưới 1 header Section trong cây (mirror cấu trúc, không mirror từng pixel). */
.ed-secgrp-head{background:var(--primary-soft);color:var(--primary);font-weight:700}
.ed-secgrp-head:hover{background:var(--primary-soft)}
/* Đ244: thụt lề .ed-secgrp-member giữ NGUYÊN 24px trị số — chỉ đồng bộ LẠI với bậc thang mới của
   Cột/Phần tử bên dưới (xem editor.js paddingLeft inline) để mỗi cấp cây +14px đều đặn, không đổi
   ý nghĩa (Hàng thành viên vẫn thụt vào đúng 1 bậc dưới header Section, không đổi hành vi cũ). */
/* Đ250 (mục 4) — đo thật xác nhận: Section(10px, .ed-item base)→Row(24px, đây) ĐÃ đúng +14px, KHÔNG
   phải nguồn lỗi. Lỗi thật nằm ở Column/Element bên dưới lùi NGƯỢC về 18px (thay vì tiếp tục 24+14=
   38) rồi mới +14 lên 32 — 2 chuỗi rời rạc (10→24, rồi 18→32) chứ không phải 1 chuỗi liền. Fix ở
   editor.js: Column 18px→38px, Element 32px→52px — nối tiếp ĐÚNG bậc thang có sẵn ở đây thành 1
   chuỗi số học duy nhất 10→24→38→52 (mỗi cấp luôn +14px), không đổi Section/Row (không cần, không
   sai) và không đổi step-size 14px (Flatsome đo 11px/cấp, nhưng 14px đã ăn khớp sẵn với gốc 10px/
   24px hiện có — đổi cả 4 mốc sang 11px sẽ phải sửa luôn Section/Row vốn không lỗi, rủi ro hơn lợi). */
/* Đ257: SỬA LẠI — Đ250's "đo thật" ở trên hoá ra vẫn SAI. User gửi ảnh so sánh trực tiếp cây Mepo5
   sống với UX Builder thật (demo.trangsuckk.com), báo "không hề giống nhau". Đo lại từ đầu bằng
   getComputedStyle TRÊN CHÍNH site Flatsome thật (không phải suy luận qua ảnh) phát hiện: Flatsome
   KHÔNG dùng chuỗi 10→24→38→52 (step 14px) — cây thật là DOM lồng nhau thật (mỗi cấp con là 1
   <shortcode-hierarchy-list> lồng trong <shortcode-hierarchy-list-item> của cấp cha), và MỖI lớp lồng
   có đúng `padding-left:10px` cố định — tức step ĐÚNG là +10px/cấp phẳng, không phải +14px. Mepo5
   dùng list phẳng (không lồng DOM thật) + set paddingLeft qua JS nên quy đổi tương đương: Section/Row
   (base .ed-item 10px) = cấp 0, Row-dưới-Section (đây) = cấp 1 → 20px (không phải 24px). */
.ed-secgrp-member{padding-left:20px}
/* Đ163: dòng "＋ Thêm vào Cột/Thêm cột" trong cây (Flatsome "+ Add to Column/Row") */
/* Đ254 (retry) — ảnh chụp Flatsome thật cho thấy hàng này là 1 NÚT PILL riêng biệt: nền đặc/tối,
   bo góc rõ, chữ xám mờ, đầy đủ cảm giác "đây là 1 nút" — chứ KHÔNG phải chữ link trần. TRƯỚC batch
   này: .ed-sub-add chỉ đổi color+hover-bg (Đ163), không nền/không bo góc/không padding riêng — verify
   sống (getComputedStyle) xác nhận background:rgba(0,0,0,0) hoàn toàn trong suốt, không có "nút" nào
   để nhìn thấy ngoài chữ màu --faint, đúng y "trông như link phẳng" mà nhiệm vụ mô tả. FIX: thêm nền
   đặc var(--border) (#343b42 — sáng hơn --panel nó nằm trên, cùng token Đ250 đã dùng cho hover vì
   cùng vai trò "bề mặt nổi lên khỏi panel", không bịa màu mới), bo góc 5px (giữa dải 4-6px nhiệm vụ
   nêu), padding dọc tăng 3px→6px (padding ngang giữ 10px, "thoải mái" hơn nhưng không quá khổ dòng
   cây 26px xung quanh — verify trực tiếp: 6+6+dòng chữ 12.5px/13px vẫn gọn), margin dọc 2px để nút
   không dính sát dòng Cột/Phần tử phía trên (Flatsome ảnh có khoảng thở nhỏ quanh nút). Chữ đổi từ
   --faint (không đủ tương phản trên nền --border mới) sang --muted — vẫn "xám mờ" đúng mô tả nhưng
   đọc được trên nền đặc mới (--faint trên --border chỉ ~2.1:1 contrast, --muted ~3.4:1 — không đạt
   AA 4.5:1 tuyệt đối nhưng đây là UI nội bộ phụ, không phải nội dung chính, và vẫn rõ hơn hẳn cách cũ).
   font-size 12px→13px (khớp mọi cấp cây khác, Đ250 mục 5 — chữ trong 1 nút không có lý do nhỏ hơn
   chữ thường của cây). KHÔNG đổi paddingLeft (vẫn set qua JS theo cấp — đó là THỤT LỀ trước nút, không
   phải padding CỦA nút; nút vẫn full-width bên trong phần còn lại của hàng, đúng "full-width" nhiệm vụ
   nêu vì .ed-subitem cha đã flex full width, phần margin-left chỉ là khoảng thụt cấp cây tiêu chuẩn). */
/* Đ257: Đ254's "nền đặc + bo góc 5px" ở trên LẠI SAI — user gửi ảnh so sánh mới lộ ra "+ Add to X"
   Mepo5 (nền đặc, bo nhẹ) khác hẳn Flatsome thật. Đo trực tiếp trên demo.trangsuckk.com (không suy
   luận qua ảnh chụp như Đ254): nút thật của Flatsome (<add-button>'s .wrapper span-bọc icon+label) là
   background:transparent HOÀN TOÀN, border:1px solid rgb(51,58,65) (viền mờ, không phải nền đặc),
   border-radius:24px (bo tròn HẲN 2 đầu — "pill" thật, không phải bo góc nhẹ 5px), padding chỉ
   1.5px 10px (rất mỏng, không phải 6px dọc), và width co theo nội dung (inline-block) — KHÔNG kéo dài
   hết chiều ngang hàng cây như .ed-subitem khác. Sửa lại đúng các trị số này; giữ nguyên chữ --muted
   (Đ254's lý do tương phản vẫn đúng — Flatsome đo icon+label cùng rgb(148,160,172), gần khớp --muted). */
.ed-sub-add{display:inline-flex;align-items:center;color:var(--muted);font-size:13px;background:transparent;border:1px solid var(--border);border-radius:24px;padding:1px 10px;margin:4px 0 4px 0;width:auto}
.ed-sub-add:hover{color:var(--primary);border-color:var(--primary)}
.ed-sub-tag{flex:0 0 auto;font-weight:700;color:var(--primary);font-size:11px}
.ed-sub-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
/* Đ256 (mục 1): dòng cây bỏ preview nội dung (`.ed-sub-txt`) cho Phần tử/Mục/nút library.section.v1
   (mirror Flatsome — chỉ hiện tên loại) → không còn filler flex:1 đẩy `.ed-sub-ops` ra mép phải;
   margin-left:auto giữ đúng vị trí cũ (mép phải) cho các dòng đó, VÔ HẠI với dòng vẫn còn
   `.ed-sub-txt` (Cột/"+Thêm…", flex:1 đã tự chiếm hết chỗ trống nên auto-margin không cộng dồn). */
.ed-sub-ops{flex:0 0 auto;display:flex;align-items:center;gap:1px;opacity:0;transition:opacity .12s;margin-left:auto}
.ed-subitem:hover .ed-sub-ops{opacity:1}
.ed-sub-ops button{border:0;background:none;cursor:pointer;color:var(--muted);padding:2px 3px;border-radius:4px;line-height:0}
.ed-sub-ops button:hover{background:var(--border-soft);color:var(--primary)}
/* SortableJS drag states: ghost = the drop slot left in the list; fly = the element under the pointer */
.ed-item.ed-drop-ghost{opacity:.35;background:var(--primary-soft);box-shadow:inset 0 0 0 1.5px var(--primary)}
.ed-item.ed-drag-fly{opacity:.95;background:var(--panel);box-shadow:0 10px 26px rgba(0,0,0,.42);border-radius:4px}
/* layout.row.v1 Inspector: kéo-thả cột (.ed-col-card) + phần tử trong cột (.ed-el-item) — cùng
   trạng thái ghost/fly như danh sách khối cấp trang, chỉ khác class gốc nên cần rule riêng. */
.ed-col-card.ed-drop-ghost,.ed-el-item.ed-drop-ghost{opacity:.35;background:var(--primary-soft);box-shadow:inset 0 0 0 1.5px var(--primary)}
.ed-col-card.ed-drag-fly,.ed-el-item.ed-drag-fly{opacity:.95;background:var(--panel);box-shadow:0 10px 26px rgba(0,0,0,.42);border-radius:4px}
/* Đ169: kéo-thả TRONG CÂY sidebar (layout.row.v1) — grip ⠿ hover-reveal trên dòng Cột/Phần tử
   (cùng ngôn ngữ với .ed-grip của khối); .ed-tree-els rỗng vẫn giữ chiều cao để thả vào cột trống. */
/* Đ263: 13px→15px — đồng bộ .ed-grip (grip ⠿ dòng Section/Row cấp trên, cũng 15px) để cùng 1 glyph
   kéo-thả không đổi cỡ tuỳ cấp cây. */
.ed-sub-grip{cursor:grab;color:var(--muted);font-size:15px;line-height:1;opacity:0;flex:0 0 auto;padding:0 1px;transition:.12s}
.ed-subitem:hover .ed-sub-grip{opacity:.7} .ed-sub-grip:hover{opacity:1;color:var(--primary)} .ed-sub-grip:active{cursor:grabbing}
.ed-tree-els:empty{min-height:12px;margin:0 0 2px;border:1px dashed transparent;border-radius:4px}
.ed-tree-els:empty:hover{border-color:var(--border)}
.ed-tree-colgrp.ed-drop-ghost,.ed-sub-el.ed-drop-ghost{opacity:.35;background:var(--primary-soft);box-shadow:inset 0 0 0 1.5px var(--primary)}
.ed-tree-colgrp.ed-drag-fly,.ed-sub-el.ed-drag-fly{opacity:.95;background:var(--panel);box-shadow:0 10px 26px rgba(0,0,0,.42);border-radius:4px}
/* Đ228's dòng "Row" trang trí (.ed-tree-rowline) đã BỎ ở Đ238 — dòng khối gốc (.ed-item) giờ tự
   hiện nhãn "Row", dòng con phụ chỉ trùng lặp. Rule CSS này gỡ theo (không còn phần tử nào dùng). */
.ed-cols-wrap{display:flex;flex-direction:column;gap:10px}
.ed-el-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ed-col-card:hover .ed-col-grip,.ed-el-item:hover .ed-el-grip{opacity:.7}
.ed-mini-active{background:#0ea5e9;color:#fff;border-color:#0ea5e9}
.ed-mini-active:hover{color:#fff}
.ed-add-wrap{padding:12px;border-top:1px solid var(--border-soft);position:relative}
.ed-add-menu{position:absolute;bottom:56px;left:12px;right:12px;background:var(--panel);border:1px solid var(--border);border-radius:5px;box-shadow:var(--sh-lg);padding:6px;z-index:10}
.ed-add-opt{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:9px 11px;border-radius:4px;font-size:13.5px;font-family:inherit;color:var(--text)}
.ed-add-opt:hover{background:var(--bg);color:var(--primary)}
/* Đ255: lối tắt "nhẹ" — Phần tử trống / Hàng trống — PHẢI kém nổi bật hơn 2 nút chính phía trên
   (Thư viện khối / Tạo khối bằng AI vẫn là lối chính, đây chỉ là lối phụ khi muốn bắt đầu từ
   trống thay vì từ mẫu). Text-link nhỏ, căn giữa, không viền/nền — nhẹ nhất trong ngôn ngữ hiện
   có (nhẹ hơn cả .ed-add-opt vốn đã là hàng menu, không phải nút). */
.ed-add-quick{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px}
.ed-add-quicklink{border:0;background:none;cursor:pointer;padding:2px 3px;font-size:11.5px;font-family:inherit;color:var(--muted)}
.ed-add-quicklink:hover{color:var(--primary);text-decoration:underline}
.ed-add-quick-sep{font-size:11.5px;color:var(--faint)}
.ed-modal{position:fixed;inset:0;background:rgba(10,12,15,.62);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.ed-modal-card{background:var(--panel);border-radius:6px;box-shadow:var(--sh-lg);width:100%;max-width:520px;padding:20px;max-height:90vh;overflow:auto}
.ed-modal-h{font-size:17px;font-weight:600;margin-bottom:4px}
.ed-modal-sub{font-size:13px;color:var(--muted);margin-bottom:12px;line-height:1.5}
.ed-modal-ta{width:100%;resize:vertical;font-family:inherit;font-size:14px;line-height:1.5}
.ed-modal-ex{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.ed-chip{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:inherit}
.ed-chip:hover{border-color:var(--primary);color:var(--primary)}
.ed-modal-img{display:flex;align-items:center;gap:10px;margin-top:14px}
.ed-modal-thumb{width:46px;height:46px;border-radius:4px;background:var(--border-soft) center/cover no-repeat;border:1px solid var(--border);flex:0 0 auto}
.ed-modal-note{margin-top:12px;font-size:12.5px;color:var(--warn-fg,#e0a545);background:var(--warn-bg,#3a2f1a);border:1px solid var(--warn-bd,#5a4726);border-radius:4px;padding:9px 11px;line-height:1.5}
.ed-modal-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
/* Thư viện khối (designed-block catalog) */
.ed-modal-wide{max-width:1000px;display:flex;flex-direction:column;max-height:88vh}
.blk-search{width:100%;margin-bottom:10px;font-size:14px;padding:11px 13px;flex:0 0 auto}
.blk-body{display:flex;gap:14px;flex:1;min-height:0;margin-top:6px}
.blk-cats{flex:0 0 168px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;padding-right:4px;border-right:1px solid var(--border-soft)}
.blk-cat{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);padding:9px 11px;border-radius:4px;text-align:left;transition:.12s}
.blk-cat:hover{background:var(--bg)}
.blk-cat.active{background:var(--primary-soft);color:var(--primary)}
.blk-cat em{font-style:normal;font-size:11px;font-weight:700;color:var(--faint);background:var(--bg);border-radius:999px;padding:1px 7px;flex:0 0 auto}
.blk-cat.active em{color:var(--primary);background:var(--panel)}
.blk-grid{flex:1;min-width:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;align-content:start;padding:2px 2px 4px}
.blk-loading{grid-column:1/-1;color:var(--muted);font-size:14px;padding:40px;text-align:center}
.blk-card{position:relative;border:1px solid var(--border);border-radius:5px;overflow:hidden;cursor:pointer;background:var(--panel);transition:.14s}
.blk-card:hover{border-color:var(--primary);box-shadow:0 8px 22px rgba(0,160,210,.16);transform:translateY(-2px)}
.blk-thumb{width:100%;height:152px;overflow:hidden;position:relative;background:var(--bg);border-bottom:1px solid var(--border-soft)}
.blk-thumb iframe{width:1100px;height:600px;border:0;position:absolute;top:0;left:0;transform:scale(.2);transform-origin:top left;pointer-events:none}
.blk-cardov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,160,210,.14);opacity:0;transition:.14s}
.blk-card:hover .blk-cardov{opacity:1}
.blk-ins{background:var(--primary);color:#fff;font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;box-shadow:0 6px 16px rgba(0,160,210,.4)}
.blk-label{font-size:12px;font-weight:600;color:var(--muted);padding:8px 10px}
.elpk-group{font-size:11px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.03em;margin:16px 0 8px}
.elpk-group:first-of-type{margin-top:2px}
.elpk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.elpk-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--border);border-radius:4px;background:var(--panel);cursor:pointer;transition:.12s;text-align:center}
.elpk-card:hover{border-color:var(--primary);background:var(--primary-soft)}
/* Đ275: 20px→40px — chi tiết icon mockup (Đ273) không đọc được ở 20px, user phản hồi "có thấy
   khác gì đâu?". Flatsome vẽ icon picker cỡ lớn nên phong cách mockup mới phát huy tác dụng. */
.elpk-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--muted)}
/* Đ276: user yêu cầu "icon đường viền cho mỏng thôi (giống như bên Flatsome) để cho tinh tế" —
   svg() dùng chung stroke-width:1.8 cho MỌI icon (đủ đậm để đọc ở 14-16px chrome editor), nhưng ở
   40px trong picker nét bị phóng lên ~3px trông thô. Override CSS scoped CHỈ trong .elpk-ico
   (thuộc tính trình bày stroke-width trên <svg> có specificity 0, mọi selector CSS đều thắng,
   con của svg thừa kế giá trị mới) — icon nhỏ nơi khác giữ nguyên 1.8, không hồi quy. */
/* Đ277: user xem 1.2 xong vẫn muốn "mỏng nữa đi" — hạ tiếp 1.2→0.9. */
.elpk-ico .mic{stroke-width:0.9}
.elpk-card:hover .elpk-ico{color:var(--primary)}
.elpk-label{font-size:11.5px;font-weight:600;color:var(--text);line-height:1.25}
.ed-col-ins{display:block;width:100%;border:1px dashed var(--border);background:none;border-radius:4px;padding:5px 8px;margin:6px 0;font-size:11.5px;font-weight:600;color:var(--faint);cursor:pointer;text-align:center;transition:.12s}
.ed-col-ins:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.ed-center{flex:1;min-width:0;background:var(--bg);overflow:auto;display:flex;justify-content:center;padding:24px}
.ed-frame{width:100%;display:flex;justify-content:center}
#ed-preview{width:100%;max-width:100%;height:100%;min-height:560px;border:1px solid var(--border);border-radius:6px;background:#fff;box-shadow:var(--sh-md);transition:max-width .2s}
/* Đ243: 372px→312px — nhường chỗ cho .ed-left rộng thêm (xem comment ở .ed-left). 312px vẫn đủ
   cho bong bóng chat AI (.aic-msg max-width:90%) + ô nhập + các nút gợi ý không bị bó/tràn dòng. */
/* Đ283: 264px→240px — cùng yêu cầu "nhỏ chút" lần 2 (xem .ed-left). 240px vẫn đủ cho bong bóng
   chat AI (.aic-msg max-width:90%) + ô nhập + nút gợi ý không bị bó/tràn dòng. */
.ed-right{width:240px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;overflow:hidden;padding:0}
/* Đ248: user than phiền "viền tab trái quá to/dày khiến các thành phần bên trong không đủ chỗ" —
   không kèm ảnh chụp lần này. Điều tra trước khi sửa (preview_inspect trên panel Cột thật, viewport
   1440px, KHÔNG đoán mù): không có border-width nào >1px thật ở .ed-left/#ed-inspector/.ed-item-card
   (mọi border trong khu vực này đều đúng 1px chuẩn) — "viền dày" là cách nói của user cho khoảng
   padding lồng nhau tạo cảm giác 1 khung/viền thị giác dày, không phải literal border CSS. Đo thật:
   #ed-inspector (=.ed-rpane, Đ234/243 rộng 336px) padding:16px 2 bên = 32px, LỒNG THÊM .ed-item-card
   (bọc panel Cột/Phần tử, dùng cho .ed-col-card/.ed-el-item) padding:12px 2 bên = 24px — cộng dồn
   56px/336px (~17%) bị padding ăn mất trước khi field nào bắt đầu, đúng lúc field dày nhất (bảng chọn
   Độ rộng cột 12-nút .ed-span-grid) chỉ còn 269px → mỗi nút 19.5px (chữ vẫn vừa, KHÔNG vỡ dòng —
   xác nhận qua scrollWidth<=clientWidth từng nút — nhưng biên độ dư rất mỏng, đúng cảm giác "sát quá"
   user mô tả). Vá — giảm ĐÚNG 2 giá trị padding excessive tìm được, KHÔNG đụng border/width panel
   (Đ234/243 đã đúng, không phải nguyên nhân): .ed-rpane padding 16px→13px (−3px/cạnh), .ed-item-card
   padding 12px→10px (−2px/cạnh) — tổng thu hồi (16-13)*2+(12-10)*2=10px bề rộng khả dụng cho field
   trong 1 card lồng, giữ đủ khoảng thở (không về 0/quá sát). .ed-insp-back (Đ247, sticky back-button)
   tự bù NGANG theo đúng padding .ed-rpane mới (margin/top/padding 16px→13px, dây theo comment gốc
   Đ247 "bù lại padding của .ed-rpane") — chỉ đổi thành phần NGANG (trái/phải), giữ nguyên dọc
   (10px/8px) vì chiều cao node #1 không đổi (không sửa font-size/line-height nút back), nên
   top:39px của node lồng #2 (đo thật từ Đ247) vẫn đúng, không cần đo lại. */
.ed-rpane{flex:1;overflow-y:auto;padding:13px;min-height:0}
.ed-rpane[hidden]{display:none!important}
#ed-aichat{padding:0;display:flex;flex-direction:column}
.aic-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.aic-msg{font-size:13.5px;line-height:1.55;padding:10px 13px;border-radius:5px;max-width:90%}
.aic-a{background:var(--bg);color:var(--text);align-self:flex-start;border-bottom-left-radius:3px}
.aic-u{background:var(--primary);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.aic-msg b{font-weight:700}
.aic-hint{display:block;color:var(--faint);font-size:12px;margin-top:6px}
/* Khảo sát Lovable #4/#7: Hoàn tác ngay trong tin nhắn AI, credit trước/sau, thẻ hết credit (nút ≥40px) */
.aic-undo,.aic-opt{display:inline-flex;align-items:center;min-height:40px;margin:8px 8px 0 0;padding:0 14px;border:1px solid var(--border-soft);border-radius:5px;background:var(--panel);color:var(--text);font:600 13px/1.2 inherit;cursor:pointer;text-decoration:none}
.aic-undo:hover,.aic-opt:hover{border-color:var(--primary);color:var(--primary)}
.aic-undo:disabled{opacity:.6;cursor:default}
.aic-opts{display:flex;flex-wrap:wrap}
.aic-opt-note{display:inline-flex;align-items:center;min-height:40px;margin-top:8px;color:var(--faint);font-size:12.5px}
.aic-credit{padding:0 16px 6px;color:var(--faint);font-size:12px}
.aic-credit.low{color:#d97706}
.aic-chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 16px 10px}
.aic-chip{border:1px solid rgba(0,160,210,.3);background:var(--primary-soft);color:var(--primary);font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.13s;line-height:1.3}
.aic-chip:hover{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 5px 14px rgba(0,160,210,.3);transform:translateY(-1px)}
.aic-input{display:flex;gap:8px;padding:12px 14px 14px;border-top:1px solid var(--border-soft)}
.aic-input textarea{flex:1;border:1.5px solid var(--input-bd,#3a4149);border-radius:5px;padding:12px 14px;font-size:14.5px;line-height:1.45;background:var(--input-bg,#1a1e22);color:var(--text);resize:none;outline:none;min-height:58px;max-height:150px;font-family:inherit;transition:.12s}
.aic-input textarea:focus{border-color:var(--primary);background:var(--panel);box-shadow:0 0 0 3px rgba(0,160,210,.16)}
.aic-send{border:0;border-radius:5px;width:50px;min-height:58px;background:var(--grad);color:#fff;font-size:19px;cursor:pointer;flex-shrink:0;box-shadow:0 5px 14px rgba(0,160,210,.34)}
.aic-send:disabled{opacity:.45;cursor:default;box-shadow:none}
.ed-empty{color:var(--muted);font-size:14px;padding:20px 4px;text-align:center}
.ed-insp-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin:6px 0 12px}
.ed-insp-h .mic{color:var(--primary)}
/* Đ247: user chỉ ảnh chụp panel Cột/Phần tử — nút "← Danh sách khối" quá NHỎ (dòng chữ mảnh
   12.5px, không nền, không viền) + BIẾN MẤT khi cuộn xuống danh sách field dài (Bố cục/Nền &
   kiểu dáng/Nâng cao…), user phải cuộn ngược lên mới bấm ra được → "phải luôn thấy được để lùi
   bất cứ lúc nào". Xác minh sống (preview_inspect): KHÔNG có lỗi đè hình ảnh thật (2 phần tử đều
   position:static, cách nhau đúng 10px margin — trước đây trông "đè" chỉ do chữ quá nhỏ/nén ảnh
   chụp, không phải bug z-index) — chỉ sửa 2 việc: (1) to+rõ hơn, (2) LUÔN hiện khi cuộn.
   position:sticky (không tách hẳn thành header DOM riêng như .ed-left-foot của Đ231) vì #ed-inspector
   là 1 hộp DUY NHẤT bị innerHTML="" xoá-dựng-lại mỗi renderInspector() (box.appendChild theo thứ
   tự) — 2 nơi gọi (renderInspector() "← Danh sách khối" + renderLibStylePanel() "← Đóng thông số
   thành phần") tự thay nhãn/hành vi qua cùng 1 class .ed-insp-back, tách hẳn ra ngoài DOM tĩnh
   (editor.php) sẽ phải nhân đôi logic đổi nhãn/hành vi đó ra ngoài — sticky đơn giản hơn, rủi ro
   thấp hơn, và VẪN đạt đúng yêu cầu "luôn thấy khi cuộn". Nền đục var(--panel) (khớp #ed-inspector,
   xem .ed-right cùng token) để che nội dung cuộn phía dưới khi nút đã dính ở đỉnh; margin âm 2 bên
   bù lại padding:16px của .ed-rpane (không phải hộp riêng) để nền phủ hết bề ngang, không hở viền.
   ⚠️ Live-verify phát hiện thêm: renderInspector() LUÔN appendChild #1 (.ed-insp-back "← Danh sách
   khối") trước khi rẽ nhánh, và với library.section.v1 + libStylePanel đang mở lại appendChild
   thêm #2 (.ed-insp-back "← Đóng thông số thành phần", từ renderLibStylePanel()) NGAY SAU — tức 2
   node .ed-insp-back lồng cùng 1 box. Cả 2 cùng top:-16px + margin âm kéo ra mép ban đầu khiến
   node #2 (offsetTop thấp hơn) bị margin âm kéo NGƯỢC LÊN đè trùng lên node #1 khi cuộn (đã bắt
   qua getBoundingClientRect: cả 2 cùng top y hệt). Node #2 KHÔNG cần kéo ra tới mép ngoài .ed-rpane
   (mép đó đã do node #1 phủ) — bỏ margin âm cho .ed-insp-back thứ 2 trở đi qua tổ hợp ~ (general
   sibling), và dịch top XUỐNG đúng chiều cao đã đo của node #1 (54.8px thật, đo bằng
   getBoundingClientRect khi đã .ed-back-btn to theo Đ247 — không phải số áng chừng) để node #2 vẫn
   sticky (không mất khả năng "luôn thấy khi cuộn"), dính NGAY DƯỚI node #1 thay vì đè lên, nền đục
   vẫn che nội dung cuộn phía dưới nó. */
.ed-insp-back{position:sticky;top:-13px;z-index:5;margin:-13px -13px 12px;padding:10px 13px 8px;background:var(--panel)}
.ed-insp-back ~ .ed-insp-back{top:39px;z-index:4;margin:0 -13px 12px;padding:8px 13px}
.ed-back-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;padding:9px 14px;border-radius:5px;line-height:1.2}
.ed-back-btn:hover{color:#fff;background:var(--primary);border-color:var(--primary)}
/* thin-line icons (replace emoji) — never intercept clicks, align with adjacent text */
.mic{flex:0 0 auto;pointer-events:none;vertical-align:-2px}
.ed-field{display:block;margin-bottom:12px}
.ed-flabel{display:block;font-size:12px;font-weight:600;color:var(--label,#c7ccd1);margin-bottom:5px}
.ed-field .input{font-size:13.5px;padding:9px 11px} .ed-field textarea.input{min-height:70px;resize:vertical}
/* Đ259: đo sống demo.trangsuckk.com — input/select/textarea thật của Options panel Flatsome là
   nền #333a41 (đậm hơn var(--panel)=#24282d), viền rgba(255,255,255,.05) (rất mờ, gần như không
   thấy — không phải var(--border) rõ nét), và bo góc 0 (vuông hẳn, không bo 4px). Scope CHỈ trong
   .ed-rpane (panel field bên phải) — không đổi .input dùng chung toàn app (login/form khác). */
.ed-rpane .input{background:var(--field-bg,#333a41);border-color:var(--field-bd,rgba(255,255,255,.05));border-radius:0}
.ed-item-card{background:var(--bg);border:1px solid var(--border-soft);border-radius:5px;padding:10px;margin-bottom:10px}
/* Đ263: 12px→14px — user chê icon bé khắp editor; ✕ trong .ed-mini-del (nút "✕ Xoá mục/Xoá") và
   glyph bên trong .ed-mini (↑↓✕⧉📋🗑💾🧱, khung 28x24 vẫn đủ chỗ ở 14px) đọc lạc trong khung nút. */
.ed-mini-del{border:0;background:none;color:var(--danger);cursor:pointer;font-size:14px;font-weight:600;padding:2px}
.ed-item-bar{display:flex;align-items:center;gap:6px;margin-top:8px}
.ed-mini{border:1px solid var(--border);background:var(--panel);cursor:pointer;font-size:14px;color:var(--muted);width:28px;height:24px;border-radius:4px;line-height:1}
.ed-mini:hover{border-color:var(--primary);color:var(--primary)} .ed-mini:disabled{opacity:.3;cursor:default}
.ed-item-bar .ed-mini-del{margin-left:auto}
/* Đ158: menu ⚙ hợp nhất (Row/Cột/Phần tử) — mirror .exp/.exp-menu (project.php) đã ổn định. */
.ed-gear{position:relative;display:inline-block;flex:0 0 auto}
.ed-gear>summary{list-style:none;cursor:pointer;width:26px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--panel);border-radius:4px;color:var(--muted)}
.ed-gear>summary::-webkit-details-marker{display:none}
.ed-gear>summary:hover{border-color:var(--primary);color:var(--primary)}
.ed-gear[open]>summary{border-color:var(--primary);color:var(--primary)}
.ed-gear-menu{position:absolute;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--border);border-radius:4px;box-shadow:var(--sh-lg);padding:5px;min-width:190px;z-index:40}
/* Đ281: gear ở các dòng cuối cây — menu xổ xuống bị footer panel trái đè, mục dưới không bấm được
   (bug tìm ra khi test bằng chuột thật; .click() giả các vòng test cũ vẫn "ăn" trên phần tử bị che
   nên không lộ). editor.js's gearMenu() toggle đo mép dưới menu vượt đáy .ed-left → gắn class này
   để lật menu xổ LÊN TRÊN summary thay vì xuống dưới. */
.ed-gear-menu.ed-gear-up{top:auto;bottom:calc(100% + 4px)}
/* Đ321: gear ở hàng lồng sâu trong cây (Phần tử/Cột thụt lề nhiều cấp) — menu 190px xổ dựa vào
   mép PHẢI của gear (right:0) nên tràn ra ngoài mép TRÁI panel .ed-left (264px, overflow:hidden)
   bị cắt cụt (bug tìm ra khi test bằng chuột thật, chữ trong menu bị mất nửa đầu). editor.js's
   gearMenu() toggle đo mép trái menu vượt mép trái panel → gắn class này để menu bám mép TRÁI
   gear (left:0) thay vì mép phải, không còn tràn khỏi panel. */
.ed-gear-menu.ed-gear-left{right:auto;left:0}
.ed-gear-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:7px 9px;border-radius:4px;color:var(--text);font-size:13px;font-weight:500}
.ed-gear-item:hover{background:var(--bg);color:var(--primary)}
.ed-gear-item-danger{color:var(--danger)}
.ed-gear-item-danger:hover{background:var(--bg);color:var(--danger)}
.ed-gear-item:disabled{opacity:.35;cursor:default;pointer-events:none}
/* Đ286: toast thông báo nhẹ (edNotice trong editor.js) — hiện khi 1 thao tác bị chặn theo luật
   (Hàng đủ 6 cột, phần tử ở biên, clipboard rỗng…) để khách hiểu lý do thay vì tưởng nút hỏng;
   tự tắt sau ~3.2s, không chặn thao tác như window.alert. */
.ed-noticebar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:#111827;color:#fff;padding:10px 18px;border-radius:8px;font-size:13.5px;font-weight:500;box-shadow:var(--sh-lg);z-index:100000;max-width:min(560px,90vw);text-align:center;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.ed-noticebar.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* Đ296: hộp thoại xác nhận riêng của app (edConfirm trong editor.js) thay window.confirm() gốc
   trình duyệt ở các thao tác xoá/khôi phục — confirm() gốc chặn cứng cả tab và lệch phong cách
   Flatsome (UX Builder dùng dialog riêng). Huỷ/Escape/click nền = bỏ qua, Enter = xác nhận. */
.ed-confirm-ov{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:100001;display:flex;align-items:center;justify-content:center}
.ed-confirm-box{background:var(--panel,#fff);border-radius:12px;box-shadow:var(--sh-lg);padding:20px 22px;max-width:min(420px,90vw);min-width:280px}
.ed-confirm-msg{font-size:14px;font-weight:500;color:var(--text,#0f172a);line-height:1.5;white-space:pre-line}
.ed-confirm-row{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.ed-confirm-cc,.ed-confirm-ok{border-radius:8px;font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer}
.ed-confirm-cc{border:1px solid var(--border,#e2e8f0);background:transparent;color:var(--text,#0f172a)}
.ed-confirm-cc:hover{background:var(--bg,#f8fafc)}
.ed-confirm-ok{border:0;background:var(--danger,#dc2626);color:#fff}
.ed-confirm-ok:hover{filter:brightness(1.08)}
/* Đ257: gear ⚙ THẬT của Flatsome (đo sống demo.trangsuckk.com, nút bọc .dashicons-admin-generic) là
   background:transparent + border:0 HOÀN TOÀN — chỉ 1 icon 24px trần, không khung/không nền như
   .ed-gear>summary mặc định ở trên (border 1px + nền --panel + bo góc — "nút" rõ ràng). Scope override
   CHỈ trong cây trái (.ed-left-list) — không đổi .ed-gear dùng ở canvas/overlay khác (10 chỗ gọi
   gearMenu() ngoài cây, có thể cố ý cần khung để dễ bấm/thấy trên nền ảnh canvas, ngoài phạm vi ảnh
   user so sánh lần này — chỉ nhắm đúng cây trái bị chê "không giống"). */
.ed-left-list .ed-gear>summary{border:0;background:transparent}
.ed-left-list .ed-gear>summary:hover,.ed-left-list .ed-gear[open]>summary{border:0;background:transparent}
/* Đ158: chọn độ rộng Cột = 12 nút rời (Flatsome-style), thay slider. */
.ed-span-grid{display:flex;gap:3px}
.ed-span-btn{flex:1;height:26px;border:1px solid var(--border);background:var(--panel);border-radius:3px;font-size:10.5px;cursor:pointer;color:var(--muted);padding:0}
.ed-span-btn:hover{border-color:var(--primary);color:var(--primary)}
.ed-span-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
/* Đ159: breadcrumb "Hàng › Cột N › Phần tử" + panel "một-thứ-một-lúc" (Cột/Phần tử thu gọn
   khi không được focus, chỉ hiện đúng 1 thân thẻ tại 1 thời điểm — khớp UX Flatsome). */
.ed-row-crumb{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px;line-height:1.4}
.ed-crumb-seg{background:none;border:0;padding:3px 6px;border-radius:4px;color:var(--muted);cursor:pointer;font:inherit}
.ed-crumb-seg:hover{background:var(--bg);color:var(--text)}
.ed-crumb-seg.active{color:var(--primary);font-weight:600;cursor:default;background:none}
.ed-crumb-sep{color:var(--border-soft);padding:0 1px}
.ed-card-body{margin-top:6px}
.ed-col-card.ed-card-focused,.ed-el-item.ed-card-focused{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.mp-lib-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center}
.mp-lib{background:var(--panel);border-radius:6px;width:min(680px,92vw);max-height:80vh;overflow:auto;padding:18px;box-shadow:var(--sh-lg)}
.mp-lib-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15px;margin-bottom:14px}
.mp-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.mp-lib-cell{aspect-ratio:1;border-radius:4px;background:var(--border-soft) center/cover no-repeat;border:1px solid var(--border);cursor:pointer;transition:.12s}
.mp-lib-cell:hover{outline:3px solid var(--primary);outline-offset:2px}
.ed-theme{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft)}
/* Đợt 1 (#5 rà soát editor 19/10): khung hẹp. Trước đây (max-width:880px) .ed-right lại RỘNG THÊM 320px nên
   canvas còn ~200px ở 768. Nay:
   - ≤1024px: "Trợ lý AI" (.ed-right) thành NGĂN KÉO trượt từ phải, mở bằng nút #ed-ai-toggle (.ed.ed-ai-open);
     canvas lấy lại toàn bộ bề ngang còn lại.
   - ≤700px: chỉ MỘT cột tại một lúc, chuyển bằng thanh .ed-mtabs (Khối / Xem trước / Trợ lý AI) qua
     .ed[data-mview]; mặc định "Xem trước". */
.ed-ai-toggle,.ed-mtabs{display:none}
@media(max-width:1024px){
  .ed-left{width:240px}
  .ed-ai-toggle{display:inline-flex}
  .ed-right{position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);z-index:60;transform:translateX(100%);transition:transform .2s ease;box-shadow:var(--sh-lg,0 10px 30px rgba(0,0,0,.3))}
  .ed.ed-ai-open .ed-right{transform:none}
  .ed-top{flex-wrap:wrap;row-gap:6px}
  .ed-top-c .ed-dev span{display:none}
}
@media(max-width:700px){
  .ed-top{padding:8px 10px}
  .ed-top-c,#ed-history,.ed-top .brand-logo{display:none}
  .ed-name{min-width:0;width:40vw}
  .ed-ai-toggle{display:none}
  .ed-top .btn{min-height:40px;min-width:40px}   /* chuẩn chạm ≥ 40px (cổng C) cho ↶ ↷ Xuất bản Mở */
  .ed-mtabs{display:flex;gap:4px;padding:6px 8px;background:var(--panel);border-bottom:1px solid var(--border)}
  .ed-mtabs button{flex:1;padding:9px 6px;min-height:40px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:inherit;font:inherit;font-weight:600;cursor:pointer}
  .ed-mtabs button.active{background:var(--primary);border-color:var(--primary);color:#fff}
  .ed-left,.ed-center,.ed-right{display:none}
  .ed-left{width:100%;border-right:0}
  .ed-center{padding:8px}
  .ed-right{position:static;transform:none;width:100%;box-shadow:none;border-left:0}
  .ed[data-mview="blocks"] .ed-left{display:flex}
  .ed[data-mview="preview"] .ed-center,.ed:not([data-mview]) .ed-center{display:flex}
  .ed[data-mview="ai"] .ed-right{display:flex}
}

/* ── project workspace (sidebar + canvas + chat) ── */
.ws-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:6}
.ws-body{display:flex;gap:0;height:calc(100vh - 58px)}
.ws-canvas{flex:1;min-width:0;overflow-y:auto;padding:18px 22px;background:radial-gradient(60% 40% at 50% 0%,rgba(0,160,210,.05),transparent 70%)}
.ws-chat{width:412px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;height:100%}
.ws-chat-h{padding:15px 18px;border-bottom:1px solid var(--border);font-weight:700;font-size:15px;display:flex;align-items:center;gap:9px}
.ws-chat-dot{width:9px;height:9px;border-radius:50%;background:var(--grad)}
.ws-chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:13px}
.ws-msg{font-size:14.5px;line-height:1.6;padding:12px 15px;border-radius:5px;max-width:92%}
.ws-msg-u{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:3px}
.ws-msg-a{align-self:flex-start;background:var(--bg);border:1px solid var(--border);border-bottom-left-radius:3px}
.ws-msg-a a{font-weight:600}
.ws-chips{align-self:flex-start;display:flex;flex-direction:column;gap:7px;width:100%}
.ws-chips-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin-bottom:1px}
.ws-chip{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 13px;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--text);font-size:13px;font-weight:600;transition:.14s}
.ws-chip .ic-svg{color:var(--primary);flex:0 0 auto}
.ws-chip:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-d);transform:translateX(2px);box-shadow:var(--sh-sm)}
.ws-prevseg{padding:3px}
.ws-prevseg .rd-seg-b{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px}
.ws-prevseg .rd-seg-b .ic-svg{flex:0 0 auto}
.ws-prevseg .rd-seg-b.active{color:var(--primary)}
@media(max-width:1180px){.ws-prevseg .rd-seg-b span{display:none}.ws-prevseg .rd-seg-b{padding:7px 10px}}
.ws-chat-foot{border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--primary-soft),var(--panel) 90%);padding:15px 16px 17px}
.ws-chat-hint{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--primary-d);margin-bottom:10px}
.ws-chat-hint .ic-svg{color:var(--primary);flex:0 0 auto}
.ws-chat-input{display:flex;gap:9px;align-items:flex-end}
.ws-chat-input textarea{flex:1;border:1.5px solid var(--primary);border-radius:5px;padding:14px 15px;font-size:15px;line-height:1.5;font-family:inherit;color:var(--text);background:var(--panel);outline:0;resize:none;min-height:104px;max-height:220px;box-shadow:0 4px 14px rgba(0,160,210,.12);transition:.14s}
.ws-chat-input textarea::placeholder{color:var(--muted)}
.ws-chat-input textarea:focus{box-shadow:0 0 0 3px rgba(0,160,210,.18)}
.ws-chat-input .rd-send{width:52px;height:52px;font-size:20px;flex-shrink:0}
@media(max-width:980px){.ws-body{flex-direction:column;height:auto}.ws-chat{width:auto;border-left:0;border-top:1px solid var(--border);height:auto}.ws-chat-body{max-height:340px}}

/* export dropdown */
.exp{position:relative;display:inline-block}
.exp>summary{list-style:none;cursor:pointer}
.exp>summary::-webkit-details-marker{display:none}
.exp-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--border);border-radius:4px;box-shadow:var(--sh-lg);padding:6px;min-width:250px;z-index:30}
.exp-menu a{display:block;padding:9px 12px;border-radius:4px;color:var(--text);font-size:13.5px;font-weight:500;text-decoration:none}
.exp-menu a:hover{background:var(--bg);color:var(--primary)}
.exp-grp{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:8px 12px 4px}
.rd-topbar{display:none;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}

/* Đ235: user tự xem editor thật, khoanh đỏ trực tiếp trên ảnh chụp — thanh cuộn MẶC ĐỊNH của
   trình duyệt (chưa từng style trước đây) hiện quá to/đen, ăn vào bề ngang cột trái (.ed-left/
   .ed-list) lẫn cột phải (.ed-right/.ed-rpane/#ed-aichat). Thu mảnh + màu hoà theo theme tối,
   dùng lại token có sẵn (--border cho thumb thường, --faint khi hover — không thêm màu mới).
   Quét toàn bộ overflow:auto/overflow-y:auto trong app.css: mọi vùng cuộn của editor đều nằm
   trong .ed (ed-list/ed-page-menu/ed-rpane/ed-center) TRỪ các modal (.ed-modal-card/.blk-cats/
   .blk-grid) — editor.js gắn modal vào document.body (để z-index đè lên trên), không phải con
   của .ed trong DOM — nên cần thêm selector .ed-modal riêng để phủ luôn. Cả hai lớp chỉ dùng
   tên class riêng của editor (ed-/blk-), không đụng trang khác (Public Website, dashboard .ws-*,
   .mae-* ở project.php) và không ảnh hưởng iframe #ed-preview (document riêng, không kế thừa
   app.css của trang cha). */
.ed ::-webkit-scrollbar,.ed-modal ::-webkit-scrollbar{width:7px;height:7px}
.ed ::-webkit-scrollbar-track,.ed-modal ::-webkit-scrollbar-track{background:transparent}
.ed ::-webkit-scrollbar-thumb,.ed-modal ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.ed ::-webkit-scrollbar-thumb:hover,.ed-modal ::-webkit-scrollbar-thumb:hover{background:var(--faint)}
/* Đ242: RE-FIX của Đ235 — user gửi ảnh chụp panel Cột (#ed-inspector) khoanh đỏ đúng thanh cuộn
   DÀY/ĐEN y hệt trước khi Đ235 "đã sửa". Đo trực tiếp bằng offsetWidth-clientWidth (không phải
   đọc CSSOM/screenshot như Đ235) trên phần tử #ed-inspector THẬT đang chạy: khe hở 15px (đúng
   thanh cuộn mặc định của Windows Chrome, KHÔNG phải 7px Đ235 định làm) dù rule ::-webkit-scrollbar
   ở trên đã tồn tại nguyên văn trong stylesheet đang tải VÀ #ed-inspector CHẮC CHẮN là hậu duệ DOM
   thật của .ed.ed-focused (kiểm bằng insp.closest('.ed')!==null). Cô lập từng biến: 1 <div> tổng
   hợp riêng dùng CÙNG selector .fake-ed ::-webkit-scrollbar (width:7px) → khe hở ĐÚNG 7px (chứng
   minh cơ chế pseudo-element tự nó vẫn chạy tốt ở Chromium 148 này) NHƯNG ép thẳng
   #ed-inspector::-webkit-scrollbar (width:40px!important, tối đa độ đặc-hiệu) lên chính phần tử
   thật → khe hở VẪN 15px không đổi — chỉ setInline `el.style.scrollbarWidth` (thuộc tính chuẩn,
   không phải ::-webkit-scrollbar) THẲNG lên #ed-inspector mới thực sự đổi số đo (thin→10px,
   none→0px). Kết luận: `scrollbar-width` (dòng .ed,.ed-modal cũ, thuộc tính scrollbar-width là thin) LÀ
   THUỘC TÍNH KHÔNG KẾ THỪA (not inherited) xuống phần tử con thật sự cuộn — dù scrollbar-color
   TRÊN CÙNG 1 rule đó lại kế thừa đúng (getComputedStyle(#ed-inspector).scrollbarColor ra đúng
   var(--border) resolve, NHƯNG .scrollbarWidth vẫn "auto") — ghi chú "2 thuộc tính này tự kế thừa
   xuống mọi con cháu theo spec" trong comment Đ235 phía trên là NHẬN ĐỊNH SAI cho scrollbar-width
   ở Chromium (dù đúng cho scrollbar-color) — đây là NGUYÊN NHÂN GỐC khiến bản vá Đ235 không có
   tác dụng thật, không phải do thiếu rule/sai màu. Việc Đ235 tự xác nhận "qua CSSOM" chỉ chứng
   minh rule TỒN TẠI trong file, không chứng minh rule CÓ HIỆU LỰC trên phần tử cuộn thật — 2 việc
   khác nhau, và headless overlay-scrollbar của môi trường live-verify khi đó (0px gutter luôn)
   khiến Đ235 không có cách nào tự phát hiện khoảng trống này qua phép đo thật.
   Sửa: dời scrollbar-width/scrollbar-color từ gốc .ed,.ed-modal XUỐNG THẲNG từng phần tử THẬT SỰ
   overflow:auto/overflow-y:auto trong phạm vi (không phải wildcard .ed * — liệt kê đúng tên, khớp
   quy ước "không dùng wildcard" đã có ở đây từ Đ235). Gộp thêm 1 khoảng trống MỚI phát hiện khi
   rà lại toàn app.css theo yêu cầu batch này: .mp-lib (thư viện ảnh, app.css dòng ~552) có
   max-height:80vh;overflow:auto NHƯNG overlay của nó (mp-lib-ov, editor.js dòng ~2573) chưa từng
   được gắn class .ed-modal (khác các modal khác đều el("div","ed-modal")) — nằm ngoài phạm vi cả
   2 selector Đ235 lẫn selector mới này, cũng bị thanh cuộn dày. Thêm .mp-lib vào danh sách trực
   tiếp (giữ overlay của nó KHÔNG đổi class, tránh động chạm CSS position/z-index khác của
   mp-lib-ov không thuộc phạm vi batch này) thay vì sửa editor.js. */
#ed-sitesettings-body,.ed-page-menu,.ed-list,.ed-modal-card,.blk-cats,.blk-grid,.ed-center,.ed-rpane,.mp-lib{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.rd-burger{font-size:22px;background:none;border:0;cursor:pointer}

/* Đợt 1 (#8 rà soát editor 19/10): editor theo lựa chọn SÁNG/TỐI của người dùng (users.ui_theme qua Ui2::theme).
   Chỉ áp cho trang editor (html.ed-html): data-theme="light" → bảng sáng; "dark" → bảng tối gốc ở :root;
   không đặt (auto) → theo hệ điều hành. Canvas (iframe website của khách) giữ nguyên, không đổi theo. */
html.ed-html[data-theme="light"]{
  --bg:#f3f4f6; --panel:#ffffff; --border:#d7dce2; --border-soft:#e7eaee;
  --text:#1b1f24; --muted:#5b6670; --faint:#8a939c;
  --primary:#0087b3; --primary-d:#006b8f; --primary-soft:#e2f3f9; --accent:#0087b3;
  --grad-soft:linear-gradient(135deg,#eaf6fb 0%,#e1f1f7 100%);
  --sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08); --sh-md:0 4px 12px rgba(16,24,40,.08),0 12px 32px rgba(16,24,40,.08); --sh-lg:0 18px 50px rgba(16,24,40,.16);
  --label:#3d4650; --field-bg:#f6f7f9; --field-bd:#d7dce2; --input-bg:#ffffff; --input-bd:#cfd5dc;
  --warn-fg:#8a5a00; --warn-bg:#fff6e0; --warn-bd:#f0d79a;
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  html.ed-html:not([data-theme]){
    --bg:#f3f4f6; --panel:#ffffff; --border:#d7dce2; --border-soft:#e7eaee;
    --text:#1b1f24; --muted:#5b6670; --faint:#8a939c;
    --primary:#0087b3; --primary-d:#006b8f; --primary-soft:#e2f3f9; --accent:#0087b3;
    --grad-soft:linear-gradient(135deg,#eaf6fb 0%,#e1f1f7 100%);
    --sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08); --sh-md:0 4px 12px rgba(16,24,40,.08),0 12px 32px rgba(16,24,40,.08); --sh-lg:0 18px 50px rgba(16,24,40,.16);
    --label:#3d4650; --field-bg:#f6f7f9; --field-bd:#d7dce2; --input-bg:#ffffff; --input-bd:#cfd5dc;
    --warn-fg:#8a5a00; --warn-bg:#fff6e0; --warn-bd:#f0d79a;
    color-scheme:light;
  }
}
html.ed-html[data-theme="dark"]{color-scheme:dark}
/* Bảng phối màu + cặp font trong "Giao diện chung" (editor.js palitemsBlock) */
.ed-pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin:6px 0 12px;min-width:0}
.ed-pal-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:8px;border:1px solid var(--input-bd,#cfd5dc);border-radius:8px;background:var(--input-bg,#fff);color:inherit;cursor:pointer;text-align:left;font:inherit;overflow:hidden}
.ed-pal-card:hover{border-color:#2563eb}
.ed-pal-card.on{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.35)}
.ed-pal-dots{display:flex;gap:4px}
.ed-pal-dots i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:block}
.ed-pal-name{font-size:12px;line-height:1.3;max-width:100%;overflow-wrap:anywhere}
.ed-pal-aa{font-size:16px;font-weight:700;line-height:1.2;max-width:100%;overflow-wrap:anywhere}
.ed-pal-sample{font-size:12px;line-height:1.3;max-width:100%;overflow-wrap:anywhere}
.ed-pal-fonts{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
/* Khảo sát Lovable #5: hộp thoại Xuất bản một màn (danh sách kiểm, link + QR + xem trước Google) */
.ed-pubdlg{max-width:560px}
.ed-pub-list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px;max-height:46vh;overflow:auto}
.ed-pub-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border-soft);border-radius:6px}
.ed-pub-item.block{border-color:#dc2626}
.ed-pub-item.warn{border-color:#d97706}
.ed-pub-ic{font-size:16px;line-height:1.3}
.ed-pub-tx{flex:1;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.45}
.ed-pub-tx span{color:var(--muted)}
.ed-pub-fix{white-space:nowrap;min-height:36px}
.ed-pub-err{margin-top:10px;color:#dc2626;font-size:13px}
.ed-pub-okh{font-size:18px;font-weight:700;margin:4px 0 12px}
.ed-pub-link{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border-soft);border-radius:6px;word-break:break-all}
.ed-pub-link a{flex:1;min-width:0;color:var(--primary);font-weight:600}
.ed-pub-share{display:flex;gap:16px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
.ed-pub-qr{width:132px;height:132px;image-rendering:pixelated;border-radius:6px;background:#fff;flex:none}
.ed-gprev{flex:1;min-width:220px;padding:12px 14px;border-radius:8px;background:#fff;color:#202124;font-family:arial,sans-serif}
.ed-gprev-l{font-size:11px;color:#70757a;margin-bottom:6px}
.ed-gprev-u{font-size:12px;color:#202124;word-break:break-all}
.ed-gprev-t{font-size:18px;line-height:1.3;color:#1a0dab;margin:3px 0}
.ed-gprev-d{font-size:13px;line-height:1.45;color:#4d5156}
/* Khảo sát Lovable #8: bảng lịch sử phiên bản */
.ed-histdlg{max-width:640px}
.ed-hist-top{display:flex;justify-content:flex-end;margin-top:8px}
.ed-hist-list{max-height:52vh;overflow:auto;margin-top:8px}
.ed-hist-row{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}
.ed-hist-row.live{background:rgba(22,163,74,.07)}
.ed-hist-info{flex:1;min-width:200px}
.ed-hist-name{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px}
.ed-hist-badge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--border-soft)}
.ed-hist-badge.live{background:#16a34a;color:#fff}
.ed-hist-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.ed-hist-rename{display:flex;gap:6px;margin-top:6px}
.ed-hist-rename[hidden]{display:none}
.ed-hist-rename .input{flex:1;min-height:36px}
.ed-hist-btns{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:640px){.ed-pub-fix,.ed-hist-btns .btn,.ed-pub-link .btn{min-height:44px}.ed-pub-share{flex-direction:column;align-items:center}}