/* ════════════════════════════════════════════════════════════════════
   RICH CONTENT — style dùng chung cho mọi nội dung HTML xuất từ CKEditor 5
   (chính sách BH, tổng quan dự án, tin tức, mô tả listing...).

   Áp cho phần tử bọc class ".rich". Nạp 1 lần ở layout frontend nên mọi
   trang render ".rich" đều hiển thị giống hệt lúc soạn trong CRM.

   Phụ thuộc biến màu trong variable.css: --t2, --txt, --bdr, --bg-light.
   ════════════════════════════════════════════════════════════════════ */

/* ── Văn bản (đồng bộ với CSS hiển thị bên CRM để giống hệt editor) ── */
.rich { font-size: 14px; color: #444; line-height: 1.8; }
.rich h1,.rich h2,.rich h3,.rich h4 { color: #1a1a1a; font-weight: 700; margin: 16px 0 8px; line-height: 1.3; }
.rich h2 { font-size: 1.6em; }
.rich h3 { font-size: 1.3em; }
.rich h4 { font-size: 1.1em; }
.rich p { margin-bottom: 10px; }

/* ── Danh sách: KHÔI PHỤC dấu đầu dòng ───────────────────────────────
   common.css có reset toàn cục `ol,ul{list-style:none}` làm mất marker.
   .rich phải bật lại disc/decimal (và marker lồng nhau) để hiển thị đúng
   như lúc soạn trong CKEditor. */
.rich ul { list-style: disc outside; padding-left: 22px; margin-bottom: 10px; }
.rich ol { list-style: decimal outside; padding-left: 22px; margin-bottom: 10px; }
.rich ul ul { list-style: circle; }
.rich ul ul ul { list-style: square; }
.rich li { margin-bottom: 4px; }

.rich a { color: var(--primary, #c0392b); text-decoration: underline; }
.rich blockquote {
  border-left: 4px solid var(--bdr, #e5e5e5); margin: 0 0 10px;
  padding: 4px 0 4px 16px; color: #666; font-style: italic;
}
.rich table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.rich th,.rich td { border: 1px solid var(--bdr); padding: 7px 11px; font-size: 13px; }
.rich th { background: var(--bg-light); font-weight: 700; }

/* ── Cỡ chữ của CKEditor 5 (font-size feature dạng "named") ───────────
   CKEditor xuất ra class chứ không phải inline size → phải có CSS này thì
   chữ to/nhỏ mới đúng như trong editor. */
.rich .text-tiny  { font-size: .7em; }
.rich .text-small { font-size: .85em; }
.rich .text-big   { font-size: 1.4em; }
.rich .text-huge  { font-size: 1.8em; }

/* ── Ảnh: tái hiện content-style của CKEditor 5 ──────────────────────
   CKEditor xuất <figure class="image ..."> + class căn lề. Frontend phải có
   các rule này thì ảnh mới căn giữa/trái/phải đúng như lúc soạn trong CRM. */
.rich img { max-width: 100%; height: auto; }
.rich figure { margin: 0; }
.rich figure.image { display: table; clear: both; text-align: center; margin: 0.9em auto; max-width: 100%; }
.rich figure.image img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.rich figure.image figcaption { display: table-caption; caption-side: bottom; font-size: 12px; color: var(--t2); padding: 6px; }
/* Ảnh được resize: giữ width % do CKEditor set inline */
.rich figure.image.image_resized { max-width: 100%; }
.rich figure.image.image_resized img { width: 100%; }
/* Căn lề kiểu block (figure) */
.rich .image-style-block-align-center { margin-left: auto; margin-right: auto; }
.rich .image-style-block-align-left  { margin-left: 0;    margin-right: auto; }
.rich .image-style-block-align-right { margin-left: auto; margin-right: 0; }
/* Căn lề kiểu float (chữ chảy quanh ảnh) */
.rich .image-style-align-left  { float: left;  margin-right: 1em; }
.rich .image-style-align-right { float: right; margin-left: 1em; }
.rich .image-style-align-center { margin-left: auto; margin-right: auto; }
.rich .image-style-side { float: right; margin-left: 1em; max-width: 50%; }
/* Ảnh inline + canh giữa qua thẻ <p style="text-align:center"> (CKEditor cũng dùng) */
.rich p > img { vertical-align: middle; }
.rich p {
    font-size: 14px;
}