/* Trung tam template (/hub). Nap SAU style.css: dung lai token :root (--bg, --surface, --ink,
   --muted, --primary, --line, --accent, --danger) va bang mau trang thai --tone-*.
   KHONG dinh nghia lai .status / .tone-*: chi ghep .tone-* voi class rieng cua hub.
   CSP cam style inline: moi kich thuoc/mau nam o day; thanh ti le dung <meter>. */

body.hub{min-height:100dvh;overflow-x:hidden}
body.hub header{gap:16px}
body.hub main{padding-top:24px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#message.is-ok{background:var(--tone-done-soft);color:var(--tone-done)}
#message.is-bad{background:var(--tone-bad-soft);color:var(--tone-bad)}
#hub-view:focus{outline:none}
.hub-view-title:focus{outline:none}

/* Nut dang lien ket: cung hinh dang voi <button> cua style.css */
a.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;text-decoration:none;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:9px 15px;line-height:1.5;transition:background .15s}
a.btn:hover{background:var(--surface)}
a.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--bg)}
a.btn.primary:hover{filter:brightness(.92)}
button.small,a.btn.small{font-size:13px;padding:6px 11px}
button.link{border:0;background:none;padding:0;color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}
button.link:hover{background:none}

/* ---- Tinh trang chung ---- */
.hub-top{margin-bottom:18px}
.hub-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.hub-stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.hub-stat-label{font-size:13px;font-weight:600;color:var(--muted)}
.hub-stat-value{font-size:20px;font-weight:650;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hub-stat-value small{font-size:13px;font-weight:600;color:var(--muted)}
.hub-stat-note{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hub-stat.is-warn{background:var(--tone-warn-soft);border-color:var(--tone-warn-line)}
.hub-stat.is-bad{background:var(--tone-bad-soft);border-color:var(--tone-bad-line)}
.hub-stat.is-warn .hub-stat-value{color:var(--tone-warn)}
.hub-stat.is-bad .hub-stat-value{color:var(--tone-bad)}
.hub-stat.is-ok .hub-stat-value{color:var(--tone-done)}
.hub-stat.is-wait .hub-stat-value{color:var(--tone-run)}
/* Thanh so du co vach san (SVG: vi tri bang thuoc tinh x/width, mau o day) */
.hub-bar{display:block;width:100%;height:10px;margin:6px 0 2px;overflow:visible}
.hub-bar-track{fill:var(--line)}
.hub-bar-fill.is-done{fill:var(--tone-done)}
.hub-bar-fill.is-warn{fill:var(--tone-warn)}
.hub-bar-fill.is-bad{fill:var(--tone-bad)}
.hub-bar-floor{fill:var(--ink)}
.hub-stat .hub-stat-error{font-size:13px;color:var(--tone-bad)}
/* Cong: <details> — bam mo toan bo ly do */
details.hub-gate{padding:0;border-radius:10px}
details.hub-gate>summary{list-style:none;display:flex;flex-direction:column;gap:2px;padding:14px 16px;cursor:pointer;font-weight:400}
details.hub-gate>summary::-webkit-details-marker{display:none}
details.hub-gate[open]>summary{margin-bottom:0}
details.hub-gate .hub-more{font-size:12px;font-weight:600;color:var(--primary)}
.hub-gate-reasons{margin:0;padding:0 16px 14px 34px;font-size:13px;display:grid;gap:4px}
.hub-gate-reasons code{color:inherit;opacity:.75}
.hub-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:12px}
.hub-controls .switch{min-height:32px}
.hub-push{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:13px;color:var(--muted);max-width:none;min-width:0}
.hub-push code{font-size:12px;overflow-wrap:anywhere}

/* ---- Can xu ly ---- */
.hub-attention{margin-bottom:22px}
.hub-alerts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hub-alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.hub-alert.tone-warn{background:var(--tone-warn-soft);border-color:var(--tone-warn-line)}
.hub-alert.tone-bad{background:var(--tone-bad-soft);border-color:var(--tone-bad-line)}
.hub-alert-mark{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:700;color:var(--bg);background:var(--tone-warn);margin-top:1px}
.hub-alert.tone-bad .hub-alert-mark{background:var(--tone-bad)}
.hub-alert-body{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.hub-alert-text{margin:0;color:var(--ink);max-width:80ch;flex:1 1 320px;overflow-wrap:anywhere}
.hub-alert-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px;margin-left:auto}
.hub-attach{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hub-attach input{width:210px;font-size:13px;padding:6px 8px}
.hub-attach button{font-size:13px;padding:6px 11px}

/* ---- Dau trang tung man ---- */
.hub-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin:4px 0 18px}
.hub-head h1{margin:0}
.hub-head p{margin:4px 0 0}
.hub-crumb{display:inline-block;font-size:13px;font-weight:600;margin-bottom:6px;text-decoration:none}
.hub-crumb:hover{text-decoration:underline}
.hub-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hub-title-row h1{overflow-wrap:anywhere}
.hub-section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin:0 0 12px}
.hub-section-head h2{margin:0}
.hub-section-head p{margin:0;font-size:13px}

