/*
 * rich-content.css
 * ------------------------------------------------------------------
 * Single source of truth for rendering rich-text content (product
 * descriptions, post bodies) BOTH on the public site and inside the
 * Quill editor in Admin.
 *
 * Usage: add the `rich-content` class to the container that holds the
 * rich HTML. On the public site that's `.product-rich-description` /
 * `.news-article-body`. In Admin it's the Quill host div
 * (`#description_editor` / `#content_editor`), which Quill itself turns
 * into `.ql-container` — `.ql-editor` is created *inside* it, so a class
 * added in Blade markup on the host survives Quill's init and scopes
 * both the container and its `.ql-editor` child automatically. No JS
 * is required to apply this stylesheet.
 *
 * Optional modifier: `rc-headings-banner` turns h1-h6 into the blue
 * "section banner" treatment. Only add it to product descriptions —
 * NOT to post/news content, where every <h2> a writer uses would
 * otherwise become an uppercase blue bar.
 *
 * Deliberately NOT covered: admin/catalog/categories and
 * admin/catalog/brands description editors. Those fields render as
 * plain (strip_tags'd) text on the public site, so there is no rich
 * frontend surface to match — adding this class there would be
 * misleading, not helpful.
 */

.rich-content {
  /* ---- Palette (mirrors :root in resources/views/layouts/app.blade.php) ---- */
  --rc-primary: #0F2C59;
  --rc-secondary: #0066CC;
  --rc-text: #334155;
  --rc-text-strong: #0F172A;
  --rc-text-muted: #64748B;
  --rc-border: #E2E8F0;
  --rc-border-strong: #CBD5E1;
  --rc-surface-soft: #F8FAFC;
  --rc-tint: #F0F6FF;

  /* ---- Typography ---- */
  --rc-font: Arial, 'Plus Jakarta Sans', 'Quicksand', sans-serif;
  --rc-font-heading: 'Phudu', Arial, sans-serif;
  --rc-font-mono: 'SFMono-Regular', Menlo, Consolas, monospace;
  --rc-size: 16px;
  --rc-leading: 1.8;

  /* ---- Rhythm & shape ---- */
  /* Rollout: ship at 0 first (matches current live product pages exactly),
     bump to 20px (the value news already uses) in a follow-up deploy once
     screenshots confirm nothing else broke. See plan doc for rationale. */
  --rc-gap: 0px;
  --rc-radius: 12px;
  --rc-column: 1280px;
  --rc-editor-height: 560px;
}

/* =====================================================================
   1. CONTAINER
   ===================================================================== */

.rich-content {
  font-size: var(--rc-size);
  line-height: var(--rc-leading);
  color: var(--rc-text);
  font-family: var(--rc-font);
}
.rich-content * { font-family: inherit; }

.rich-content > *:first-child { margin-top: 0; }
.rich-content > *:last-child { margin-bottom: 0; }

/* =====================================================================
   2. BLOCK RHYTHM
   ===================================================================== */

.rich-content p:not([style*="font-size"]) { font-size: inherit !important; }
.rich-content p { margin: 0 0 var(--rc-gap); }

.rich-content ul,
.rich-content ol { margin: 0 0 var(--rc-gap); padding-left: 1.6em; }
.rich-content ul { list-style: disc outside; }
.rich-content ol { list-style: decimal outside; }
.rich-content ul ul { list-style: circle outside; }
.rich-content li { margin: 0 0 .4em; list-style: inherit; }
.rich-content li > ul,
.rich-content li > ol { margin: .4em 0 0; }

.rich-content blockquote {
  margin: var(--rc-gap) 0;
  padding: 4px 0 4px 16px;
  border-left: 4px solid var(--rc-border-strong);
  color: var(--rc-text-muted);
}
.rich-content hr {
  margin: calc(var(--rc-gap) * 1.5) 0;
  border: 0;
  border-top: 1px solid var(--rc-border);
}
.rich-content :is(code, pre, kbd, samp) { font-family: var(--rc-font-mono); }

/* Quill draws its own bullets/numbers via a CSS counter and hides the
   native marker (`li{list-style-type:none}` + `::before` in quill.snow.css).
   Neutralise that so the editor renders native markers identical to the
   public site. Safe: toolbar only registers ordered/bullet lists, no
   checklist format. */
