/* Nội dung bài viết có định dạng (.rich): dùng cho trang công khai và cho khung soạn trong trang quản lý.
   Chỉ dùng class, không dùng thuộc tính style (CSP không cho phép). Biến màu lấy từ trang đang hiển thị. */

.rich { line-height: 1.7; overflow-wrap: anywhere; color: var(--ink); }
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich p { margin: 0 0 1rem; color: var(--ink); }
.rich h2, .rich h3, .rich h4 { margin: 1.7rem 0 .7rem; line-height: 1.25; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--head, var(--ink)); }
.rich h2 { font-size: 1.55rem; }
.rich h3 { font-size: 1.28rem; }
.rich h4 { font-size: 1.08rem; }
.rich strong { font-weight: 700; }
.rich a { color: var(--head, var(--link, var(--accent))); text-decoration: underline; text-underline-offset: 2px; }
.rich ul, .rich ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.rich ul { list-style: disc; }
.rich ol { list-style: decimal; }
.rich li { margin: .3rem 0; padding-left: .2rem; }
.rich li > ul, .rich li > ol { margin: .3rem 0 0; }
.rich blockquote { margin: 0 0 1rem; padding: .8rem 1.1rem; border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--accent-soft); }
.rich blockquote p:last-child { margin-bottom: 0; }
.rich hr { margin: 1.6rem 0; border: 0; border-top: 2px solid var(--line, #dde3ea); }

/* Canh lề */
.rich .al-l { text-align: left; }
.rich .al-c { text-align: center; }
.rich .al-r { text-align: right; }
.rich .al-j { text-align: justify; }
.rich li.al-c, .rich li.al-r { list-style-position: inside; }

/* Màu chữ chọn sẵn */
.rich .tc-1 { color: #b42318; }
.rich .tc-2 { color: #b54708; }
.rich .tc-3 { color: #1b7a3a; }
.rich .tc-4 { color: #0b5cad; }
.rich .tc-5 { color: #6941c6; }
.rich .tc-6 { color: #5d6b7a; }
.rich .tc-7 { color: var(--link, var(--accent)); }
@media (prefers-color-scheme: dark) {
  .rich .tc-1 { color: #ff8f85; }
  .rich .tc-2 { color: #ffb45f; }
  .rich .tc-3 { color: #6fdc8c; }
  .rich .tc-4 { color: #7db4f0; }
  .rich .tc-5 { color: #c3a6ff; }
  .rich .tc-6 { color: #9aa8b6; }
}

/* Tệp đính kèm (PDF, Word, Excel): hiện thành nút có nhãn loại tệp, dùng chung cho trang công khai và khung soạn */
.rich a[href^="/uploads/"][href$=".pdf"],
.rich a[href^="/uploads/"][href$=".doc"],
.rich a[href^="/uploads/"][href$=".docx"],
.rich a[href^="/uploads/"][href$=".xls"],
.rich a[href^="/uploads/"][href$=".xlsx"] {
  display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; margin: .15rem 0; padding: .45rem .9rem .45rem .45rem;
  border: 1px solid var(--line, #dde3ea); border-radius: 10px; background: var(--accent-soft); color: var(--head, var(--ink));
  font-weight: 600; text-decoration: none; line-height: 1.35;
}
.rich a[href^="/uploads/"][href$=".pdf"]:hover,
.rich a[href^="/uploads/"][href$=".doc"]:hover,
.rich a[href^="/uploads/"][href$=".docx"]:hover,
.rich a[href^="/uploads/"][href$=".xls"]:hover,
.rich a[href^="/uploads/"][href$=".xlsx"]:hover { border-color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rich a[href^="/uploads/"][href$=".pdf"]::before,
.rich a[href^="/uploads/"][href$=".doc"]::before,
.rich a[href^="/uploads/"][href$=".docx"]::before,
.rich a[href^="/uploads/"][href$=".xls"]::before,
.rich a[href^="/uploads/"][href$=".xlsx"]::before {
  flex: none; min-width: 2.7rem; padding: .3rem .35rem; border-radius: 7px; background: var(--accent); color: var(--accent-ink, #fff);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-align: center; line-height: 1;
}
.rich a[href^="/uploads/"][href$=".pdf"]::before { content: "PDF"; background: #b42318; }
.rich a[href^="/uploads/"][href$=".doc"]::before, .rich a[href^="/uploads/"][href$=".docx"]::before { content: "WORD"; background: #1d5fb4; }
.rich a[href^="/uploads/"][href$=".xls"]::before, .rich a[href^="/uploads/"][href$=".xlsx"]::before { content: "EXCEL"; background: #14602d; }

/* Ảnh */
.rich img { display: inline-block; max-width: 100%; height: auto; border-radius: 8px; vertical-align: middle; }
.rich img.im-s { width: min(240px, 100%); }
.rich img.im-m { width: min(480px, 100%); }
.rich img.im-f { display: block; width: 100%; }
.rich p > img:only-child { margin: .25rem 0; }

/* Bảng */
.rich table { width: 100%; margin: 0 0 1rem; border-collapse: collapse; }
.rich th, .rich td { padding: .55rem .75rem; border: 1px solid var(--line, #dde3ea); vertical-align: top; text-align: left; }
.rich th { background: var(--accent-soft); font-weight: 700; }
.rich td.al-c, .rich th.al-c { text-align: center; }
.rich td.al-r, .rich th.al-r { text-align: right; }
.rich .tbl { margin: 0 0 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rich .tbl table { min-width: 460px; margin: 0; }

/* Video YouTube */
.rich .video { position: relative; margin: 0 0 1rem; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.rich .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Bản nhỏ (ghi chú trong thẻ khóa học) */
.rich.sm { font-size: .95rem; line-height: 1.55; }
.rich.sm p { margin-bottom: .55rem; }
.rich.sm h2, .rich.sm h3, .rich.sm h4 { margin: .9rem 0 .4rem; font-size: 1rem; }
.rich.sm ul, .rich.sm ol { margin-bottom: .55rem; }

/* Trang bài viết riêng */
.wrap.read { max-width: 920px; }
.article { padding: clamp(1.25rem, 3vw, 2.25rem); }
.req-rich { max-width: 760px; margin: 0 auto; }
.req-rich .rich { padding: clamp(1rem, 2.5vw, 1.75rem); border-radius: var(--r-md, 10px); background: var(--card, #fff); box-shadow: var(--shadow, none); }
.class-rich { margin: .75rem 0 0; }