/* ====== TYPOGRAPHY BASELINE dùng chung Editor & Client ====== */

/* 1) Biến & font stack */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --text-size: 16px; /* Base font-size */
  --text-leading: 1.6; /* Base line-height */
  --heading-leading: 1.25; /* Heading line-height */

  /* Scale heading (đồng bộ editor & client, dùng rem để nhất quán) */
  --h1: 2rem; /* ~32px khi base=16 */
  --h2: 1.75rem; /* ~28px */
  --h3: 1.5rem; /* ~24px */
  --h4: 1.25rem; /* ~20px */
  --h5: 1.125rem; /* ~18px */
  --h6: 1rem; /* 16px */

  /* Màu chữ & nhấn */
  --c-text: #141414;
  --c-muted: #666;
  --c-border: #e5e7eb;
  --c-accent: #0ea5e9;
  --c-bg-quote: #f8fafc;
}

/* 2) Áp dụng cho cả:
   - CKEditor 4 (iframe body có class 'richtext' nhờ bodyClass)
   - CKEditor 5 (.ck-content.richtext)
   - Client container (.richtext)
*/
.richtext,
.ck-content.richtext,
.ck-content.richtext * {
  box-sizing: border-box;
}

.richtext,
.ck-content.richtext {
  font-family: var(--font-sans);
  font-size: var(--text-size);
  line-height: var(--text-leading);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3) Vertical rhythm: đồng bộ khoảng cách giữa các block */
.richtext > * {
  margin-top: 0;
  margin-bottom: 1em; /* nhịp chung */
}
.richtext > *:first-child {
  margin-top: 0;
}
.richtext > *:last-child {
  margin-bottom: 0;
}

/* 4) Heading scale & spacing */
.richtext h1,
.richtext h2,
.richtext h3,
.richtext h4,
.richtext h5,
.richtext h6 {
  font-weight: 700;
  line-height: var(--heading-leading);
  margin: 1.2em 0 0.6em;
}
.richtext h1 {
  font-size: var(--h1);
}
.richtext h2 {
  font-size: var(--h2);
}
.richtext h3 {
  font-size: var(--h3);
}
.richtext h4 {
  font-size: var(--h4);
}
.richtext h5 {
  font-size: var(--h5);
}
.richtext h6 {
  font-size: var(--h6);
}

/* 5) Đoạn văn & inline */
.richtext p {
  margin: 0 0 1em;
}
.richtext strong {
  font-weight: 700;
}
.richtext em {
  font-style: italic;
}
.richtext small {
  font-size: 0.875em;
}
.richtext a {
  color: var(--c-accent);
  text-decoration: underline;
}
.richtext a:hover {
  text-decoration: none;
}

/* 6) Danh sách */
.richtext ul,
.richtext ol {
  padding-left: 1.5em;
  margin: 0 0 1em;
}
.richtext li {
  margin: 0.25em 0;
}
.richtext li > ul,
.richtext li > ol {
  margin: 0.25em 0;
}

/* 7) Blockquote */
.richtext blockquote {
  margin: 1em 0;
  padding: 0.75em 1em;
  border-left: 4px solid var(--c-accent);
  background: var(--c-bg-quote);
  color: var(--c-muted);
}
.richtext blockquote > *:last-child {
  margin-bottom: 0;
}

/* 8) Ảnh, video, iframe nhúng (responsive) */
.richtext img,
.richtext video {
  display: block;
  max-width: 100%;
  height: auto;
}
.richtext iframe {
  max-width: 100%;
  border: 0;
}
.richtext figure {
  margin: 1em 0;
}
.richtext figcaption {
  font-size: 0.875rem;
  color: var(--c-muted);
  text-align: center;
  margin-top: 0.5em;
}

/* 9) Bảng */
.richtext table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-variant-numeric: tabular-nums;
}
.richtext th,
.richtext td {
  border: 1px solid var(--c-border);
  padding: 0.6em 0.75em;
  vertical-align: top;
}
.richtext th {
  background: #f9fafb;
  font-weight: 600;
  text-align: left;
}

/* 10) Code */
.richtext code,
.richtext kbd,
.richtext samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: #f3f4f6;
  padding: 0.1em 0.3em;
  border-radius: 4px;
}
.richtext pre {
  overflow: auto;
  padding: 0.9em 1em;
  background: #0b1220;
  color: #e5e7eb;
  border-radius: 8px;
  line-height: 1.5;
  margin: 1em 0;
}
.richtext pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 0.95em;
}

/* 11) HR */
.richtext hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: 2em 0;
}

/* 12) Căn lề & alignment classes thường gặp từ CKEditor */
.richtext .text-left {
  text-align: left;
}
.richtext .text-center {
  text-align: center;
}
.richtext .text-right {
  text-align: right;
}
.richtext .align-left {
  float: left;
  margin: 0.25em 1em 0.5em 0;
}
.richtext .align-right {
  float: right;
  margin: 0.25em 0 0.5em 1em;
}
.richtext .align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Clear float trong nội dung */
.richtext::after {
  content: "";
  display: table;
  clear: both;
}

/* 13) Khoảng cách phần tử đầu/cuối trong khối con */
.richtext > * > :first-child {
  margin-top: 0;
}
.richtext > * > :last-child {
  margin-bottom: 0;
}

/* 14) Tối ưu hiển thị trên mobile nhưng vẫn giữ scale bằng rem */
@media (max-width: 640px) {
  :root {
    /* Nếu muốn heading nhỏ lại trên mobile để đỡ "gãy layout" */
    --h1: 1.75rem;
    --h2: 1.5rem;
    --h3: 1.375rem;
  }
}