.rich-content .ql-editor li::before { display: none !important; content: none !important; }
.rich-content .ql-editor :is(ol, ul) > li {
  list-style-type: inherit !important;
  padding-left: 0 !important;
}

/* =====================================================================
   3. LINKS
   ===================================================================== */

.rich-content a { color: var(--rc-secondary); text-decoration: underline; }

/* Quill's link-edit tooltip lives inside .ql-container (a `.rich-content`
   descendant) — opt it out of rich-content typography/colors. */
.rich-content .ql-tooltip { font-size: 13px !important; line-height: normal !important; }
.rich-content .ql-tooltip a {
  color: #06c !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* =====================================================================
   4. HEADINGS (opt-in via .rc-headings-banner — product descriptions only)
   ===================================================================== */

.rich-content :is(h1, h2, h3, h4, h5, h6, .mutohEcoTitle) {
  font-family: var(--rc-font-heading) !important;
}

.rc-headings-banner :is(.mutohEcoTitle, h1, h2, h3, h4, h5, h6, .highlight-section-title) {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--rc-primary) !important;
  margin: 30px 0 16px 0 !important;
  padding: 12px 18px !important;
  background: linear-gradient(90deg, var(--rc-tint) 0%, #E6F0FA 100%) !important;
  border-left: 5px solid var(--rc-secondary) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 10px 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.05) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Prevent double vertical bar (||) bug on inner child elements */
.rc-headings-banner :is(.mutohEcoTitle, .highlight-section-title, h1, h2, h3, h4, h5, h6) * {
  border: none !important;
  border-left: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =====================================================================
   5. TABLES
   ===================================================================== */

.rich-content table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 25px 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--rc-border-strong) !important;
  box-shadow: 0 4px 15px rgba(15, 44, 89, 0.04) !important;
  background: #FFFFFF !important;
}
.rich-content table span[style*="color"] { color: inherit !important; }

