/* Thu nhỏ tổng thể khung editor */
.tox-tinymce {
    border-radius: 4px !important;
}

.tox .tox-editor-header {
    padding: 0 !important;
}

/* Giảm chiều cao và padding của thanh toolbar */
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar__group {
    background-color: #f8f9fa !important;
    padding: 0 !important;
}

/* Thu nhỏ các nút bấm (button) */
.tox .tox-tbtn {
    height: 28px !important;
    /* Mặc định khoảng 34-40px */
    margin: 2px 1px !important;
}

/* Thu nhỏ icon SVG bên trong nút */
.tox .tox-tbtn svg {
    transform: scale(0.8);
    /* Thu nhỏ icon còn 80% */
    fill: #444 !important;
}

/* Thu nhỏ font chữ của các nút có chữ (như chữ Σ của bạn) */
.tox .tox-tbtn__select-label,
.tox .tox-tbtn--text {
    font-size: 12px !important;
    font-weight: bold !important;
}

/* Loại bỏ viền thừa giữa các nhóm icon */
.tox .tox-toolbar__group:not(:last-child) {
    border-right: 1px solid #e0e0e0 !important;
}

.quiz-option .tox-tinymce {
    flex: 1 !important;
    width: 100% !important;
}

.quiz-option {
    align-items: flex-start !important;
    padding-top: 12px !important;
}

.quiz-option input[type="radio"],
.quiz-option input[type="checkbox"] {
    margin-top: 8px;
}

/* Math editor modal */
#math-editor-modal .math-field-wrap {
    border: 2px solid #d0d7de;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    font-size: 1.4em;
    min-height: 56px
}

#math-editor-modal math-field {
    width: 100%;
    outline: none
}

#math-preview-wrap {
    margin-top: 10px;
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 14px;
    min-height: 56px;
    text-align: center;
    font-size: 1.3em
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    font-family: 'Inter', sans-serif;
    background: #f6f8fa;
    color: #000;
    font-size: 14px
}

a {
    color: #0969da;
    text-decoration: none
}

/* ── AUTH ── */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center
}

.auth-card {
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    padding: 32px;
    width: 340px
}

.auth-card h1 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px
}

.auth-card label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    margin-top: 12px
}

.auth-card input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 14px;
    outline: none
}

.auth-card input:focus {
    border-color: #0969da;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, .15)
}

.auth-card .btn-primary {
    width: 100%;
    margin-top: 16px;
    padding: 9px;
    background: #2da44e;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer
}

.auth-card .btn-primary:hover {
    background: #2c974b
}

.auth-card .err {
    color: #cf222e;
    font-size: 13px;
    margin-top: 8px
}

/* ── APP SHELL ── */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

/* ── NAVBAR ── */
.navbar {
    background: #fff;
    border-bottom: 1px solid #d0d7de;
    padding: 0 24px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 200
}

.navbar-brand {
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px
}

.navbar-brand svg {
    color: #0969da
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 10px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #d0d7de;
    background: #f6f8fa;
    color: #24292f;
    transition: .15s
}

.btn:hover {
    background: #eaf0f7
}

.btn-primary {
    background: #2da44e;
    color: #fff;
    border-color: #2da44e
}

.btn-primary:hover {
    background: #2c974b;
    border-color: #2c974b
}

.btn-danger {
    background: #fff;
    color: #cf222e;
    border-color: #d0d7de
}

.btn-danger:hover {
    background: #fff1ee;
    border-color: #cf222e
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px
}

/* ── SCREENS ── */
.screen {
    display: none;
    flex: 1
}

.screen.active {
    display: flex;
    flex-direction: column;
    flex: 1
}

/* ── MANAGE ── */
.manage-body {
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%
}

.manage-body h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px
}

.manage-body .sub {
    color: #57606a;
    margin-bottom: 20px
}

.pres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px
}

.pres-card {
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    overflow: hidden;
    transition: .15s;
    cursor: pointer
}

.pres-card:hover {
    border-color: #0969da;
    box-shadow: 0 4px 16px rgba(9, 105, 218, .1)
}

