/* ===== LIVE PATCH: delay non-critical floating UI on public pages ===== */

html.lf-public-patch [data-lf-delay] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease !important;
}

body.lf-widgets-ready [data-lf-delay="widget"],
body.lf-social-proof-ready [data-lf-delay="social-proof"],
body.lf-newsletter-ready [data-lf-delay="newsletter"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* giảm rung/animation phụ không cần thiết ngay lúc đầu */
html.lf-public-patch .animate-bounce,
html.lf-public-patch .animate-pulse {
  animation-play-state: paused !important;
}

body.lf-widgets-ready .animate-bounce,
body.lf-social-proof-ready .animate-pulse,
body.lf-newsletter-ready .animate-pulse {
  animation-play-state: running !important;
}

/* nếu có popup nhỏ social proof ở góc màn hình, ưu tiên không làm đè click khi chưa hiện */
html.lf-public-patch [data-lf-delay="social-proof"] * {
  pointer-events: none !important;
}

body.lf-social-proof-ready [data-lf-delay="social-proof"] * {
  pointer-events: auto !important;
}

/* ===== DEALCHUAN PRODUCT BADGE COLORS ===== */

.dc-badge-hot,
.dc-badge-good,
.dc-badge-floor,
.dc-badge-super,
.dc-badge-shock,
.dc-badge-best {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  backdrop-filter: blur(8px);
}

.dc-badge-hot svg,
.dc-badge-good svg,
.dc-badge-floor svg,
.dc-badge-super svg,
.dc-badge-shock svg,
.dc-badge-best svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
}

/* Hot Deal - cam đỏ giống mẫu */
.dc-badge-hot {
  background: linear-gradient(135deg, #ff8a00, #ff3d00) !important;
  box-shadow: 0 8px 18px rgba(255, 77, 0, .28) !important;
}

/* Giá tốt - xanh dương */
.dc-badge-good {
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .24) !important;
}

/* Giá sàn - xanh lá */
.dc-badge-floor {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 8px 18px rgba(5, 150, 105, .24) !important;
}

/* Siêu giảm - tím */
.dc-badge-super {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 8px 18px rgba(109, 40, 217, .24) !important;
}

/* Deal sốc - hồng đỏ */
.dc-badge-shock {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  box-shadow: 0 8px 18px rgba(225, 29, 72, .25) !important;
}

/* Bán chạy - vàng */
.dc-badge-best {
  color: #1f2937 !important;
  background: linear-gradient(135deg, #facc15, #f59e0b) !important;
  box-shadow: 0 8px 18px rgba(245, 158, 11, .25) !important;
}

@media (max-width: 767.98px) {
  .dc-badge-hot,
  .dc-badge-good,
  .dc-badge-floor,
  .dc-badge-super,
  .dc-badge-shock,
  .dc-badge-best {
    backdrop-filter: none !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .14) !important;
  }

  .product-card-shadow,
  .product-card-shadow:hover {
    box-shadow: 0 1px 5px rgba(15, 23, 42, .08) !important;
  }
}