.rich-content table tr th,
.rich-content table thead tr td {
  background: linear-gradient(135deg, var(--rc-primary) 0%, var(--rc-secondary) 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid var(--rc-secondary) !important;
}
.rich-content table tr td {
  padding: 13px 18px !important;
  font-size: 14.5px !important;
  color: var(--rc-text) !important;
  border-bottom: 1px solid var(--rc-border) !important;
  border-right: 1px solid var(--rc-surface-soft) !important;
  line-height: 1.6 !important;
}
.rich-content table tr td:first-child,
.rich-content table tr th:first-child {
  font-weight: 700 !important;
  color: var(--rc-text-strong) !important;
  width: 30% !important;
  background: var(--rc-surface-soft) !important;
}
.rich-content table tr:nth-child(even) td:not(:first-child) { background: var(--rc-surface-soft) !important; }
.rich-content table tr:nth-child(odd) td:not(:first-child) { background: #FFFFFF !important; }
.rich-content table tr:hover td { background: var(--rc-tint) !important; }

/* Responsive: stack table columns on small screens. Restricted away from
   the editor so the admin preview always shows the desktop table layout
   (the media query is keyed to *viewport* width, which in the narrow
   admin card would otherwise fire at the wrong times / mislead authors). */
@media (max-width: 768px) {
  .rich-content:not(.ql-container) table,
  .rich-content:not(.ql-container) tbody,
  .rich-content:not(.ql-container) tr,
  .rich-content:not(.ql-container) td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .rich-content:not(.ql-container) td {
    margin-bottom: 15px !important;
    padding: 15px !important;
  }
  .rich-content:not(.ql-container) td:empty,
  .rich-content:not(.ql-container) td[width="0"],
  .rich-content:not(.ql-container) td[style*="width: 0px"],
  .rich-content:not(.ql-container) td[style*="width:0px"] {
    display: none !important;
  }
  .rich-content:not(.ql-container) img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* =====================================================================
   6. IMAGES
   ===================================================================== */

.rich-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--rc-radius);
  margin: 15px 0;
}
/* Un-float legacy inline float styles so text doesn't get squeezed — but only
   for images the admin image toolbar hasn't explicitly aligned (rc-img-left /
   rc-img-right / rc-img-center). Previously this rule force-centered EVERY
   floated image unconditionally, so choosing "Trái"/"Phải" alignment in Admin
   had no visible effect on the public site. */
.rich-content img[style*="float: right"]:not([class*="rc-img-"]),
.rich-content img[style*="float:right"]:not([class*="rc-img-"]),
.rich-content img[style*="float: left"]:not([class*="rc-img-"]),
.rich-content img[style*="float:left"]:not([class*="rc-img-"]) {
  float: none !important;
  display: block !important;
  margin: 25px auto !important;
  max-width: 100% !important;
  height: auto !important;
  clear: both !important;
}

.rich-content img.rc-img-left {
  float: left; display: inline; margin: 5px 15px 15px 0;
}
.rich-content img.rc-img-right {
  float: right; display: inline; margin: 5px 0 15px 15px;
}
.rich-content img.rc-img-center {
  float: none; display: block; margin: 15px auto;
}

/* =====================================================================
   7. QUILL FORMAT CLASSES — ported so toolbar output actually renders
      on the public site (previously these existed only in quill.snow.css,
      which is admin-only, so align/indent/video/size had zero effect
      once saved HTML reached the frontend).
   ===================================================================== */

.rich-content .ql-align-center { text-align: center; }
.rich-content .ql-align-right { text-align: right; }
.rich-content .ql-align-justify { text-align: justify; }

.rich-content .ql-video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.rich-content .ql-video.ql-align-center { margin: var(--rc-gap) auto; }
.rich-content .ql-video.ql-align-right { margin: var(--rc-gap) 0 var(--rc-gap) auto; }

/* quill.core.css (size styles) is not loaded anywhere in this project,
   so .ql-size-* has never had any effect on either side. Give it one. */
.rich-content .ql-size-small { font-size: .75em; }
.rich-content .ql-size-large { font-size: 1.5em; }
.rich-content .ql-size-huge { font-size: 2.5em; }

/* Indent levels — mirrors quill.snow.css, unprefixed so it also applies
   on the public site. */
.rich-content .ql-indent-1 { padding-left: 3em; }
.rich-content li.ql-indent-1 { padding-left: 4.5em; }
.rich-content .ql-indent-2 { padding-left: 6em; }
.rich-content li.ql-indent-2 { padding-left: 7.5em; }
.rich-content .ql-indent-3 { padding-left: 9em; }
.rich-content li.ql-indent-3 { padding-left: 10.5em; }
.rich-content .ql-indent-4 { padding-left: 12em; }
.rich-content li.ql-indent-4 { padding-left: 13.5em; }
.rich-content .ql-indent-5 { padding-left: 15em; }
.rich-content li.ql-indent-5 { padding-left: 16.5em; }
.rich-content .ql-indent-6 { padding-left: 18em; }
.rich-content li.ql-indent-6 { padding-left: 19.5em; }
.rich-content .ql-indent-7 { padding-left: 21em; }
.rich-content li.ql-indent-7 { padding-left: 22.5em; }
.rich-content .ql-indent-8 { padding-left: 24em; }
.rich-content li.ql-indent-8 { padding-left: 25.5em; }
.rich-content .ql-indent-9 { padding-left: 27em; }
.rich-content li.ql-indent-9 { padding-left: 28.5em; }

/* Custom font picker — moved here from _form-assets.blade.php so a font
   chosen in Admin actually has an effect on the public site too. */
.rich-content .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.rich-content .ql-font-monospace { font-family: var(--rc-font-mono); }
.rich-content .ql-font-arial { font-family: Arial, sans-serif; }
.rich-content .ql-font-georgia { font-family: Georgia, serif; }
.rich-content .ql-font-impact { font-family: Impact, charcoal, sans-serif; }
.rich-content .ql-font-tahoma { font-family: Tahoma, Geneva, sans-serif; }
.rich-content .ql-font-times-new-roman { font-family: 'Times New Roman', Times, serif; }
.rich-content .ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.rich-content .ql-font-quicksand { font-family: 'Quicksand', sans-serif; }
.rich-content .ql-font-roboto { font-family: 'Roboto', sans-serif; }

/* =====================================================================
   8. LEGACY JOOMLA WIDGETS (tabs / accordions / grid layout / galleries)
      Scoped under .rich-content — previously these were unscoped global
      selectors in product-detail.blade.php and leaked onto every page.
   ===================================================================== */

.rich-content :is(.rl_tabs) {
  margin: 30px 0;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
  background: #FFF;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.rich-content .rl_tabs .nav-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--rc-surface-soft);
  border-bottom: 1px solid var(--rc-border);
  overflow-x: auto;
}
.rich-content .rl_tabs .nav-tabs li { margin: 0; }
.rich-content .rl_tabs .nav-tabs li a {
  display: block;
  padding: 16px 28px;
  color: #475569;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 15px;
  border-right: 1px solid var(--rc-border);
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.rich-content .rl_tabs .nav-tabs li.active a {
  background: #FFF;
  color: var(--rc-secondary);
  border-bottom: 3px solid var(--rc-secondary);
  font-weight: 900;
}
.rich-content .rl_tabs .tab-content { padding: 30px; }
.rich-content .rl_tabs .tab-pane { animation: rc-fade-in 0.3s ease; }

.rich-content :is(.rl_sliders, .nn_sliders) {
  margin: 25px 0;
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius);
  overflow: hidden;
  background: #FFF;
}
.rich-content :is(.rl_sliders-group, .nn_sliders-group) { border-bottom: 1px solid var(--rc-border); }
.rich-content :is(.rl_sliders-group, .nn_sliders-group):last-child { border-bottom: none; }
.rich-content :is(.rl_sliders-toggle, .accordion-toggle) {
  display: block;
  padding: 18px 24px;
  background: var(--rc-surface-soft);
  color: var(--rc-primary);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
}
.rich-content :is(.rl_sliders-toggle, .accordion-toggle):hover {
  background: #F1F5F9;
  color: var(--rc-secondary);
}
/* Chevron drawn with borders, not a FontAwesome glyph — FontAwesome is
   not loaded in Admin, so the original `content:"\f078"` rule rendered
   as a tofu box there. */
.rich-content :is(.rl_sliders-toggle, .accordion-toggle)::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #94A3B8;
  border-bottom: 2px solid #94A3B8;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease, border-color .2s ease;
}
.rich-content :is(.rl_sliders-group, .nn_sliders-group).active :is(.rl_sliders-toggle, .accordion-toggle)::after {
  transform: translateY(-25%) rotate(-135deg);
  border-color: var(--rc-secondary);
}
.rich-content :is(.rl_sliders-body, .accordion-body) {
  padding: 24px;
  border-top: 1px solid var(--rc-border);
  background: #FFF;
  line-height: 1.7;
}

