/* Nội dung bài viết soạn bằng trình soạn thảo. Dùng chung cho website (.prose.rich) và khung soạn thảo trong quản trị. */
.rich { font-size: 1.06rem; line-height: 1.75; overflow-wrap: anywhere; }
.rich::after { content: ""; display: block; clear: both; }
.rich > :first-child { margin-top: 0; }
.rich h2, .rich h3, .rich h4 { font-family: var(--font-display); line-height: 1.2; margin: 1.5em 0 .5em; text-wrap: balance; }
.rich h2 { font-size: 1.65rem; } .rich h3 { font-size: 1.35rem; } .rich h4 { font-size: 1.12rem; }
.rich p { margin: 0 0 1em; }
.rich ul, .rich ol { margin: 0 0 1em; padding-left: 1.5em; }
.rich li > p { margin: 0 0 .3em; }
.rich a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.rich mark { padding: .05em .28em; border-radius: .35em; color: inherit; }
.rich hr { border: 0; border-top: 3px dotted var(--line); margin: 1.8em 0; }
.rich blockquote { margin: 1.3em 0; padding: .7em 1.2em; border-left: 5px solid var(--primary); background: var(--primary-soft); border-radius: 0 14px 14px 0; }
.rich blockquote p:last-child { margin-bottom: 0; }

.rich table { border-collapse: collapse; width: 100%; margin: 1.2em 0; table-layout: fixed; }
.rich th, .rich td { border: 1.5px solid var(--line); padding: .55em .75em; vertical-align: top; text-align: left; }
.rich th { background: var(--primary-soft); font-weight: 800; }
.rich td > p, .rich th > p { margin: 0; }
@media (max-width: 640px) { .rich table { display: block; overflow-x: auto; table-layout: auto; } }

.rich figure.img { margin: 1.3em auto; max-width: 100%; }
.rich figure.img img { display: block; width: 100%; height: auto; border-radius: 16px; border: 2px solid var(--line); background: var(--surface-2); }
.rich figure.img figcaption { margin-top: .45em; font-size: .92rem; color: var(--ink-2); text-align: center; }
.rich .img-s { width: min(240px, 100%); } .rich .img-m { width: min(460px, 100%); } .rich .img-l { width: 100%; }
.rich .img-left { float: left; margin: .35em 1.4em 1em 0; } .rich .img-right { float: right; margin: .35em 0 1em 1.4em; }
.rich .img-center { clear: both; }
@media (max-width: 640px) { .rich .img-left, .rich .img-right { float: none; margin: 1.2em auto; width: 100%; } }

.rich div[data-youtube-video] { position: relative; aspect-ratio: 16 / 9; margin: 1.3em 0; clear: both; }
.rich div[data-youtube-video] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 16px; background: #000; }

/* Khung soạn thảo */
.rich .ProseMirror-selectednode { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px; }
.rich p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--ink-2); opacity: .75; pointer-events: none; }
.rich.rte-content, .rte-content { outline: none; min-height: 380px; }
.rich .selectedCell { background: var(--accent-soft); }
.rich .tableWrapper { overflow-x: auto; }

@media print { .rich figure.img img { border: 0; } }

/* Kiểu nền của ProseMirror/Tiptap (thay cho đoạn CSS mà thư viện tự nhúng, vì CSP chặn thẻ <style> nhúng) */
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror li { position: relative; }
.ProseMirror-hideselection *::selection { background: transparent; } .ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror img { max-width: 100%; }
li.ProseMirror-selectednode { outline: none; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; margin: 0; }
.ProseMirror-gapcursor::after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--ink); animation: pm-blink 1.1s steps(2, start) infinite; }
@keyframes pm-blink { to { visibility: hidden; } }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
.ProseMirror .selectedCell::after { content: ""; position: absolute; inset: 0; background: rgba(21, 128, 61, .16); pointer-events: none; z-index: 2; }
.ProseMirror td, .ProseMirror th { position: relative; min-width: 3em; }
.ProseMirror .tableWrapper { margin: 1.2em 0; overflow-x: auto; }
.ProseMirror [data-youtube-video] iframe { pointer-events: none; }
.ProseMirror-selectednode [data-youtube-video] iframe, .ProseMirror-selectednode iframe { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ProseMirror-gapcursor::after { animation: none; } }
/* Video tải từ máy lên */
.rich video { display: block; width: 100%; height: auto; max-height: 75vh; margin: 1.3em 0; border-radius: 16px; background: #000; clear: both; object-fit: contain; }
.rich video:not([width]) { aspect-ratio: 16 / 9; }