:root {
    /* 🎨 Brand */
    --accent_blue: #1182FC;
    --accent_blue_hover: #0d6ed8;
    --bg_main: #fff;
    --bg_card: #f8fafc;
    --bg_header: #011458;
    --bg_border: #dbeafe;
    --bg_hover: #e6f0ff;
    --text_primary: #1e293b;
    --text_secondary: #334155;
    --text_muted: #64748b;
    --text_icon: #2563EB;
    --text_red: #FF0033;
    /* Media limit */
    --media-max-h: clamp(220px, 42vh, 480px);
}

/* RESET & BODY */
body {
    background: var(--bg_main);
    color: var(--text_primary);
    font-family: 'Segoe UI',sans-serif
}

/* HEADER */
.ebk-header {
    background: var(--bg_header);
    border-bottom: 1px solid var(--bg_border);
    color: #bbb;
    font-weight: 600
}

/* CARD */
.ebk-card {
    border-radius: .75rem;
    border: 1px solid var(--bg_border);
    background: var(--bg_card);
    box-shadow: 0 1px 2px rgba(0,0,0,.05)
}

    .ebk-card > * {
        flex: 0 0 auto
    }

/* ========================
   TREEVIEW
   ======================== */
.ebk-tree, .ebk-tree * {
    font-size: 14px;
    color: var(--text_secondary)
}

    .ebk-tree .ebk-node a, .ebk-tree .ebk-node span {
        display: block;
        padding: 6px 10px;
        border-radius: 8px;
        text-decoration: none;
        line-height: 1.6;
        white-space: normal /* tránh cắt chữ */
    }

    .ebk-tree .ebk-node.is-hover a {
        background: var(--bg_hover);
        color: var(--accent_blue)
    }

    .ebk-tree .ebk-node.is-active a, .ebk-tree .ebk-node.is-active span {
        background: rgba(0,90,171,.10);
        box-shadow: 0 0 0 1px rgba(0,90,171,.35) inset;
        color: #005AAB
    }
    /* Icon & spacer */
    .ebk-tree img {
        display: inline-block !important;
        max-width: none !important;
        height: auto !important;
        vertical-align: middle
    }

        .ebk-tree img[src$="tv-plus.svg"],
        .ebk-tree img[src$="tv-minus.svg"],
        .ebk-tree img[src$="tv-bullet.svg"],
        .ebk-tree img[src*="WebResource.axd"] {
            width: 16px !important;
            height: 16px !important;
            margin-right: 6px
        }

    .ebk-tree td {
        vertical-align: middle;
        padding: 2px 0
    }

/* ========================
   DANH SÁCH BÀI VIẾT
   ======================== */
.ebk-post-item {
    display: block;
    padding: 5px;
    border-radius: 10px;
    transition: background .2s, box-shadow .2s, transform .15s
}

    .ebk-post-item:hover {
        background: var(--bg_hover);
        transform: translateY(-1px)
    }

    .ebk-post-item:active {
        transform: translateY(0)
    }

    .ebk-post-item.is-active {
        background: rgba(0,90,171,.10);
        box-shadow: 0 0 0 1px rgba(0,90,171,.35) inset
    }

        .ebk-post-item.is-active .text-blue-600, .ebk-post-item.is-active .fa-file-lines {
            color: #005AAB !important
        }

/* ========================
   PHẦN NỘI DUNG
   ======================== */
.ebk-prose {
    display: block;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: unset !important
}

    .ebk-prose p {
        margin: 0 0 .75rem;
        color: var(--text_secondary);
        line-height: 1.7
    }

    .ebk-prose h1, .ebk-prose h2, .ebk-prose h3 {
        color: var(--accent_blue);
        margin: .75rem 0 .5rem
    }

    .ebk-prose ul {
        list-style: disc;
        padding-left: 1.25rem;
        margin: .5rem 0
    }

    .ebk-prose ol {
        list-style: decimal;
        padding-left: 1.25rem;
        margin: .5rem 0
    }

    .ebk-prose code {
        background: var(--bg_hover);
        padding: .15rem .35rem;
        border-radius: .375rem;
        border: 1px solid var(--bg_border);
        color: var(--accent_blue)
    }
    /* Tables kẻ hàng */
    .ebk-prose table {
        width: 100%;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        border-bottom: 1px solid #e5e7eb
    }

        .ebk-prose table td, .ebk-prose table th {
            border-bottom: 1px solid #e5e7eb !important;
            vertical-align: top;
            padding: 6px 10px
        }

        .ebk-prose table tr:last-child td, .ebk-prose table tr:last-child th {
            border-bottom: none !important
        }