/* ===== MOBILE PRODUCT GRID: 2 columns like marketplace listing ===== */
@media (max-width: 767.98px) {
  html.lf-public-patch .lf-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow {
    min-width: 0 !important;
    border-radius: 14px !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow .rounded-t-2xl {
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow .p-4 {
    padding: 10px !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow h3 {
    min-height: 38px !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow .text-lg {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow .text-sm {
    font-size: 11px !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow .text-red-500.text-\[9px\] {
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
    row-gap: 2px !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow .text-red-500.text-\[9px\] > span {
    min-width: 0 !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow a {
    min-height: 38px !important;
    padding: 9px 8px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow a svg {
    width: 14px !important;
    height: 14px !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow [class*="dc-badge-"] {
    top: 8px !important;
    left: 8px !important;
    max-width: calc(100% - 16px) !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow [class*="dc-badge-"] svg {
    width: 12px !important;
    height: 12px !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow .absolute.top-\[42px\] {
    top: 34px !important;
    left: 8px !important;
    max-width: calc(100% - 16px) !important;
    padding: 3px 6px !important;
  }

  html.lf-public-patch .lf-product-grid > .product-card-shadow .absolute.bottom-2.right-2 {
    right: 6px !important;
    bottom: 6px !important;
    padding: 5px 7px !important;
    font-size: 0 !important;
  }
}

/* ===== PUBLIC PERFORMANCE GUARD: lighter paint without changing layout ===== */
html.lf-public-patch header[class*="backdrop-blur"] {
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

html.lf-public-patch .product-card-shadow,
html.lf-public-patch .product-card-shadow:hover {
  box-shadow: 0 2px 10px rgba(15, 23, 42, .08) !important;
}

html.lf-public-patch .product-card-shadow [class*="backdrop-blur"],
html.lf-public-patch [class*="dc-badge-"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.lf-public-patch .product-card-shadow [class*="transition-all"] {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform !important;
}

html.lf-public-patch [class*="blur-[120px]"] {
  filter: blur(48px) !important;
  opacity: .18 !important;
}

html.lf-public-patch [class*="blur-3xl"] {
  filter: blur(32px) !important;
  opacity: .12 !important;
}

@media (max-width: 767.98px) {
  html.lf-public-patch header[class*="backdrop-blur"],
  html.lf-public-patch [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.lf-public-patch [class*="blur-[120px]"],
  html.lf-public-patch [class*="blur-3xl"] {
    filter: none !important;
    opacity: .08 !important;
  }

  html.lf-public-patch .product-card-shadow,
  html.lf-public-patch .product-card-shadow:hover {
    box-shadow: 0 1px 6px rgba(15, 23, 42, .07) !important;
  }
}

/* ===== ADMIN MODAL PERFORMANCE ===== */
html.lf-admin-patch .backdrop-blur,
html.lf-admin-patch .backdrop-blur-sm,
html.lf-admin-patch .backdrop-blur-md,
html.lf-admin-patch .backdrop-blur-lg,
html.lf-admin-patch [class*="backdrop-blur"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.lf-admin-patch body.lf-admin-modal-open input,
html.lf-admin-patch body.lf-admin-modal-open textarea,
html.lf-admin-patch body.lf-admin-modal-open select,
html.lf-admin-patch body.lf-admin-modal-open button {
  transition-duration: 0s !important;
}

html.lf-admin-patch body.lf-admin-input-active *,
html.lf-admin-patch body.lf-admin-modal-open .animate-pulse,
html.lf-admin-patch body.lf-admin-modal-open .animate-bounce,
html.lf-admin-patch body.lf-admin-modal-open .animate-spin {
  animation-play-state: paused !important;
}

html.lf-admin-patch body.lf-admin-input-active .transition-all,
html.lf-admin-patch body.lf-admin-input-active [class*="duration-"] {
  transition-duration: 0s !important;
}

html.lf-admin-patch body.lf-admin-modal-open .shadow-2xl,
html.lf-admin-patch body.lf-admin-modal-open .shadow-xl,
html.lf-admin-patch body.lf-admin-modal-open [class*="shadow-"] {
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16) !important;
}

html.lf-admin-patch body.lf-admin-modal-open .fixed.inset-0 {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.lf-admin-patch body.lf-admin-input-active .fixed.inset-0 {
  transform: translateZ(0);
  contain: paint;
}

html.lf-admin-patch [data-lf-admin-hidden="public-partner-section"] {
  display: none !important;
}

/* ===== ADMIN QUICK MEDIA UPLOAD / INSERT ===== */
html.lf-admin-patch .lf-admin-media-tools {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 79, 48, .14);
  border-radius: 16px;
  background: #fff7f5;
}

html.lf-admin-patch .lf-admin-quick-media [data-lf-admin-media-original] {
  display: none !important;
}

html.lf-admin-patch .lf-admin-media-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html.lf-admin-patch .lf-admin-upload-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html.lf-admin-patch .lf-admin-upload-trigger,
html.lf-admin-patch .lf-admin-insert-media,
html.lf-admin-patch .lf-admin-copy-latest,
html.lf-admin-patch .lf-admin-copy-media {
  height: 38px;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

html.lf-admin-patch .lf-admin-upload-trigger,
html.lf-admin-patch .lf-admin-insert-media {
  background: #ff4f30;
  color: #fff;
  box-shadow: 0 10px 20px rgba(255, 79, 48, .18);
}

html.lf-admin-patch .lf-admin-copy-latest,
html.lf-admin-patch .lf-admin-copy-media {
  padding: 0 12px;
  background: #111827;
  color: #fff;
  white-space: nowrap;
}

html.lf-admin-patch .lf-admin-upload-trigger:hover,
html.lf-admin-patch .lf-admin-insert-media:hover,
html.lf-admin-patch .lf-admin-copy-latest:hover,
html.lf-admin-patch .lf-admin-copy-media:hover {
  transform: translateY(-1px);
}

html.lf-admin-patch .lf-admin-media-copyrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

html.lf-admin-patch .lf-admin-media-output,
html.lf-admin-patch .lf-admin-media-url,
html.lf-admin-patch .lf-admin-media-alt,
html.lf-admin-patch .lf-admin-media-link {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 0 12px;
  color: #111827;
  font-size: 13px;
  outline: none;
}

html.lf-admin-patch .lf-admin-media-output:focus,
html.lf-admin-patch .lf-admin-media-url:focus,
html.lf-admin-patch .lf-admin-media-alt:focus,
html.lf-admin-patch .lf-admin-media-link:focus {
  border-color: rgba(255, 79, 48, .55);
  box-shadow: 0 0 0 3px rgba(255, 79, 48, .1);
}

html.lf-admin-patch .lf-admin-media-status {
  min-height: 18px;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

html.lf-admin-patch .lf-admin-media-status[data-type="ok"] {
  color: #16a34a;
}

html.lf-admin-patch .lf-admin-media-status[data-type="error"] {
  color: #dc2626;
}

html.lf-admin-patch .lf-admin-uploaded-list {
  display: grid;
  gap: 10px;
}

html.lf-admin-patch .lf-admin-uploaded-card,
html.lf-admin-patch .lf-admin-card-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #fff;
}

html.lf-admin-patch .lf-admin-uploaded-card > img {
  display: block;
  width: 100%;
  max-height: 170px;
  object-fit: cover;
  border-radius: 12px;
}

html.lf-admin-patch .lf-admin-uploaded-card label,
html.lf-admin-patch .lf-admin-card-actions label,
html.lf-admin-patch .lf-admin-media-grid label {
  display: grid;
  gap: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

html.lf-admin-patch .lf-admin-media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

@media (max-width: 767.98px) {
  html.lf-admin-patch .lf-admin-media-copyrow {
    grid-template-columns: 1fr;
  }
}

/* ===== HOME BLOG CAROUSEL: manual prev/next controls ===== */
html.lf-public-patch .lf-home-blog-carousel {
  position: relative !important;
}

html.lf-public-patch .lf-home-blog-nav {
  position: absolute !important;
  top: 50% !important;
  z-index: 30 !important;
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #111827 !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .14) !important;
  transform: translateY(-50%) !important;
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

html.lf-public-patch .lf-home-blog-prev {
  left: -18px !important;
}

html.lf-public-patch .lf-home-blog-next {
  right: -18px !important;
}

html.lf-public-patch .lf-home-blog-nav:hover,
html.lf-public-patch .lf-home-blog-nav:focus-visible {
  color: #ff4d2d !important;
  border-color: rgba(255, 77, 45, .22) !important;
  box-shadow: 0 18px 42px rgba(255, 77, 45, .18) !important;
  transform: translateY(-50%) scale(1.04) !important;
  outline: none !important;
}

html.lf-public-patch .lf-home-blog-nav:active {
  transform: translateY(-50%) scale(.96) !important;
}

@media (max-width: 767.98px) {
  html.lf-public-patch .lf-home-blog-nav {
    width: 40px !important;
    height: 40px !important;
  }

  html.lf-public-patch .lf-home-blog-prev {
    left: 4px !important;
  }

  html.lf-public-patch .lf-home-blog-next {
    right: 4px !important;
  }
}

/* ===== BLOG TABLE OF CONTENTS: compact anchor list ===== */
html.lf-public-patch .lf-blog-toc {
  margin-bottom: 28px !important;
  padding: 10px 14px !important;
  border-left: 3px solid #ff4d2d !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
}

html.lf-public-patch .mb-12.p-6.bg-gray-50.border-l-4.border-shopee.rounded-r-2xl:not(.lf-blog-toc) {
  border-left: 3px solid #ff4d2d !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

html.lf-public-patch .lf-blog-toc::before,
html.lf-public-patch blockquote::before,
html.lf-public-patch .lf-accent-notice::before,
html.lf-public-patch [data-lf-delay="social-proof"]::before {
  content: none !important;
  display: none !important;
  pointer-events: none !important;
}

html.lf-public-patch .lf-blog-toc::after,
html.lf-public-patch blockquote::after,
html.lf-public-patch .lf-accent-notice::after,
html.lf-public-patch [data-lf-delay="social-proof"]::after {
  content: none !important;
  display: none !important;
  pointer-events: none !important;
}

html.lf-public-patch .lf-blog-toc .lf-blog-toc-head {
  margin-bottom: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

html.lf-public-patch .lf-blog-toc .lf-blog-toc-list-wrap {
  transition: none !important;
}

html.lf-public-patch .lf-blog-toc .lf-blog-toc-list {
  margin-top: 10px !important;
}

html.lf-public-patch .lf-blog-toc.lf-blog-toc-collapsed {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

html.lf-public-patch .lf-blog-toc.lf-blog-toc-collapsed .lf-blog-toc-list-wrap {
  display: none !important;
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

html.lf-public-patch .lf-blog-toc:not([data-lf-toc-open="1"]) .lf-blog-toc-list-wrap,
html.lf-public-patch .lf-blog-toc:not([data-lf-toc-open="1"]) .lf-blog-toc-list {
  display: none !important;
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

html.lf-public-patch .lf-blog-toc.lf-blog-toc-collapsed .lf-blog-toc-head {
  background: rgba(255, 77, 45, .045) !important;
}

html.lf-public-patch [id^="heading-"] {
  scroll-margin-top: 150px;
}

html.lf-public-patch blockquote,
html.lf-public-patch .lf-accent-notice,
html.lf-public-patch [data-lf-delay="social-proof"] {
  border-left: 3px solid #ff4d2d !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
}

html.lf-public-patch blockquote,
html.lf-public-patch .lf-accent-notice {
  padding: 2px 15px 2px 15px !important;
  background: rgba(255, 77, 45, .035) !important;
}

html.lf-public-patch [data-lf-delay="social-proof"] {
  border-left: 3px solid #ff4d2d !important;
  border-top: 1px solid rgba(255, 77, 45, .14) !important;
  border-right: 1px solid rgba(255, 77, 45, .14) !important;
  border-bottom: 1px solid rgba(255, 77, 45, .14) !important;
}

html.lf-public-patch [class*="bottom-20"][class*="left-4"] [class*="left-0"][class*="top-0"][class*="w-1"],
html.lf-public-patch [class*="bottom-6"][class*="left-6"] [class*="left-0"][class*="top-0"][class*="w-1"] {
  display: none !important;
}

html.lf-public-patch [class*="bottom-20"][class*="left-4"] > div,
html.lf-public-patch [class*="bottom-6"][class*="left-6"] > div {
  border-left: 3px solid #ff4d2d !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
}

html.lf-public-patch .lf-blog-toc::before,
html.lf-public-patch blockquote::before,
html.lf-public-patch .lf-accent-notice::before,
html.lf-public-patch [class*="bottom-20"][class*="left-4"] > div::before,
html.lf-public-patch [class*="bottom-6"][class*="left-6"] > div::before {
  content: none !important;
  display: none !important;
  pointer-events: none !important;
}

html.lf-public-patch [data-lf-delay="social-proof"]::before {
  content: none !important;
  display: none !important;
}

html.lf-public-patch [data-lf-delay="social-proof"]::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 767.98px) {
  html.lf-public-patch .lf-blog-toc {
    margin-bottom: 22px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }

  html.lf-public-patch .lf-blog-toc::before,
  html.lf-public-patch blockquote::before,
  html.lf-public-patch .lf-accent-notice::before {
    content: none !important;
    display: none !important;
  }

  html.lf-public-patch .lf-blog-toc::after,
  html.lf-public-patch blockquote::after,
  html.lf-public-patch .lf-accent-notice::after {
    content: none !important;
    display: none !important;
  }

  html.lf-public-patch .lf-blog-toc .lf-blog-toc-head {
    padding: 9px 10px !important;
    font-size: 15px !important;
  }

  html.lf-public-patch [id^="heading-"] {
    scroll-margin-top: 112px;
  }

  html.lf-public-patch blockquote,
  html.lf-public-patch .lf-accent-notice {
    padding: 14px 14px 14px 22px !important;
    border-radius: 14px !important;
  }
}

/* ===== EDITOR GUARD: never apply public accent UI inside Jodit/admin editors ===== */
html .jodit.lf-accent-notice,
html .jodit-container.lf-accent-notice,
html .jodit-workplace.lf-accent-notice,
html .jodit-wysiwyg.lf-accent-notice,
html .jodit-source.lf-accent-notice,
html .jodit-popup-container.lf-accent-notice,
html .jodit-popup.lf-accent-notice,
html .jodit-dialog.lf-accent-notice,
html .jodit-status-bar.lf-accent-notice,
html .jodit-ui-group.lf-accent-notice,
html .jodit-ui-button.lf-accent-notice,
html .jodit blockquote,
html .jodit-container blockquote,
html .jodit-workplace blockquote,
html .jodit-wysiwyg blockquote,
html .jodit-source blockquote,
html .jodit-popup-container blockquote,
html .jodit-popup blockquote,
html .jodit-dialog blockquote,
html .jodit-status-bar blockquote,
html .jodit-ui-group blockquote,
html .jodit-ui-button blockquote,
html [contenteditable="true"] blockquote,
html .jodit .lf-accent-notice,
html .jodit-container .lf-accent-notice,
html .jodit-workplace .lf-accent-notice,
html .jodit-wysiwyg .lf-accent-notice,
html .jodit-source .lf-accent-notice,
html .jodit-popup-container .lf-accent-notice,
html .jodit-popup .lf-accent-notice,
html .jodit-dialog .lf-accent-notice,
html .jodit-status-bar .lf-accent-notice,
html .jodit-ui-group .lf-accent-notice,
html .jodit-ui-button .lf-accent-notice,
html [contenteditable="true"] .lf-accent-notice {
  border-left: revert !important;
  border-radius: revert !important;
  background: revert !important;
  margin: revert !important;
  padding: revert !important;
  overflow: visible !important;
}

html .jodit.lf-accent-notice::before,
html .jodit-container.lf-accent-notice::before,
html .jodit-workplace.lf-accent-notice::before,
html .jodit-wysiwyg.lf-accent-notice::before,
html .jodit-source.lf-accent-notice::before,
html .jodit-popup-container.lf-accent-notice::before,
html .jodit-popup.lf-accent-notice::before,
html .jodit-dialog.lf-accent-notice::before,
html .jodit-status-bar.lf-accent-notice::before,
html .jodit-ui-group.lf-accent-notice::before,
html .jodit-ui-button.lf-accent-notice::before,
html .jodit blockquote::before,
html .jodit-container blockquote::before,
html .jodit-workplace blockquote::before,
html .jodit-wysiwyg blockquote::before,
html .jodit-source blockquote::before,
html .jodit-popup-container blockquote::before,
html .jodit-popup blockquote::before,
html .jodit-dialog blockquote::before,
html .jodit-status-bar blockquote::before,
html .jodit-ui-group blockquote::before,
html .jodit-ui-button blockquote::before,
html [contenteditable="true"] blockquote::before,
html .jodit .lf-accent-notice::before,
html .jodit-container .lf-accent-notice::before,
html .jodit-workplace .lf-accent-notice::before,
html .jodit-wysiwyg .lf-accent-notice::before,
html .jodit-source .lf-accent-notice::before,
html .jodit-popup-container .lf-accent-notice::before,
html .jodit-popup .lf-accent-notice::before,
html .jodit-dialog .lf-accent-notice::before,
html .jodit-status-bar .lf-accent-notice::before,
html .jodit-ui-group .lf-accent-notice::before,
html .jodit-ui-button .lf-accent-notice::before,
html [contenteditable="true"] .lf-accent-notice::before,
html .jodit.lf-accent-notice::after,
html .jodit-container.lf-accent-notice::after,
html .jodit-workplace.lf-accent-notice::after,
html .jodit-wysiwyg.lf-accent-notice::after,
html .jodit-source.lf-accent-notice::after,
html .jodit-popup-container.lf-accent-notice::after,
html .jodit-popup.lf-accent-notice::after,
html .jodit-dialog.lf-accent-notice::after,
html .jodit-status-bar.lf-accent-notice::after,
html .jodit-ui-group.lf-accent-notice::after,
html .jodit-ui-button.lf-accent-notice::after,
html .jodit blockquote::after,
html .jodit-container blockquote::after,
html .jodit-workplace blockquote::after,
html .jodit-wysiwyg blockquote::after,
html .jodit-source blockquote::after,
html .jodit-popup-container blockquote::after,
html .jodit-popup blockquote::after,
html .jodit-dialog blockquote::after,
html .jodit-status-bar blockquote::after,
html .jodit-ui-group blockquote::after,
html .jodit-ui-button blockquote::after,
html [contenteditable="true"] blockquote::after,
html .jodit .lf-accent-notice::after,
html .jodit-container .lf-accent-notice::after,
html .jodit-workplace .lf-accent-notice::after,
html .jodit-wysiwyg .lf-accent-notice::after,
html .jodit-source .lf-accent-notice::after,
html .jodit-popup-container .lf-accent-notice::after,
html .jodit-popup .lf-accent-notice::after,
html .jodit-dialog .lf-accent-notice::after,
html .jodit-status-bar .lf-accent-notice::after,
html .jodit-ui-group .lf-accent-notice::after,
html .jodit-ui-button .lf-accent-notice::after,
html [contenteditable="true"] .lf-accent-notice::after {
  content: none !important;
  display: none !important;
}

/* ===== BLOG IMAGE CAPTION FROM ALT/TITLE ===== */
html.lf-public-patch .prose .lf-image-caption-wrap,
html.lf-public-patch article .lf-image-caption-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  overflow: hidden !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

html.lf-public-patch .prose .lf-image-caption-wrap > img,
html.lf-public-patch article .lf-image-caption-wrap > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: none !important;
}

html.lf-public-patch .prose .lf-image-caption,
html.lf-public-patch article .lf-image-caption {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 9px 12px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 14px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

@media (max-width: 767.98px) {
  html.lf-public-patch .prose .lf-image-caption,
  html.lf-public-patch article .lf-image-caption {
    font-size: 13px !important;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 0 !important;
  }

  html.lf-public-patch .prose .lf-image-caption-wrap,
  html.lf-public-patch article .lf-image-caption-wrap {
    padding: 0 !important;
    border-radius: 14px !important;
  }

  html.lf-public-patch .prose .lf-image-caption-wrap > img,
  html.lf-public-patch article .lf-image-caption-wrap > img {
    border-radius: 14px 14px 0 0 !important;
  }
}

/* ===== BLOG CONTENT: keep inline formatting stable inside checklist/list items ===== */
html.lf-public-patch .prose ul {
  padding-left: 0 !important;
  list-style: none !important;
}

html.lf-public-patch .prose ul > li {
  display: block !important;
  position: relative !important;
  padding-left: 34px !important;
  text-align: left !important;
  gap: 0 !important;
}

html.lf-public-patch .prose ul > li::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 6px !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d2d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  margin: 0 !important;
  display: block !important;
}

html.lf-public-patch .prose p strong,
html.lf-public-patch .prose li strong,
html.lf-public-patch .prose blockquote strong {
  display: inline !important;
}

/* ===== PUBLIC: calm repeated CSS animations on the UX shell ===== */
html.lf-public-perf-mode [class*="animate-pulse"],
html.lf-public-perf-mode [class*="animate-bounce"],
html.lf-public-perf-mode [class*="animate-spin"] {
  animation: none !important;
}

html.lf-public-perf-mode {
  scroll-behavior: auto !important;
}

/* ===== ADMIN: update notice for stale SPA tabs ===== */
html.lf-admin-patch .lf-admin-update-notice {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  max-width: min(440px, calc(100vw - 32px)) !important;
  padding: 14px 14px 14px 16px !important;
  border: 1px solid rgba(238, 77, 45, .18) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .16) !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  backdrop-filter: blur(14px) !important;
}

html.lf-admin-patch .lf-admin-update-notice strong {
  display: block !important;
  font-weight: 900 !important;
}

html.lf-admin-patch .lf-admin-update-notice span {
  color: #64748b !important;
  font-weight: 600 !important;
}

html.lf-admin-patch .lf-admin-update-notice button {
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #ee4d2d !important;
  color: #fff !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(238, 77, 45, .24) !important;
}

@media (max-width: 560px) {
  html.lf-admin-patch .lf-admin-update-notice {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
}