/*!
 * content.css — Rich content typography (single source of truth)
 * @author Trần Thành (Tran Thanh) — labcare.com.vn · TT-LBC-2026
 *
 * ONE canonical prose system for ALL CMS/CKEditor content, so product,
 * article and legal bodies render identically. Replaces the previous
 * per-page, inconsistent content styles (root-cause fix).
 * Applied to: .rich-text, .product-content, .legal__doc
 * (Article .prose keeps this base + its own numbered-heading extension.)
 */

.rich-text,
.product-content,
.legal__doc {
  font-size: var(--fs-5);
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 72ch;
}

/* ── Headings: proportional content scale (NOT the giant section scale) ── */
.rich-text h1, .product-content h1, .legal__doc h1,
.rich-text h2, .product-content h2, .legal__doc h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-7);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: none;
  margin: 1.8em 0 0.55em;
}
.rich-text h3, .product-content h3, .legal__doc h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-6);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  max-width: none;
  margin: 1.6em 0 0.5em;
}
.rich-text h4, .product-content h4, .legal__doc h4,
.rich-text h5, .product-content h5, .legal__doc h5,
.rich-text h6, .product-content h6, .legal__doc h6 {
  font-family: var(--ff-display);
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--text);
  max-width: none;
  margin: 1.4em 0 0.4em;
}
.rich-text > :first-child,
.product-content > :first-child,
.legal__doc > :first-child { margin-top: 0; }

/* ── Text ── */
.rich-text p, .product-content p, .legal__doc p {
  color: var(--text-soft);
  line-height: 1.75;
  margin: 0 0 1.1em;
  max-width: 72ch;
}
.rich-text strong, .rich-text b,
.product-content strong, .product-content b,
.legal__doc strong, .legal__doc b { color: var(--text); font-weight: 600; }
.rich-text em, .product-content em, .legal__doc em { font-style: italic; }

/* ── Links ── */
.rich-text a, .product-content a, .legal__doc a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rich-text a:hover, .product-content a:hover, .legal__doc a:hover { color: var(--text); }
[data-theme="dark"] .rich-text a,
[data-theme="dark"] .product-content a,
[data-theme="dark"] .legal__doc a { color: var(--link); }

/* ── Lists ── */
.rich-text ul, .rich-text ol,
.product-content ul, .product-content ol,
.legal__doc ul, .legal__doc ol {
  padding-left: 1.4em;
  margin: 0 0 1.2em;
  max-width: 72ch;
  color: var(--text-soft);
}
.rich-text ul, .product-content ul, .legal__doc ul { list-style: disc; }
.rich-text ol, .product-content ol, .legal__doc ol { list-style: decimal; }
.rich-text li, .product-content li, .legal__doc li { margin-bottom: 0.45em; line-height: 1.65; }

/* ── Media (responsive, framed) ── */
.rich-text img, .product-content img, .legal__doc img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-3);
  margin: 1.5em 0;
}
.rich-text iframe, .rich-text video,
.product-content iframe, .product-content video,
.legal__doc iframe, .legal__doc video {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--r-3);
  margin: 1.5em 0;
  display: block;
}
.rich-text figure, .product-content figure, .legal__doc figure { margin: 1.5em 0; }
.rich-text figcaption, .product-content figcaption, .legal__doc figcaption {
  font-size: var(--fs-3); color: var(--text-mute); text-align: center; margin-top: 8px;
}

/* ── Table (responsive, bordered) ── */
.rich-text table, .product-content table, .legal__doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: var(--fs-4);
  display: block;
  overflow-x: auto;
}
.rich-text th, .rich-text td,
.product-content th, .product-content td,
.legal__doc th, .legal__doc td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.rich-text th, .product-content th, .legal__doc th {
  background: var(--bg-soft); font-weight: 600; color: var(--text); white-space: nowrap;
}
.rich-text tr:nth-child(even) td,
.product-content tr:nth-child(even) td,
.legal__doc tr:nth-child(even) td { background: var(--bg-soft); }

/* ── Blockquote / code / hr ── */
.rich-text blockquote, .product-content blockquote, .legal__doc blockquote {
  border-left: 3px solid var(--brand-primary);
  padding: 2px 0 2px 20px;
  margin: 1.5em 0;
  color: var(--text);
  font-size: var(--fs-6);
  font-style: italic;
}
.rich-text code, .product-content code, .legal__doc code {
  font-family: var(--ff-mono);
  font-size: 0.9em;
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: var(--r-2);
}
.rich-text hr, .product-content hr, .legal__doc hr {
  border: 0; border-top: 1px solid var(--line); margin: 2.2em 0;
}

/* ── Normalize messy inline styles from Word/Translate paste ── */
.rich-text [style*="font-family"], .rich-text font,
.product-content [style*="font-family"], .product-content font,
.legal__doc [style*="font-family"], .legal__doc font { font-family: inherit !important; }
.rich-text [style*="font-size"], .rich-text font[size],
.product-content [style*="font-size"], .product-content font[size],
.legal__doc [style*="font-size"], .legal__doc font[size] { font-size: inherit !important; }