/* VR360 CMS — CSS rich text dùng CHUNG admin preview + viewer (hotspot popup/window/tooltip).
 * Phạm vi: .hs-rte, .hs-text.rte, .tip.rte, .hs-rich-preview — docs/CKEDITOR_CONTRACT.md §7.2. */

.hs-rte, .hs-text.rte, .tip.rte, .hs-rich-preview {
  font-size: 14.5px;
  line-height: 1.7;
  color: #ddd6c8;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hs-rte > :first-child, .hs-text.rte > :first-child, .tip.rte > :first-child,
.hs-rich-preview > :first-child { margin-top: 0; }
.hs-rte > :last-child, .hs-text.rte > :last-child, .tip.rte > :last-child,
.hs-rich-preview > :last-child { margin-bottom: 0; }

.hs-rte p, .hs-text.rte p, .tip.rte p, .hs-rich-preview p { margin: 0 0 10px; }
.hs-rte h1, .hs-rte h2, .hs-rte h3, .hs-rte h4, .hs-rte h5, .hs-rte h6,
.hs-text.rte h1, .hs-text.rte h2, .hs-text.rte h3, .hs-text.rte h4, .hs-text.rte h5, .hs-text.rte h6,
.tip.rte h1, .tip.rte h2, .tip.rte h3, .tip.rte h4,
.hs-rich-preview h1, .hs-rich-preview h2, .hs-rich-preview h3, .hs-rich-preview h4 {
  margin: 4px 0 10px; color: #f2e6cf; line-height: 1.35;
}
.hs-rte h1, .hs-text.rte h1, .hs-rich-preview h1 { font-size: 22px; }
.hs-rte h2, .hs-text.rte h2, .hs-rich-preview h2 { font-size: 20px; }
.hs-rte h3, .hs-text.rte h3, .hs-rich-preview h3 { font-size: 17px; }
.hs-rte h4, .hs-text.rte h4, .hs-rich-preview h4 { font-size: 15.5px; }
.hs-rte h5, .hs-text.rte h5 { font-size: 14.5px; }
.hs-rte h6, .hs-text.rte h6 { font-size: 14px; color: #cfc7b8; }

.hs-rte a, .hs-text.rte a, .tip.rte a, .hs-rich-preview a { color: #f0c987; text-decoration: underline; }
.hs-rte a:focus-visible, .hs-text.rte a:focus-visible { outline: 2px solid #d9b26a; outline-offset: 2px; }

.hs-rte ul, .hs-rte ol, .hs-text.rte ul, .hs-text.rte ol,
.tip.rte ul, .tip.rte ol, .hs-rich-preview ul, .hs-rich-preview ol { margin: 0 0 10px; padding-left: 22px; }
.hs-rte li, .hs-text.rte li, .tip.rte li, .hs-rich-preview li { margin: 2px 0; }
.hs-rte li > ul, .hs-rte li > ol, .hs-text.rte li > ul, .hs-text.rte li > ol { margin: 2px 0; }
.hs-rte ul[style*="list-style-type"], .hs-text.rte ul[style*="list-style-type"] { list-style-position: outside; }

.hs-rte blockquote, .hs-text.rte blockquote, .tip.rte blockquote, .hs-rich-preview blockquote {
  margin: 0 0 10px; padding: 7px 12px; border-left: 3px solid #d9b26a;
  background: rgba(217, 178, 106, .06); color: #cfc7b8;
}
.hs-rte hr, .hs-text.rte hr, .hs-rich-preview hr {
  border: 0; border-top: 1px solid rgba(217, 178, 106, .35); margin: 12px 0;
}

.hs-rte code, .hs-text.rte code, .tip.rte code, .hs-rich-preview code {
  font-family: Consolas, "Courier New", monospace; font-size: 12.5px; padding: 1px 5px;
  border-radius: 4px; background: rgba(255, 255, 255, .1);
}
.hs-rte pre, .hs-text.rte pre, .hs-rich-preview pre {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #0a0d12;
  overflow: auto; max-height: 320px; white-space: pre;
}
.hs-rte pre code, .hs-text.rte pre code, .hs-rich-preview pre code {
  padding: 0; background: none; color: #e8e2d6; font-size: 12.5px;
}

.hs-rte table, .hs-text.rte table, .hs-rich-preview table {
  width: 100%; max-width: 100%; border-collapse: collapse; margin: 0 0 12px;
  display: block; overflow-x: auto; white-space: normal;
}
.hs-rte thead, .hs-rte tbody, .hs-rte tfoot, .hs-text.rte thead, .hs-text.rte tbody,
.hs-rich-preview thead, .hs-rich-preview tbody { width: 100%; }
.hs-rte th, .hs-rte td, .hs-text.rte th, .hs-text.rte td, .hs-rich-preview th, .hs-rich-preview td {
  border: 1px solid rgba(217, 178, 106, .24); padding: 6px 8px; vertical-align: top;
  text-align: left; min-width: 60px;
}
.hs-rte th, .hs-text.rte th, .hs-rich-preview th { background: rgba(217, 178, 106, .12); color: #f2e6cf; }
.hs-rte tbody tr:nth-child(even), .hs-text.rte tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
.hs-rte caption, .hs-text.rte caption, .hs-rich-preview caption {
  caption-side: bottom; padding-top: 4px; font-size: 12px; color: #9c968a; text-align: left;
}

.hs-rte img, .hs-text.rte img, .tip.rte img, .hs-rich-preview img {
  max-width: 100%; height: auto; max-height: 55vh; object-fit: contain;
  border-radius: 10px; display: block; margin: 6px 0;
}
.hs-rte figure, .hs-text.rte figure, .hs-rich-preview figure { margin: 8px 0 12px; max-width: 100%; }
.hs-rte figure img, .hs-text.rte figure img, .hs-rich-preview figure img { margin: 0 auto; }
.hs-rte figcaption, .hs-text.rte figcaption, .hs-rich-preview figcaption {
  font-size: 12px; color: #9c968a; margin-top: 4px; text-align: center;
}
.hs-rte .image-style-align-left, .hs-text.rte .image-style-align-left { float: left; margin-right: 14px; }
.hs-rte .image-style-align-right, .hs-text.rte .image-style-align-right { float: right; margin-left: 14px; }
.hs-rte .image-style-align-center, .hs-text.rte .image-style-align-center { margin-left: auto; margin-right: auto; }
.hs-rte .image-style-side, .hs-text.rte .image-style-side { float: right; max-width: 50%; margin-left: 14px; }

.hs-rte iframe, .hs-text.rte iframe, .hs-rich-preview iframe {
  width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px;
  background: #000; margin: 10px 0; display: block;
}

.hs-rte sub, .hs-rte sup, .hs-text.rte sub, .hs-text.rte sup, .tip.rte sub, .tip.rte sup {
  font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
}
.hs-rte sup, .hs-text.rte sup, .tip.rte sup { top: -.5em; }
.hs-rte sub, .hs-text.rte sub, .tip.rte sub { bottom: -.25em; }

.hs-rte mark, .hs-text.rte mark, .hs-rich-preview mark { background: #ffe08a; color: #1a1408; padding: 0 2px; border-radius: 2px; }
.hs-rte .marker-yellow, .hs-text.rte .marker-yellow { background: #ffe08a; color: #1a1408; }
.hs-rte .marker-green, .hs-text.rte .marker-green { background: #b6f0c4; color: #14200f; }
.hs-rte .marker-blue, .hs-text.rte .marker-blue { background: #b8dcff; color: #0d1826; }
.hs-rte .marker-pink, .hs-text.rte .marker-pink { background: #ffc8df; color: #2a0f1a; }
.hs-rte .marker-red, .hs-text.rte .marker-red { background: #ffbdb6; color: #2a0f0c; }
.hs-rte .pen-red, .hs-text.rte .pen-red { background: rgba(255, 123, 114, .25); }
.hs-rte .pen-green, .hs-text.rte .pen-green { background: rgba(125, 219, 164, .25); }
.hs-rte .pen-blue, .hs-text.rte .pen-blue { background: rgba(111, 183, 255, .25); }
.hs-rte .pen-yellow, .hs-text.rte .pen-yellow { background: rgba(242, 200, 121, .28); }
.hs-rte .pen-pink, .hs-text.rte .pen-pink { background: rgba(255, 160, 200, .25); }

.hs-rte .text-tiny, .hs-text.rte .text-tiny { font-size: .7em; }
.hs-rte .text-small, .hs-text.rte .text-small { font-size: .85em; }
.hs-rte .text-big, .hs-text.rte .text-big { font-size: 1.4em; }
.hs-rte .text-huge, .hs-text.rte .text-huge { font-size: 1.8em; }

/* Khung viewer: cuộn nội bộ, không phá layout modal. */
.hs-text.rte { white-space: normal; max-height: min(60vh, 560px); overflow: auto; }
.hs-box.popup .hs-text.rte { max-height: 50vh; }
.tip.rte { text-align: left; max-width: 340px; max-height: 45vh; overflow: auto; font-size: 13px; line-height: 1.55; }
.tip.rte img { max-height: 160px; }

@media (max-width: 600px) {
  .hs-rte, .hs-text.rte, .tip.rte, .hs-rich-preview { font-size: 14px; line-height: 1.6; }
  .hs-rte h2, .hs-text.rte h2 { font-size: 18px; }
  .hs-rte h3, .hs-text.rte h3 { font-size: 16px; }
  .hs-rte .image-style-align-left, .hs-rte .image-style-align-right,
  .hs-rte .image-style-side, .hs-text.rte .image-style-align-left,
  .hs-text.rte .image-style-align-right, .hs-text.rte .image-style-side {
    float: none; margin: 6px 0; max-width: 100%;
  }
  .hs-rte table, .hs-text.rte table { display: block; }
}