/* ---- Luoi the template ---- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.hub-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.hub-card.is-builtin{background:var(--surface)}
.hub-card-media{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.hub-card-media.is-empty{grid-template-columns:1fr;background:var(--surface)}
.hub-card-media.is-empty .hub-media-empty{height:210px;border:0;font-size:13px}
.hub-card-media figure{position:relative;margin:0;min-width:0;background:var(--surface)}
.hub-card-media img,.hub-card-media video,.hub-card-media .hub-media-empty{display:block;width:100%;height:210px;object-fit:cover;border:0;border-radius:0}
.hub-card-media video{background:oklch(.2 .01 140)}
.hub-card-media figcaption{position:absolute;left:6px;bottom:6px;margin:0;padding:1px 7px;border-radius:5px;font-size:11px;font-weight:600;background:oklch(1 0 0/.88);color:var(--ink);pointer-events:none}
.hub-card-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 16px 16px}
.hub-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hub-card-title h3{margin:0;font-size:16px;line-height:1.35;overflow-wrap:anywhere}
.hub-card-title h3 a{color:inherit;text-decoration:none}
.hub-card-title h3 a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.hub-card-stats{margin:0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.hub-card-stats strong{color:var(--ink);font-weight:600}
.hub-card-note{margin:0;font-size:13px;color:var(--ink)}
.hub-card-note.is-warn{color:var(--tone-warn)}
.hub-card-error{margin:0;font-size:12px;color:var(--tone-bad)}
.hub-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.hub-card-new{display:grid;place-content:center;justify-items:center;gap:6px;min-height:260px;padding:24px;text-align:center;text-decoration:none;color:var(--ink);border:2px dashed var(--line);border-radius:12px;transition:background .15s,border-color .15s}
.hub-card-new:hover{background:var(--surface);border-color:var(--primary)}
.hub-card-new .hub-plus{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-size:28px;line-height:1;color:var(--primary);background:var(--surface)}
.hub-card-new strong{font-size:16px}
.hub-card-new small{max-width:30ch;color:var(--muted);font-size:13px}
.hub-media-empty{display:grid;place-items:center;padding:10px;text-align:center;font-size:12px;color:var(--muted);background:var(--surface);text-decoration:none;border:1px dashed var(--line);border-radius:7px}
.hub-card-media .hub-media-empty{border:0}

/* <meter>: ti le coin / vi — mau theo nguong low/high/optimum cua chinh the meter */
.hub-meter{display:block;width:100%;height:8px;margin:6px 0 2px;-webkit-appearance:none;appearance:none;border:0;background:none}
.hub-meter::-webkit-meter-bar{height:8px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.hub-meter::-webkit-meter-optimum-value{border-radius:999px;background:var(--tone-done)}
.hub-meter::-webkit-meter-suboptimum-value{border-radius:999px;background:var(--tone-warn)}
.hub-meter::-webkit-meter-even-less-good-value{border-radius:999px;background:var(--tone-bad)}
.hub-meter::-moz-meter-bar{border-radius:999px;background:var(--tone-done)}
.hub-meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--tone-warn)}
.hub-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--tone-bad)}

/* ---- Cai dat hub ---- */
.hub-settings{margin-top:28px}
.hub-settings-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:end}
.hub-settings-form .help{grid-column:1/-1;margin:0}
.hub-settings-form button{justify-self:start}

/* ---- Man template ---- */
.hub-tpl-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.hub-tpl-meta strong{color:var(--ink);font-weight:600}
.hub-chainline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0;padding:0;list-style:none;font-size:13px}
.hub-chainline li{display:flex;align-items:center;gap:6px}
.hub-chainline li+li::before{content:"→";color:var(--muted)}
.hub-chainline span,.hub-chainline button{padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;color:inherit}
.hub-chainline button{cursor:pointer}
.hub-chainline button:hover{border-color:var(--accent,currentColor)}
.hub-steptabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.hub-steptabs button{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-size:14px;color:inherit;cursor:pointer}
.hub-steptabs button.is-current{border-color:var(--tone-done-line);background:var(--tone-done-soft);color:var(--tone-done);font-weight:600}
.hub-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;margin:14px 0 0;border:1px solid var(--tone-warn-line);border-radius:10px;background:var(--tone-warn-soft);color:var(--tone-warn)}
.hub-banner p{margin:0;color:inherit;max-width:none}
.hub-banner.is-bad{border-color:var(--tone-bad-line);background:var(--tone-bad-soft);color:var(--tone-bad)}
.hub-banner.is-ok{border-color:var(--tone-done-line);background:var(--tone-done-soft);color:var(--tone-done)}
.hub-usage{max-width:420px}
.hub-tpl-body{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:28px;align-items:start;margin-top:22px}
.hub-panel{min-width:0;border:1px solid var(--line);border-radius:12px;padding:18px 18px 20px;background:var(--bg)}
.hub-panel>h2{margin-bottom:12px}