.pres-thumb {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    position: relative
}

.pres-info {
    padding: 12px 14px
}

.pres-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    height: 2.8em;
    /* 1.4 * 2 lines */
}

.pres-meta {
    font-size: 12px;
    color: #57606a
}

.pres-actions {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid #f0f0f0
}

.empty-state {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px 20px;
    color: #57606a
}

.empty-state svg {
    margin-bottom: 12px;
    opacity: .4
}

/* ── EDITOR ── */
.editor-shell {
    display: flex;
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 52px)
}

.slide-list {
    width: 200px;
    min-width: 200px;
    border-right: 1px solid #d0d7de;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto
}

.slide-list-header {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #57606a;
    border-bottom: 1px solid #f0f0f0;
    text-transform: uppercase;
    letter-spacing: .5px
}

.slide-thumb {
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f0f0f0;
    transition: .1s;
    position: relative
}

.slide-thumb:hover {
    background: #f6f8fa
}

.slide-thumb.active {
    background: #dbeafe;
    border-left: 3px solid #0969da
}

.slide-thumb-preview {
    width: 52px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #d0d7de;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0
}

.slide-thumb-info {
    flex: 1;
    min-width: 0
}

.slide-thumb-type {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.slide-thumb-num {
    font-size: 10px;
    color: #57606a
}

.add-slide-btn {
    margin: 10px;
    padding: 8px;
    text-align: center;
    border: 1px dashed #d0d7de;
    border-radius: 6px;
    color: #0969da;
    font-size: 13px;
    cursor: pointer;
    transition: .15s
}

.add-slide-btn:hover {
    background: #f6f8fa;
    border-color: #0969da
}

/* ── CANVAS ── */
.editor-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.toolbar {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    z-index: 10;
}

.tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px;
    width: 65px;
    height: 55px;
    border: 1px solid #eaeef2;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.tool-btn:hover {
    background: #f6f8fa;
    border-color: #d0d7de;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);
}

.tool-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.tool-icon {
    font-size: 20px;
    line-height: 1;
}

.tool-label {
    font-size: 11px;
    font-weight: 500;
    color: #4a5568;
    white-space: nowrap;
}

.slide-canvas {
    min-height: 405px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .12);
    padding: 20px;
    margin: 10px;
    background-size: cover;
    position: relative;
}

/* ── THEMES ── */
.theme-default {
    background-color: #ffffff;
    color: #24292f;
}

.theme-dark {
    background-color: #0d1117;
    color: #c9d1d9;
}

.theme-ocean {
    background-color: #0c4a6e;
    color: #e0f2fe;
}

.theme-forest {
    background-color: #14532d;
    color: #dcfce7;
}

.theme-sunset {
    background-color: #7c2d12;
    color: #fef3c7;
}

