/* Trình tạo prompt — giai đoạn 3 (14/09/2026): hai cột Yêu cầu | Prompt hoàn chỉnh, checklist ngay trên prompt, tab chuyển trên điện thoại. */
.builder-shell [hidden],.prompt-tools [hidden]{display:none!important}
.builder-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:start;border:1px solid var(--line);background:#fbfaf6;box-shadow:var(--shadow)}
.builder-brief{min-width:0;padding:22px;border-right:1px solid var(--line);background:#f0efe8}
.builder-canvas{position:sticky;top:12px;min-width:0;max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain;padding:22px;background:#fdfcf8}
.builder-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.builder-panel-heading h2{margin:0;color:var(--pine);font-size:16px;letter-spacing:-.02em}
.builder-panel-heading p{margin:3px 0 0;color:#56625d;font-size:12px;line-height:1.45}
.builder-family small{display:block;margin-top:2px;color:#7a847f;font-size:11px}
.builder-panel-heading .canvas-status{flex:0 0 auto;margin-left:0}
.canvas-status.is-busy{border-color:#e0cfa6;color:#8b6222}

/* Việc cần làm + hệ thống AI: một khối quyết định đầu tiên. */
.builder-destination{display:grid;gap:12px;margin-bottom:16px;padding:14px;border:1px solid #d6ded7;background:#fbfaf6}
.builder-destination .field-label,.builder-destination .model-notice{margin:0}
.model-picker{min-width:0;margin:0;padding:0;border:0}
.model-picker legend{margin-bottom:6px;padding:0;color:#48544f;font-size:11px;font-weight:800}
.model-options{display:flex;flex-wrap:wrap;gap:6px}
.model-option,.output-rating label{position:relative}
.model-option input,.output-rating input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.builder-toggle input,.check-part input{display:inline-block;flex:0 0 auto;width:15px;height:15px;min-height:0;margin:2px 0 0;padding:0}
.builder-brief .role-helper:empty{display:none}
.model-option span,.output-rating label span{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fffefa;color:#3f4b46;font-size:12px;font-weight:700;cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.model-option span:hover,.output-rating label span:hover{border-color:#9bb7a8}
.model-option input:checked+span,.output-rating input:checked+span{border-color:var(--pine);background:var(--pine);color:#fff}
.model-option input:focus-visible+span,.output-rating input:focus-visible+span{outline:2px solid var(--amber);outline-offset:2px}
.builder-toggle{display:flex;gap:8px;align-items:flex-start;margin:0 0 15px;color:#48544f;font-size:12px;line-height:1.45;cursor:pointer}
.builder-toggle input{flex:0 0 auto;margin-top:2px;accent-color:var(--pine)}

/* Checklist: mục cần sửa lên đầu, mục đạt thu gọn còn một dòng. */
.builder-checklist{margin-bottom:12px;padding:14px 16px;border:1px solid #d6e0d8;background:#fff}
.builder-checklist header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.builder-checklist h3{margin:2px 0 0;color:#174e42;font:800 16px/1.15 Arial,"Helvetica Neue",sans-serif}
.builder-checklist-score{margin:0;color:#6a766f;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.builder-checklist-score strong{color:var(--pine);font-size:24px;line-height:1}
.builder-checklist-score span{display:block;margin-top:3px}
.builder-checklist ul,.output-check-results{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.check-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 10px;border-left:3px solid #9cc5ae;background:#f5faf6}
.check-item strong{display:block;color:#253631;font-size:12px;line-height:1.4}
.check-item p{margin:2px 0 0;color:#56625d;font-size:12px;line-height:1.45}
.builder-checklist .check-item.is-ok{padding-block:5px}
.builder-checklist .check-item.is-ok p{display:none}
.check-item.is-add{border-left-color:var(--amber);background:var(--amber-soft)}
.check-item.is-risk{border-left-color:var(--red);background:#fbecea}
.check-item.is-info{border-left-color:#a9b8c6;background:#f1f4f7}
.check-state{display:inline-block;min-width:78px;padding:2px 6px;border-radius:99px;background:#dcefe1;color:#246142;font:700 10px/1.5 Consolas,"Courier New",monospace;text-align:center;white-space:nowrap}
.is-add>.check-state{background:#f6e2b8;color:#7a5418}
.is-risk>.check-state{background:#f3cfc8;color:#8a2f25}
.is-info>.check-state{background:#e1e8ef;color:#44586b}
.check-item .link-button{font-size:12px}
.check-item ul{margin:4px 0 0;padding-left:16px;color:#48544f;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.check-part{display:flex;gap:8px;align-items:flex-start;margin-top:4px;color:#253631;font-size:12px;line-height:1.45;cursor:pointer}
.check-part input{flex:0 0 auto;margin-top:2px;accent-color:var(--pine)}

/* Bản xem trước và phần giải thích. */
.builder-canvas .prompt-output{min-height:280px}
.builder-outdated,.builder-preview-error{margin:0 0 12px;padding:9px 11px;font-size:12px;line-height:1.45}
.builder-outdated{background:var(--amber-soft);color:#6c5a37}
.builder-preview-error{border-left:3px solid var(--red);background:#fbecea;color:#7d2f27}
.builder-canvas .canvas-actions{flex-wrap:wrap}
.builder-explain{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.builder-explain summary{color:var(--pine);font-size:12px;font-weight:800;cursor:pointer}
.builder-explain ul{margin:8px 0 0;padding-left:18px;color:#48544f;font-size:12px;line-height:1.5}
.builder-explain li{margin-bottom:5px}
.builder-explain li strong{display:block;color:#253631}
.builder-explain li span{color:#5f6b66}
.builder-explain p{margin:8px 0 0;color:#48544f;font-size:12px;line-height:1.5}

/* Đang xem phiên bản cũ. */
.version-banner{display:grid;gap:8px;margin-bottom:12px;padding:11px 13px;border:1px solid #dccb9f;background:#fbf6e9;color:#5c4b2d;font-size:12px}
.version-banner p{margin:0;line-height:1.45}
.version-banner strong{color:#5b3f10}
.version-banner-actions{display:flex;flex-wrap:wrap;gap:6px}
.version-banner-actions form{margin:0}
.version-diff summary{font-weight:800;cursor:pointer}
.version-diff pre{max-height:280px;margin:8px 0 4px;padding:8px 0;overflow:auto;border:1px solid #e3d8bb;background:#fffdf6;font:11px/1.55 Consolas,"Courier New",monospace}
.version-diff pre span{display:block;padding:0 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.diff-add{background:#e3f1e7;color:#1d5a3f}
.diff-remove{background:#f8e3df;color:#8a3a2c}
.diff-same{color:#6b7670}
.version-diff small{color:#7a6a45}
.version-strip a.is-current{background:var(--pine);color:#fff}
.version-strip a small{font-weight:400;opacity:.8}

/* Nhờ AI góp ý và kiểm tra câu trả lời. */
.improve-card,.output-check{padding:16px;border:1px solid #d6e0d8;background:#fff}
.improve-card h3,.output-check h3{margin:3px 0 0;color:#174e42;font:800 16px/1.15 Arial,"Helvetica Neue",sans-serif}
.improve-card p,.output-check header p{max-width:680px;margin:7px 0 0;color:#56625d;font-size:12px;line-height:1.5}
.improve-card .improve-note{color:#7a847f;font-size:11px}
.improve-actions,.output-check-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.output-check>.field-label{margin:14px 0 4px}
.output-check textarea{box-sizing:border-box;width:100%;min-height:130px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fffefa;color:var(--ink);font:12px/1.55 Arial,"Helvetica Neue",sans-serif;resize:vertical}
.output-check textarea:focus-visible{outline:2px solid #9bb7a8;outline-offset:1px}
.output-check-results:empty{display:none}
.output-rating{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 8px;padding:0;border:0}
.output-rating legend{margin-bottom:6px;padding:0;color:#48544f;font-size:12px;font-weight:800}
.output-rating label span{min-width:40px}
.output-rating small{flex-basis:100%;color:#7a847f;font-size:11px}

/* Điện thoại: một cột, chuyển giữa Yêu cầu và Prompt, thanh thao tác bám đáy. */
.builder-view-tabs,.builder-mobile-bar{display:none}
@media(max-width:900px){
  .builder-shell{grid-template-columns:1fr}
  .builder-brief{border-right:0}
  .builder-canvas{position:static;max-height:none;overflow:visible}
  .builder-view-tabs{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 10px;padding:4px;border:1px solid var(--line);background:var(--paper)}
  .builder-view-tabs button{min-height:40px;border:0;border-radius:8px;background:transparent;color:#48544f;font:700 13px Arial,"Helvetica Neue",sans-serif;cursor:pointer}
  .builder-view-tabs button.is-active{background:var(--pine);color:#fff}
  .builder-view-tabs button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
  .view-tab-pending{font-size:11px;font-weight:400;opacity:.85}
  .builder-shell[data-view="brief"] .builder-canvas,.builder-shell[data-view="prompt"] .builder-brief{display:none}
  .builder-mobile-bar{position:sticky;bottom:8px;z-index:5;display:flex;gap:8px;margin:0;padding:8px;border-top:1px solid var(--line);background:rgba(247,245,239,.97);box-shadow:0 -6px 18px rgba(18,61,54,.08)}
  .builder-mobile-bar .btn{flex:1;min-height:42px;font-size:13px}
  .check-item{grid-template-columns:minmax(0,1fr) auto}
  .check-state{grid-column:1/-1;justify-self:start;min-width:0}
}
@media(max-width:800px){.builder-mobile-bar{bottom:65px}.builder-brief,.builder-canvas{padding:16px}.builder-intro .intro-tags,.guest-header-cta .guest-community-link{display:none}.builder-intro{margin:14px 0 16px;padding:10px 0}}
@media(prefers-reduced-motion:reduce){.model-option span,.output-rating label span{transition:none}}

/* Bổ sung giai đoạn 2–3: bật/tắt phần, cách viết theo hệ thống AI, mức hỗ trợ, bài luyện, tiêu chí tự sửa. */
.builder-explain summary small{color:#7a847f;font-weight:400}
.section-item.is-off>span,.section-item.is-off strong{color:#8a938e;text-decoration:line-through}
.section-toggle{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.section-toggle strong{display:inline!important}
.section-toggle input,.criteria-check input{display:inline-block;flex:0 0 auto;width:15px;height:15px;min-height:0;margin:0;padding:0;accent-color:var(--pine)}
.builder-explain li small{display:block;color:#7a847f;font-size:11px}
.family-guide{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:8px 0 0;font-size:12px;line-height:1.45}
.family-guide dt{color:#253631;font-weight:700}
.family-guide dd{margin:0;color:#48544f}
.builder-explain .family-sources{color:#7a847f;font-size:11px;overflow-wrap:anywhere}
.scaffold-picker{min-width:0;margin:0 0 14px;padding:0;border:0}
.scaffold-picker legend{margin-bottom:6px;padding:0;color:#48544f;font-size:11px;font-weight:800}
.scaffold-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.scaffold-options label{position:relative;min-width:0}
.scaffold-options input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.scaffold-options span{display:grid;gap:1px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fffefa;color:#3f4b46;font-size:12px;font-weight:700;cursor:pointer}
.scaffold-options small{color:#6a766f;font-size:11px;font-weight:400}
.scaffold-options input:checked+span{border-color:var(--pine);background:var(--pine);color:#fff}
.scaffold-options input:checked+span small{color:#d9e7df}
.scaffold-options input:focus-visible+span{outline:2px solid var(--amber);outline-offset:2px}
.annotated-example,.practice-card{margin:0 0 16px;padding:12px 14px;border:1px solid #d6dfd7;background:#f7f8f3;font-size:12px;line-height:1.5}
.annotated-example>strong,.practice-card>strong{display:block;color:var(--pine);font-size:13px}
.annotated-example>p,.practice-card>p{margin:3px 0 0;color:#56625d}
.annotated-example ol{margin:8px 0 10px;padding-left:18px}
.annotated-example li{margin-bottom:6px}
.annotated-example li b{color:#253631}
.annotated-example li q{display:block;color:#3f4b46;quotes:none}
.annotated-example li em{display:block;color:#6a5a2e;font-style:normal}
.practice-card{border-color:#dccb9f;background:#fbf6e9}
.practice-card ul{display:grid;gap:4px;margin:8px 0 0;padding:0;list-style:none}
.practice-card li::before{content:"○ ";color:#8b6222}
.practice-card li.is-done::before{content:"✓ ";color:var(--green)}
body.scaffold-self .field-schema-help,body.scaffold-self .example-card,body.scaffold-self .assist-card,body.scaffold-self .role-output-example,body.scaffold-self .quality-note,body.scaffold-self .role-helper{display:none!important}
.change-note-field small{color:#6a766f;font-weight:400}
.output-criteria{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.output-criteria-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#253631;font-size:12px}
.output-criteria>p{margin:4px 0 0;color:#6a766f;font-size:11px}
.output-criteria ul{display:grid;gap:4px;margin:8px 0 0;padding:0;list-style:none}
.criteria-check{display:flex;gap:8px;align-items:flex-start;color:#253631;font-size:12px;line-height:1.45;cursor:pointer}
.criteria-check input{margin-top:2px}
.workspace-tools header small{display:block;margin-top:3px;color:#6a766f;font-size:11px}
.reflection-version{display:inline-block;margin-left:6px;padding:3px 5px;background:#e7f0e8;color:#1f5d4a;font:700 8px Arial,sans-serif}
@media(max-width:520px){.scaffold-options{grid-template-columns:1fr}.scaffold-options span{min-height:0}}
.builder-explain #promptSectionsList{padding-left:0;list-style:none}
.section-item{display:grid;gap:1px;padding:6px 0;border-bottom:1px solid #ecebe4}
.section-item>span{display:block}
.section-item>strong{display:block}