/* ========================
   MEDIA
   ======================== */
.ebk-media + .ebk-media {
    margin-top: 12px
}

.ebk-media audio, .ebk-media video {
    width: 100%;
    max-width: 100%;
    outline: 0;
    border-radius: 8px
}

#mediaBox {
    
    border: 1px dashed var(--bg_border);
    border-radius: 10px
}

    #mediaBox iframe, #mediaBox video {
        width: 100%;
        height: auto;
        max-height: var(--media-max-h);
        display: block;
        border: 0;
        border-radius: 8px;
        object-fit: contain
    }

    #mediaBox iframe {
        aspect-ratio: 16/9
    }

    #mediaBox > * + * {
        margin-top: 12px
    }

/* ========================
   NÚT THƯƠNG HIỆU
   ======================== */
.btn-ta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 14px;
    font-weight: 500;
    border-radius: .5rem;
    padding: .5rem 1.25rem;
    border: 1px solid transparent;
    transition: all .15s;
    cursor: pointer
}

    .btn-ta i {
        font-size: 14px
    }

    .btn-ta.text-xs {
        font-size: 12px;
        padding: .25rem .5rem
    }

.btn-ta-primary {
    background: var(--accent_blue);
    color: #fff
}

    .btn-ta-primary:hover {
        background: var(--accent_blue_hover)
    }

    .btn-ta-primary:active {
        background: #0b5cc9
    }

.btn-ta-outline {
    background: #fff;
    color: var(--accent_blue);
    border: 1px solid var(--accent_blue)
}

    .btn-ta-outline:hover {
        background: var(--bg_hover);
        color: var(--accent_blue_hover);
        border-color: var(--accent_blue_hover)
    }

    .btn-ta-outline:active {
        background: #e2ecff
    }

.btn-ta-danger {
    background: #e11d48;
    color: #fff;
    border: 1px solid #e11d48
}

    .btn-ta-danger:hover {
        background: #be123c;
        border-color: #be123c
    }

    .btn-ta-danger:active {
        background: #9f1239
    }

.btn-ta-muted {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0
}

    .btn-ta-muted:hover {
        background: #e2e8f0;
        color: #334155
    }

    .btn-ta-muted:active {
        background: #cbd5e1
    }

/* ========================
   KHỐI GÓP Ý
   ======================== */
.ebk-feedback {
    background: var(--bg_card);
    border-top: 1px solid var(--bg_border);
    padding: 1rem;
    border-radius: .5rem
}

    .ebk-feedback textarea {
        background: #fff;
        border: 1px solid var(--bg_border);
        color: var(--text_primary);
        border-radius: .5rem;
        padding: .5rem .75rem;
        resize: none;
        outline: 0
    }

        .ebk-feedback textarea:focus {
            border-color: var(--accent_blue);
            box-shadow: 0 0 0 2px rgba(17,130,252,.2)
        }

    .ebk-feedback button {
        background: var(--accent_blue);
        color: #fff;
        border-radius: .5rem;
        padding: .5rem 1.25rem;
        transition: all .2s
    }

        .ebk-feedback button:hover {
            background: var(--accent_blue_hover)
        }

/* ========================
   SCROLLBAR
   ======================== */
.ebk-scroll::-webkit-scrollbar {
    width: 8px
}

.ebk-scroll::-webkit-scrollbar-thumb {
    background: var(--bg_border);
    border-radius: 999px
}

/* ========================
   Hiệu ứng
   ======================== */
.fade-in {
    animation: fadeIn .6s ease-in-out
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}


/* Ellipsis nhiều dòng */
.ebk-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* số dòng muốn hiển thị */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ebk-ellipsis-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Bảo đảm flex item cho phép co giãn */
.ebk-post-item .min-w-0 {
    min-width: 0;
}