.theme-oli {
    background-color: #ffffff;
    color: #24292f;
    background-image: linear-gradient(#d0d7de 1px, transparent 1px), linear-gradient(90deg, #d0d7de 1px, transparent 1px);
    background-size: 20px 20px;
}

.theme-kengang {
    background-color: #ffffff;
    color: #000;
    background-image: linear-gradient(transparent 95%, #e6ebf0ff 5%);
    background-size: 100% 32px;
    line-height: 32px;
}

.theme-blackboard {
    background-color: #1a202c;
    color: #ffffff;
    background-image: radial-gradient(circle, #2d3748 10%, transparent 10%), radial-gradient(circle, #2d3748 10%, transparent 10%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}

.theme-greenboard {
    background-color: #14532d;
    color: #ffffff;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 2px, transparent 2px),
        linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

/* ── BLOCKS ── */
.block-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
    group: true;
}

.block-wrap:hover .block-handle,
.block-wrap:hover .block-remove {
    opacity: 1
}

.block-handle {
    opacity: 0;
    cursor: pointer;
    color: #aaa;
    font-size: 14px;
    padding: 4px 2px;
    transition: .15s;
    flex-shrink: 0;
    margin-top: 6px;
    user-select: none;
    position: relative
}

.block-handle:active {
    cursor: grabbing
}

.block-content {
    flex: 1;
    min-width: 0
}

/* MathJax size constraints in editor canvas */
.block-content mjx-container {
    display: inline-block !important;
    max-width: 100%;
    vertical-align: middle;
    line-height: normal;
}

.block-content mjx-container>mjx-math {
    font-size: 1.1em !important;
}

.block-content .MathJax {
    font-size: 1.1em !important;
}

.block-content ul {
    list-style-type: '✅';
}

.block-content ul li::marker {
    font-size: 1.1rem;
}

.block-content ul li {
    margin-left: 21px;
    padding-left: 5px;
}

.block-content ol {
    list-style-type: none;
}

.block-content ol li {
    counter-increment: step-counter;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.block-content ol li::before {
    content: counter(step-counter);
    font-size: 80%;
    background-color: rgb(0, 200, 200);
    color: white;
    font-weight: bold;
    margin-left: -25px;
    position: absolute;
    padding: 3px 6px;
    border-radius: 3px;
}

.block-remove {
    opacity: 0;
    cursor: pointer;
    color: #cf222e;
    font-size: 14px;
    padding: 4px;
    transition: .15s;
    flex-shrink: 0;
    margin-top: 4px;
    background: none;
    border: none;
    line-height: 1
}

.block-remove:hover {
    color: #a40e26
}

.block-wrap.drag-over-top {
    border-top: 2px solid #0969da
}

.block-wrap.drag-over-bottom {
    border-bottom: 2px solid #0969da
}

/* ── BLOCK DROPDOWN ── */
.block-dropdown {
    position: absolute;
    top: 26px;
    left: 0;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 500;
    min-width: 160px;
    padding: 4px 0;
    display: none
}

.block-dropdown.open {
    display: block
}

.block-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: .1s
}

.block-dropdown-item:hover {
    background: #f6f8fa
}

.block-dropdown-item.danger {
    color: #cf222e
}

/* ── AUDIO UPLOAD ── */
.audio-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px dashed #d0d7de;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #0969da;
    transition: .15s;
    margin-top: 6px
}

.audio-upload-btn:hover {
    background: #eff8ff;
    border-color: #0969da
}

/* Text block */
.text-block {
    border: 1px solid transparent;
    border-radius: 4px;
    transition: .15s
}

.text-block:hover {
    border-color: #d0d7de
}

.text-block:focus-within {
    border-color: #0969da
}

.text-block .tox-tinymce {
    border: none !important;
    border-radius: 4px
}

/* Image block */
.image-block {
    border: 1px dashed #d0d7de;
    border-radius: 6px;
    overflow: hidden;
    text-align: center
}

.image-block img {
    max-width: 100%;
    display: block
}

.image-block .img-placeholder {
    padding: 32px;
    color: #57606a;
    cursor: pointer
}

.image-block .img-placeholder:hover {
    background: #f6f8fa
}

/* Audio block */
.audio-block {
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 12px
}

.audio-block audio {
    width: 100%
}

/* Video block */
.video-block {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #000
}

.video-block iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none
}

.video-block .video-input {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f8fa;
    color: #57606a;
    flex-direction: column;
    gap: 8px;
    padding: 20px
}

/* Table block */
.table-block {
    overflow-x: auto
}

.table-block table {
    width: 100%;
    border-collapse: collapse
}

.table-block td,
.table-block th {
    border: 1px solid #d0d7de;
    padding: 6px 8px;
    min-width: 60px;
    outline: none
}

.table-block th {
    background-color: #f1f3f5;
    font-weight: 600;
    text-align: left
}

.table-block td:focus,
.table-block th:focus {
    background: #fffbdd
}

/* Quiz block */
.quiz-block {
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 12px
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 4px 0;
    border-radius: 5px;
    border: 1px solid #d0d7de;
    background: #fff;
    color: #000;
}

.quiz-option.correct {
    border-color: #2da44e;
    background: #f0fff4
}

.quiz-option input[type=text] {
    border: none;
    outline: none;
    flex: 1;
    background: transparent;
    font-size: 14px
}

.quiz-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 4px 0
}

.quiz-pair input {
    padding: 6px 8px;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    font-size: 13px;
    width: 100%
}

/* Columns block */
.columns-block {
    display: grid;
    gap: 10px
}

.col-cell li {
    margin-left: 15px
}

.col-cell img {
    max-width: 100%;
    border-radius: 5px;
}

.column-cell {
    border: 1px solid #d0d7de;
    border-radius: 4px;
    padding: 4px;
    min-height: 60px
}

/* ── Textbox (hộp văn bản) ── */
.tb-box {
    border-radius: 3px;
    overflow: hidden;
    margin: 4px 0;
    font-size: 13px;
    line-height: 1.6
}

.tb-box-title {
    font-weight: 700;
    padding: 6px 14px;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase
}

.tb-box-body {
    text-align: justify;
    padding: 10px
}

.tb-theorem {
    position: relative;
    background-color: #fff6f6 !important;
    /* Chỉnh viền hộp trùng khớp với màu của Tab để tạo cảm giác liền mạch */
    border: 2px solid #555555 !important;
    border-radius: 5px !important;
    margin: 35px 0 15px 0 !important;
    overflow: visible !important;
}

.tb-theorem .tb-box-title {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 3px 20px 8px 20px;
    background: transparent !important;
}

/* ── Vẽ nền xám hình thang (Được phép bo 4 góc) ── */
.tb-theorem .tb-box-title::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Phủ kín toàn bộ khung chữ */
    background: #555555;

    /* THÀNH CÔNG: Đã bo tròn 4 góc mượt mà! */
    border-radius: 0px 0px 3px 3px;

    /* Tuyệt chiêu 3D tạo hình thang (Rộng ở trên, hẹp ở dưới) */
    transform: perspective(60px) rotateX(-10deg);
    transform-origin: top;
    z-index: -1;
    /* Luồn xuống dưới chữ */
}

