/*
 * Kiểu hiển thị cho nội dung soạn bằng KEditor.
 * Frontend: bọc nội dung trong <div class="k-content">{!! $content !!}</div> và nạp file này.
 * Admin: được dùng chung để vùng soạn thảo trông giống ngoài website.
 */
.k-content, .ked-area { line-height: 1.7; word-wrap: break-word; }
.k-content::after, .ked-area::after { content: ""; display: table; clear: both; }
.k-content h2, .ked-area h2 { font-size: 1.6em; margin: 1.2em 0 .5em; line-height: 1.3; }
.k-content h3, .ked-area h3 { font-size: 1.3em; margin: 1.1em 0 .5em; line-height: 1.35; }
.k-content h4, .ked-area h4 { font-size: 1.1em; margin: 1em 0 .4em; }
.k-content p, .ked-area p { margin: 0 0 1em; }
.k-content ul, .k-content ol, .ked-area ul, .ked-area ol { margin: 0 0 1em; padding-left: 1.6em; }
.k-content blockquote, .ked-area blockquote { margin: 0 0 1em; padding: .6em 1em; border-left: 4px solid #f5c400; background: #f8fafc; color: #475569; }
.k-content pre, .ked-area pre { background: #0f172a; color: #e2e8f0; padding: 1em; border-radius: 6px; overflow: auto; font-size: .9em; }
.k-content a, .ked-area a { color: #2563eb; text-decoration: underline; }
.k-content hr, .ked-area hr { border: 0; border-top: 1px solid #e2e8f0; margin: 1.5em 0; }

/* Ảnh */
.k-content img, .ked-area img { max-width: 100%; height: auto; }
.k-content .k-img-left, .ked-area .k-img-left { float: left; margin: .3em 1.2em 1em 0; max-width: 50%; }
.k-content .k-img-right, .ked-area .k-img-right { float: right; margin: .3em 0 1em 1.2em; max-width: 50%; }
.k-content .k-img-center, .ked-area .k-img-center { display: block; margin-left: auto; margin-right: auto; clear: both; }
.k-content figure.k-figure, .ked-area figure.k-figure { margin: 0 0 1em; display: table; }
.k-content figure.k-figure.k-img-center, .ked-area figure.k-figure.k-img-center { margin: 0 auto 1em; }
.k-content figure.k-figure img, .ked-area figure.k-figure img { display: block; width: 100%; }
.k-content figcaption, .ked-area figcaption { font-size: .875em; color: #64748b; text-align: center; padding-top: .4em; font-style: italic; }
@media (max-width: 575px) {
    .k-content .k-img-left, .k-content .k-img-right { float: none; display: block; margin: 0 auto 1em; max-width: 100%; }
    .k-content [style*="width"] { width: auto !important; max-width: 100%; }
}

/* Video YouTube 16:9 */
.k-content .k-video, .ked-area .k-video { position: relative; width: 100%; max-width: 860px; margin: 0 auto 1.2em; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; clear: both; }
.k-content .k-video iframe, .ked-area .k-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Bảng */
.k-content table, .ked-area table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: .95em; }
.k-content th, .k-content td, .ked-area th, .ked-area td { border: 1px solid #e2e8f0; padding: .55em .75em; vertical-align: top; text-align: left; }
.k-content thead th, .ked-area thead th { background: #f1f5f9; font-weight: 600; }
@media (max-width: 767px) { .k-content table { display: block; overflow-x: auto; white-space: nowrap; } }