/* Force tab panes / accordion bodies open inside the editor — the JS that
   drives show/hide on the public site does not run in Admin, so without
   this every pane would render stacked and overlapping. */
.rich-content.ql-container :is(.rl_tabs, .nn_tabs) .tab-pane,
.rich-content.ql-container :is(.rl_sliders, .nn_sliders) :is(.rl_sliders-body, .accordion-body) {
  display: block !important;
  animation: none !important;
}
.rich-content.ql-container :is(.rl_tabs, .nn_tabs)::before,
.rich-content.ql-container :is(.rl_sliders, .nn_sliders)::before {
  content: "Trên web: chỉ hiện 1 mục tại một thời điểm";
  display: block;
  padding: 6px 12px;
  background: #E0F2FE;
  color: #075985;
  font: 600 11px/1.5 var(--rc-font);
  letter-spacing: .3px;
}

.rich-content .grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin: 20px 0;
}
.rich-content .grid-layout > div {
  background: var(--rc-surface-soft);
  border-radius: var(--rc-radius);
  padding: 20px;
  border: 1px solid var(--rc-border);
}
/* Flatten the legacy grid to a single-column block layout inside real content. */
.rich-content :not(.ql-editor) .grid-layout { display: block !important; margin: 20px 0 !important; }
.rich-content :not(.ql-editor) .grid-layout > div {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
  margin-bottom: 25px !important;
  box-shadow: none !important;
}