/* ── Vẽ 2 cánh nền đen bằng 1 thẻ duy nhất ── */
.tb-theorem .tb-box-title::after {
    content: "";
    position: absolute;
    top: 0px;
    /* Bắt đầu thấp hơn góc bo tròn ở trên */
    height: 8px;
    /* Chiều cao của cánh */

    /* Kéo dài nhô ra 2 bên */
    left: -7px;
    right: -7px;

    background: #343333;
    z-index: -2;
    /* Nằm dưới cùng, luồn sau cả nền xám */
    border-radius: 30px 30px 0 0;
}

.tb-theorem .tb-box-body {
    background: transparent !important;
    border: none !important;
    padding: 24px 18px 16px 18px !important;
    color: #000;
    line-height: 1.6;
    font-size: 14px;
}

.tb-theorem .tb-box-body ul {
    list-style: none !important;
    padding-left: 0;
    margin-top: 10px;
}

.tb-theorem .tb-box-body ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 5px;
}

.tb-theorem .tb-box-body ul li::marker {
    content: none !important;
}

.tb-theorem .tb-box-body ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 2px;
    /* Căn thẳng hàng với dòng chữ đầu tiên */
    background-color: #0033cc;
    /* Màu xanh dương đậm */
    color: white;
    width: 15px;
    height: 15px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-weight: bold;
}

.tb-note {
    --note-bg: #FAE3E3;
    --note-fold: #DDC6C3;
    --tape-bg: rgba(108, 212, 255, 0.4);

    position: relative;
    /* Dùng gradient để tạo vết cắt thật ở góc dưới bên trái */
    background: linear-gradient(45deg, transparent 12.5px, var(--note-bg) 12.5px) !important;
    color: #171A21 !important;

    /* Cực kỳ quan trọng: Để hiện miếng dán phía trên */
    overflow: visible !important;

    width: 85%;
    margin: 40px auto 20px auto !important;
    padding: 50px 25px 25px 25px !important;
    min-height: 180px;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 15px -5px rgba(0, 0, 0, 0.2);
    transform: rotate(-1deg);
    display: block !important;
}

