/*
    CSS cho nội dung do CKEditor tạo ra (mẫu bố cục 2 cột chèn qua vninserttemplate) —
    chép từ CvBlog.Customer.WebAdmin.Client/wwwroot/css/app.css (mục /*template*\/),
    áp dụng cả trong khung soạn thảo lẫn ở phần xem lại nội dung đã lưu (MarkupString)
    trên trang chỉnh sửa/xem hồ sơ cá nhân. Lớp CSS trùng tên cho trang công khai nằm
    riêng ở VlogDvs.WebPublic/Themes/common-all-all.scss — không đụng vào file này.
*/

/*
    Tailwind Preflight (nạp toàn trang qua CDN) đặt "padding: 0; list-style: none"
    cho mọi <ol>/<ul> — CKEditor5 tự thêm lại list-style-type qua CSS riêng của nó
    (".ck-content ol/ul") nên số/chấm đầu dòng vẫn "có kiểu" nhưng không còn khoảng
    trống để hiện ra, bị cắt sát mép trái. Trả lại padding-left ở đây cho cả khung
    soạn thảo (CKEditor tự gắn class .ck-content lên vùng nhập) lẫn các chỗ hiện lại
    nội dung đã lưu (Xem/Sửa hồ sơ cá nhân — gắn tay class ck-content vào div bọc).
*/
.ck-content ol,
.ck-content ul {
    padding-left: 2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.ck-content ol ol,
.ck-content ol ul,
.ck-content ul ol,
.ck-content ul ul {
    margin-top: 0;
    margin-bottom: 0;
}

/* Khung soạn thảo "Nội dung" bài viết — cho cao tối thiểu để không bị ngắn/xấu khi mới gõ vài chữ.
   :not(.ck-editor__nested-editable) để KHÔNG áp nhầm vào các ô soạn lồng bên trong (chú thích
   ảnh, ô bảng...) - chúng cũng mang class ck-editor__editable nên trước đây bị ăn luôn 284px,
   tạo ra 1 khối rỗng rất cao dưới ảnh. */
.article-content .ck-editor__editable:not(.ck-editor__nested-editable) {
    min-height: 284px;
}

.t-two-panel::after {
    clear: both;
    display: table;
    content: " ";
}

.t-two-panel .left {
    float: left;
    border: 1px dashed #dddddd;
}

.t-two-panel .right {
    float: right;
    border: 1px dashed #dddddd;
}

.t-two-panel img {
    width: 100%;
}

.t-30-70 .left { width: calc(30% - 10px); }
.t-30-70 .right { width: calc(70% - 10px); }

.t-40-60 .left { width: calc(40% - 10px); }
.t-40-60 .right { width: calc(60% - 10px); }

.t-50-50 .left { width: calc(50% - 10px); }
.t-50-50 .right { width: calc(50% - 10px); }

.t-60-40 .left { width: calc(60% - 10px); }
.t-60-40 .right { width: calc(40% - 10px); }

.t-70-30 .left { width: calc(70% - 10px); }
.t-70-30 .right { width: calc(30% - 10px); }

.t-f-panel::after {
    clear: both;
    display: table;
    content: " ";
}

.t-f-panel .t-30-fl { float: left; border: 1px dashed #dddddd; width: calc(30% - 10px); margin-right: 20px; }
.t-f-panel .t-30-fr { float: right; border: 1px dashed #dddddd; width: calc(30% - 10px); margin-left: 20px; }
.t-f-panel .t-40-fl { float: left; border: 1px dashed #dddddd; width: calc(40% - 10px); margin-right: 20px; }
.t-f-panel .t-40-fr { float: right; border: 1px dashed #dddddd; width: calc(40% - 10px); margin-left: 20px; }
.t-f-panel .t-50-fl { float: left; border: 1px dashed #dddddd; width: calc(50% - 10px); margin-right: 20px; }
.t-f-panel .t-50-fr { float: right; border: 1px dashed #dddddd; width: calc(50% - 10px); margin-left: 20px; }

.youtube-video iframe {
    max-width: 100%;
}