html body #bs-support #main-content .sample-code{margin:15px 0}html body #bs-support #main-content .sample-code .browser-support{padding:7px 5px;margin-bottom:15px;background-color:rgba(221,240,235,.7);border:1px solid rgba(51,167,161,.5);overflow:auto;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}html body #bs-support #main-content .sample-code .browser-support .browser{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding:5px 10px;text-align:center}html body #bs-support #main-content .sample-code .browser-support .browser p{display:none}html body #bs-support #main-content .sample-code .browser-support .browser .browser-icon{max-width:30px;min-width:30px}html body #bs-support #main-content .sample-code .browser-support .browser .support-content{margin-top:10px}html body #bs-support #main-content .sample-code .browser-support .browser .support-content .yes{color:gray}html body #bs-support #main-content .sample-code .browser-support .browser .support-content .no{color:#ce0000}html body #bs-support #main-content .sample-code .code{border:1px solid rgba(0,0,0,.1);background-color:#fff;border-radius:22px;-webkit-border-radius:22px;-moz-border-radius:22px;padding:15px;font-size:1rem;white-space:nowrap}html body #bs-support #main-content .sample-code .code .CodeMirror{height:auto;-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-ms-flex:100%;flex:100%}html body #bs-support #main-content .sample-code .try-it{text-align:right;margin-top:10px}
/* ---------- Khung code: header xanh (tên ngôn ngữ) + thân + nút Show more nổi trên lớp mờ ---------- */
html body #bs-support #main-content .sample-code .code-box{position:relative;border:1px solid rgba(51,167,161,.25);background-color:#fff;border-radius:22px;-webkit-border-radius:22px;-moz-border-radius:22px;overflow:hidden}
html body #bs-support #main-content .sample-code .code-box .code-header{padding:9px 20px;background-color:rgba(221,240,235,.7);border-bottom:1px solid rgba(51,167,161,.2)}
html body #bs-support #main-content .sample-code .code-box .code-language{color:#33a7a1;text-transform:uppercase;letter-spacing:.05em}
html body #bs-support #main-content .sample-code .code-box .code{position:relative;margin:0;padding:12px 20px 15px;border:0;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0}

/* Thu gọn: chỉ áp dụng khi JS xác định code dài hơn ngưỡng */
html body #bs-support #main-content .sample-code .code-box.is-collapsed .CodeMirror{max-height:var(--code-collapsed-height,400px);overflow:hidden}
/* Lớp mờ nằm TRONG .CodeMirror, z-index 5 < thanh cuộn của CodeMirror (6) → không che, vẫn kéo được thanh cuộn ngang */
html body #bs-support #main-content .sample-code .code-box.is-collapsed .CodeMirror::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;z-index:5;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff 90%)}

/* Dự phòng: nếu wpautop vẫn chèn <p>/<br> rỗng vào khung code thì ẩn đi */
html body #bs-support #main-content .sample-code .code-box>p,html body #bs-support #main-content .sample-code .code-box>br,html body #bs-support #main-content .sample-code .code-box .code-header>p,html body #bs-support #main-content .sample-code .code-box .code-header>br,html body #bs-support #main-content .sample-code .code-box .code-footer>p,html body #bs-support #main-content .sample-code .code-box .code-footer>br{display:none}
html body #bs-support #main-content .sample-code .code-box .code-footer{display:none}
/* Footer: cùng kiểu dải xanh với header, cả dải bấm được */
html body #bs-support #main-content .sample-code .code-box.is-collapsible .code-footer{display:block;background-color:rgba(221,240,235,.7);border-top:1px solid rgba(51,167,161,.2)}
html body #bs-support #main-content .sample-code .code-box .code-toggle{display:block;width:100%;padding:9px 20px;border:0;outline:0;background:0 0;color:#33a7a1;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:background-color .2s ease-out}
html body #bs-support #main-content .sample-code .code-box .code-toggle:hover,html body #bs-support #main-content .sample-code .code-box .code-toggle:focus-visible{background-color:rgba(221,240,235,1)}

@media screen and (max-width:575px){
html body #bs-support #main-content .sample-code .code-box .code-header{padding-left:15px;padding-right:15px}
html body #bs-support #main-content .sample-code .code-box .code{padding-left:15px;padding-right:15px}
}