/* Miếng băng keo (Tape) */
.tb-note::before {
    content: "";
    position: absolute;
    top: -20px;
    /* Đẩy lên cao hơn */
    left: 50%;
    width: 120px;
    height: 35px;
    background-color: var(--tape-bg);
    transform: translateX(-50%) rotate(2deg);
    z-index: 10;
    /* Đảm bảo nằm trên cùng */
}

/* Nếp gấp (Fold) */
.tb-note::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-width: 9px;
    border-style: solid;
    border-top-color: var(--note-fold);
    border-right-color: var(--note-fold);
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

.tb-note .tb-box-body {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.tb-exercise {
    border: 2px solid #dc2f2f;
    /* Viền đỏ bao quanh toàn bộ box */
    background-color: #f0f4e3;
    /* Nền xanh lục nhạt chuẩn giáo dục */
    border-radius: 3px;
    /* Bo góc vuông như ảnh */
}

.tb-exercise .tb-box-title {
    float: left;
    /* Đẩy tab tiêu đề sang trái để text bám theo cùng hàng */
    background: #dc2f2f;
    color: #fff;
    padding: 6px 30px 6px 12px;
    /* Khoảng trống đủ dài cho vết cắt */
    font-weight: bold;
    font-size: 12px;
    /* Cắt hình bình hành/vát cạnh ở góc dưới bên phải */
    clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
    margin-right: 12px;
    margin-bottom: 5px;
    text-transform: none;
    /* Hiển thị đúng chữ thường/hoa như bạn gõ */
}

.tb-exercise .tb-box-body {
    background: transparent;
    border: none;
    /* Xóa viền cũ của box-body */
    padding: 8px 12px 12px 12px;
    color: #000;
}

/* Fix margin thẻ p đầu tiên do TinyMCE tạo ra để text căn chuẩn với tab đỏ */
.tb-exercise .tb-box-body> :first-child {
    margin-top: 0;
    line-height: 1.6;
}

/* Clearfix để hộp không bị lỗi chiều cao khi nội dung quá ngắn so với tab */
.tb-exercise::after {
    content: "";
    display: table;
    clear: both;
}

.tb-example {
    position: relative;
    border: 2px solid #b3003b;
    /* Màu viền đỏ hồng giống ảnh */
    border-radius: 5px;
    /* Bo góc mềm mại */
    margin-top: 20px;
    /* Chừa khoảng trống phía trên để tiêu đề không bị lẹm */
    margin-bottom: 10px;
    background: transparent;
    overflow: visible;
    /* RẤT QUAN TRỌNG: Ghi đè overflow:hidden của .tb-box để tiêu đề nổi lên được */
}

.tb-example .tb-box-title {
    position: absolute;
    top: -10px;
    /* Kéo tiêu đề dịch lên trên, cắt ngang đường viền */
    left: 20px;
    /* Cách lề trái một khoảng */
    background: #fff;
    /* Nền trắng trùng với màu nền slide để che đường viền bên dưới chữ */
    color: #b3003b;
    /* Cùng màu với viền */
    padding: 0 10px;
    /* Tạo khoảng thở hai bên chữ */
    font-weight: 700;
    font-size: 15px;
    text-transform: none;
    /* Giữ nguyên chữ hoa/thường theo bạn nhập */
    line-height: 1;
}

.tb-example .tb-box-body {
    padding: 16px 16px 12px 16px;
    background: transparent;
    border: none;
    /* Xóa viền cũ của tb-box-body */
    color: #000;
}

.tb-warning {
    display: flex;
    align-items: stretch
}

.tb-warning-icon {
    width: 32px;
    min-width: 32px;
    background: #e53e3e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0
}

.tb-warning .tb-box-body {
    background: #fff5f5;
    border: 2px solid #e53e3e;
    border-left: none;
    flex: 1;
    color: #000;
}

.tb-code {
    background-color: #282c34;
    /* Màu nền tối chuẩn theme One Dark */
    border-radius: 5px;
    margin: 10px 0;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Thanh điều khiển giả lập Mac OS */
.tb-code-header {
    background-color: #21252b;
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.tb-code-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.tb-code-dot.red {
    background-color: #ff5f56;
}

.tb-code-dot.yellow {
    background-color: #ffbd2e;
}

.tb-code-dot.green {
    background-color: #27c93f;
}

/* Khu vực hiển thị Code */
.tb-code .tb-box-body.hljs {
    background: transparent !important;
    padding: 16px !important;
}

.tb-code .tb-box-body {
    margin-top: -20px;
    padding: 10px;
    color: #fff;
    /* Màu chữ xám sáng */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    /* Font lập trình */
    font-size: 14px;
    line-height: 1.6;
    background: transparent;
    border: none;
    overflow-x: auto;
    /* Cuộn ngang nếu dòng code quá dài */
    white-space: pre-wrap !important;
    word-wrap: break-word;
}

.hljs-string {
    color: #98c379 !important;
    /* Màu xanh lá cây kiểu Notepad++ */
    /* Hoặc bạn có thể dùng các mã màu khác như:
#61afef (Xanh dương), #e5c07b (Vàng), #c678dd (Tím)
*/
}

/* Ép thẻ p và pre bên trong khung code giữ nguyên định dạng, không cách dòng quá xa */
.tb-code .tb-box-body p,
.tb-code .tb-box-body pre {
    margin: 0;
    font-family: inherit;
    white-space: pre-wrap;
    /* Giữ lại khoảng trắng (dấu cách/tab) để thụt lề */
}

.tb-formula {
    width: fit-content;
    /* Hộp co lại vừa vặn với độ dài công thức */
    min-width: 250px;
    max-width: 90%;
    margin: 25px auto !important;
    /* Căn giữa hộp */
    background: #eefdf2 !important;
    /* Màu xanh mint nhạt */
    border: 2.5px solid #00005d !important;
    /* Viền xanh navy đậm */
    padding: 15px 30px !important;
    text-align: center;
    position: relative;
    border-radius: 4px;
    overflow: visible !important;
    /* Đổ bóng đổ mềm phía dưới giống ảnh mẫu */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}

.tb-formula .tb-box-body {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-size: 1.2rem;
    color: #000;
}

/* Đảm bảo MathJax hiển thị căn giữa trong hộp này */
.tb-formula .tb-box-body mjx-container {
    margin: 0 !important;
}

.block-content .tb-exercise ol[style*="upper-alpha"],
.block-content .tb-example ol[style*="upper-alpha"] {
    display: grid;
    gap: 12px 20px;
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0;
    counter-reset: alpha-counter;
    margin-top: 10px;
}

/* Ép ẩn marker mặc định của trình duyệt */
.block-content .tb-exercise ol[style*="upper-alpha"] li::marker,
.block-content .tb-example ol[style*="upper-alpha"] li::marker {
    content: none !important;
}

.block-content .tb-exercise ol[style*="upper-alpha"] li,
.block-content .tb-example ol[style*="upper-alpha"] li {
    counter-increment: alpha-counter;
    margin-bottom: 0;
    padding-left: 20px;
    position: relative;
    list-style-type: none !important;
}

.block-content .tb-exercise ol[style*="upper-alpha"] li::before,
.block-content .tb-example ol[style*="upper-alpha"] li::before {
    content: counter(alpha-counter, upper-alpha) ".";
    position: absolute;
    left: 0;
    top: -0.5px;
    background-color: transparent;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    margin-left: 0;
    border-radius: 0;
    /* Xóa bo góc từ style nền xanh cũ */
}

/* Textbox template picker */
.tb-tpl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px
}

.tb-tpl-card {
    border: 2px solid #d0d7de;
    border-radius: 7px;
    padding: 8px 6px;
    cursor: pointer;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    transition: .15s;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.tb-tpl-card:hover {
    border-color: #0969da
}

.tb-tpl-card.selected {
    border-color: #0969da;
    background: #eff8ff
}

/* ── RIGHT PANEL ── */
.right-panel {
    width: 240px;
    min-width: 240px;
    border-left: 1px solid #d0d7de;
    background: #fff;
    overflow-y: auto;
    transition: .3s;
    position: relative
}

.right-panel.collapsed {
    width: 32px;
    min-width: 32px;
    overflow: hidden
}

.panel-toggle {
    position: absolute;
    top: 10px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #57606a;
    font-size: 16px;
    z-index: 10
}

.panel-content {
    padding: 12px 14px;
    padding-right: 38px
}

.panel-section {
    margin-bottom: 16px
}

.panel-section h4 {
    font-size: 12px;
    font-weight: 600;
    color: #57606a;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px
}

.panel-label {
    font-size: 12px;
    margin-bottom: 4px;
    margin-top: 8px;
    color: #57606a
}

.panel-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d0d7de;
    border-radius: 5px;
    font-size: 13px;
    background: #fff
}

.panel-color {
    width: 100%;
    height: 32px;
    border: 1px solid #d0d7de;
    border-radius: 5px;
    cursor: pointer
}

/* ── THEMES PANEL ── */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px
}

.theme-swatch {
    height: 48px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid #d0d7de;
    transition: .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative
}

.theme-swatch:hover {
    border-color: #8c959f
}

.theme-swatch.active {
    border-color: #0969da;
    box-shadow: 0 0 0 1px #0969da
}

.theme-swatch-label {
    color: #fff;
    padding: 2px 6px;
    z-index: 2;
    pointer-events: none;
    text-align: center;
    line-height: 1.2;
    font-size: 10px
}

.theme-swatch.light-text .theme-swatch-label {
    color: #24292f;
}

/* MathLive Keyboard override */
body {
    --keyboard-zindex: 3000;
}

.ML__keyboard {
    z-index: 3000 !important;
}

/* ── MODAL ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: flex-start;
    padding-top: 8vh;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: .2s
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: all
}

.modal {
    background: #fff;
    border-radius: 5px;
    width: 70%;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(-20px);
    transition: .2s
}

.modal-overlay.open .modal {
    transform: translateY(0)
}

.modal-head {
    padding: 16px 20px;
    border-bottom: 1px solid #d0d7de;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.modal-head h3 {
    font-size: 16px;
    font-weight: 600
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #57606a;
    line-height: 1
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1
}

.modal-foot {
    padding: 12px 20px;
    border-top: 1px solid #d0d7de;
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

/* ── SLIDE TYPE PICKER ── */
.type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.type-card {
    border: 2px solid #d0d7de;
    border-radius: 8px;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: .15s
}

.type-card:hover,
.type-card.active {
    border-color: #0969da;
    background: #eff8ff
}

.type-card .type-icon {
    font-size: 24px;
    margin-bottom: 6px
}

.type-card .type-name {
    font-size: 12px;
    font-weight: 600
}

/* ── NEW PRES MODAL ── */
.form-group {
    margin-bottom: 14px
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 14px;
    outline: none
}

.form-group input:focus,
.form-group select:focus {
    border-color: #0969da;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, .1)
}

/* ── TOAST ── */
#toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #24292f;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(10px);
    transition: .3s;
    pointer-events: none
}

#toast.show {
    opacity: 1;
    transform: translateY(0)
}

/* Modal table cell editors */
.mb-table-editor {
    border: 1px solid #d0d7de;
    border-radius: 4px;
    min-height: 40px;
    padding: 8px;
    background: #fff;
    cursor: text;
    transition: .15s
}

.mb-table-editor:hover {
    border-color: #0969da
}

.mb-table-editor:focus {
    outline: none;
    border-color: #0969da;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, .1)
}

.report-session-item {
    padding: 12px;
    border-bottom: 1px solid #d0d7de;
    cursor: pointer;
    transition: 0.15s;
}

.report-session-item:hover {
    background: #eff8ff;
}

.report-session-item.active {
    background: #eff8ff;
    border-left: 3px solid #0969da;
}

.report-session-time {
    font-size: 13px;
    font-weight: 600;
    color: #24292f;
}

.report-session-meta {
    font-size: 11px;
    color: #57606a;
    margin-top: 4px;
}