.rich-content .vsig {
  margin: 30px 0;
  background: var(--rc-surface-soft);
  border: 1px solid var(--rc-border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  display: block;
}
.rich-content .vsig_top {
  margin: 0 auto 20px auto;
  text-align: center;
  background: #fff;
  border-radius: var(--rc-radius);
  border: 1px solid var(--rc-border);
  padding: 15px;
  max-width: 500px;
  width: 100%;
  display: block;
}
.rich-content .vsig_top img { max-height: 400px; width: auto !important; object-fit: contain; display: inline-block; }
.rich-content .vsig_cont { display: inline-block; margin: 6px; }
.rich-content .vsig_thumb { display: block; }
.rich-content .vsig_thumb a {
  display: block;
  width: 80px;
  height: 80px;
  border: 2px solid var(--rc-border);
  border-radius: 10px;
  overflow: hidden;
  padding: 4px;
  background: #fff;
  transition: all 0.2s ease;
}
.rich-content .vsig_thumb a:hover { border-color: var(--rc-secondary); transform: translateY(-2px); }
.rich-content .vsig_thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; border-radius: 6px; }

@keyframes rc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =====================================================================
   9. HIDE LEGACY JOOMLA CLUTTER (public site) / DIM + LABEL (editor)
   ===================================================================== */

.rich-content :is(
  .vsig, [class*="vsig"], .mutohHeading, .page-header, .ls-wp-container,
  .bt-social-share, .jsn-article-toolbar, .article-info, .article_separator, #fb-root
) { display: none !important; }

/* Editor: reveal these blocks instead of hiding them, so an author can
   still find and delete them, but mark them clearly as dead weight that
   will never appear on the public site. Specificity here is deliberately
   3-deep (.rich-content .ql-editor :is(...)) so it wins over rule 9's
   base hide regardless of source order. */
.rich-content .ql-editor :is(
  .vsig, [class*="vsig"], .mutohHeading, .page-header, .ls-wp-container,
  .bt-social-share, .jsn-article-toolbar, .article-info, .article_separator
) {
  display: block !important;
  position: relative !important;
  margin: 34px 0 22px !important;
  padding: 26px 14px 14px !important;
  border-radius: 8px !important;
  outline: 2px dashed #F59E0B !important;
  outline-offset: 4px !important;
  background: repeating-linear-gradient(45deg, #FFFBEB 0 8px, #FEF3C7 8px 16px) !important;
}
/* Dim the CONTENT, not the wrapper: opacity creates its own stacking
   context, so a label on a dimmed wrapper would be unreadably faint too.
   Dimming only the children keeps the "Ẩn ngoài web" badge crisp. */
.rich-content .ql-editor :is(.vsig, [class*="vsig"], .mutohHeading, .page-header, .ls-wp-container) > * {
  opacity: .45 !important;
  filter: grayscale(.5) !important;
}
.rich-content .ql-editor :is(
  .vsig, [class*="vsig"], .mutohHeading, .page-header, .ls-wp-container,
  .bt-social-share, .jsn-article-toolbar, .article-info, .article_separator
)::before {
  content: "Ẩn ngoài web";
  position: absolute;
  top: -11px;
  left: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 4px;
  background: #B45309;
  color: #FFF;
  font: 700 10.5px/1.5 var(--rc-font);
  letter-spacing: .4px;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* =====================================================================
   10. EDITOR-ONLY CHROME
   ===================================================================== */

.rich-content.ql-container {
  /* Beats admin-assets/css/styles.css `.ql-container { height:300px !important }`
     — (0,2,0)+!important always wins against (0,1,0)+!important by
     specificity, independent of source order. */
  height: var(--rc-editor-height) !important;
  background: #FFFFFF !important;
  color-scheme: light;
}
.rich-content .ql-editor {
  padding: 28px clamp(14px, 4%, 40px) !important;
  background: #FFFFFF !important;
  color: var(--rc-text) !important;
  /* Quill defaults to pre-wrap; legacy HTML and the code-view
     pretty-printer both contain literal newlines between tags, which
     pre-wrap renders as visible blank lines. The public site uses the
     browser default (normal), which collapses them — match it. */
  white-space: normal !important;
}
.rich-content .ql-editor :is(pre, .ql-code-block-container) { white-space: pre-wrap !important; }

/* "Phóng to" (fullscreen) becomes an exact-width preview: the real
   1280px content column with the same vertical padding used on the
   public product page, framed by a page-like gutter. */
#editor_wrapper.quill-fullscreen .rich-content .ql-editor {
  max-width: var(--rc-column);
  margin: 0 auto;
  padding: 40px 0 !important;
}
#editor_wrapper.quill-fullscreen .rich-content.ql-container {
  background: #F1F5F9 !important;
}