/* Form tu sinh */
.hub-form{display:grid;gap:16px}
.hub-form fieldset{margin:0;padding:0;border:0;min-width:0}
.hub-form legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:650}
.hub-req{font-size:12px;font-weight:600;color:var(--muted)}
.hub-src{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.hub-src-opt{flex-direction:row;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-weight:600;cursor:pointer;background:var(--bg)}
.hub-src-opt input{width:auto;margin:0;accent-color:var(--primary)}
.hub-src-opt:has(input:checked){border-color:var(--primary);background:var(--surface)}
.hub-src-opt:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:2px}
.hub-borrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.hub-borrow-item{margin:0;min-width:0;display:flex;flex-direction:column;gap:4px}
.hub-borrow-item img,.hub-borrow-item .hub-skel{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.hub-borrow-item figcaption{font-size:12px;line-height:1.35;min-width:0}
.hub-borrow-item figcaption span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-borrow-item figcaption small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-borrow-item button{font-size:12px;padding:5px 6px}
.hub-borrow-error{grid-column:1/-1;margin:0;font-size:13px;color:var(--tone-bad)}
.hub-upload{display:grid;gap:8px}
.hub-upload-preview{display:flex;gap:10px;align-items:flex-start}
.hub-upload-preview img,.hub-upload-preview video{width:120px;max-height:180px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.hub-upload-preview p{margin:0;font-size:13px;overflow-wrap:anywhere}
.hub-default-file{display:flex;gap:10px;align-items:center}
.hub-default-file img,.hub-default-file video{width:84px;height:112px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.hub-params{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.hub-params textarea{width:100%;min-height:64px;font:inherit;font-size:13px;padding:8px;border:1px solid var(--line);border-radius:6px;resize:vertical}
.hub-fixed{padding:10px 14px}
.hub-fixed>summary{font-size:14px}
.hub-fixed-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hub-fixed-item{display:flex;gap:10px;align-items:flex-start;min-width:0}
.hub-fixed-item img,.hub-fixed-item video{flex:0 0 auto;width:56px;height:74px;object-fit:cover;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.hub-fixed-mark{flex:0 0 auto;display:grid;place-items:center;width:56px;height:40px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:12px;font-weight:600;color:var(--muted)}
.hub-fixed-item div{min-width:0;font-size:13px}
.hub-fixed-item strong{display:block}
.hub-fixed-item small{display:block;color:var(--muted);overflow-wrap:anywhere}
.hub-fixed-item q{display:block;margin-top:2px;color:var(--ink);overflow-wrap:anywhere;quotes:none}
.hub-fixed-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px}
.hub-fixed-tools label.btn{display:inline-flex;align-items:center;font-size:13px;font-weight:600;padding:5px 11px;border:1px solid var(--line);border-radius:7px;background:var(--bg);cursor:pointer}
.hub-fixed-tools label.btn:hover{background:var(--surface)}
.hub-fixed-tools label.btn:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:2px}
.hub-fixed-item.is-swapped img,.hub-fixed-item.is-swapped video{border:2px solid var(--tone-warn)}
.hub-fixed-item small.hub-fixed-swapped{color:var(--tone-warn);font-weight:600}
.hub-fixed .help{margin:8px 0 10px;font-size:13px}
.hub-manage-files{margin-bottom:6px}
.hub-form-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end}
.hub-seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:max-content}
.hub-seg label{flex-direction:row;margin:0;cursor:pointer}
.hub-seg input{position:absolute;opacity:0;width:1px;height:1px}
.hub-seg span{display:block;min-width:40px;padding:8px 0;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.hub-seg label+label span{border-left:1px solid var(--line)}
.hub-seg input:checked+span{background:var(--primary);color:var(--bg)}
.hub-seg input:focus-visible+span{outline:3px solid var(--primary);outline-offset:-3px}
.hub-form-sum{margin:0;padding:12px 14px;border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums;max-width:none}
.hub-form-sum small{display:block;margin-top:4px;color:var(--muted);font-size:13px}
.hub-form-sum .is-warn{color:var(--tone-warn);font-weight:600}
.hub-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hub-form-actions button{min-height:44px}
.hub-form-note{margin:0;font-size:13px}

/* ---- Danh sach luot ---- */
.hub-run-list{display:grid;gap:12px}
.hub-run{min-width:0;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg)}
.hub-run.is-attention{border-color:var(--tone-warn-line);background:oklch(.985 .02 90)}
.hub-run.is-new{animation:hub-new 1.6s cubic-bezier(.16,1,.3,1)}
@keyframes hub-new{from{box-shadow:0 0 0 3px var(--tone-run-line)}to{box-shadow:0 0 0 0 transparent}}
.hub-run-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px 12px}
.hub-run-head h3{margin:0;font-size:15px;overflow-wrap:anywhere}
.hub-run-head h3 a{color:var(--ink);text-decoration:none}
.hub-run-head h3 a:hover{text-decoration:underline}
.hub-run-meta{margin:2px 0 0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hub-run-meta code{font-size:11px}
.hub-run-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hub-run-wait{margin:8px 0 0;font-size:13px;color:var(--tone-run);max-width:none}
.hub-chain{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}
.hub-chain li{display:flex;align-items:center;gap:6px;min-width:0}
.hub-chain li+li::before{content:"→";color:var(--muted);font-size:13px}
.hub-step{display:flex;flex-direction:column;gap:1px;min-width:0;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13px;line-height:1.35}
.hub-step b{font-weight:600}
.hub-step span{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hub-step.tone-done{border-color:var(--tone-done-line);background:var(--tone-done-soft)}
.hub-step.tone-done span{color:var(--tone-done)}
.hub-step.tone-run{border-color:var(--tone-run-line);background:var(--tone-run-soft)}
.hub-step.tone-run span{color:var(--tone-run)}
.hub-step.tone-warn{border-color:var(--tone-warn-line);background:var(--tone-warn-soft)}
.hub-step.tone-warn span{color:var(--tone-warn)}
.hub-step.tone-bad{border-color:var(--tone-bad-line);background:var(--tone-bad-soft)}
.hub-step.tone-bad span{color:var(--tone-bad)}
.hub-step .spin{display:inline-block;vertical-align:-2px;margin-right:4px}
.hub-run-media{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.hub-thumb{margin:0;min-width:0;width:112px}
.hub-thumb img,.hub-thumb video,.hub-thumb .hub-media-empty{display:block;width:112px;height:150px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.hub-thumb video{background:oklch(.2 .01 140)}
.hub-thumb.is-result img,.hub-thumb.is-result video{border-color:var(--tone-done)}
.hub-thumb figcaption{margin-top:4px;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.hub-thumb figcaption small{display:block;color:var(--muted)}
.hub-run.is-detail .hub-thumb{width:176px}
.hub-run.is-detail .hub-thumb img,.hub-run.is-detail .hub-thumb video,.hub-run.is-detail .hub-thumb .hub-media-empty{width:176px;height:260px}
.hub-run-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.hub-run-actions button,.hub-run-actions a.btn{font-size:13px;padding:6px 11px}
.hub-run-event{margin:10px 0 0;font-size:12px;color:var(--muted);max-width:none;overflow-wrap:anywhere}
.hub-run-event time{margin-right:8px;font-variant-numeric:tabular-nums}
.hub-step-actions{display:grid;gap:8px;margin-top:14px}
.hub-step-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.hub-step-row>span{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.hub-step-row small{display:block;color:var(--muted)}
.hub-step-row button{font-size:13px;padding:6px 11px}
.hub-empty{padding:28px 20px;border:1px dashed var(--line);border-radius:12px;background:var(--surface);text-align:center}
.hub-empty p{margin:6px auto 0}
.hub-detail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:18px}
.hub-log{list-style:none;margin:0;padding:0;font-size:13px;max-height:360px;overflow:auto}
.hub-log li{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.hub-log time{flex:0 0 auto;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- Quan ly template ---- */
.hub-manage{margin-top:28px}
.hub-manage h3{margin:22px 0 6px}
.hub-manage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:end}
.hub-folder-field{display:flex;gap:8px;align-items:center;min-width:0}
.hub-folder-field code{flex:1;min-width:0;padding:9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:13px;color:var(--ink)}
.hub-manage-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.hub-versions td,.hub-versions th{padding:9px 8px}

/* ---- Trinh cai ---- */
.hub-wizard{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:1080px}
.hub-wstep{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.hub-wstep.is-open{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.hub-wstep.is-locked{background:var(--surface)}
.hub-whead{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:0;border-radius:12px;background:none;text-align:left;font-weight:400}
.hub-whead:hover{background:var(--surface)}
.hub-whead:disabled{opacity:1;cursor:default}
.hub-whead:disabled:hover{background:none}
.hub-wnum{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--bg);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.hub-wstep.is-done .hub-wnum{background:var(--tone-done);border-color:var(--tone-done);color:var(--bg)}
.hub-wstep.is-open .hub-wnum{background:var(--primary);border-color:var(--primary);color:var(--bg)}
.hub-wtitle{display:flex;flex-direction:column;min-width:0}
.hub-wtitle strong{font-size:15px}
.hub-wtitle small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.hub-wbody{padding:4px 16px 18px 56px;display:grid;gap:14px;min-width:0}
.hub-wbody>p{margin:0}
.hub-wnav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hub-probe-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.hub-probe-form label{flex:1 1 260px}
.hub-probe{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.hub-probe h3{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hub-probe p{margin:0}
.hub-probe ul{margin:0;padding-left:18px;font-size:13px;color:var(--tone-warn)}
.hub-steplist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hub-steplist li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.hub-steplist li>span{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.hub-steplist small{display:block;color:var(--muted)}
.hub-steplist button{font-size:13px;padding:6px 10px}
.hub-stepmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.hub-fields{display:grid;gap:8px}
.hub-field{display:grid;grid-template-columns:minmax(170px,.9fr) minmax(0,1fr) minmax(170px,.8fr) minmax(0,1.2fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.hub-field.is-off{background:var(--surface)}
.hub-field.is-off .hub-field-cfg{display:none}
.hub-field-use{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400;min-width:0}
.hub-field-use input{width:auto;margin:3px 0 0}
.hub-field-use span{min-width:0}
.hub-field-use b{display:block;font-weight:600;overflow-wrap:anywhere}
.hub-field-use code{font-size:11px}
.hub-field-cfg{display:contents}
.hub-field-extra{min-width:0;font-size:13px}
.hub-field-extra textarea{width:100%;min-height:60px;font:inherit;font-size:13px;padding:8px;border:1px solid var(--line);border-radius:6px;resize:vertical}
.hub-field-extra .help{margin:0}
.hub-more-fields{padding:10px 14px}
.hub-more-fields>summary{font-size:14px}
.hub-files{display:grid;gap:12px}
.hub-file{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:12px;border:1px solid var(--line);border-radius:10px}
.hub-file-preview img,.hub-file-preview video,.hub-file-preview .hub-media-empty{width:120px;height:160px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.hub-file h3{margin:0 0 4px;font-size:14px}
.hub-file h3 small{font-weight:400;color:var(--muted)}
.hub-file-body{display:grid;gap:8px;min-width:0;align-content:start}
.hub-outs{display:grid;gap:12px}
.hub-out{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.hub-out legend{padding:0 6px;font-weight:650}
.hub-out .check{align-self:center}
.hub-errors{margin:0;padding:12px 14px 12px 34px;border:1px solid var(--tone-bad-line);border-radius:10px;background:var(--tone-bad-soft);color:var(--tone-bad);font-size:13px;display:grid;gap:4px}
.hub-json pre{margin:0;max-height:420px;overflow:auto;font-size:12px;line-height:1.45;font-family:Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.hub-summary{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.hub-summary li strong{font-weight:650}
.hub-learned{margin:0;padding-left:18px;font-size:14px}

/* Khung cho tai: anh mo trong luc cho mang */
.hub-skel{display:block;background:linear-gradient(100deg,var(--surface) 30%,oklch(.94 .008 140) 50%,var(--surface) 70%);background-size:300% 100%;animation:hub-skel 1.4s ease-in-out infinite}
@keyframes hub-skel{from{background-position:100% 0}to{background-position:0 0}}
.hub-loading{padding:24px 0;color:var(--muted)}

/* Hop chon thu muc Drive: dung lai .library-dialog/.folder-list cua style.css */
.hub-drive-dialog .folder-crumb{margin:12px 0 0}

/* O "File mac dinh" / "Lay tu thu muc Drive": chon NGAY tai o, trai het hang duoi 3 cot tren */
.hub-field-extra.is-wide{grid-column:1/-1}
.hub-pick{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:12px;border:1px dashed var(--line);border-radius:10px;background:var(--surface)}
.hub-pick.hub-pick-src{grid-template-columns:minmax(0,1fr)}
.hub-pick-preview img,.hub-pick-preview video,.hub-pick-preview .hub-media-empty{width:120px;height:160px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.hub-pick-body{display:grid;gap:8px;min-width:0;align-content:start}
.hub-pick-title{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;overflow-wrap:anywhere}
.hub-pick-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hub-pick-actions button,.hub-pick-upload{font-size:13px;padding:7px 12px}
/* <label> boc o chon file: cung hinh dang voi <button> cua style.css */
.hub-pick-upload{position:relative;overflow:hidden;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;font-weight:600;
 color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:7px;line-height:1.5;transition:background .15s}
.hub-pick-upload:hover{background:var(--surface)}
.hub-pick-upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.hub-pick-upload:focus-within{outline:2px solid var(--tone-run);outline-offset:2px}
.hub-folders{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.hub-folders li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;overflow-wrap:anywhere}
.hub-folders code{font-size:13px}
.hub-folders small{color:var(--muted);font-variant-numeric:tabular-nums}
/* Cay thu muc kho nguon: thut le bang lop .dN (CSP cam style= noi dong) */
.hub-tree{list-style:none;margin:12px 0 0;padding:0;max-height:52vh;overflow:auto;display:grid;gap:2px}
.hub-tree label{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 8px;font-weight:400;padding:5px 8px;border-radius:6px;cursor:pointer}
.hub-tree label:hover{background:var(--surface)}
.hub-tree input{width:auto;margin:0}
.hub-tree small{color:var(--muted);font-variant-numeric:tabular-nums}
.hub-tree .d1{padding-left:18px}.hub-tree .d2{padding-left:36px}.hub-tree .d3{padding-left:54px}.hub-tree .d4{padding-left:72px}
.hub-tree .d5{padding-left:90px}.hub-tree .d6{padding-left:108px}.hub-tree .d7{padding-left:126px}
.hub-tree-sum{margin:10px 0 0;font-size:13px;overflow-wrap:anywhere}
/* Hop chon file co san */
.hub-lib-group{margin:14px 0 6px;font-size:14px}
.hub-lib-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:52vh;overflow:auto}
.hub-lib-item{display:grid;gap:6px;min-width:0}
.hub-lib-item img,.hub-lib-item video{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.hub-lib-item div{display:grid;gap:4px;min-width:0}
.hub-lib-item strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-lib-item small{font-size:12px;color:var(--muted)}
.hub-lib-item button{font-size:12px;padding:6px 8px}

/* ---- Chuoi nhieu buoc (24/09): cho duyet, am thanh, ket qua chu, buoc may chu ---- */
.hub-audio{display:block;width:100%;min-width:220px;height:40px}
.hub-thumb.is-wide{width:260px}
.hub-thumb.is-wide .hub-audio{width:260px}
.hub-run.is-detail .hub-thumb.is-wide{width:320px}
.hub-run.is-detail .hub-thumb.is-wide .hub-audio{width:320px}
.hub-text-out{box-sizing:border-box;width:100%;max-height:150px;overflow:auto;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
 background:var(--surface);font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.hub-run.is-detail .hub-text-out{max-height:260px}
.hub-text-out:focus-visible{outline:2px solid var(--tone-run);outline-offset:2px}
.hub-review{display:grid;gap:10px;margin-top:12px;padding:12px 14px;border:1px solid var(--tone-warn-line);border-radius:10px;background:var(--tone-warn-soft)}
.hub-review-title{margin:0;display:grid;gap:2px;max-width:none}
.hub-review-title span{font-size:13px;color:var(--ink)}
.hub-review .help{margin:0}
.hub-review .hub-run-actions{margin-top:0}
.hub-review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hub-review-item{display:grid;gap:6px;align-content:start;min-width:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-weight:400;cursor:pointer}
.hub-review-item.is-chosen,.hub-review-item:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.hub-review-item img,.hub-review-item video{display:block;width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;border-radius:6px;background:var(--surface)}
.hub-review-item small{color:var(--muted);font-size:12px}
.hub-review-pick{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.hub-review-pick input{width:auto;margin:0;accent-color:var(--primary)}
.hub-local-ops{display:grid;gap:8px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px}
.hub-local-title{margin:0;max-width:none}
.hub-local-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.hub-local-list button{display:grid;gap:3px;justify-items:start;text-align:left;padding:10px 12px;font-weight:400;min-height:44px}
.hub-local-list strong{font-weight:650}
.hub-local-list small{color:var(--muted);font-size:12px;line-height:1.4}
.hub-out .hub-out-note,.hub-out .hub-out-review{grid-column:1/-1;margin:0}
.hub-chain b small,.hub-chainline small{font-weight:400;color:var(--muted)}

/* ---- Trinh cai 27/09: nhan goc chu mo, muc "Nang cao" gap lai, AI App bat chon loai ket qua ---- */
.hub-orig{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.hub-orig-name{font-style:italic}
.hub-orig code{font-size:11px;color:inherit}
.hub-out .hub-adv{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:8px}
.hub-adv>summary{cursor:pointer;font-size:14px;font-weight:600}
.hub-adv>summary small{margin-left:6px;font-size:12px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.hub-adv-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end;margin-top:10px}
.hub-adv-body .hub-out-note{grid-column:1/-1;margin:0}
.hub-adv-inline{margin:10px 0 0}
.hub-adv>summary code{font-size:11px}
.hub-kind-need{margin:0;color:var(--tone-warn)}
.hub-wizard select[aria-invalid="true"]{border-color:var(--tone-warn-line);background:var(--tone-warn-soft)}

/* ---- Studio cua template (24/09): tab + lich su ket qua + tu dong + thong ke ---- */
.hub-tabs{display:flex;gap:4px;margin:22px 0 0;border-bottom:1px solid var(--line);overflow-x:auto}
.hub-tabs button{border:0;border-bottom:3px solid transparent;border-radius:0;background:none;padding:10px 14px;font-weight:600;color:var(--muted);white-space:nowrap}
.hub-tabs button:hover{background:var(--surface);color:var(--ink)}
.hub-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--primary)}
.hub-tabs button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.hub-studio{margin-top:20px}
.hub-studio-bar{display:flex;flex-wrap:wrap;align-items:end;gap:10px 16px;margin:0 0 16px}
.hub-studio-bar label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
.hub-results{display:grid;gap:14px}
.hub-result-run{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg)}
.hub-result-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;font-size:14px}
.hub-result-head span:not(.status){color:var(--muted)}
.hub-result-grid{display:flex;flex-wrap:wrap;gap:12px}
.hub-result{margin:0;width:180px;display:grid;gap:6px;align-content:start}
.hub-result img,.hub-result video,.hub-result .hub-media-empty{width:100%;height:260px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.hub-result .hub-audio{width:100%}
.hub-result .hub-text-out{max-height:260px}
.hub-result figcaption{display:grid;gap:1px;font-size:13px}
.hub-result figcaption small{color:var(--muted);overflow-wrap:anywhere}
.hub-result-links a{font-weight:600}
.hub-sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:20px;align-items:start;margin-top:16px}
.hub-sched h2{margin-top:0}
.hub-sched fieldset{border:0;padding:0;margin:0 0 14px}
.hub-sched legend{font-weight:650;margin-bottom:8px}
.hub-sched legend small{font-weight:400;color:var(--muted)}
.hub-slots{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 10px;padding:0}
.hub-slots li{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:650;font-variant-numeric:tabular-nums}
.hub-slots li.help{padding:4px 0;border:0;background:none;font-weight:400}
.hub-slots button{border-radius:999px}
.hub-slot-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hub-sched-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 12px}
.hub-sched-on{margin:14px 0 6px;font-size:15px}
.hub-sched-next{margin:4px 0 0;font-variant-numeric:tabular-nums}
.hub-chart{margin:18px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.hub-chart svg{display:block;width:100%;height:auto}
.hub-chart-bar{fill:var(--primary);opacity:.8}
.hub-chart-dot{fill:var(--tone-run)}
.hub-chart-axis{stroke:var(--line);stroke-width:1}
.hub-chart-label{fill:var(--muted);font-size:11px;text-anchor:middle}
.hub-chart-label.is-top{text-anchor:start}
.hub-chart figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:12px;color:var(--muted)}
.hub-legend::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;border-radius:2px;background:var(--primary)}
.hub-legend.is-dot::before{border-radius:50%;background:var(--tone-run)}
.hub-studio .hub-stats{margin-top:4px}
/* Tab Thu muc Drive */
.hub-folder-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px}
.hub-folder-title h2{margin:0}
.hub-folder-list{display:grid;gap:6px;list-style:none;margin:10px 0 12px;padding:0}
.hub-folder-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);min-width:0}
.hub-folder-list li.help{border:0;background:none;padding:0}
.hub-folder-list code{overflow-wrap:anywhere}
.hub-folder-list small{color:var(--muted);font-variant-numeric:tabular-nums}
.hub-folder-out{margin:10px 0 8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:14px}
.hub-studio-bar .hub-seg span{padding:8px 14px;white-space:nowrap}
/* Nhieu anh = nhieu luot + keo tha */
.hub-upload.is-drop{outline:2px dashed var(--primary);outline-offset:4px;border-radius:8px}
.hub-multi{display:flex;flex-wrap:wrap;gap:8px}
.hub-multi figure{margin:0;width:84px;display:grid;gap:3px}
.hub-multi img{width:84px;height:112px;object-fit:cover;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.hub-multi figcaption{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-upload-preview:has(.hub-multi){display:grid}

@media (max-width:1000px){
 .hub-tpl-body{grid-template-columns:minmax(0,1fr)}
 .hub-field{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:680px){
 body.hub header{height:auto;min-height:60px;padding:10px 16px;flex-wrap:wrap;gap:8px 12px}
 body.hub .brand{font-size:17px}
 body.hub main{padding:16px 16px 28px}
 .hub-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .hub-stat,details.hub-gate>summary{padding:10px 12px}
 .hub-stat-value{font-size:17px}
 .hub-gate-reasons{padding:0 12px 12px 30px}
 .hub-grid{grid-template-columns:minmax(0,1fr)}
 .hub-card-media img,.hub-card-media video,.hub-card-media .hub-media-empty{height:240px}
 .hub-panel{padding:14px}
 .hub-form-row{grid-template-columns:minmax(0,1fr)}
 .hub-alert{padding:10px 12px}
 .hub-attach input{width:100%}
 .hub-attach{width:100%}
 .hub-thumb{width:calc(50% - 5px)}
 .hub-thumb img,.hub-thumb video,.hub-thumb .hub-media-empty{width:100%;height:190px}
 .hub-run.is-detail .hub-thumb{width:calc(50% - 5px)}
 .hub-run.is-detail .hub-thumb img,.hub-run.is-detail .hub-thumb video,.hub-run.is-detail .hub-thumb .hub-media-empty{width:100%;height:220px}
 .hub-thumb.is-wide,.hub-run.is-detail .hub-thumb.is-wide{width:100%}
 .hub-thumb.is-wide .hub-audio,.hub-run.is-detail .hub-thumb.is-wide .hub-audio{width:100%}
 .hub-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hub-field{grid-template-columns:minmax(0,1fr)}
 .hub-wbody{padding:4px 14px 16px}
 .hub-whead{padding:12px 14px}
 .hub-file{grid-template-columns:minmax(0,1fr)}
 .hub-log li{flex-direction:column;gap:2px}
 .hub-result{width:calc(50% - 6px)}
 .hub-result img,.hub-result video,.hub-result .hub-media-empty{height:210px}
 .hub-tabs button{padding:10px 10px}
}
@media (prefers-reduced-motion:reduce){
 .hub-skel{animation:none}
 .hub-run.is-new{animation:none;box-shadow:0 0 0 2px var(--tone-run-line)}
}

/* ---- Template HUONG DAN nap tu .md (hub-guides.js) ---- */
.hub-card.is-guide .hub-card-media{grid-template-columns:1fr}
.hub-card-media.is-guide .hub-media-empty{font-weight:600;letter-spacing:.04em}
.gd-drop{display:grid;place-items:center;gap:6px;min-height:150px;padding:24px;text-align:center;border:2px dashed var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font-weight:400;transition:border-color .15s,background .15s}
.gd-drop strong{font-size:16px}
.gd-drop span{max-width:60ch;color:var(--muted);font-size:13px}
.gd-drop:hover,.gd-drop.is-drag{border-color:var(--primary);background:var(--bg)}
.gd-drop:focus-within{outline:3px solid var(--primary);outline-offset:3px}
.gd-help{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0;max-width:none;font-size:13px}
.gd-format{margin:0 0 18px}
.gd-format p{max-width:90ch;font-size:13px}
.gd-platforms{columns:2 260px;margin:0 0 10px;padding-left:18px;font-size:13px}
.gd-result{display:grid;gap:14px}
/* tab Điều khiển của template hướng dẫn: trang của máy chạy (Tailscale) nhúng trong khung */
.gd-ctl{margin:16px 0 0}
.gd-ctl-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 10px}
.gd-ctl-head p{margin:0;max-width:80ch;font-size:13px;color:var(--muted)}
.gd-ctl-frame{display:block;width:100%;height:calc(100vh - 230px);min-height:560px;border:1px solid var(--line);border-radius:12px;background:#fff}
.gd-ctl-note{margin:8px 0 0;font-size:12px;color:var(--muted)}
.gd-result .hub-banner{margin:0}
.gd-problems{border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.gd-problems h2{font-size:15px;margin:0 0 6px}
.gd-problems ul{margin:0;padding-left:20px;font-size:14px;line-height:1.6}
.gd-problems.is-bad{border-color:var(--tone-bad-line);background:var(--tone-bad-soft);color:var(--tone-bad)}
.gd-problems.is-warn{border-color:var(--tone-warn-line);background:var(--tone-warn-soft);color:var(--tone-warn)}
.gd-preview-title{margin:8px 0 0}
.gd-preview,.gd-body{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gd-preview .sg,.gd-body .sg{padding:20px 24px 24px}
.gd-versions{margin-top:18px}
.gd-hidden{margin-top:28px}
.gd-hidden ul{padding-left:20px;line-height:1.8}
.gd-hidden small{color:var(--muted)}
@media (max-width:520px){.gd-preview .sg,.gd-body .sg{padding:14px}}

/* ---- Nut bat/tat tong + thung rac (13/10, Power/Ask/Toast/TrashView trong hub.js) ---- */
.hub-power{flex:0 0 auto;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.hub-power input{width:40px;height:22px}
.hub-power input::after{width:16px;height:16px}
.hub-power input:checked::after{transform:translateX(18px)}
.hub-power input:checked+span{color:var(--tone-done)}
.hub-power input:disabled{opacity:.6;cursor:progress}
.hub-title-row .hub-power{font-size:13px}
.hub-card.is-off .hub-card-media{opacity:.5;filter:grayscale(.7)}
.hub-card.is-off .hub-card-title h3 a{color:var(--muted)}
button.hub-del{margin-left:auto;border-color:transparent;background:none;color:var(--muted);font-weight:600}
button.hub-del:hover{color:var(--danger);background:oklch(.97 .02 25)}
button.danger-solid{background:var(--danger);border-color:var(--danger);color:var(--bg)}
button.danger-solid:hover{filter:brightness(.92);background:var(--danger)}
.hub-dialog{width:min(480px,calc(100vw - 32px));padding:22px 22px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);box-shadow:0 18px 48px oklch(.23 .015 140/.22)}
.hub-dialog::backdrop{background:oklch(.23 .015 140/.45)}
.hub-dialog h2{margin:0 0 10px;font-size:18px;overflow-wrap:anywhere}
.hub-dialog-body p{margin:0 0 10px;font-size:14px;color:var(--ink)}
.hub-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:16px}
.hub-toast{position:fixed;left:50%;bottom:20px;z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);padding:10px 10px 10px 16px;border:1px solid var(--tone-done-line);border-radius:10px;background:var(--tone-done-soft);color:var(--tone-done);font-size:14px;font-weight:600;box-shadow:0 10px 30px oklch(.23 .015 140/.18)}
.hub-toast.is-bad{border-color:var(--tone-bad-line);background:var(--tone-bad-soft);color:var(--tone-bad)}
.hub-toast span{overflow-wrap:anywhere}
.hub-toast .hub-toast-x{flex:0 0 auto;border:0;background:none;padding:2px 8px;font-size:18px;line-height:1;color:inherit}
.hub-toast[hidden]{display:none}
.hub-trash-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:18px 0 0;max-width:none;font-size:13px}
.hub-trash{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hub-trash li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.hub-trash li>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.hub-trash strong{font-size:15px;overflow-wrap:anywhere}
.hub-trash small{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.hub-trash-actions{display:flex;gap:8px;align-items:center}
.gd-poll{margin:10px 0 0;font-size:13px}
@media (max-width:640px){.hub-toast{left:16px;right:16px;transform:none;width:auto}}

/* ---- Ky hieu may chay (14/10, machineBadge trong hub.js): goc tren-trai the + dau trang template.
   Moi may mot mau de luot qua la biet the nao chay o dau (i3 / i7 / VPS). Chu trang tren nen dam: doc duoc tren anh. */
.hub-card{position:relative}
.hub-machine{--machine:oklch(.42 .03 60);display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.02em;white-space:nowrap;color:oklch(.99 0 0);background:var(--machine)}
.hub-machine::before{content:"";flex:0 0 auto;width:9px;height:6px;border:1.5px solid currentColor;border-radius:1.5px;box-shadow:0 2.5px 0 -1px currentColor;margin-bottom:2px}
.hub-card>.hub-machine{position:absolute;top:8px;left:8px;z-index:2;box-shadow:0 1px 3px oklch(.2 .01 140/.35)}
.hub-machine.m-i3{--machine:oklch(.46 .13 250)}
.hub-machine.m-i7{--machine:oklch(.45 .15 310)}
.hub-machine.m-mac{--machine:oklch(.4 .02 260)}
.hub-machine.m-vps{--machine:oklch(.38 .06 160)}
.hub-card.is-off>.hub-machine{opacity:.75}
/* The chua co anh: chu "Chua co ket qua" / "GOOGLE FLOW → …" ra giua khung, chua cho ky hieu may o goc (khong de len nhau) */
.hub-card>.hub-machine+.hub-card-media.is-empty .hub-media-empty{display:grid;place-items:center;padding:40px 16px 16px}