.qab{--band:#3b2314;--card:#fbf3e0;--ink:#3b2314;--mut:#7a5a45;--gold:#d4a838;--goldD:#a67c1f;--peach:#edc4b3;--ph:#f2d9cb;--danger:#8f1d1d;
background:transparent;color:var(--ink);line-height:1.6;max-width:860px;margin:0 auto;box-sizing:border-box}
.qab *,.qab-modal *{box-sizing:border-box}
.qab [hidden],.qab-modal[hidden]{display:none!important}
.qab-btn{border:1px solid #a67c1f;background:#fbf3e0;color:#3b2314;border-radius:999px;padding:8px 18px;cursor:pointer;min-height:40px;font:inherit}
.qab-pri{background:#d4a838;color:#3b2314;font-weight:700}
.qab-del{color:#8f1d1d;border-color:#8f1d1d}
.qab-sm{min-height:32px;padding:2px 14px;font-size:.875rem}
.qab-btn:focus-visible,.qab input:focus-visible,.qab-modal input:focus-visible,.qab-modal textarea:focus-visible{outline:3px solid #d4a838;outline-offset:2px}
.qab-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;background:var(--peach);border:1px solid var(--gold);border-radius:28px;padding:12px}
.qab-bar input{flex:1;min-width:180px;border:1px solid var(--goldD);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 18px;min-height:40px;font:inherit}
.qab-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.qab-catb{border:1px solid var(--goldD);background:var(--card);color:var(--ink);border-radius:999px;padding:4px 14px;min-height:36px;cursor:pointer;font:inherit;font-size:.9rem}
.qab-catb span{display:inline-block;margin-left:4px;font-size:.8rem;color:var(--mut)}
.qab-catb.is-on{background:var(--band);color:var(--gold);border-color:var(--band);font-weight:700}
.qab-catb.is-on span{color:var(--gold)}
.qab-catb:focus-visible,.qab-form select:focus-visible{outline:3px solid #d4a838;outline-offset:2px}
.qab-cat{display:inline-block;margin:6px 6px 6px 0;background:var(--peach);color:var(--band);border:1px solid var(--gold);border-radius:999px;padding:0 12px;font-size:.8rem;line-height:1.7;font-weight:600}
.qab-list{display:grid;gap:16px}
.qab-card{background:var(--card);border:2px solid var(--gold);border-radius:24px;padding:18px 20px}
.qab-card h3{margin:0 0 2px;font-size:1.1rem;line-height:1.4;color:var(--band);overflow-wrap:anywhere}
.qab-meta{color:var(--mut);font-size:.875rem}
.qab-chip{display:inline-block;margin:6px 0;background:var(--band);color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:0 12px;font-size:.8rem;line-height:1.7;font-weight:600}
.qab-card p{margin:4px 0 0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.qab-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qab-empty{text-align:center;padding:36px 16px;color:var(--mut);background:var(--card);border:1px dashed var(--goldD);border-radius:24px}
.qab-modal{--band:#3b2314;--card:#fbf3e0;--ink:#3b2314;--mut:#7a5a45;--gold:#d4a838;--goldD:#a67c1f;--peach:#edc4b3;--ph:#f2d9cb;--danger:#8f1d1d;position:fixed;inset:0;z-index:99999;background:rgba(30,12,6,.7);display:flex;justify-content:center;padding:16px;overflow:auto;line-height:1.6;color:var(--ink)}
.qab-form{background:var(--card);border:2px solid var(--gold);border-radius:28px;padding:22px;width:min(640px,100%);display:grid;gap:12px;margin:auto;align-content:start}
.qab-form h3{margin:0;font-size:1.25rem;color:var(--band);overflow-wrap:anywhere}
.qab-form label{display:grid;gap:4px;font-weight:600;font-size:.9rem}
.qab-form input,.qab-form textarea,.qab-form select{border:1px solid var(--goldD);background:#fffaf0;color:var(--ink);border-radius:16px;padding:8px 14px;font:inherit;font-weight:400;width:100%}
.qab-fa{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.qab-body{white-space:pre-wrap;overflow-wrap:anywhere;background:#fffaf0;border:1px solid var(--gold);border-radius:20px;padding:12px 16px}
.qab-form hr{border:0;border-top:1px solid var(--gold);margin:4px 0;width:100%}
.qab-rp{background:var(--ph);border:1px solid var(--peach);border-radius:20px;padding:12px 16px}
.qab-rp .qab-rt{white-space:pre-wrap;overflow-wrap:anywhere}
.qab-rp .qab-acts{margin-top:8px}
.qab-scroll{display:grid;gap:10px;max-height:34vh;overflow:auto}
.qab-err{margin:0;color:var(--danger);font-weight:600}
.qab-err:empty{display:none}
.qab-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.qab-danger{background:#8f1d1d;color:#fff;border-color:#8f1d1d}
.qab-reply-box{display:grid;gap:12px}

/* รูปภาพและการดูรูปภาพใหญ่ Lightbox */
.qab-thumb{position:relative;margin-top:10px;max-width:320px;max-height:240px;overflow:hidden;border-radius:14px;border:2px solid var(--gold);background:#3b2314;display:inline-block}
.qab-thumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;transition:transform .2s ease}
.qab-thumb img:hover{transform:scale(1.04)}
.qab-zoom-hint{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.65);color:#fff;padding:2px 8px;border-radius:8px;font-size:.75rem;pointer-events:none}
.qab-zoomable{cursor:pointer}

.qab-lightbox{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:20px}
.qab-lightbox[hidden]{display:none!important}
.qab-lightbox-box{position:relative;max-width:90vw;max-height:90vh}
.qab-lightbox-box img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.qab-lightbox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;background:#d4a838;color:#3b2314;font-size:24px;font-weight:bold;line-height:36px;text-align:center;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}