/* Loaded after existing CTOJ layout CSS. Native Vue/editor nodes remain in place. */
html.ctoj-ui.cpw-active #app .content-app{width:100%!important;max-width:none!important;min-width:0!important;padding:0 16px 24px!important;box-sizing:border-box!important}
html.ctoj-ui.cpw-active #app .content-app>.flex-container{display:block!important;width:100%!important;min-width:0!important;max-width:none!important}
html.ctoj-ui.cpw-active #app .content-app>.flex-container>#problem-main:not(.csw-classic):not(.csw-full){display:grid!important;grid-template-columns:minmax(0,var(--csw-task,45fr)) minmax(0,var(--csw-code,55fr))!important;grid-template-rows:auto var(--cpw-pane-height,680px) auto!important;gap:0 12px!important;width:100%!important;max-width:none!important;min-width:0!important;height:auto!important;overflow:visible!important;align-items:stretch!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>.csw-toolbar{grid-column:1/-1!important;grid-row:1!important;position:static!important;display:flex!important;flex-wrap:wrap!important;min-width:0!important;margin-bottom:10px!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>.csw-statement{grid-column:1!important;grid-row:2!important;min-width:0!important;min-height:0!important;height:100%!important;max-height:none!important;overflow:auto!important;overscroll-behavior:contain;border:1px solid var(--cu-border,#dce6f2)!important;border-radius:8px!important;box-sizing:border-box!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>#submit-code{grid-column:2!important;grid-row:2!important;width:100%!important;min-width:0!important;min-height:0!important;height:100%!important;max-height:none!important;overflow:auto!important;align-self:stretch!important;box-sizing:border-box!important;border:1px solid var(--cu-border,#dce6f2)!important;border-radius:8px!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>#submit-code>.ivu-card-body{display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;min-height:100%!important;min-width:0!important;padding:10px!important;overflow:visible!important;box-sizing:border-box!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>#submit-code>.ivu-card-body>div:first-child{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;flex:0 0 auto!important;margin:0 0 8px!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) #submit-code .header{display:flex!important;flex-wrap:wrap!important;flex:0 0 auto!important;gap:8px!important;margin-bottom:8px!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) #submit-code :is(.vue-codemirror-wrap,.CodeMirror){height:clamp(260px,calc(var(--cpw-pane-height,680px) - 340px),700px)!important;min-height:0!important;max-height:none!important;min-width:0!important;width:100%!important;flex:0 0 auto!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-tests{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-auto-flow:row!important;gap:8px!important;max-height:none!important;min-width:0!important;padding:10px 0 0!important;margin-top:8px!important;overflow:visible!important;flex:none!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-tests>*{grid-row:auto!important;grid-column:1/-1!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-tests>.csw-trial-input{grid-column:1!important;grid-row:3!important;display:flex!important;flex-direction:column!important;gap:5px!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-tests>.csw-trial-output{grid-column:2!important;grid-row:3!important;display:flex!important;flex-direction:column!important;gap:5px!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-tests>h3{grid-row:1!important;margin:0!important;font-size:13px!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-tests>.cl-native-actions,html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-tests>button:first-of-type{grid-row:2!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-tests textarea{display:block!important;width:100%!important;min-width:0!important;height:105px!important;min-height:80px!important;max-height:300px!important;resize:vertical!important;box-sizing:border-box!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>.csw-status,html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>.csw-below,html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>#ctoj-progress{grid-column:1/-1!important;grid-row:auto!important;min-width:0!important}
html.ctoj-ui.cpw-active #app .content-app>.flex-container>#right-column{position:static!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))!important;gap:12px!important;width:100%!important;min-width:0!important;margin-top:16px!important}
html.ctoj-ui.cpw-active #app .csw-statement #problem-content{overflow-wrap:anywhere!important}
html.ctoj-ui.cpw-active #app .csw-statement img{max-width:100%!important;height:auto!important}
html.ctoj-ui.cpw-active #app .csw-statement pre{max-width:100%!important;overflow:auto!important}
@media(max-width:900px){
html.ctoj-ui.cpw-active #app .content-app>.flex-container>#problem-main:not(.csw-classic):not(.csw-full){display:flex!important;flex-direction:column!important;gap:10px!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>.csw-statement{height:auto!important;max-height:60vh!important;width:100%!important;order:1!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>#submit-code{height:auto!important;max-height:none!important;overflow:visible!important;order:2!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>.csw-toolbar{order:0!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>.csw-status{order:3!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>.csw-below,html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>#ctoj-progress{order:4!important}
}
@media(max-width:560px){html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-tests{display:flex!important;flex-direction:column!important}html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-tests>*{width:100%!important}}

html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full)>.cpw-extra{grid-column:1/-1!important;grid-row:auto!important;min-width:0!important}
html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .cpl-size,html.ctoj-ui.cpw-active #app #problem-main:not(.csw-classic):not(.csw-full) .csw-toolbar label:has(>select[aria-label="Chiều cao vùng soạn thảo"]){display:none!important}