/* Ứng dụng demo: ẩn phần tài liệu, giữ khung bài */
body.qapp{margin:0;background:#EEF0F4;overflow-x:hidden}
.qapp .wrap{max-width:none;padding:0;margin:0}
.qapp #themepick,.qapp .tabbar,.qapp .eyebrow,.qapp .wrap>h1,.qapp .sub,.qapp .meta,.qapp .badge,.qapp details.caveat,.qapp #toTop,.qapp #lbx{display:none!important}
.qapp .pane{display:none!important}
.qapp #pane-demo{display:block!important}
.qapp[data-kind="th"] #pane-giao-dien{display:block!important}
.qapp[data-kind="th"] #pane-demo{display:none!important}
.qapp #pane-demo>*:not(.tgrow):not(#longwrap):not(#gallery2){display:none!important}
.qapp #pane-demo .tgrow{position:static;box-shadow:none;padding:0;background:none}
.qapp #pane-demo .tgrow>*:not(#famfilter){display:none}.qapp #famfilter{display:none}
.qapp #pane-giao-dien>*:not(#bon-giao-dien),.qapp #bon-giao-dien>*:not(#themes4){display:none!important}
/* chỉ mục đang chọn */
.qapp .pair,.qapp .lvh,.qapp #gallery2 .cell,.qapp .thb{display:none!important}
.qapp .pair.qcur,.qapp #gallery2 .cell.qcur,.qapp .thb.qcur{display:block!important}
.qapp[data-kind="code"] #longwrap{display:none!important}.qapp[data-kind="long"] #gallery2{display:none!important}
/* bố cục */
#qbar{position:fixed;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:18px;padding:0 18px;background:#2B1166;color:#fff;z-index:30;font:14px/1.2 'Open Sans',system-ui,sans-serif}
.qbrand{white-space:nowrap;opacity:.9}.qbrand b{color:#FEBE18}
.qtitle{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}.qtitle .qlv{opacity:.7;font-size:12px}.qtitle b{overflow:hidden;text-overflow:ellipsis}.qtitle code{background:rgba(255,255,255,.15);color:#fff;border-radius:4px;padding:1px 6px;font-size:12px}
.qnav{display:flex;align-items:center;gap:8px}.qnav button{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:22px;cursor:pointer}.qpos{font-size:12px;opacity:.8;min-width:56px;text-align:center}
#qside{position:fixed;top:52px;left:0;bottom:0;width:290px;overflow-y:auto;background:#fff;border-right:1px solid #E1E4EA;z-index:20;padding:10px 8px 40px;box-sizing:border-box;font-family:'Open Sans',system-ui,sans-serif}
#qsearch{width:100%;box-sizing:border-box;border:1px solid #DDE1E8;border-radius:8px;padding:8px 10px;font:13px inherit;margin-bottom:6px}
.qgrp{font:700 11px/1 'Open Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#7A3FC1;margin:14px 6px 6px}
.qit{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:7px 8px;cursor:pointer;font:13px/1.3 'Open Sans',sans-serif;color:#212B36}
.qit:hover{background:#F4F0FA}.qit.on{background:#7A3FC1;color:#fff}.qit .qxp{font-weight:700;font-size:12px}.qit .qxn{flex:1 1 140px}.qit code{font-size:10.5px;opacity:.7;background:none;padding:0}
#qctrl{position:fixed;top:52px;left:290px;right:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 18px;background:#fff;border-bottom:1px solid #E1E4EA;z-index:20;font-family:'Open Sans',sans-serif}
.qlab{font-size:11px;font-weight:700;color:#637381;text-transform:uppercase;letter-spacing:.05em;margin-left:6px}
#qctrl #themetoggle button span{display:inline!important}#qctrl #themetoggle button{padding:5px 10px!important;gap:6px!important}
#qcmp{margin-left:auto;border:1px solid #DDE1E8;background:#fff;border-radius:999px;padding:6px 14px;font:600 13px 'Open Sans',sans-serif;cursor:pointer}#qcmp.on{background:#7A3FC1;color:#fff;border-color:#7A3FC1}
.qapp[data-kind="code"] #uxtoggle,.qapp[data-kind="th"] #uxtoggle,.qapp[data-kind="th"] #themetoggle,.qapp[data-kind="th"] #qcmp,.qapp[data-kind="code"] #qcmp{opacity:.35;pointer-events:none}
.qapp .wrap{padding:var(--qtop,150px) 24px 24px 314px!important;box-sizing:border-box}
/* khung lớn */
.qapp .pair{border:0;margin:0;padding:0}.qapp .ph-head{display:none}
.qapp .pgrid{display:flex!important;justify-content:center;gap:24px;align-items:flex-start}
.qapp .prod,.qapp ul.good,.qapp ul.bad,.qapp .dview figcaption{display:none}
.qapp.cmp .prod{display:block;width:min(46%,760px)}.qapp.cmp .prod ul.bad{display:block}.qapp.cmp ul.good{display:block}
.qapp .new{flex:none}
.qapp .dview .dstage{width:var(--qdw)!important}
.qapp.cmp .dview .dstage{width:min(var(--qdw),calc((100vw - 380px)/2))!important}
.qapp .mmstage{--s:var(--qs)!important}
.qapp #gallery2{display:block}.qapp #gallery2 .cell{max-width:none;width:auto}.qapp #gallery2 .cell .dh,.qapp #gallery2 .cell h4,.qapp #gallery2 .cell .vn{display:none}
.qapp #gallery2 .cell .dstage{width:var(--qdw)!important;margin:0 auto}.qapp #gallery2 .cell .mmstage{margin:0 auto}
.qapp .thb{margin:0;padding:0;border:0}.qapp .thhead,.qapp .thinfo{display:none}.qapp .thdemo .dstage{width:var(--qdw)!important;margin:0 auto}
.qapp.cmp .thinfo{display:grid}
@media (max-width:900px){#qside{display:none}#qctrl{left:0}.qapp .wrap{padding-left:16px!important;padding-top:var(--qtop,190px)!important}}

/* toàn màn hình */
#qfs{width:auto!important;border-radius:999px!important;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font:600 13px 'Open Sans',sans-serif!important;margin-left:6px}
#qfs .out{display:none}.qfs #qfs .in{display:none}.qfs #qfs .out{display:inline}
.qapp.qfs{background:#130A2B}
.qfs #qside,.qfs #qctrl{display:none!important}
.qfs #qbar{left:50%;right:auto;transform:translateX(-50%);top:6px;height:38px;border-radius:999px;padding:0 6px 0 16px;background:rgba(43,17,102,.82);backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.3);gap:10px;opacity:.35;transition:opacity .2s}
.qfs #qbar:hover{opacity:1}
.qfs #qbar .qbrand,.qfs #qbar .qlv,.qfs #qbar code{display:none}.qfs #qbar .qtitle{max-width:40vw;font-size:13px}
.qfs #qbar .qnav button{width:30px;height:30px;font-size:18px}.qfs #qfs span{display:none}.qfs #qfs{padding:0 8px}
.qapp.qfs .wrap{padding:48px 16px 16px 16px!important}
.qfs.cmp .prod,.qfs ul.good,.qfs ul.bad{display:none!important}
.qapp.qfs.cmp .dview .dstage{width:var(--qdw)!important}
#qdev{display:none}.qfs #qdev{display:inline-flex;align-items:center;justify-content:center;font-size:15px!important}

.qdoc{align-self:center;margin-left:auto;margin-right:10px;font:700 12.5px "Open Sans",sans-serif;color:#fff;opacity:.8;text-decoration:none;white-space:nowrap}
.qdoc:hover{opacity:1;text-decoration:underline}
@media (max-width:860px){.qdoc{display:none}}