/* ============================================================
   ornate.css — fantasy-game story detail (cinematic + filigree)
   Scoped under .sdx so it never touches the rest of the site.
   Fonts (Cinzel, Cormorant) được enqueue trong functions.php.
   ============================================================ */

.sdx {
  --orn: rgba(226,230,246,.62);     /* filigree line */
  --orn-soft: rgba(226,230,246,.26);
  --orn-glow: color-mix(in oklab, var(--accent) 70%, #8fbcff);
  --ink: #f2f0ea;
  --ink-2: rgba(238,236,230,.78);
  position: relative;
  font-family: var(--ui);
}
[data-theme="light"] .sdx { --orn: #d8b75e; --orn-soft: rgba(216,183,94,.34); --orn-glow: #f0d488; --ink: #f4f2ec; --ink-2: rgba(244,242,236,.84); }

/* tag chính + badge top đọc nhiều nhất (trong khung thông tin truyện) */
.ornf__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 13px; }
.ornf__type, .ornf__top { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; line-height: 1.1; }
.ornf__type--edit { color: #8fe7c6; background: rgba(46,160,128,.15); border: 1px solid rgba(127,227,192,.42); }
.ornf__type--convert { color: #f1d196; background: rgba(214,170,84,.15); border: 1px solid rgba(240,207,138,.42); }
.ornf__top { color: #ffe1ec; background: color-mix(in oklab, var(--accent) 26%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent); text-shadow: 0 0 10px color-mix(in oklab, var(--accent) 65%, transparent); }
.ornf__top svg { stroke-width: 2.2; }

/* nút theo dõi (trong cụm CTA trang truyện) */
.orn-btn--follow .orn-btn__flw-on { display: none;  }
.orn-btn--follow.is-on .orn-btn__flw-on { display: inline; }
.orn-btn--follow.is-on .orn-btn__flw-off { display: none; }
.orn-btn--follow.is-on { background: color-mix(in oklab, var(--accent) 30%, transparent) !important; }

/* ---------- CINEMATIC SCENE ---------- */
.sdx__scene {
  position: relative;
  min-height: calc(100vh - 66px);
  display: flex;
  flex-direction: column;
  padding: 0 0 54px;
  overflow: hidden;
  isolation: isolate;
}
.sdx__bg { position: absolute; inset: 0; z-index: -2; }
.sdx__bg-grad { position: absolute; inset: 0; }
.sdx__bg-grad::after {                    /* moody depth + drifting nebula */
  content: ''; position: absolute; inset: -10%;
  background:
    radial-gradient(60% 55% at 26% 18%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 70%),
    radial-gradient(70% 60% at 82% 90%, rgba(60,90,160,.32), transparent 72%);
  mix-blend-mode: screen; opacity: .9;
  animation: sdxdrift 26s ease-in-out infinite alternate;
}
@keyframes sdxdrift { to { transform: translate3d(2.5%, -2%, 0) scale(1.05); } }
.sdx__vignette {                          /* letterbox + edge darkening */
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,6,14,.55), transparent 16% 70%, rgba(8,6,14,.95)),
    radial-gradient(120% 80% at 50% 40%, transparent 52%, rgba(6,4,12,.72));
}
.sdx__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- ORNAMENTAL TOP NAV ---------- */
.ornnav { display: flex; align-items: center; justify-content: center; gap: 18px;
  max-width: 980px; margin: 0 auto; padding: 30px 22px 8px; width: 100%; }
.ornnav__line { flex: 1; height: 1px; position: relative;
  background: linear-gradient(var(--dir, 90deg), transparent, var(--orn)); }
.ornnav__line--l { --dir: 90deg; }
.ornnav__line--r { --dir: 270deg; }
.ornnav__line::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px;
  transform: translateY(-50%) rotate(45deg); background: var(--orn); }
.ornnav__line--l::after { right: -2px; }
.ornnav__line--r::after { left: -2px; }
.ornnav__items { display: flex; align-items: center; gap: 6px; }
.ornnav button { font-family: 'Lora', serif; font-size: 13.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); background: none; border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: 8px; transition: color .18s, text-shadow .18s; }
.ornnav button:hover { color: #fff; }
.ornnav button[data-on="1"] { color: #fff; text-shadow: 0 0 16px var(--orn-glow); }
.ornnav__med { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; color: var(--orn); position: relative; }
.ornnav__med b { font-family: 'Lora', serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink); position: relative; z-index: 1;
  text-shadow: 0 0 14px var(--orn-glow); }
.ornnav__med svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- HERO GRID ---------- */
.sdx__hero { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: 40px;
  align-items: center; flex: 1; padding: 14px 0 6px; }
.sdx__back { position: absolute; top: 18px; left: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: .04em; color: var(--ink-2); background: rgba(12,10,20,.4);
  border: 1px solid var(--orn-soft); border-radius: 999px; padding: 7px 14px 7px 10px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: color .15s, border-color .15s; }
.sdx__back:hover { color: #fff; border-color: var(--orn); }

/* ---------- DIAMOND COVER ---------- */
.sdx__left { display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; }
.diamond {
  position: relative;
  width: min(46vh, 480px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
 filter:
  drop-shadow(0 0 2px rgba(255, 235, 180, .22));
}
.diamond__grad { position: absolute; inset: 8%; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.diamond image-slot { position: absolute; inset: 8%; width: 84%; height: 84%; }
.diamond__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--orn);
  /* glow hologram: viền nét, quầng sáng bám sát, không nhòe */
  filter:
    drop-shadow(0 0 0.6px rgba(255,255,255,.95))
    drop-shadow(0 0 1.5px var(--orn-glow))
    drop-shadow(0 0 3px color-mix(in oklab, var(--orn-glow) 55%, transparent))
    drop-shadow(0 1px 1px rgba(0,0,0,.45));
  pointer-events: none;
}
.diamond__frame .d-glow { color: var(--orn-glow); }
.diamond__badge { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  font-family: 'Lora', serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); background: rgba(10,8,18,.7); border: 1px solid var(--orn-soft);
  padding: 5px 14px; border-radius: 999px; white-space: nowrap; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* small ornate stat sigils (left rail) */
.sdx__sigils { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.sigil { position: relative; width: 66px; min-height: 86px; display: grid;
  grid-template-rows: 24px 16px 1fr; align-items: center; justify-items: center; gap: 5px;
  padding: 12px 5px 11px; color: var(--ink);
  background: linear-gradient(180deg, rgba(20,16,32,.55), rgba(12,10,20,.4)); }
.sigil__frame { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--orn); pointer-events: none; }
.sigil__ic { color: var(--orn-glow); display: grid; place-items: center; align-self: center; }
.sigil__v { font-family: 'Lora', serif; font-size: 14px; font-weight: 600; line-height: 1; align-self: center; }
.sigil__l { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  align-self: start; min-height: 2.3em; display: flex; align-items: flex-start; justify-content: center;
  text-align: center; line-height: 1.3; }

/* ---------- RIGHT PANEL (ornate frame) ---------- */
.sdx__right { display: flex; flex-direction: column; align-items: flex-end; gap: 26px; }
.orn-frame { position: relative; width: 100%; padding: 42px 48px 40px;
  background: linear-gradient(180deg, rgba(14,11,24,.94), rgba(10,8,18,.96));
  border: 1px solid var(--orn); }
.orn-frame::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--orn-soft); pointer-events: none; }
.ocorner { position: absolute; width: 46px; height: 46px; color: var(--orn); pointer-events: none; z-index: 1; }
.ocorner--tl { top: -1px; left: -1px; }
.ocorner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.ocorner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.ocorner--br { bottom: -1px; right: -1px; transform: scale(-1); }
.ornf__alt { font-family: 'Lora', serif; font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-2); text-align: center; }
.ornf__title { font-family: 'Lora', serif; font-weight: 600; font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.12; text-align: center; color: #fff; margin: 12px 0 6px; letter-spacing: .01em;
  text-shadow: 0 0 26px color-mix(in oklab, var(--orn-glow) 55%, transparent); text-wrap: balance; }
.ornf__rule { display: flex; justify-content: center; margin: 6px 0 18px; color: var(--orn); }
.ornf__rulesvg { display: block; }
.diamond__frame .d-soft { color: var(--orn); }
.ornf__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px;
  font-size: 13px; color: var(--ink-2); margin-bottom: 18px; }
.ornf__author { text-align: center; font-size: 14px; color: var(--ink-2); margin: 2px 0 8px; }
.ornf__author b { color: var(--ink); font-weight: 600; }
.ornf__meta--tags { gap: 8px 9px; margin-top: 12px; }
.ornf__vols { font-size: 12.5px; color: var(--ink-2); }
.ornf__meta .ornf__author b { color: var(--ink); font-weight: 600; }
.ornf__status { display: inline-flex; align-items: center; gap: 7px; font-family: 'Lora', serif;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.ornf__status i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.ornf__status.is-run { color: #6ad6a0; }
.ornf__status.is-done { color: var(--orn-glow); }
.ornf__desc { font-family: 'Lora', 'Noto Serif', serif; font-size: 18.5px; line-height: 1.66;
  color: var(--ink-2); text-align: center; max-width: 60ch; margin: 0 auto; text-wrap: pretty; }
.ornf__desc-inner > p { margin: 0 0 .7em; }
.ornf__desc-inner > p:last-child { margin-bottom: 0; }
.ornf__desc.is-clamped:not(.is-expanded) .ornf__desc-inner { max-height: 7.6em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 56%, transparent); mask-image: linear-gradient(#000 56%, transparent); }
.ornf__desc.is-expanded .ornf__desc-inner { max-height: 16em; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 8px; -webkit-mask-image: none; mask-image: none; text-align: left; }
.ornf__desc.is-expanded .ornf__desc-inner::-webkit-scrollbar { width: 6px; }
.ornf__more { display: none; margin: 12px auto 0; font-family: 'Lora', serif; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orn-glow); background: none; cursor: pointer;
  border: 0; padding: 6px 4px; align-items: center; gap: 7px; }
.ornf__desc.is-clamped .ornf__more { display: inline-flex; }
.ornf__more::after { content: '⌄'; font-size: 14px; transition: transform .2s; }
.ornf__desc.is-expanded .ornf__more::after { transform: rotate(180deg); }
.ornf__genres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.ornf__genres span, .ornf__genres a { font-family: 'Lora', serif; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--orn-soft); padding: 5px 12px; border-radius: 2px; text-decoration: none; transition: color .15s, border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.ornf__genres a { cursor: pointer; }
.ornf__genres a:hover { color: #fff; border-color: var(--orn-glow); background: color-mix(in oklab, var(--accent) 26%, transparent);
  transform: translateY(-1px); box-shadow: 0 6px 18px -8px var(--orn-glow), inset 0 0 12px color-mix(in oklab, var(--orn-glow) 22%, transparent); }
.ornf__genres a:active { transform: translateY(0) scale(.96); }
.ornf__stat { text-align: center; margin-top: 22px; font-family: 'Lora', serif; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ornf__stat b { color: var(--orn-glow); font-weight: 700; font-size: 17px; margin-left: 6px;
  text-shadow: 0 0 16px color-mix(in oklab, var(--orn-glow) 60%, transparent); }

/* ---------- GLOWING BUTTON ---------- */
.sdx__cta { display: flex; gap: 16px; align-items: center; justify-content: center; width: 100%; }
.sdx__cta {
  display: flex;
  gap: 16px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.sdx__cta .orn-btn {
  flex: 1 1 0;
  min-width: 0;
}
.orn-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.18;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;

  cursor: pointer;
  border: 0;
  white-space: nowrap;

  min-width: 0;
  max-width: 100%;

  padding: 17px 52px;
  background: #63274D;
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;

  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 60%, #fff),
    0 0 28px color-mix(in oklab, var(--accent) 65%, transparent),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -10px 22px rgba(0,0,0,.34);

  transition: transform .12s, box-shadow .2s, filter .2s;
}
.orn-btn::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.55), transparent 55%); }
.orn-btn::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); animation: ornsheen 4.5s ease-in-out 1s infinite; }
@keyframes ornsheen { 0%, 18% { left: -50%; } 40%, 100% { left: 150%; } }
.orn-btn:hover { transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 70%, #fff),
              0 0 40px color-mix(in oklab, var(--accent) 80%, transparent),
              inset 0 1px 0 rgba(255,255,255,.6), inset 0 -10px 22px rgba(0,0,0,.34); }
.orn-btn:active { transform: translateY(0) scale(.985); }
.orn-btn--ghost { background: rgba(14,11,24,.5); color: var(--ink);
  box-shadow: 0 0 0 1px var(--orn-soft), inset 0 0 16px rgba(0,0,0,.3); }
.orn-btn--ghost::before, .orn-btn--ghost::after { display: none; }
.orn-btn--ghost:hover { box-shadow: 0 0 0 1px var(--orn), inset 0 0 16px rgba(0,0,0,.3); filter: none; color: #fff; }

/* ---------- BELOW THE FOLD (TOC + comments) ---------- */
.sdx__more { position: relative; z-index: 1; padding-top: 30px; }
.sdx__more .sec__title { font-family: 'Lora', serif; letter-spacing: .04em; }
.ornsep { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--orn);
  max-width: 720px; margin: 6px auto 30px; opacity: .9; }
.ornsep__line { flex: 1; height: 1px; background: linear-gradient(var(--dir,90deg), transparent, var(--orn-soft)); }

/* ============================================================
   ORNATE TABLE OF CONTENTS + COMMENTS (below the fold)
   ============================================================ */
.sdx__more .sec { margin-bottom: 42px; }
.sdx__more .sec__head { margin-bottom: 18px; }
.sdx__more .sec__title { font-family: 'Lora', serif; color: var(--text); letter-spacing: .05em; font-size: 22px; font-weight: 600; }
.sdx__more .sec__icon { background: rgba(10,8,18,.4); border: 1px solid var(--orn-soft); color: var(--orn-glow);
  box-shadow: inset 0 0 12px color-mix(in oklab, var(--accent) 22%, transparent); }
.sdx__more .toc__count { font-family: 'Lora', serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

/* world / volume blocks */
.sdx__more .toc2 { margin-top: 4px; }
.sdx__more .toc2__vol { font-family: 'Lora', serif; letter-spacing: .02em; }
.sdx__more .toc2__vol[data-on="1"] { box-shadow: 0 0 26px -12px color-mix(in oklab, var(--accent) 70%, transparent); }
.sdx__more .toc2__rail { border-color: var(--toc-line); }
.sdx__more .toc2__ix { font-family: 'Lora', serif; color: var(--toc-gold);
  box-shadow: inset 0 0 12px color-mix(in oklab, var(--toc-gold) 24%, transparent), 0 0 10px -5px var(--toc-gold); }
.sdx__more .toc2__ch-t { font-family: 'Lora', 'Noto Serif', serif; font-size: 16.5px; }
.sdx__more .toc2__ch:hover { color: var(--toc-gold); }
.sdx .newtag { color: var(--accent-ink, #fff); background: var(--accent);
  box-shadow: 0 0 12px -3px color-mix(in oklab, var(--accent) 60%, transparent); font-family: 'Lora', serif; letter-spacing: .08em; }

/* comments */
.sdx__more .composer { background: linear-gradient(180deg, rgba(24,18,42,.5), rgba(13,10,22,.6));
  border: 1px solid var(--orn-soft); border-radius: 8px; }
.sdx__more .composer textarea { background: rgba(8,6,16,.45); border-color: var(--orn-soft); }
.sdx__more .composer textarea:focus { border-color: var(--orn); }
.sdx__more .cmtlist { gap: 2px; }
.sdx__more .cmt { padding: 14px 14px; border-bottom: 1px solid var(--orn-soft); border-radius: 0; }
.sdx__more .cmt:hover { background: rgba(255,255,255,.022); }
.sdx__more .cmt__name { font-weight: 600; }
.sdx__more .emptybox { background: var(--toc-glass); border: 1px solid var(--toc-line); color: var(--text-3); }

/* Đánh giá + bình luận: đồng bộ tông gấm/nhũ vàng với mục lục */
.sdx__more .review-form { background: var(--toc-glass); border: 1px solid var(--toc-line); border-radius: var(--r); }
.sdx__more .review-form textarea,
.sdx__more .ttc-rv-name { background: var(--toc-head); border-color: var(--toc-line); color: var(--text); }
.sdx__more .review-form textarea:focus,
.sdx__more .ttc-rv-name:focus { border-color: var(--toc-gold); }
.sdx__more .review { border-bottom: 1px solid var(--toc-line-soft); }
.sdx__more .review__avg b { color: var(--toc-gold); }
.sdx__more .review__t, .sdx__more .composer__hint { color: var(--text-3); }
.sdx__more .composer { background: var(--toc-glass); border: 1px solid var(--toc-line); }
.sdx__more .composer textarea { background: var(--toc-head); border-color: var(--toc-line); }
.sdx__more .composer textarea:focus { border-color: var(--toc-gold); }
.sdx__more .cmt { border-bottom: 1px solid var(--toc-line-soft); }
.sdx__more .pcpanel__quote, .sdx__more .composer__replybar { border-color: var(--toc-line); }
.sdx__more .cmt-thread + .cmt-thread { border-top-color: var(--toc-line-soft); }
.sdx__more .cmt-children { border-left-color: var(--toc-line); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 920px) {
  .sdx__hero { grid-template-columns: 1fr; gap: 30px; padding-top: 8px; justify-items: center; }
  .sdx__right { align-items: center; }
  .orn-frame { padding: 34px 26px 30px; }
  .diamond { width: min(66vw, 380px); }
}
@media (max-width: 560px) {
  .ornnav { gap: 10px; padding-top: 56px; }
  .ornnav__items { gap: 0; }
  .ornnav button { padding: 7px 9px; font-size: 11px; letter-spacing: .06em; }
  .ornf__desc { font-size: 17px; }

  .sdx__cta {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .sdx__cta .orn-btn {
    width: auto;
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 8px;
    font-size: clamp(10px, 3.05vw, 13px);
    letter-spacing: .055em;
    line-height: 1.15;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   WordPress-specific tweaks (links-as-buttons, real cover img)
   ============================================================ */
.ornnav__items a { font-family: 'Lora', serif; font-size: 13.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding: 8px 16px;
  border-radius: 8px; transition: color .18s, text-shadow .18s; }
.ornnav__items a:hover { color: #fff; }
.ornnav__items a[data-on="1"] { color: #fff; text-shadow: 0 0 16px var(--orn-glow); }
/* real featured image inside diamond cover */
.diamond__img { position: absolute; inset: 8%; background-size: cover; background-position: center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* cover veil when a real featured image is used as card cover */
.cover__veil-img { position: absolute; inset: 0; background: var(--cover-veil); z-index: 0; }


/* ============================================================
   MOBILE RESPONSIVE PATCH — ORNATE STORY DETAIL
   ============================================================ */

@media (max-width: 760px) {
  .sdx__scene {
    min-height: auto;
    padding-bottom: 34px;
  }

  .sdx__back {
    top: 12px;
    left: 12px;
    padding: 6px 11px 6px 9px;
    font-size: 11.5px;
  }

  .ornnav {
    gap: 8px;
    padding: 54px 10px 8px;
  }

  .ornnav__items {
    min-width: 0;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
  }

  .ornnav__items a,
  .ornnav button {
    padding: 6px 8px;
    font-size: 11px;
    letter-spacing: .055em;
    white-space: nowrap;
  }

  .ornnav__med {
    width: 36px;
    height: 36px;
  }

  .ornnav__med b {
    font-size: 9.5px;
  }

  .sdx__hero {
    gap: 22px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .diamond {
    width: min(78vw, 340px);
  }

  .diamond__badge {
    max-width: 74vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sdx__sigils {
    gap: 8px;
  }

  .sigil {
    width: 60px;
    min-height: 80px;
    padding: 8px 5px;
  }

  .orn-frame {
    padding: 28px 18px 24px;
  }

  .ornf__alt {
    font-size: 10px;
    letter-spacing: .18em;
  }

  .ornf__title {
    font-size: clamp(25px, 9vw, 34px);
  }

  .ornf__desc {
    font-size: 16px;
    line-height: 1.62;
  }

  .ornf__genres span,
  .ornf__genres a {
    font-size: 10px;
    padding: 5px 9px;
  }

  .sdx__cta {
    gap: 10px;
  }

  .orn-btn {
    padding: 14px 14px;
    font-size: clamp(11px, 3.2vw, 13px);
    letter-spacing: .08em;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .ornnav__line,
  .ornnav__med {
    display: none;
  }

  .ornnav {
    justify-content: center;
  }

  .ornnav__items {
    flex: 0 1 auto;
  }

  .ornnav__items a {
    padding-left: 7px;
    padding-right: 7px;
  }

  .sigil {
    width: 54px;
  }

  .orn-frame {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ornnav mobile: 1 hàng, không chồng chữ — bỏ đường kẻ, cho cuộn ngang nếu chật */
@media (max-width: 640px) {
  .ornnav { flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ornnav::-webkit-scrollbar { display: none; }
  .ornnav__line { display: none; }
  .ornnav__items { flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 2px; min-width: 0; }
  .ornnav__items a, .ornnav button { flex: 0 0 auto; white-space: nowrap; line-height: 1; }
  .ornnav__med { display: grid; flex: 0 0 auto; align-self: center; }
}



/* Story like button */
.orn-btn--like{gap:7px;}
.orn-btn--like b{font-family:var(--font-ui);font-size:12px;font-weight:800;line-height:1;min-width:1.2em;text-align:center;}
.orn-btn--like .orn-btn__like-on{display:none;}
.orn-btn--like.is-on{background:linear-gradient(135deg,#e66aa2,color-mix(in oklab,var(--accent) 58%,#000));border-color:transparent;color:#fff;box-shadow:0 12px 28px color-mix(in oklab,#e66aa2 24%,transparent);}
.orn-btn--like.is-on .orn-btn__like-on{display:inline;}
.orn-btn--like.is-on .orn-btn__like-off{display:none;}
.orn-btn--like[data-busy="1"]{opacity:.68;cursor:wait;}
.sigil--like .sigil__ic{color:#e66aa2;}
.scard__stat--likes svg{color:#e66aa2;}

/* ============================================================
   ORNATE — reading progress card on default story detail layout
   ============================================================ */
.orn-progress{
  width:100%;
  position:relative;
  padding:22px 24px 24px;
  border:1px solid var(--orn-soft);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(14,11,24,.82),rgba(10,8,18,.9));
  box-shadow:0 18px 44px -28px rgba(0,0,0,.86),0 0 26px -16px var(--orn-glow),inset 0 0 0 1px rgba(255,255,255,.035);
  overflow:hidden;
}
.orn-progress::before{
  content:'';position:absolute;inset:7px;border:1px solid color-mix(in oklab,var(--orn-soft) 72%,transparent);border-radius:12px;pointer-events:none;
}
.orn-progress::after{
  content:'';position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--orn-glow),transparent);opacity:.7;
}
.orn-progress__title{
  position:relative;z-index:1;text-align:center;margin-bottom:16px;
  font-family:'Lora',serif;font-size:15px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);text-shadow:0 0 16px color-mix(in oklab,var(--orn-glow) 62%,transparent);
}
.orn-progress__body{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:20px;}
.orn-progress__ring{
  position:relative;flex:0 0 112px;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--orn-glow) calc(var(--p) * 1%),color-mix(in oklab,var(--accent) 82%,#ff8cc0) 0 calc(var(--p) * 1%),rgba(226,230,246,.17) 0);
  filter:drop-shadow(0 0 18px color-mix(in oklab,var(--orn-glow) 34%,transparent));
}
.orn-progress__ring::before{
  content:'';position:absolute;inset:9px;border-radius:50%;
  background:linear-gradient(180deg,rgba(14,11,24,.96),rgba(10,8,18,.98));
  box-shadow:inset 0 0 28px color-mix(in oklab,var(--orn-glow) 16%,transparent),0 0 0 1px var(--orn-soft);
}
.orn-progress__ring span{
  position:relative;z-index:1;font-family:'Lora',serif;font-size:30px;font-weight:700;line-height:1;color:#fff;
  text-shadow:0 0 18px color-mix(in oklab,var(--orn-glow) 62%,transparent);
}
.orn-progress__info{min-width:0;display:flex;flex-direction:column;gap:4px;font-family:'Lora',serif;}
.orn-progress__info em{font-style:normal;font-size:13px;letter-spacing:.05em;color:var(--ink-2);}
.orn-progress__info b{font-size:21px;line-height:1.16;color:var(--ink);font-weight:700;}
.orn-progress__info span{font-size:16px;line-height:1.25;color:color-mix(in oklab,var(--ink) 78%,var(--orn-glow));}
.orn-progress__info small{font-size:13px;color:var(--ink-2);}
.orn-progress__btn{
  position:relative;z-index:1;margin:18px auto 0;min-height:46px;width:min(100%,360px);display:flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid color-mix(in oklab,var(--orn-glow) 58%,transparent);
  color:#fff;text-decoration:none;font-family:'Lora',serif;font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(120deg,color-mix(in oklab,var(--accent) 50%,rgba(25,8,31,.8)),color-mix(in oklab,var(--orn-glow) 34%,rgba(12,8,22,.78)));
  box-shadow:0 0 24px -10px var(--orn-glow),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .15s,filter .18s,box-shadow .18s;
}
.orn-progress__btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 0 34px -10px var(--orn-glow),inset 0 1px 0 rgba(255,255,255,.3);}
.orn-progress__saved{position:relative;z-index:1;margin-top:12px;text-align:center;color:var(--ink-2);font-family:'Lora',serif;font-size:13px;letter-spacing:.03em;}
[data-theme="light"] .orn-progress{background:linear-gradient(180deg,rgba(255,248,238,.88),rgba(255,232,243,.9));box-shadow:0 18px 40px -28px rgba(116,56,89,.42),0 0 26px -16px var(--orn-glow);}
[data-theme="light"] .orn-progress__ring::before{background:linear-gradient(180deg,#fffaf1,#ffeaf4);}
[data-theme="light"] .orn-progress__ring span{color:#6f3158;text-shadow:0 0 14px rgba(255,255,255,.9);}
[data-theme="light"] .orn-progress__btn{color:#5f294d;background:linear-gradient(120deg,#fff3e0,#ffd9eb);}
@media (max-width:920px){.orn-progress{max-width:640px;margin:0 auto}.orn-progress__body{justify-content:center}}
@media (max-width:560px){.orn-progress{padding:20px 16px 22px}.orn-progress__body{gap:15px}.orn-progress__ring{width:98px;height:98px;flex-basis:98px}.orn-progress__ring span{font-size:26px}.orn-progress__info b{font-size:19px}.orn-progress__info span{font-size:14px}.orn-progress__btn{min-height:44px;font-size:14px}}
@media (max-width:390px){.orn-progress__body{flex-direction:column;text-align:center}.orn-progress__ring{width:106px;height:106px;flex-basis:106px}}

/* ============================================================
   ORNATE — cover/progress symmetry polish
   ============================================================ */
@media (min-width: 921px) {
  .sdx__hero {
    align-items: stretch;
    row-gap: 22px;
  }
  .sdx__left,
  .sdx__right {
    min-height: 100%;
    align-self: stretch;
  }
  .sdx__left {
    justify-content: stretch;
    align-items: stretch;
  }
  .sdx__right {
    align-items: stretch;
  }
  .sdx__cover-progress {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .sdx__cover-progress .diamond {
    width: min(38vh, 420px, 100%);
    flex: 0 1 auto;
  }
  .sdx__cover-progress .orn-progress {
    flex: 0 0 auto;
  }
  .sdx__right .orn-frame {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .sdx__cta--wide,
  .sdx__sigils--wide {
    grid-column: 1 / -1;
  }
  .sdx__cta--wide {
    max-width: 920px;
    justify-self: center;
    margin: 4px auto 0;
  }
  .sdx__sigils--wide {
    margin: 2px auto 0;
  }
}

.sdx__cover-progress {
  width: 100%;
}
.sdx__cover-progress .orn-progress {
  width: min(100%, 430px);
  margin-inline: auto;
}
.sdx__cta--wide {
  justify-content: center;
}
.sdx__cta--wide .orn-btn {
  flex: 0 1 210px;
}
.sdx__sigils--wide {
  justify-content: center;
}

@media (max-width: 920px) {
  .sdx__cover-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .sdx__cta--wide,
  .sdx__sigils--wide {
    width: 100%;
  }
}

/* ============================================================
   ORNATE — cover/progress/action polish v2
   ============================================================ */
@media (min-width: 921px) {
  .sdx__hero {
    grid-template-columns: minmax(360px, 5.4fr) minmax(0, 6fr);
  }
  .sdx__cover-progress {
    height: 100%;
    min-height: clamp(620px, 72vh, 760px);
    justify-content: stretch;
  }
  .sdx__cover-progress .diamond {
    flex: 2 1 0;
    width: min(100%, 540px, 56vh);
    max-height: none;
    min-height: 0;
  }
  .sdx__cover-progress .orn-progress {
    flex: 1 1 0;
    width: min(100%, 480px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .sdx__right .orn-frame {
    min-height: clamp(620px, 72vh, 760px);
  }
}

.orn-progress,
.sdx__sigils--wide {
  border-color: var(--orn);
  background: linear-gradient(180deg, rgba(14,11,24,.94), rgba(10,8,18,.96));
  box-shadow: 0 18px 44px -28px rgba(0,0,0,.86), 0 0 28px -18px var(--orn-glow);
}
.orn-progress::before,
.sdx__sigils--wide::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid var(--orn-soft);
  pointer-events: none;
}
.sdx__sigils--wide {
  position: relative;
  width: min(100%, 920px);
  padding: 18px 20px;
  border: 1px solid var(--orn);
  background: linear-gradient(180deg, rgba(14,11,24,.94), rgba(10,8,18,.96));
}
.sdx__sigils--wide .sigil {
  width: 78px;
  min-height: 88px;
}

.sdx__cta--compact {
  gap: 14px;
  max-width: 360px;
  justify-self: center;
  margin-top: 0;
}
.sdx__cta--compact .orn-btn--icon {
  flex: 0 0 74px;
  width: 74px;
  min-height: 54px;
  padding: 0;
  border-radius: 999px;
  gap: 0;
}
.orn-btn--icon > svg {
  width: 21px;
  height: 21px;
}
.orn-btn--icon .orn-btn__like-on,
.orn-btn--icon .orn-btn__like-off,
.orn-btn--icon .orn-btn__flw-on,
.orn-btn--icon .orn-btn__flw-off {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.orn-btn--icon b {
  position: absolute;
  right: -8px;
  top: -8px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  background: color-mix(in oklab, var(--orn-glow) 72%, #2c1025);
  color: #fff;
  box-shadow: 0 0 14px -4px var(--orn-glow), 0 0 0 1px rgba(255,255,255,.28);
}
.orn-btn--follow.is-on,
.orn-btn--like.is-on {
  color: #fff;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--orn-glow) 80%, #fff),
    0 0 34px color-mix(in oklab, var(--orn-glow) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -10px 22px rgba(0,0,0,.34);
}
[data-theme="light"] .orn-progress,
[data-theme="light"] .sdx__sigils--wide {
  background: linear-gradient(180deg, rgba(255,248,238,.92), rgba(255,232,243,.94));
  box-shadow: 0 18px 40px -28px rgba(116,56,89,.42), 0 0 26px -16px var(--orn-glow);
}

@media (max-width: 920px) {
  .sdx__cover-progress .diamond {
    width: min(92vw, 470px);
  }
  .sdx__sigils--wide {
    width: 100%;
    padding: 16px 14px;
  }
  .sdx__sigils--wide .sigil {
    width: 72px;
  }
  .sdx__cta--compact {
    margin-inline: auto;
  }
}
@media (max-width: 520px) {
  .sdx__cover-progress .diamond {
    width: min(96vw, 390px);
  }
  .sdx__sigils--wide {
    gap: 10px;
    justify-content: center;
  }
  .sdx__sigils--wide .sigil {
    width: calc(33.333% - 8px);
    min-width: 88px;
  }
  .sdx__cta--compact .orn-btn--icon {
    flex-basis: 64px;
    width: 64px;
    min-height: 50px;
  }
}

/* ORNATE — tối giản box Tiến độ đọc: chỉ còn vòng %, số chương và nút */
.orn-progress--minimal{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:22px 22px 24px;
  text-align:center;
}
.orn-progress--minimal .orn-progress__ring{
  width:clamp(108px, 11vw, 142px);
  height:clamp(108px, 11vw, 142px);
  flex:0 0 clamp(108px, 11vw, 142px);
}
.orn-progress--minimal .orn-progress__ring::before{inset:10px;}
.orn-progress--minimal .orn-progress__ring span{
  font-size:clamp(28px, 3vw, 38px);
}
.orn-progress__chapter{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:104px;
  padding:6px 16px;
  border:1px solid color-mix(in oklab,var(--orn-soft) 82%,transparent);
  border-radius:999px;
  font-family:'Lora',serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink);
  background:color-mix(in oklab,var(--surface, #130b1d) 72%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.orn-progress--minimal .orn-progress__btn{
  margin-top:2px;
  width:min(100%, 300px);
}
@media (min-width:921px){
  .sdx__cover-progress .orn-progress--minimal{
    flex:1 1 0;
  }
}
@media (max-width:560px){
  .orn-progress--minimal{padding:20px 16px 22px;gap:12px;}
  .orn-progress--minimal .orn-progress__ring{width:108px;height:108px;flex-basis:108px;}
  .orn-progress__chapter{font-size:15px;min-width:96px;}
}
[data-theme="light"] .orn-progress__chapter{
  color:#6f3158;
  background:rgba(255,255,255,.48);
  border-color:rgba(153,78,121,.24);
}

/* ============================================================
   ORNATE — cover + stats + animated progress refinement
   ============================================================ */
@keyframes orn-progress-breathe {
  0%,100% { filter: drop-shadow(0 0 16px color-mix(in oklab,var(--orn-glow) 30%,transparent)); transform: translateY(0) scale(1); }
  50% { filter: drop-shadow(0 0 30px color-mix(in oklab,var(--orn-glow) 62%,transparent)); transform: translateY(-2px) scale(1.018); }
}
@keyframes orn-progress-orbit {
  to { transform: rotate(360deg); }
}
@keyframes orn-progress-shine {
  0%,100% { opacity:.22; transform: rotate(0deg) scale(.96); }
  50% { opacity:.55; transform: rotate(180deg) scale(1.04); }
}

@media (min-width:921px){
  .sdx__hero{
    grid-template-columns:minmax(420px, .82fr) minmax(0, 1fr);
    gap:clamp(34px, 5vw, 70px);
    align-items:start;
  }
  .sdx__left,.sdx__right{align-self:start;min-height:0;}
  .sdx__left{align-items:center;justify-content:flex-start;}
  .sdx__right .orn-frame{height:auto;min-height:0;justify-content:flex-start;}
  .sdx__cover-progress{
    min-height:0;
    height:auto;
    justify-content:flex-start;
    gap:16px;
    width:min(100%, 560px);
    margin-inline:auto;
  }
  .sdx__cover-progress .diamond{
    flex:0 0 auto;
    width:min(100%, 560px, 61vh);
    margin-inline:auto;
  }
}

/* Thông số nằm ngay dưới bìa, dạng cụm gọn thay vì một thanh dài */
.sdx__left .sdx__sigils--wide{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  width:min(100%, 520px);
  margin:0 auto;
  padding:12px;
  border:0;
  border-radius:18px;
  background:transparent;
  box-shadow:none;
}
.sdx__left .sdx__sigils--wide::before{display:none;}
.sdx__left .sdx__sigils--wide .sigil{
  width:auto;
  min-width:0;
  min-height:74px;
  padding:8px 5px;
}
.sdx__left .sdx__sigils--wide .sigil__ic svg{width:16px;height:16px;}
.sdx__left .sdx__sigils--wide .sigil__v{font-size:16px;}
.sdx__left .sdx__sigils--wide .sigil__l{font-size:10.5px;}

/* Bỏ hộp chứa tiến độ đọc, chỉ giữ vòng % + xx/xxx + button, có hiệu ứng thường và hover */
.orn-progress--minimal{
  width:min(100%, 430px);
  margin:2px auto 0;
  padding:4px 10px 0;
  border:0 !important;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
  gap:12px;
}
.orn-progress--minimal::before,
.orn-progress--minimal::after{display:none !important;}
.orn-progress--minimal .orn-progress__ring{
  width:clamp(116px, 11.5vw, 154px);
  height:clamp(116px, 11.5vw, 154px);
  flex-basis:clamp(116px, 11.5vw, 154px);
  isolation:isolate;
  animation:orn-progress-breathe 3.6s ease-in-out infinite;
  transition:transform .25s ease, filter .25s ease;
}
.orn-progress--minimal:hover .orn-progress__ring{
  transform:translateY(-4px) scale(1.045);
  filter:drop-shadow(0 0 34px color-mix(in oklab,var(--orn-glow) 78%,transparent));
}
.orn-progress--minimal .orn-progress__ring::after{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:
    conic-gradient(from 0deg, transparent 0 18%, color-mix(in oklab,var(--orn-glow) 64%,transparent) 24%, transparent 31% 62%, color-mix(in oklab,var(--accent) 50%,transparent) 70%, transparent 78% 100%);
  z-index:-1;
  opacity:.36;
  filter:blur(.4px);
  animation:orn-progress-orbit 8s linear infinite, orn-progress-shine 3.6s ease-in-out infinite;
}
.orn-progress--minimal .orn-progress__ring::before{
  inset:10px;
  box-shadow:
    inset 0 0 30px color-mix(in oklab,var(--orn-glow) 18%,transparent),
    0 0 0 1px color-mix(in oklab,var(--orn-soft) 86%,transparent),
    0 0 22px -10px var(--orn-glow);
}
.orn-progress--minimal .orn-progress__ring span{
  font-size:clamp(30px, 3.1vw, 42px);
}
.orn-progress__chapter{
  min-width:116px;
  padding:7px 18px;
  box-shadow:0 0 22px -14px var(--orn-glow), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.orn-progress--minimal:hover .orn-progress__chapter{
  transform:translateY(-1px);
  border-color:color-mix(in oklab,var(--orn-glow) 56%,transparent);
  box-shadow:0 0 26px -12px var(--orn-glow), inset 0 1px 0 rgba(255,255,255,.12);
}
.orn-progress--minimal .orn-progress__btn{
  margin-top:0;
  width:min(100%, 270px);
  min-height:44px;
}
.sdx__left .sdx__cta--compact{
  margin:4px auto 0;
  max-width:260px;
}

[data-theme="light"] .orn-progress--minimal{background:transparent !important;box-shadow:none !important;}
[data-theme="light"] .orn-progress--minimal .orn-progress__ring::before{background:linear-gradient(180deg,#fffaf1,#ffeaf4);}
[data-theme="light"] .sdx__left .sdx__sigils--wide{background:transparent;box-shadow:none;}

@media (max-width:920px){
  .sdx__cover-progress{gap:15px;}
  .sdx__cover-progress .diamond{width:min(94vw, 500px);}
  .sdx__left .sdx__sigils--wide{width:min(100%, 520px);}
}
@media (max-width:520px){
  .sdx__left .sdx__sigils--wide{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px 2px;}
  .sdx__left .sdx__sigils--wide .sigil{min-width:0;width:auto;min-height:70px;}
  .sdx__left .sdx__sigils--wide .sigil__v{font-size:14px;}
  .sdx__left .sdx__sigils--wide .sigil__l{font-size:9.5px;}
  .orn-progress--minimal{padding-top:0;}
  .orn-progress--minimal .orn-progress__ring{width:116px;height:116px;flex-basis:116px;}
  .orn-progress--minimal .orn-progress__ring span{font-size:30px;}
  .orn-progress--minimal .orn-progress__btn{width:min(100%, 250px);}
}

/* ============================================================
   ORNATE — storybook hero like reference image
   ============================================================ */
.sdx__scene::before,
.sdx__scene::after{
  content:'';
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.55;
  filter:blur(.2px) drop-shadow(0 0 20px color-mix(in oklab,var(--orn-glow) 40%,transparent));
}
.sdx__scene::before{
  left:0;bottom:0;width:34vw;height:42vw;max-width:520px;max-height:620px;
  background:
    radial-gradient(circle at 18% 84%, color-mix(in oklab,var(--orn-glow) 46%,transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 70%, color-mix(in oklab,var(--orn) 54%,transparent) 0 1.5px, transparent 3px),
    radial-gradient(70% 48% at 20% 82%, color-mix(in oklab,var(--orn-glow) 24%,transparent), transparent 62%);
}
.sdx__scene::after{
  right:0;bottom:0;width:30vw;height:38vw;max-width:480px;max-height:560px;
  background:
    radial-gradient(circle at 75% 78%, color-mix(in oklab,var(--orn-glow) 48%,transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 58%, color-mix(in oklab,var(--orn) 46%,transparent) 0 1.5px, transparent 3px),
    radial-gradient(70% 48% at 86% 82%, color-mix(in oklab,var(--accent) 24%,transparent), transparent 62%);
}
.sdx__hero.wrap{
  position:relative;
  z-index:1;
  max-width:min(1680px, calc(100vw - 48px));
}
@media (min-width: 921px){
  .sdx__hero{
    grid-template-columns:minmax(470px, .92fr) minmax(560px, 1.08fr) !important;
    gap:clamp(48px, 5vw, 86px) !important;
    align-items:stretch !important;
  }
  .sdx__left,.sdx__right{align-self:stretch !important;}
}
.sdx__cover-progress{
  position:relative;
  width:min(100%, 610px) !important;
  min-height:auto !important;
  height:auto !important;
  margin-inline:auto;
  padding:clamp(22px, 2.4vw, 34px) clamp(22px, 2.3vw, 34px) 28px;
  border:1px solid color-mix(in oklab,var(--orn) 58%,transparent);
  border-radius:18px;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in oklab,var(--orn-glow) 13%,transparent), transparent 58%),
    linear-gradient(180deg, rgba(20,9,30,.76), rgba(9,6,18,.90));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab,var(--orn-soft) 46%,transparent),
    inset 0 0 42px color-mix(in oklab,var(--orn-glow) 9%,transparent),
    0 0 42px -20px var(--orn-glow),
    0 28px 70px -48px #000;
  overflow:visible;
}
.sdx__cover-progress::before,
.sdx__cover-progress::after{
  content:'';
  position:absolute;
  inset:8px;
  border:1px solid color-mix(in oklab,var(--orn-soft) 55%,transparent);
  border-radius:13px;
  pointer-events:none;
}
.sdx__cover-progress::after{
  inset:auto auto -16px 50%;
  width:78px;height:28px;
  transform:translateX(-50%);
  border:0;
  background:radial-gradient(closest-side, color-mix(in oklab,var(--orn-glow) 54%,transparent), transparent 70%);
  filter:blur(8px);
}
.sdx__cover-progress .diamond{
  width:min(88%, 440px) !important;
  margin:-8px auto 4px;
  filter:drop-shadow(0 0 20px color-mix(in oklab,var(--orn-glow) 55%,transparent)) drop-shadow(0 22px 38px rgba(0,0,0,.58));
}
.diamond__badge{
  bottom:3.6% !important;
  max-width:min(86%, 360px);
  padding:8px 18px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, color-mix(in oklab,var(--accent) 42%,rgba(24,7,28,.8)), rgba(22,8,29,.88)) !important;
  border:1px solid color-mix(in oklab,var(--orn-glow) 72%,transparent) !important;
  box-shadow:0 0 18px -5px var(--orn-glow), inset 0 1px 0 rgba(255,255,255,.22) !important;
  color:#fff !important;
  text-shadow:0 0 10px var(--orn-glow);
}
.sdx__sigils--wide.sdx__sigils--storybook,
.sdx__left .sdx__sigils--wide.sdx__sigils--storybook{
  width:min(100%, 500px) !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  margin:4px auto 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
}
.sdx__sigils--storybook::before{display:none !important;}
.sdx__sigils--storybook .sigil{
  position:relative;
  width:auto !important;
  min-width:0 !important;
  min-height:86px !important;
  padding:10px 8px 9px !important;
  border:1px solid color-mix(in oklab,var(--orn-soft) 64%,transparent);
  border-radius:0;
  background:
    linear-gradient(180deg, color-mix(in oklab,var(--accent) 16%,rgba(255,255,255,.035)), rgba(12,6,19,.28));
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--orn) 20%,transparent), 0 0 20px -16px var(--orn-glow);
}
.sdx__sigils--storybook .sigil__frame{display:block;opacity:.46;}
.sdx__sigils--storybook .sigil__ic{color:var(--orn-glow);filter:drop-shadow(0 0 8px color-mix(in oklab,var(--orn-glow) 55%,transparent));}
.sdx__sigils--storybook .sigil__v{font-size:clamp(18px, 1.7vw, 23px) !important;color:#fff;text-shadow:0 0 12px var(--orn-glow);}
.sdx__sigils--storybook .sigil__l{font-size:11px !important;letter-spacing:.08em;}
.sdx__sigils--storybook .sigil--progress{
  overflow:visible;
  min-height:86px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:grid !important;
  place-items:center !important;
  align-self:center;
  z-index:2;
}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring{
  width:clamp(112px, 9.4vw, 146px) !important;
  height:clamp(112px, 9.4vw, 146px) !important;
  flex-basis:clamp(112px, 9.4vw, 146px) !important;
  margin:-24px auto -18px;
}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring span{
  font-size:clamp(28px, 2.7vw, 40px) !important;
}
.orn-progress__line{
  width:min(100%, 390px);
  margin:14px auto 0;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  color:var(--ink);
  font-family:'Lora',serif;
  font-size:17px;
  font-weight:700;
  text-shadow:0 0 12px color-mix(in oklab,var(--orn-glow) 42%,transparent);
}
.orn-progress__line svg{color:var(--orn-glow);filter:drop-shadow(0 0 8px var(--orn-glow));}
.orn-progress__line span{
  position:relative;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in oklab,var(--orn-soft) 26%,rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--orn-soft) 40%,transparent), 0 0 14px -10px var(--orn-glow);
}
.orn-progress__line span i{
  display:block;
  width:calc(var(--p) * 1%);
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, color-mix(in oklab,var(--orn-glow) 72%,#fff), color-mix(in oklab,var(--accent) 72%,#fff));
  box-shadow:0 0 12px var(--orn-glow);
}
.orn-progress__btn--wide{
  width:min(100%, 330px) !important;
  margin:16px auto 0 !important;
  min-height:50px !important;
  font-size:16px !important;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,.17), transparent 55%),
    linear-gradient(120deg, color-mix(in oklab,var(--accent) 54%,rgba(19,6,27,.82)), color-mix(in oklab,var(--orn-glow) 45%,rgba(21,6,28,.82))) !important;
  box-shadow:0 0 24px -7px var(--orn-glow), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -15px 28px rgba(0,0,0,.22) !important;
}
.sdx__left .sdx__cta--compact{
  margin:14px auto 0 !important;
}
.sdx__right .orn-frame{
  min-height:100%;
  border-color:color-mix(in oklab,var(--orn) 62%,transparent);
  background:
    radial-gradient(70% 45% at 50% 0%, color-mix(in oklab,var(--orn-glow) 9%,transparent), transparent 64%),
    linear-gradient(180deg, rgba(13,9,24,.87), rgba(8,7,17,.94));
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--orn-soft) 42%,transparent),0 0 42px -20px var(--orn-glow),0 28px 70px -48px #000;
}
.ornf__title{
  font-size:clamp(34px, 3.9vw, 62px) !important;
  line-height:1.12 !important;
  text-shadow:0 0 18px rgba(255,255,255,.36), 0 0 32px var(--orn-glow);
}
.ornf__author{font-size:16px !important;}
.ornf__status{
  padding:8px 34px !important;
  border-radius:999px;
  border:1px solid color-mix(in oklab,var(--orn-glow) 48%,transparent);
  background:rgba(38,16,55,.42);
  color:var(--orn-glow) !important;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.ornf__desc{
  max-width:620px;
  margin-inline:auto;
  text-align:center;
}
.ornf__genres{margin-top:18px !important;}
.ornf__readbtn{
  position:relative;
  width:min(100%, 520px);
  min-height:58px;
  margin:28px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  border-radius:999px;
  border:1px solid color-mix(in oklab,var(--orn-glow) 68%,transparent);
  color:#fff;
  text-decoration:none;
  font-family:'Lora',serif;
  font-size:clamp(18px, 1.5vw, 25px);
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:
    radial-gradient(80% 160% at 50% 0%, rgba(255,255,255,.20), transparent 55%),
    linear-gradient(120deg, color-mix(in oklab,var(--accent) 58%,rgba(35,7,39,.84)), color-mix(in oklab,var(--orn-glow) 44%,rgba(25,6,32,.86)));
  box-shadow:0 0 28px -8px var(--orn-glow), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -18px 32px rgba(0,0,0,.24);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.ornf__readbtn:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 0 38px -7px var(--orn-glow), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -18px 32px rgba(0,0,0,.24);}
.ornf__readbtn span{font-size:14px;color:#ffe1f1;text-shadow:0 0 12px var(--orn-glow);}
.ornf__stat{margin-top:28px !important;text-transform:uppercase;letter-spacing:.14em;}
@media (max-width: 920px){
  .sdx__hero.wrap{max-width:min(100%, calc(100vw - 24px));}
  .sdx__cover-progress{width:min(100%, 560px) !important;}
  .sdx__cover-progress .diamond{width:min(88vw, 420px) !important;}
  .sdx__right .orn-frame{min-height:0;}
}
@media (max-width: 560px){
  .sdx__cover-progress{padding:18px 12px 22px;border-radius:16px;}
  .sdx__cover-progress::before{inset:6px;border-radius:12px;}
  .sdx__sigils--wide.sdx__sigils--storybook{gap:8px !important;}
  .sdx__sigils--storybook .sigil{min-height:72px !important;padding:8px 4px !important;}
  .sdx__sigils--storybook .sigil__v{font-size:15px !important;}
  .sdx__sigils--storybook .sigil__l{font-size:9px !important;}
  .sdx__sigils--storybook .sigil--progress .orn-progress__ring{width:104px !important;height:104px !important;flex-basis:104px !important;margin:-20px auto -16px;}
  .orn-progress__line{width:92%;font-size:15px;gap:8px;}
  .orn-progress__btn--wide{width:88% !important;min-height:46px !important;font-size:14px !important;}
  .ornf__readbtn{min-height:52px;font-size:17px;letter-spacing:.12em;}
}

/* ============================================================
   ORNATE — exact storybook reference polish (purple palace)
   ============================================================ */
.sdx{
  --orn:#d889e8;
  --orn-soft:rgba(216,137,232,.36);
  --orn-glow:#f07cff;
  --accent:#9d48d6;
  --ink:#fbecff;
  --ink-2:rgba(248,226,255,.76);
  --story-bg:#080513;
  --story-panel:#12091d;
  font-family:'Cormorant Garamond','Lora',Georgia,serif;
}
[data-theme="light"] .sdx{
  --orn:#d889e8;
  --orn-soft:rgba(216,137,232,.36);
  --orn-glow:#f07cff;
  --accent:#9d48d6;
  --ink:#fbecff;
  --ink-2:rgba(248,226,255,.76);
}
.sdx__scene{
  padding:clamp(28px, 4vw, 56px) 0 72px !important;
  min-height:auto !important;
  background:
    radial-gradient(45% 34% at 50% 4%,rgba(142,38,128,.38),transparent 68%),
    radial-gradient(30% 42% at 7% 93%,rgba(204,56,170,.27),transparent 66%),
    radial-gradient(29% 42% at 93% 82%,rgba(130,43,194,.29),transparent 66%),
    radial-gradient(75% 85% at 50% 50%,rgba(33,12,42,.94),#070512 72%);
}
.sdx__bg-grad{background:transparent !important;}
.sdx__bg-grad::after{
  opacity:.65 !important;
  background:
    radial-gradient(circle at 7% 20%,rgba(255,205,245,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 43% 6%,rgba(255,170,248,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 88% 18%,rgba(255,218,250,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 95% 63%,rgba(187,92,255,.85) 0 2px,transparent 3px),
    radial-gradient(circle at 4% 78%,rgba(240,116,255,.85) 0 2px,transparent 3px),
    radial-gradient(30% 55% at -5% 100%,rgba(190,68,158,.22),transparent 70%),
    radial-gradient(28% 55% at 105% 100%,rgba(124,55,190,.22),transparent 70%);
  animation:sdxdrift 30s ease-in-out infinite alternate;
}
.sdx__vignette{
  background:
    radial-gradient(110% 92% at 50% 48%,transparent 42%,rgba(5,3,10,.55) 75%,rgba(3,2,7,.9)),
    linear-gradient(180deg,rgba(7,4,13,.35),transparent 18% 72%,rgba(4,2,9,.8)) !important;
}
.sdx__grain{opacity:.08 !important;}
.sdx__scene::before,
.sdx__scene::after{
  opacity:.9 !important;
  filter:drop-shadow(0 0 14px rgba(239,105,255,.5));
  background:
    radial-gradient(circle at 25% 80%,rgba(255,111,221,.5) 0 2px,transparent 3px),
    radial-gradient(circle at 18% 66%,rgba(255,198,248,.6) 0 1px,transparent 2px),
    radial-gradient(50% 22% at 20% 96%,rgba(248,83,206,.26),transparent 70%),
    conic-gradient(from 130deg at 28% 88%,transparent 0 18deg,rgba(168,61,151,.28) 19deg 23deg,transparent 24deg 360deg);
}
.sdx__scene::before{left:-28px;bottom:-36px;width:27vw;height:30vw;min-width:230px;min-height:260px;}
.sdx__scene::after{right:-28px;bottom:-36px;width:27vw;height:30vw;min-width:230px;min-height:260px;transform:scaleX(-1);}
.sdx__back{display:none !important;}
.ornnav{display:none !important;}
.sdx__hero.wrap{
  max-width:min(1560px, calc(100vw - 42px)) !important;
  margin-inline:auto !important;
  padding:0 !important;
}
@media (min-width:921px){
  .sdx__hero{
    grid-template-columns:minmax(560px, 680px) minmax(620px, 760px) !important;
    justify-content:center !important;
    align-items:stretch !important;
    gap:clamp(58px, 5vw, 82px) !important;
  }
}
.sdx__left,.sdx__right{min-width:0;}
.sdx__cover-progress,
.sdx__right .orn-frame{
  min-height:clamp(720px, 78vh, 840px) !important;
  border-radius:18px !important;
  border:1px solid rgba(231,124,230,.78) !important;
  background:
    radial-gradient(80% 45% at 50% 0%,rgba(145,48,143,.15),transparent 70%),
    radial-gradient(65% 85% at 50% 76%,rgba(68,18,70,.24),transparent 70%),
    linear-gradient(180deg,rgba(17,8,29,.83),rgba(8,6,18,.92)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,210,255,.09),
    inset 0 0 58px rgba(218,83,225,.11),
    0 0 0 1px rgba(105,49,125,.18),
    0 0 44px -18px rgba(240,107,255,.84),
    0 28px 70px -42px #000 !important;
  overflow:visible !important;
}
.sdx__cover-progress{width:min(100%, 650px) !important;padding:32px 42px 26px !important;}
.sdx__cover-progress::before,
.sdx__right .orn-frame::before{
  content:'';
  position:absolute;
  inset:11px;
  border:1px solid rgba(236,161,238,.48);
  border-radius:13px;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(240,156,239,.75),rgba(240,156,239,0) 18% 82%,rgba(240,156,239,.75)) top/100% 1px no-repeat,
    linear-gradient(90deg,rgba(240,156,239,.75),rgba(240,156,239,0) 18% 82%,rgba(240,156,239,.75)) bottom/100% 1px no-repeat;
  box-shadow:inset 0 0 22px rgba(238,105,255,.05);
}
.sdx__cover-progress::after,
.sdx__right .orn-frame::after{
  content:'';
  position:absolute;
  pointer-events:none;
  z-index:2;
  width:104px;height:44px;
  left:50%;bottom:-10px;transform:translateX(-50%);
  border:0;
  background:
    radial-gradient(circle at 50% 28%,rgba(254,216,255,.95) 0 3px,transparent 4px),
    radial-gradient(closest-side,rgba(238,84,255,.45),transparent 72%);
  filter:drop-shadow(0 0 12px rgba(240,107,255,.75));
}
.sdx__right .orn-frame::after{bottom:auto;top:-34px;height:70px;background:
  radial-gradient(circle at 50% 28%,rgba(253,215,255,.95) 0 5px,transparent 6px),
  radial-gradient(ellipse at 50% 40%,rgba(240,93,255,.52),transparent 54%),
  linear-gradient(90deg,transparent 0 8%,rgba(224,114,227,.55) 8% 22%,transparent 22% 38%,rgba(224,114,227,.55) 38% 62%,transparent 62% 78%,rgba(224,114,227,.55) 78% 92%,transparent 92%);
}
.sdx__right .orn-frame{padding:clamp(74px, 6.4vw, 105px) clamp(48px, 4.2vw, 72px) clamp(38px, 4vw, 60px) !important;display:flex;flex-direction:column;justify-content:center;text-align:center;}
.ocorner{color:rgba(238,174,239,.7) !important;filter:drop-shadow(0 0 7px rgba(238,92,255,.45));}
.sdx__cover-progress .diamond{
  width:min(82%, 440px) !important;
  margin:-8px auto 18px !important;
  filter:drop-shadow(0 0 15px rgba(248,98,255,.82)) drop-shadow(0 0 30px rgba(248,98,255,.28)) drop-shadow(0 22px 42px rgba(0,0,0,.62)) !important;
}
.sdx__cover-progress .diamond__img,
.sdx__cover-progress .diamond__grad{inset:10% !important;}
.sdx__cover-progress .diamond__frame{
  color:#f585ff !important;
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 9px rgba(246,100,255,.88)) drop-shadow(0 0 22px rgba(246,100,255,.58)) !important;
}
.diamond__badge{
  bottom:4.4% !important;
  max-width:min(92%,420px) !important;
  padding:9px 24px !important;
  font-family:'Cormorant Garamond','Lora',serif !important;
  font-weight:800 !important;
  font-size:14px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#fff5ff !important;
  background:linear-gradient(180deg,rgba(117,42,94,.88),rgba(28,12,33,.9)) !important;
  border:1px solid rgba(251,139,241,.88) !important;
  box-shadow:0 0 16px rgba(248,94,255,.65),inset 0 1px 0 rgba(255,255,255,.26),inset 0 -10px 18px rgba(0,0,0,.28) !important;
}
.sdx__sigils--wide.sdx__sigils--storybook,
.sdx__left .sdx__sigils--wide.sdx__sigils--storybook{
  width:min(100%,540px) !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:16px !important;
  margin:0 auto !important;
}
.sdx__sigils--storybook .sigil{
  min-height:90px !important;
  padding:10px 8px 9px !important;
  border:1px solid rgba(235,127,230,.5) !important;
  background:linear-gradient(180deg,rgba(76,20,70,.36),rgba(20,8,30,.2)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,210,255,.06),0 0 22px -14px rgba(246,92,255,.95) !important;
}
.sdx__sigils--storybook .sigil::before,
.sdx__sigils--storybook .sigil::after{
  content:'';position:absolute;width:12px;height:12px;border-color:rgba(240,139,238,.78);pointer-events:none;
}
.sdx__sigils--storybook .sigil::before{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid;}
.sdx__sigils--storybook .sigil::after{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid;}
.sdx__sigils--storybook .sigil__ic{color:#ff78c4 !important;filter:drop-shadow(0 0 9px rgba(255,118,208,.85)) !important;}
.sdx__sigils--storybook .sigil__v{font-family:'Cormorant Garamond','Lora',serif !important;font-size:24px !important;font-weight:800;color:#fff !important;text-shadow:0 0 13px rgba(255,171,252,.86) !important;}
.sdx__sigils--storybook .sigil__l{font-size:12px !important;font-weight:700;color:rgba(255,237,255,.84) !important;text-transform:uppercase;}
.sdx__sigils--storybook .sigil--progress{transform:translateY(-6px);}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring{
  width:132px !important;height:132px !important;flex-basis:132px !important;margin:-24px auto -26px !important;
  filter:drop-shadow(0 0 22px rgba(214,98,255,.92)) !important;
}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring::before{
  background:
    radial-gradient(circle at center,rgba(255,255,255,.10),rgba(21,7,32,.8) 50%,rgba(12,6,22,.95) 68%),
    conic-gradient(from -90deg,#f076ff calc(var(--p) * 1%),rgba(216,126,232,.20) 0) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 27px rgba(216,83,255,.68),inset 0 0 18px rgba(0,0,0,.62) !important;
}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring span{font-size:36px !important;color:#fff7ff !important;text-shadow:0 0 14px rgba(255,178,255,.9) !important;}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring span::after{content:'Tiến độ';display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:2px;color:rgba(255,235,255,.72);}
.orn-progress__line{
  width:min(100%,420px) !important;
  margin:20px auto 0 !important;
  grid-template-columns:auto auto minmax(0,1fr) auto !important;
  font-size:19px !important;
  color:#fff2ff !important;
}
.orn-progress__line::after{content:'✦';color:#ffc1ff;text-shadow:0 0 10px rgba(255,130,255,.8);}
.orn-progress__line span{height:8px !important;background:rgba(118,54,122,.42) !important;box-shadow:inset 0 0 0 1px rgba(243,155,246,.42),0 0 16px rgba(218,86,255,.24) !important;}
.orn-progress__line span i{background:linear-gradient(90deg,#f07cff,#cc66ff,#ffb9ff) !important;box-shadow:0 0 16px rgba(241,124,255,.9) !important;}
.orn-progress__btn--wide{
  width:min(100%,360px) !important;
  min-height:54px !important;
  margin:20px auto 0 !important;
  border-radius:999px !important;
  border:1px solid rgba(255,132,246,.88) !important;
  color:#fff !important;
  font-family:'Cormorant Garamond','Lora',serif !important;
  font-size:18px !important;
  font-weight:800 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  background:radial-gradient(80% 120% at 50% 0%,rgba(255,255,255,.18),transparent 54%),linear-gradient(180deg,rgba(151,45,133,.82),rgba(63,18,82,.88)) !important;
  box-shadow:0 0 23px rgba(238,91,255,.58),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -14px 24px rgba(0,0,0,.28) !important;
}
.sdx__left .sdx__cta--compact{margin:12px auto 0 !important;justify-content:center;}
.sdx__left .orn-btn--icon{border-color:rgba(243,127,236,.55) !important;background:rgba(26,10,35,.52) !important;color:#ffd9ff !important;}
.ornf__alt{display:none !important;}
.ornf__title{
  max-width:680px;margin:0 auto 18px !important;
  color:#fff5ff !important;
  font-family:'Cormorant Garamond','Lora',Georgia,serif !important;
  font-size:clamp(40px, 4vw, 64px) !important;
  font-weight:800 !important;
  line-height:1.13 !important;
  letter-spacing:.006em !important;
  text-shadow:0 0 2px #fff,0 0 18px rgba(255,207,255,.7),0 0 36px rgba(223,100,255,.55) !important;
}
.ornf__author{
  margin:0 auto 20px !important;
  color:rgba(255,240,255,.8) !important;
  font-size:20px !important;
  letter-spacing:.02em !important;
}
.ornf__author::before,.ornf__author::after{content:'✣';display:inline-block;margin:0 13px;color:#c66df2;text-shadow:0 0 10px rgba(225,108,255,.78);}
.ornf__rule{margin:6px auto 18px !important;color:rgba(238,133,240,.8) !important;}
.ornf__status{
  position:relative;
  padding:8px 44px !important;
  margin:2px auto 18px !important;
  color:#d69cff !important;
  border:1px solid rgba(176,91,221,.42) !important;
  background:linear-gradient(90deg,transparent,rgba(93,35,111,.5),transparent) !important;
  box-shadow:0 0 16px -10px #f07cff !important;
  font-size:13px !important;
}
.ornf__status::before,.ornf__status::after{content:'✦';position:absolute;top:50%;transform:translateY(-50%);color:#edbdff;text-shadow:0 0 10px #ec8dff;}
.ornf__status::before{left:16px}.ornf__status::after{right:16px}
.ornf__status i{display:none !important;}
.ornf__meta--tags{justify-content:center !important;margin-bottom:22px !important;}
.ornf__desc{
  margin:10px auto 22px !important;
  max-width:650px !important;
  color:rgba(255,240,255,.78) !important;
  font-size:20px !important;
  line-height:1.72 !important;
  text-align:center !important;
}
.ornf__desc::before{content:'';display:block;width:100%;height:1px;margin:0 auto 28px;background:linear-gradient(90deg,transparent,rgba(226,126,232,.44),transparent);}
.ornf__desc p{margin:.35em 0 !important;}
.ornf__more{margin:14px auto 0 !important;color:#dba3ff !important;border-color:rgba(223,136,240,.45) !important;background:rgba(30,9,42,.45) !important;}
.ornf__genres{justify-content:center !important;margin:16px auto 0 !important;}
.ornf__genres a{
  min-width:88px;
  justify-content:center;
  padding:10px 20px !important;
  border-radius:4px !important;
  border:1px solid rgba(226,154,232,.42) !important;
  color:rgba(255,238,255,.9) !important;
  background:rgba(12,6,18,.45) !important;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.04em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.ornf__readbtn{
  margin:38px auto 0 !important;
  width:min(100%,560px) !important;
  min-height:62px !important;
  border:1px solid rgba(255,131,245,.9) !important;
  border-radius:999px !important;
  color:#fff7ff !important;
  font-size:25px !important;
  font-weight:900 !important;
  background:radial-gradient(80% 180% at 50% 0%,rgba(255,255,255,.2),transparent 54%),linear-gradient(180deg,rgba(153,47,133,.86),rgba(61,17,82,.92)) !important;
  box-shadow:0 0 26px rgba(238,91,255,.68),0 0 0 4px rgba(240,108,255,.08),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -18px 30px rgba(0,0,0,.32) !important;
}
.ornf__readbtn::before,.ornf__readbtn::after{content:'❧';font-size:22px;color:#ffb2f6;text-shadow:0 0 10px #f07cff;}
.ornf__readbtn span{font-size:14px !important;}
.ornf__stat{margin-top:32px !important;color:rgba(255,240,255,.62) !important;font-size:17px !important;letter-spacing:.16em !important;}
.ornf__stat b{color:#c77cff !important;text-shadow:0 0 10px rgba(207,115,255,.75) !important;margin-left:10px;}
@media (max-width:1200px) and (min-width:921px){
  .sdx__hero{grid-template-columns:minmax(430px, 560px) minmax(430px, 620px) !important;gap:36px !important;}
  .sdx__cover-progress,.sdx__right .orn-frame{min-height:700px !important;}
  .sdx__cover-progress{padding-inline:24px !important;}
  .ornf__title{font-size:clamp(36px,4.2vw,52px) !important;}
}
@media (max-width:920px){
  .sdx__scene{padding-top:22px !important;}
  .sdx__hero.wrap{max-width:min(100%, calc(100vw - 24px)) !important;}
  .sdx__hero{display:grid !important;grid-template-columns:1fr !important;gap:24px !important;}
  .sdx__cover-progress,.sdx__right .orn-frame{min-height:0 !important;width:100% !important;}
  .sdx__cover-progress{padding:22px 16px 24px !important;}
  .sdx__cover-progress .diamond{width:min(84vw,410px) !important;}
  .sdx__right .orn-frame{padding:58px 18px 34px !important;}
  .ornf__title{font-size:clamp(34px, 9vw, 48px) !important;}
}
@media (max-width:560px){
  .sdx__hero.wrap{max-width:min(100%, calc(100vw - 14px)) !important;}
  .sdx__cover-progress::before,.sdx__right .orn-frame::before{inset:7px;}
  .sdx__sigils--wide.sdx__sigils--storybook{gap:8px !important;}
  .sdx__sigils--storybook .sigil{min-height:72px !important;padding:8px 3px !important;}
  .sdx__sigils--storybook .sigil__v{font-size:17px !important;}
  .sdx__sigils--storybook .sigil__l{font-size:9px !important;}
  .sdx__sigils--storybook .sigil--progress .orn-progress__ring{width:104px !important;height:104px !important;flex-basis:104px !important;margin:-17px auto -19px !important;}
  .sdx__sigils--storybook .sigil--progress .orn-progress__ring span{font-size:28px !important;}
  .orn-progress__line{width:92% !important;font-size:15px !important;gap:7px !important;}
  .orn-progress__btn--wide{width:82% !important;min-height:48px !important;font-size:15px !important;}
  .ornf__genres a{min-width:auto;padding:8px 12px !important;font-size:12px !important;}
  .ornf__readbtn{min-height:54px !important;font-size:19px !important;letter-spacing:.12em !important;}
}

/* ============================================================
   ORNATE — final exact purple book-card reference
   ============================================================ */
@keyframes ttc-purple-pulse{0%,100%{filter:drop-shadow(0 0 10px rgba(240,124,255,.65));opacity:.92}50%{filter:drop-shadow(0 0 24px rgba(240,124,255,1));opacity:1}}
@keyframes ttc-ring-breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 17px rgba(201,82,255,.78))}50%{transform:scale(1.035);filter:drop-shadow(0 0 31px rgba(234,127,255,.98))}}
@keyframes ttc-star-twinkle{0%,100%{opacity:.38;transform:scale(.88)}50%{opacity:1;transform:scale(1.12)}}

.sdx{
  --orn:#d978e6 !important;
  --orn-soft:rgba(223,124,234,.42) !important;
  --orn-glow:#ef75ff !important;
  --accent:#9336c9 !important;
  --ink:#fff3ff !important;
  --ink-2:rgba(255,236,255,.78) !important;
  --panel-border:rgba(234,132,232,.72);
  --panel-border-2:rgba(244,184,246,.48);
}
.sdx__scene{
  position:relative !important;
  padding:clamp(34px,4vw,64px) 0 80px !important;
  background:
    radial-gradient(ellipse at 50% 7%,rgba(120,32,123,.45),transparent 36%),
    radial-gradient(ellipse at 12% 94%,rgba(214,55,169,.32),transparent 34%),
    radial-gradient(ellipse at 91% 88%,rgba(156,59,212,.34),transparent 34%),
    radial-gradient(ellipse at 50% 52%,rgba(35,12,46,.86),rgba(7,5,16,.97) 66%,#04030b 100%) !important;
  overflow:hidden;
}
.sdx__bg,.sdx__vignette,.sdx__grain{pointer-events:none;}
.sdx__bg-grad::after{
  opacity:.8 !important;
  background:
    radial-gradient(circle at 3% 14%,rgba(255,239,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 11% 47%,rgba(244,128,255,.9) 0 1.5px,transparent 3px),
    radial-gradient(circle at 28% 10%,rgba(255,202,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 74% 9%,rgba(255,202,255,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 92% 31%,rgba(255,239,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 97% 68%,rgba(211,93,255,.96) 0 2px,transparent 3px),
    radial-gradient(circle at 6% 88%,rgba(245,95,225,.96) 0 2px,transparent 3px),
    radial-gradient(23% 60% at -2% 102%,rgba(204,57,171,.25),transparent 75%),
    radial-gradient(23% 60% at 102% 94%,rgba(153,65,206,.25),transparent 75%) !important;
  animation:sdxdrift 28s ease-in-out infinite alternate, ttc-star-twinkle 5.5s ease-in-out infinite;
}
.sdx__scene::before,.sdx__scene::after{
  opacity:.88 !important;
  z-index:0 !important;
  filter:drop-shadow(0 0 22px rgba(231,83,255,.48)) !important;
  background:
    radial-gradient(circle at 24% 70%,rgba(255,127,224,.56) 0 2px,transparent 3px),
    radial-gradient(circle at 35% 52%,rgba(255,211,255,.72) 0 1px,transparent 2px),
    radial-gradient(65% 25% at 20% 94%,rgba(235,69,195,.27),transparent 70%),
    conic-gradient(from 128deg at 18% 89%,transparent 0 16deg,rgba(148,52,137,.30) 16deg 20deg,transparent 20deg 360deg),
    conic-gradient(from 98deg at 0% 100%,transparent 0 18deg,rgba(103,39,111,.24) 18deg 23deg,transparent 23deg 360deg) !important;
}
.sdx__scene::before{left:-34px !important;bottom:-44px !important;width:28vw !important;height:38vw !important;min-width:280px !important;min-height:360px !important;}
.sdx__scene::after{right:-34px !important;bottom:-44px !important;width:28vw !important;height:38vw !important;min-width:280px !important;min-height:360px !important;transform:scaleX(-1) !important;}

.sdx__hero.wrap{max-width:min(1480px,calc(100vw - 54px)) !important;margin:auto !important;padding:0 !important;}
@media (min-width:921px){
  .sdx__hero{grid-template-columns:minmax(420px,500px) minmax(650px,860px) !important;gap:clamp(44px,4.6vw,70px) !important;align-items:stretch !important;justify-content:center !important;}
}

.sdx__cover-progress,.sdx__right .orn-frame{
  min-height:clamp(690px,73vh,790px) !important;
  border-radius:16px !important;
  border:1px solid var(--panel-border) !important;
  background:
    radial-gradient(78% 44% at 50% 0%,rgba(144,45,135,.16),transparent 72%),
    radial-gradient(64% 78% at 50% 72%,rgba(89,26,84,.22),transparent 72%),
    linear-gradient(180deg,rgba(15,7,27,.82),rgba(6,5,15,.94)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,216,255,.08),inset 0 0 64px rgba(225,74,232,.11),0 0 0 1px rgba(102,44,122,.2),0 0 46px -18px rgba(244,99,255,.88),0 30px 72px -46px #000 !important;
  overflow:visible !important;
}
.sdx__cover-progress{width:min(100%,500px) !important;padding:28px 28px 22px !important;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
.sdx__cover-progress::before,.sdx__right .orn-frame::before{
  inset:10px !important;border-radius:12px !important;border:1px solid var(--panel-border-2) !important;
  background:
    radial-gradient(circle at 0 0,rgba(255,221,255,.6) 0 1px,transparent 2px),
    radial-gradient(circle at 100% 0,rgba(255,221,255,.6) 0 1px,transparent 2px),
    radial-gradient(circle at 0 100%,rgba(255,221,255,.6) 0 1px,transparent 2px),
    radial-gradient(circle at 100% 100%,rgba(255,221,255,.6) 0 1px,transparent 2px),
    linear-gradient(90deg,rgba(245,153,244,.65),rgba(245,153,244,0) 14% 86%,rgba(245,153,244,.65)) top/100% 1px no-repeat,
    linear-gradient(90deg,rgba(245,153,244,.65),rgba(245,153,244,0) 14% 86%,rgba(245,153,244,.65)) bottom/100% 1px no-repeat !important;
  box-shadow:inset 0 0 24px rgba(240,116,255,.045) !important;
}
.sdx__cover-progress::after{display:none !important;}
.sdx__right .orn-frame::after{top:-36px !important;bottom:auto !important;width:190px !important;height:78px !important;background:
  radial-gradient(circle at 50% 37%,#ffe9ff 0 4px,transparent 5px),
  radial-gradient(ellipse at 50% 41%,rgba(240,99,255,.56),transparent 44%),
  linear-gradient(90deg,transparent 0 5%,rgba(228,117,231,.42) 6% 22%,transparent 23% 37%,rgba(228,117,231,.48) 38% 62%,transparent 63% 77%,rgba(228,117,231,.42) 78% 94%,transparent 95%) !important;
  filter:drop-shadow(0 0 13px rgba(244,118,255,.95)) !important;animation:ttc-purple-pulse 4.2s ease-in-out infinite;}

.sdx__cover-progress .diamond{width:min(94%,430px) !important;margin:-5px auto 24px !important;filter:drop-shadow(0 0 14px rgba(255,117,255,.88)) drop-shadow(0 0 32px rgba(255,117,255,.36)) drop-shadow(0 22px 42px rgba(0,0,0,.7)) !important;}
.sdx__cover-progress .diamond__img,.sdx__cover-progress .diamond__grad{inset:8.5% !important;}
.sdx__cover-progress .diamond__frame{color:#f57aff !important;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(246,100,255,.92)) drop-shadow(0 0 22px rgba(246,100,255,.62)) !important;}
.diamond__badge{bottom:4.8% !important;max-width:min(94%,390px) !important;padding:8px 20px !important;font-size:12.5px !important;letter-spacing:.08em !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(180deg,rgba(112,39,94,.9),rgba(22,10,31,.92)) !important;border:1px solid rgba(253,139,242,.9) !important;box-shadow:0 0 16px rgba(248,94,255,.7),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -10px 18px rgba(0,0,0,.34) !important;}

.sdx__left .sdx__sigils--wide.sdx__sigils--storybook{width:min(100%,410px) !important;grid-template-columns:repeat(3,1fr) !important;gap:10px 12px !important;margin:0 auto !important;}
.sdx__sigils--storybook .sigil{min-height:79px !important;padding:8px 5px 7px !important;border:1px solid rgba(235,127,230,.46) !important;background:linear-gradient(180deg,rgba(75,19,67,.32),rgba(15,7,24,.18)) !important;box-shadow:inset 0 0 0 1px rgba(255,210,255,.055),0 0 18px -13px rgba(246,92,255,.92) !important;}
.sdx__sigils--storybook .sigil__frame{opacity:.58 !important;}
.sdx__sigils--storybook .sigil__ic{color:#ff6dbc !important;filter:drop-shadow(0 0 8px rgba(255,112,204,.86)) !important;}
.sdx__sigils--storybook .sigil__v{font-size:21px !important;line-height:.95 !important;}
.sdx__sigils--storybook .sigil__l{font-size:10.5px !important;line-height:1.14 !important;}
.sdx__sigils--storybook .sigil--progress{min-height:88px !important;transform:translateY(-4px) !important;}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring{width:118px !important;height:118px !important;flex-basis:118px !important;margin:-22px auto -25px !important;animation:ttc-ring-breathe 3.8s ease-in-out infinite !important;}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring::before{background:radial-gradient(circle at center,rgba(255,255,255,.1),rgba(19,7,30,.82) 50%,rgba(10,5,21,.96) 68%),conic-gradient(from -90deg,#d870ff calc(var(--p)*1%),rgba(216,126,232,.2) 0) !important;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 27px rgba(216,83,255,.72),inset 0 0 18px rgba(0,0,0,.64) !important;}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring span{font-size:31px !important;}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring span::after{font-size:10px !important;}
.orn-progress__line{width:min(100%,390px) !important;margin:18px auto 0 !important;font-size:18px !important;}
.orn-progress__btn--wide{width:min(100%,320px) !important;min-height:50px !important;margin:17px auto 0 !important;font-size:17px !important;}
.sdx__left .sdx__cta--compact{display:none !important;}

.sdx__right .orn-frame{padding:clamp(68px,5.8vw,96px) clamp(44px,4vw,66px) clamp(34px,3.6vw,52px) !important;justify-content:center !important;}
.ornf__title{max-width:760px !important;margin:0 auto 19px !important;font-size:clamp(44px,3.9vw,64px) !important;line-height:1.13 !important;}
.ornf__author{font-size:21px !important;margin-bottom:22px !important;}
.ornf__meta--tags{margin:0 auto 18px !important;}
.ornf__top,.ornf__type,.ornf__vols{display:none !important;}
.ornf__status{padding:8px 46px !important;font-size:14px !important;margin:0 auto !important;}
.ornf__names{margin:16px auto 0;max-width:720px;color:rgba(255,238,255,.82);font-size:20px;line-height:1.75;text-align:center;}
.ornf__names-alt{font-size:21px;color:rgba(255,241,255,.75);}
.ornf__names::after{content:'';display:block;width:100%;height:1px;margin:24px auto 22px;background:linear-gradient(90deg,transparent,rgba(231,128,236,.22),rgba(231,128,236,.55),rgba(231,128,236,.22),transparent);background-size:10px 1px;}
.ornf__desc{margin:0 auto 18px !important;max-width:690px !important;font-size:20px !important;line-height:1.58 !important;color:rgba(255,240,255,.75) !important;}
.ornf__desc-inner{max-height:3.4em !important;overflow:hidden !important;}
.ornf__desc.is-expanded .ornf__desc-inner{max-height:12em !important;overflow:auto !important;}
.ornf__desc.is-clamped:not(.is-expanded) .ornf__desc-inner{mask-image:linear-gradient(#000 68%,transparent) !important;}
.ornf__more{margin-top:8px !important;}
.ornf__readbtn{order:20;margin:22px auto 0 !important;width:min(100%,560px) !important;min-height:61px !important;font-size:25px !important;letter-spacing:.17em !important;}
.ornf__genres{order:30;margin:24px auto 0 !important;gap:18px !important;}
.ornf__genres a{min-width:94px !important;padding:10px 23px !important;border-radius:4px !important;}
.ornf__stat{order:40;margin-top:31px !important;}

@media (max-width:1200px) and (min-width:921px){
  .sdx__hero{grid-template-columns:minmax(390px,470px) minmax(520px,690px) !important;gap:32px !important;}
  .sdx__cover-progress,.sdx__right .orn-frame{min-height:660px !important;}
  .sdx__cover-progress{padding-inline:22px !important;}
  .sdx__cover-progress .diamond{width:min(94%,390px) !important;}
  .sdx__left .sdx__sigils--wide.sdx__sigils--storybook{width:min(100%,385px) !important;gap:8px !important;}
  .sdx__sigils--storybook .sigil{min-height:72px !important;}
  .sdx__sigils--storybook .sigil--progress .orn-progress__ring{width:104px !important;height:104px !important;flex-basis:104px !important;}
  .ornf__title{font-size:clamp(38px,4.1vw,56px) !important;}
}
@media (max-width:920px){
  .sdx__scene{padding:22px 0 42px !important;}
  .sdx__hero.wrap{max-width:min(100%,calc(100vw - 22px)) !important;}
  .sdx__cover-progress,.sdx__right .orn-frame{min-height:0 !important;width:100% !important;}
  .sdx__cover-progress{padding:22px 14px 24px !important;}
  .sdx__cover-progress .diamond{width:min(88vw,410px) !important;}
  .sdx__left .sdx__sigils--wide.sdx__sigils--storybook{width:min(100%,420px) !important;}
  .sdx__right .orn-frame{padding:58px 18px 34px !important;}
  .ornf__title{font-size:clamp(34px,9.2vw,48px) !important;}
  .ornf__author,.ornf__names,.ornf__desc{font-size:17px !important;}
}
@media (max-width:560px){
  .sdx__hero.wrap{max-width:min(100%,calc(100vw - 14px)) !important;}
  .sdx__cover-progress::before,.sdx__right .orn-frame::before{inset:7px !important;}
  .sdx__left .sdx__sigils--wide.sdx__sigils--storybook{gap:7px !important;}
  .sdx__sigils--storybook .sigil{min-height:66px !important;padding:7px 2px 6px !important;}
  .sdx__sigils--storybook .sigil__ic svg{width:15px !important;height:15px !important;}
  .sdx__sigils--storybook .sigil__v{font-size:15px !important;}
  .sdx__sigils--storybook .sigil__l{font-size:8px !important;}
  .sdx__sigils--storybook .sigil--progress .orn-progress__ring{width:96px !important;height:96px !important;flex-basis:96px !important;margin:-15px auto -17px !important;}
  .sdx__sigils--storybook .sigil--progress .orn-progress__ring span{font-size:26px !important;}
  .orn-progress__line{width:92% !important;font-size:14px !important;gap:7px !important;}
  .orn-progress__btn--wide{width:82% !important;min-height:46px !important;font-size:14px !important;}
  .ornf__readbtn{min-height:53px !important;font-size:18px !important;letter-spacing:.11em !important;}
  .ornf__genres{gap:8px !important;}
  .ornf__genres a{min-width:auto !important;padding:8px 12px !important;font-size:11.5px !important;}
}

/* === 2026-06 speed polish: giữ vibe tím nhưng giảm repaint gây lag === */
.sdx__grain{display:none!important;}
.sdx__bg-grad{animation:none!important;}
.sdx__scene::before,.sdx__scene::after{animation:none!important;filter:none!important;opacity:.55!important;}
.ornnav,.diamond__badge{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
.sdx__cover-progress,.sdx__right .orn-frame,.sdx__sigils--storybook .sigil{will-change:auto;}
.sdx__sigils--storybook .sigil--progress .orn-progress__ring{animation:ttc-ring-breathe-lite 6s ease-in-out infinite!important;}
@keyframes ttc-ring-breathe-lite{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@media (max-width:760px){
  .sdx__scene::before,.sdx__scene::after{display:none!important;}
  .sdx__sigils--storybook .sigil--progress .orn-progress__ring{animation:none!important;}
}
@media (prefers-reduced-motion:reduce){
  .sdx *,.sdx *::before,.sdx *::after{animation:none!important;transition:none!important;}
}

/* Thu nhỏ 2 bảng trang chi tiết Ornate */
@media (min-width: 921px) {
  .sdx__hero {
    max-width: 1180px;
    margin-inline: auto;
    grid-template-columns: minmax(360px, 0.86fr) minmax(520px, 1.35fr);
    gap: 30px;
    align-items: center;
  }

  .sdx__left,
  .sdx__right {
    transform: scale(.86);
  }

  .sdx__left {
    transform-origin: right center;
  }

  .sdx__right {
    transform-origin: left center;
  }

  .diamond {
    width: min(38vh, 390px);
  }

  .orn-frame {
    padding: 34px 40px 34px;
  }

  .ornf__title {
    font-size: clamp(26px, 2.85vw, 36px);
  }

  .ornf__desc {
    font-size: 16.5px;
  }
}

/* Sửa riêng tên truyện lớn trong bảng giới thiệu trang chi tiết Ornate */
.sdx__right .ornf__title,
.sdx__hero .ornf__title {
  font-size: clamp(24px, 2.65vw, 42px) !important;
  line-height: 1.14 !important;
  letter-spacing: .4px !important;
  text-shadow:
    0 0 10px rgba(255, 214, 246, .7),
    0 0 22px rgba(210, 92, 255, .34) !important;
}

/* Mobile: tên truyện nhỏ hơn để không vỡ khung */
@media (max-width: 640px) {
  .sdx__right .ornf__title,
  .sdx__hero .ornf__title {
    font-size: clamp(22px, 8vw, 32px) !important;
    line-height: 1.16 !important;
  }
}


/* === Dây hoa trang trí khung giới thiệu Ornate ===
   Ảnh đã đặt thẳng trong thư mục assets/ nên từ assets/css/ornate.css dùng ../ten-file.png */
.sdx__scene{position:relative;}
.sdx__floral-vine{
  position:absolute;
  left:50%;
  bottom:clamp(8px,2.5vw,34px);
  width:min(1120px,96vw);
  height:clamp(170px,18vw,245px);
  transform:translateX(-50%);
  background:url("../ornament-floral-wide.png") center / contain no-repeat;
  pointer-events:none;
  z-index:1;
  opacity:.42;
  filter:drop-shadow(0 0 10px rgba(255,116,210,.38)) drop-shadow(0 0 24px rgba(174,77,255,.25));
  mix-blend-mode:screen;
}
.sdx__hero{position:relative;z-index:2;}
.sdx__right .orn-frame--story{
  position:relative;
  overflow:visible !important;
}
/* Tắt cụm 3 vạch tím cũ của khung phải để thay bằng ảnh dây hoa */
.sdx__right .orn-frame--story::after{
  display:none !important;
}
.sdx__right .orn-frame-art{
  position:absolute;
  left:50%;
  width:clamp(160px,18vw,255px);
  height:clamp(44px,5vw,68px);
  transform:translateX(-50%);
  background:url("../ornament-lotus.png") center / contain no-repeat;
  pointer-events:none;
  z-index:35;
  opacity:.98;
  filter:
    drop-shadow(0 0 5px rgba(255,227,247,.72))
    drop-shadow(0 0 12px rgba(255,127,223,.78))
    drop-shadow(0 0 24px rgba(184,76,255,.52));
}
.sdx__right .orn-frame-art--top{
  top:clamp(-34px,-2.2vw,-20px);
}
.sdx__right .orn-frame-art--bottom{
  bottom:clamp(-34px,-2.2vw,-20px);
  transform:translateX(-50%) rotate(180deg);
}
@media (max-width:760px){
  .sdx__floral-vine{opacity:.22;height:150px;bottom:10px;}
  .sdx__right .orn-frame-art{width:180px;height:48px;}
  .sdx__right .orn-frame-art--top{top:-24px;}
  .sdx__right .orn-frame-art--bottom{bottom:-24px;}
}
.sdx__floral-vine {
  display: none !important;
}

/* === Chỉnh vòng tiến độ trong cụm thông số Ornate === */

/* Ô chứa tiến độ: bỏ hộp vuông phía sau */
.sdx__stats .sdx__stat--progress,
.sdx__stat--progress,
.sdx__progress-stat {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Nếu bên trong còn viền/card con thì xóa luôn */
.sdx__stats .sdx__stat--progress::before,
.sdx__stats .sdx__stat--progress::after,
.sdx__stat--progress::before,
.sdx__stat--progress::after,
.sdx__progress-stat::before,
.sdx__progress-stat::after {
  display: none !important;
}

/* Dịch vòng 100% xuống thấp hơn */
.sdx__stat--progress .sdx__progress-ring,
.sdx__progress-stat .sdx__progress-ring,
.sdx__progress-ring {
  transform: translateY(34px) !important;
}

/* Nếu chữ 100% vẫn hơi cao/thấp, chỉnh phần text bên trong */
.sdx__progress-ring__text,
.sdx__progress-percent,
.sdx__progress-ring strong {
  transform: translateY(4px);
}

/* Tăng khoảng trống cho ô tiến độ để vòng không đè lên ô Chương */
.sdx__stats .sdx__stat--progress,
.sdx__progress-stat {
  min-height: 116px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================================
   FIX — Vòng tiến độ trong lưới thông số Ornate
   - Bỏ hộp vuông phía sau vòng %
   - Dịch vòng % xuống thấp hơn
   Dán ở CUỐI assets/css/ornate.css
   ============================================================ */

/* Ô lưới chứa vòng tiến độ: xóa toàn bộ nền/viền/khung */
.sdx .sdx__sigils--storybook .sigil.sigil--progress,
.sdx .sdx__sigils--wide.sdx__sigils--storybook .sigil.sigil--progress,
.sdx .sdx__left .sdx__sigils--wide.sdx__sigils--storybook .sigil.sigil--progress {
  position: relative !important;
  overflow: visible !important;
  min-height: 104px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  transform: translateY(18px) !important;
  z-index: 8 !important;
}

/* Ẩn khung SVG vuông/corner cũ nằm trong ô tiến độ */
.sdx .sdx__sigils--storybook .sigil.sigil--progress .sigil__frame,
.sdx .sdx__sigils--storybook .sigil.sigil--progress .sigil__ic,
.sdx .sdx__sigils--storybook .sigil.sigil--progress .sigil__v,
.sdx .sdx__sigils--storybook .sigil.sigil--progress .sigil__l {
  display: none !important;
}

/* Chặn mọi pseudo-element có thể tạo hộp vuông phía sau */
.sdx .sdx__sigils--storybook .sigil.sigil--progress::before,
.sdx .sdx__sigils--storybook .sigil.sigil--progress::after {
  display: none !important;
  content: none !important;
}

/* Vòng %: dùng top thay vì transform để không bị animation ghi đè */
.sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring {
  position: relative !important;
  top: 14px !important;
  margin: -10px auto -38px !important;
  width: 118px !important;
  height: 118px !important;
  flex-basis: 118px !important;
  z-index: 12 !important;
}

/* Mobile: vòng nhỏ hơn và hạ ít hơn */
@media (max-width: 760px) {
  .sdx .sdx__sigils--storybook .sigil.sigil--progress,
  .sdx .sdx__sigils--wide.sdx__sigils--storybook .sigil.sigil--progress,
  .sdx .sdx__left .sdx__sigils--wide.sdx__sigils--storybook .sigil.sigil--progress {
    min-height: 86px !important;
    transform: translateY(12px) !important;
  }

  .sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring {
    top: 10px !important;
    margin: -8px auto -28px !important;
    width: 96px !important;
    height: 96px !important;
    flex-basis: 96px !important;
  }
}

/* Tăng kích cỡ ảnh bìa truyện trong layout Ornate */
.sdx__cover-progress .diamond {
  width: min(94%, 520px) !important;
}

/* Mobile giữ vừa màn hình */
@media (max-width: 760px) {
  .sdx__cover-progress .diamond {
    width: min(96vw, 410px) !important;
  }
}

/* === FIX badge tên truyện: đưa xuống dưới ảnh bìa, không chèn vào giữa bìa === */

/* Khung kim cương phải cho phép badge trồi ra ngoài */
.sdx__cover-progress .diamond,
.sdx__left .diamond,
.diamond {
  position: relative !important;
  overflow: visible !important;
  margin-bottom: 46px !important;
}

/* Badge tên truyện nằm dưới khung kim cương */
.sdx__cover-progress .diamond .diamond__badge,
.sdx__left .diamond .diamond__badge,
.diamond .diamond__badge {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -24px !important;
  transform: translateX(-50%) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  max-width: min(88%, 420px) !important;
  margin: 0 !important;

  z-index: 30 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Mobile: badge thấp vừa đủ, không đè thông số */
@media (max-width: 760px) {
  .sdx__cover-progress .diamond,
  .sdx__left .diamond,
  .diamond {
    margin-bottom: 38px !important;
  }

  .sdx__cover-progress .diamond .diamond__badge,
  .sdx__left .diamond .diamond__badge,
  .diamond .diamond__badge {
    bottom: -20px !important;
    max-width: min(86vw, 360px) !important;
  }
}


/* === FIX: đặt nút Thích / Theo dõi ngay dưới bảng giới thiệu bên phải === */
.sdx__right .sdx__cta--under-intro {
  width: 100% !important;
  max-width: 260px !important;
  margin: 14px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  align-self: center !important;
  grid-column: auto !important;
}

.sdx__right .sdx__cta--under-intro .orn-btn,
.sdx__right .sdx__cta--under-intro .orn-btn--icon {
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 999px !important;
}

.sdx__right .sdx__cta--under-intro .orn-btn--icon > svg {
  width: 21px !important;
  height: 21px !important;
}

.sdx__right .sdx__cta--under-intro .orn-btn--icon b {
  position: absolute !important;
  right: -8px !important;
  top: -8px !important;
}

@media (max-width: 760px) {
  .sdx__right .sdx__cta--under-intro {
    max-width: 230px !important;
    margin-top: 12px !important;
    gap: 12px !important;
  }

  .sdx__right .sdx__cta--under-intro .orn-btn,
  .sdx__right .sdx__cta--under-intro .orn-btn--icon {
    flex-basis: 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    min-height: 48px !important;
  }
}

/* ============================================================
   ORNATE PERFORMANCE PATCH — giảm lag/giật trang chi tiết truyện
   Giữ layout và hiệu ứng glow chính, nhưng bỏ các animation/filter gây repaint liên tục.
   ============================================================ */
.sdx__grain{display:none!important;}
.sdx__bg-grad::after{animation:none!important;transform:none!important;opacity:.58!important;}
.sdx__scene::before,.sdx__scene::after{filter:none!important;opacity:.28!important;}
.diamond__frame,.diamond__frame *{animation:none!important;}
.orn-btn::after{animation:none!important;display:none!important;}
.orn-progress__ring,
.orn-progress__ring::after,
.orn-progress--minimal .orn-progress__ring,
.sdx__sigils--storybook .sigil--progress .orn-progress__ring{
  animation:none!important;
  will-change:auto!important;
}
.orn-progress--minimal:hover .orn-progress__ring{transform:none!important;}
.sdx__cover-progress,
.sdx__right .orn-frame,
.sdx__sigils--storybook .sigil{
  contain:layout paint style;
}
.sdx__more{
  content-visibility:auto;
  contain-intrinsic-size:1200px;
}
@media (max-width:760px){
  .sdx__cover-progress,
  .sdx__right .orn-frame,
  .diamond,
  .orn-progress__ring{
    filter:none!important;
  }
}

/* ============================================================
   ORNATE PERFORMANCE PATCH v2 — DỨT ĐIỂM giật/lag trang chi tiết
   Giữ NGUYÊN 100% layout + toàn bộ glow lấp lánh (đều là filter/shadow tĩnh),
   chỉ tắt những thứ chạy lại mỗi khung hình khiến GPU repaint liên tục.
   Các bản vá trước còn sót: ttc-purple-pulse (animate drop-shadow trên
   .orn-frame::after) và lớp sao mix-blend-mode:screen — xử lý nốt ở đây.
   ============================================================ */

/* 1) Tắt MỌI animation trang trí trong vùng .sdx.
   Bao trùm: ttc-purple-pulse, ttc-ring-breathe(+lite), ttc-star-twinkle,
   sdxdrift, ornsheen… Hover/transition vẫn giữ nguyên (chỉ tắt @keyframes). */
.sdx,
.sdx *,
.sdx *::before,
.sdx *::after{
  animation: none !important;
  will-change: auto !important;
}

/* 2) Lớp nền sao: bỏ mix-blend-mode (ép tạo pass hợp ảnh tốn kém mỗi lần vẽ lại).
   Glow vẫn hiển thị vì là gradient tĩnh; chỉ khác là không còn cộng sáng. */
.sdx__bg-grad::after{
  mix-blend-mode: normal !important;
  animation: none !important;
  transform: none !important;
}

/* 3) Lớp ::after khung phải (vốn nhấp nháy drop-shadow) — giữ tĩnh. */
.sdx__right .orn-frame::after,
.orn-frame::after{
  animation: none !important;
}

/* 4) Tôn trọng prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce){
  .sdx *,
  .sdx *::before,
  .sdx *::after{
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   ORNATE PERFORMANCE PATCH v3 — HẾT GIẬT KHI CUỘN / VUỐT
   Nguyên nhân giật khi cuộn: các lớp nền gradient + cụm sparkle +
   2 panel lớn đều là position:absolute với nền/bóng phức tạp, nên
   mỗi khung hình cuộn trình duyệt phải VẼ LẠI toàn bộ.
   Cách xử lý: đẩy từng lớp nặng-nhưng-TĨNH lên một layer GPU riêng
   bằng translateZ(0). Khi cuộn, trình duyệt chỉ DỊCH ảnh đã raster
   sẵn (compositing) thay vì repaint — mượt như các trang khác.
   KHÔNG đổi giao diện.
   ============================================================ */

/* Dàn nền cảnh: nền sao, gradient, lớp tối viền — raster 1 lần rồi dịch */
.sdx__bg,
.sdx__bg-grad,
.sdx__vignette{
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Hai cụm sparkle góc dưới (gradient + conic lớn) — giữ transform cũ + lên layer */
.sdx__scene::before{ transform: translateZ(0) !important; }
.sdx__scene::after{ transform: scaleX(-1) translateZ(0) !important; }

/* Hai panel lớn (bìa + khung giới thiệu): cache thành texture GPU.
   Ảnh bìa/sigil/badge bên trong được gộp vào cùng layer nên cuộn chỉ dịch. */
.sdx__cover-progress,
.sdx__right .orn-frame{
  transform: translateZ(0);
}

/* ============================================================
   PART A — LIGHT MODE cho TRANG CHI TIẾT (.sdx)
   Bản "purple palace" hard-code màu tím nên không đổi theo darkmode.
   Khối này phủ tông GIẤY DA BÒ + NHŨ VÀNG + RƯỢU khi <html data-theme="light">.
   (Dark mode giữ nguyên giao diện tím như cũ.)
   ============================================================ */
[data-theme="light"] .sdx{
  --orn:#a9812f !important;
  --orn-soft:rgba(160,120,45,.34) !important;
  --orn-glow:#c9a24a !important;
  --accent:#8a3a63 !important;
  --ink:#43321c !important;
  --ink-2:rgba(67,50,28,.82) !important;
  --panel-border:rgba(160,120,45,.55) !important;
  --panel-border-2:rgba(160,120,45,.34) !important;
}

/* Nền cảnh — giấy da bò ấm, đốm nắng vàng nhạt */
[data-theme="light"] .sdx__scene{
  background:
    radial-gradient(46% 34% at 50% 5%, rgba(214,179,94,.32), transparent 64%),
    radial-gradient(30% 42% at 8% 92%, rgba(190,130,70,.18), transparent 62%),
    radial-gradient(29% 42% at 92% 86%, rgba(150,90,120,.16), transparent 62%),
    radial-gradient(80% 90% at 50% 50%, #f7eccf, #f1e2bd 66%, #e7d3a3 100%) !important;
}
/* Lớp "sao" → đốm nắng vàng rất nhạt cho ban ngày */
[data-theme="light"] .sdx__bg-grad::after{
  opacity:.34 !important;
  background:
    radial-gradient(circle at 11% 47%, rgba(176,131,47,.5) 0 1.5px, transparent 3px),
    radial-gradient(circle at 28% 10%, rgba(201,161,74,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 31%, rgba(176,131,47,.4) 0 1px, transparent 2px),
    radial-gradient(circle at 97% 68%, rgba(150,90,120,.4) 0 2px, transparent 3px),
    radial-gradient(circle at 6% 88%, rgba(201,161,74,.5) 0 2px, transparent 3px) !important;
}
[data-theme="light"] .sdx__scene::before,
[data-theme="light"] .sdx__scene::after{
  opacity:.22 !important;
  background:
    radial-gradient(circle at 24% 70%, rgba(176,131,47,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 52%, rgba(201,161,74,.5) 0 1px, transparent 2px),
    radial-gradient(60% 24% at 20% 92%, rgba(176,131,47,.16), transparent 72%) !important;
}

/* Hai panel lớn — kem + viền vàng + bóng ấm */
[data-theme="light"] .sdx__cover-progress,
[data-theme="light"] .sdx__right .orn-frame{
  border:1px solid var(--panel-border) !important;
  background:
    radial-gradient(78% 44% at 50% 0%, rgba(214,179,94,.16), transparent 72%),
    linear-gradient(180deg, #fffaf0, #f6ead0) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 60px rgba(214,179,94,.10),
    0 0 0 1px rgba(160,120,45,.16),
    0 0 44px -22px rgba(190,140,60,.5),
    0 30px 72px -46px rgba(90,60,20,.45) !important;
}
[data-theme="light"] .sdx__cover-progress::before,
[data-theme="light"] .sdx__right .orn-frame::before{
  border:1px solid var(--panel-border-2) !important;
  background:
    linear-gradient(90deg, rgba(176,131,47,.5), rgba(176,131,47,0) 14% 86%, rgba(176,131,47,.5)) top/100% 1px no-repeat,
    linear-gradient(90deg, rgba(176,131,47,.5), rgba(176,131,47,0) 14% 86%, rgba(176,131,47,.5)) bottom/100% 1px no-repeat !important;
  box-shadow:none !important;
}
[data-theme="light"] .sdx__right .orn-frame::after{
  background:
    radial-gradient(circle at 50% 37%, #fff6df 0 4px, transparent 5px),
    radial-gradient(ellipse at 50% 41%, rgba(201,161,74,.5), transparent 44%),
    linear-gradient(90deg,transparent 0 5%,rgba(176,131,47,.4) 6% 22%,transparent 23% 37%,rgba(176,131,47,.44) 38% 62%,transparent 63% 77%,rgba(176,131,47,.4) 78% 94%,transparent 95%) !important;
  filter:none !important;
}

/* Khung kim cương + corner filigree — quầng vàng */
[data-theme="light"] .sdx__cover-progress .diamond{
  filter:drop-shadow(0 0 14px rgba(201,161,74,.6)) drop-shadow(0 22px 42px rgba(90,60,20,.32)) !important;
}
[data-theme="light"] .sdx__cover-progress .diamond__frame{
  color:#b0832f !important;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 7px rgba(201,161,74,.8)) !important;
}
[data-theme="light"] .ocorner{ color:rgba(160,120,45,.78) !important; filter:none !important; }

/* Badge tên truyện — rượu ấm, chữ kem */
[data-theme="light"] .diamond__badge{
  color:#fff6ef !important;
  background:linear-gradient(180deg, #9a4068, #6f2f4c) !important;
  border:1px solid rgba(190,140,90,.7) !important;
  box-shadow:0 0 14px rgba(160,100,60,.4), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* Ô thông số (sigil) — kem + viền vàng, chữ nâu */
[data-theme="light"] .sdx__sigils--storybook .sigil{
  border:1px solid rgba(160,120,45,.4) !important;
  background:linear-gradient(180deg, rgba(255,250,238,.7), rgba(246,234,208,.5)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 18px -14px rgba(160,120,45,.7) !important;
}
[data-theme="light"] .sdx__sigils--storybook .sigil::before,
[data-theme="light"] .sdx__sigils--storybook .sigil::after{ border-color:rgba(160,120,45,.7) !important; }
[data-theme="light"] .sdx__sigils--storybook .sigil__ic{ color:#8a3a63 !important; filter:none !important; }
[data-theme="light"] .sdx__sigils--storybook .sigil__v{ color:#43321c !important; text-shadow:none !important; }
[data-theme="light"] .sdx__sigils--storybook .sigil__l{ color:rgba(67,50,28,.7) !important; }

/* Vòng tiến độ — nhũ vàng, số nâu */
[data-theme="light"] .sdx__sigils--storybook .sigil--progress .orn-progress__ring{
  filter:drop-shadow(0 0 16px rgba(201,161,74,.55)) !important;
}
[data-theme="light"] .sdx__sigils--storybook .sigil--progress .orn-progress__ring::before{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.5), #fdf6e3 52%, #f6ead0 70%),
    conic-gradient(from -90deg, #b0832f calc(var(--p)*1%), rgba(160,120,45,.2) 0) !important;
  box-shadow:0 0 0 1px rgba(160,120,45,.3), inset 0 0 12px rgba(160,120,45,.18) !important;
}
[data-theme="light"] .orn-progress__ring span{ color:#5a3f1c !important; text-shadow:0 0 10px rgba(255,255,255,.8) !important; }
[data-theme="light"] .sdx__sigils--storybook .sigil--progress .orn-progress__ring span::after{ color:rgba(67,50,28,.7) !important; }

/* Dòng tiến độ x/y */
[data-theme="light"] .orn-progress__line{ color:#5a3f1c !important; text-shadow:none !important; }
[data-theme="light"] .orn-progress__line::after{ color:#b0832f !important; text-shadow:none !important; }
[data-theme="light"] .orn-progress__line svg{ color:#8a3a63 !important; filter:none !important; }
[data-theme="light"] .orn-progress__line span{ background:rgba(160,120,45,.18) !important; box-shadow:inset 0 0 0 1px rgba(160,120,45,.3) !important; }
[data-theme="light"] .orn-progress__line span i{ background:linear-gradient(90deg, #c9a24a, #8a3a63) !important; box-shadow:0 0 10px rgba(190,140,60,.5) !important; }

/* Nút đọc / tiến độ — rượu */
[data-theme="light"] .orn-progress__btn--wide,
[data-theme="light"] .ornf__readbtn{
  color:#fff6ef !important;
  border:1px solid rgba(190,140,90,.8) !important;
  background:radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,.28), transparent 54%), linear-gradient(180deg, #9a4068, #6f2f4c) !important;
  box-shadow:0 0 22px -6px rgba(160,100,60,.5), inset 0 1px 0 rgba(255,255,255,.32) !important;
}
[data-theme="light"] .ornf__readbtn::before,
[data-theme="light"] .ornf__readbtn::after{ color:#e7c25f !important; text-shadow:none !important; }
[data-theme="light"] .ornf__readbtn span{ color:#ffe9d6 !important; text-shadow:none !important; }

/* Tên truyện + tác giả + mô tả — nâu mực */
[data-theme="light"] .sdx .ornf__title,
[data-theme="light"] .sdx__right .ornf__title,
[data-theme="light"] .sdx__hero .ornf__title{
  color:#4a3416 !important;
  text-shadow:0 0 1px rgba(255,255,255,.6), 0 0 14px rgba(214,179,94,.4) !important;
}
[data-theme="light"] .ornf__author{ color:rgba(67,50,28,.82) !important; }
[data-theme="light"] .ornf__author::before,
[data-theme="light"] .ornf__author::after{ color:#a96a86 !important; text-shadow:none !important; }
[data-theme="light"] .ornf__names,
[data-theme="light"] .ornf__names-alt,
[data-theme="light"] .ornf__desc{ color:rgba(67,50,28,.8) !important; }
[data-theme="light"] .ornf__rule{ color:rgba(160,120,45,.7) !important; }
[data-theme="light"] .ornf__names::after,
[data-theme="light"] .ornf__desc::before{ background:linear-gradient(90deg,transparent,rgba(160,120,45,.5),transparent) !important; }

/* Trạng thái + thể loại + xem thêm + stat */
[data-theme="light"] .ornf__status{
  color:#8a3a63 !important;
  border:1px solid rgba(138,58,99,.4) !important;
  background:linear-gradient(90deg,transparent,rgba(214,179,94,.18),transparent) !important;
  box-shadow:none !important;
}
[data-theme="light"] .ornf__status::before,
[data-theme="light"] .ornf__status::after{ color:#b0832f !important; text-shadow:none !important; }
[data-theme="light"] .ornf__more{
  color:#8a3a63 !important;
  border-color:rgba(138,58,99,.4) !important;
  background:rgba(214,179,94,.12) !important;
}
[data-theme="light"] .ornf__genres a{
  color:#5a3f1c !important;
  border:1px solid rgba(160,120,45,.4) !important;
  background:rgba(255,250,238,.5) !important;
}
[data-theme="light"] .ornf__genres a:hover{
  color:#8a3a63 !important;
  border-color:#c9a24a !important;
  background:rgba(214,179,94,.2) !important;
}
[data-theme="light"] .ornf__stat{ color:rgba(67,50,28,.7) !important; }
[data-theme="light"] .ornf__stat b{ color:#8a3a63 !important; text-shadow:none !important; }

/* Nút Thích / Theo dõi (icon) */
[data-theme="light"] .sdx__left .orn-btn--icon,
[data-theme="light"] .sdx__right .orn-btn--icon{
  border-color:rgba(160,120,45,.5) !important;
  background:rgba(255,250,238,.7) !important;
  color:#8a3a63 !important;
}

/* ============================================================
   PART B — MỤC LỤC đồng bộ khung giới thiệu
   Bọc .toc2 thành panel khung viền giống .orn-frame, dùng chung token
   (--orn / --orn-glow / --accent / --ink) nên tự đổi theo dark/light.
   ============================================================ */
.sdx__more #sd-toc .toc2{
  margin-top:14px;
  border:1px solid var(--orn) !important;
  border-radius:16px;
  background:
    radial-gradient(80% 40% at 50% 0%, color-mix(in oklab, var(--orn-glow) 12%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(15,7,27,.84), rgba(7,5,16,.94));
  box-shadow:
    inset 0 0 0 1px rgba(255,216,255,.07),
    0 0 44px -22px var(--orn-glow),
    0 26px 64px -44px #000;
}
.sdx__more #sd-toc .toc2__rail{ background:transparent; border-right:1px solid var(--orn-soft); }
.sdx__more #sd-toc .toc2__rail-h{ color:var(--ink-2); }
.sdx__more #sd-toc .toc2__vol{ color:var(--ink-2); }
.sdx__more #sd-toc .toc2__vol:hover{ background:color-mix(in oklab, var(--accent) 14%, transparent); color:var(--ink); }
.sdx__more #sd-toc .toc2__vol[data-on="1"]{ background:color-mix(in oklab, var(--orn-glow) 12%, transparent); color:var(--ink); box-shadow:0 0 22px -10px var(--orn-glow); }
.sdx__more #sd-toc .toc2__vol[data-on="1"]::before{ background:var(--orn-glow); }
.sdx__more #sd-toc .toc2__vol-n,
.sdx__more #sd-toc .toc2__chs-n{ color:color-mix(in oklab, var(--ink-2) 70%, transparent); }
.sdx__more #sd-toc .toc2__ix{ background:color-mix(in oklab, var(--orn-glow) 18%, transparent); color:var(--orn-glow); }
.sdx__more #sd-toc .toc2__vchev{ color:var(--ink-2); }
.sdx__more #sd-toc .toc2__vol[data-on="1"] .toc2__vchev{ color:var(--orn-glow); }
.sdx__more #sd-toc .toc2__chs-h{ background:color-mix(in oklab, var(--orn-glow) 9%, rgba(10,8,18,.55)); border-bottom:1px solid var(--orn-soft); color:var(--ink); }
.sdx__more #sd-toc .toc2__ch{ color:var(--ink-2); border-bottom:1px solid var(--orn-soft); }
.sdx__more #sd-toc .toc2__ch:hover{ color:var(--orn-glow); }
.sdx__more #sd-toc .toc2__ch--cur{ color:var(--orn-glow); }
.sdx__more #sd-toc .toc2__ch-no{ color:var(--orn-glow); }
.sdx__more #sd-toc .toc2__ch-time{ color:color-mix(in oklab, var(--ink-2) 64%, transparent); }
.sdx__more #sd-toc .toc2__sort button[data-on="1"]{
  background:color-mix(in oklab, var(--accent) 42%, transparent) !important;
  border-color:color-mix(in oklab, var(--accent) 60%, transparent) !important;
  color:#fff !important;
}
.sdx__more #sd-toc .toc2pg{ background:rgba(10,8,18,.45); border-color:var(--orn-soft); color:var(--ink); }
.sdx__more #sd-toc .toc2pg:hover:not(:disabled){ border-color:var(--orn-glow); }
.sdx__more #sd-toc .toc2pg[data-on="1"]{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; }

/* Light: đổi mặt panel mục lục sang kem giấy da bò (chữ/viền dùng token nên tự nâu/vàng) */
[data-theme="light"] .sdx__more #sd-toc .toc2{
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(214,179,94,.14), transparent 70%),
    linear-gradient(180deg, #fffaf0, #f6ead0);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 0 40px -22px rgba(190,140,60,.5),
    0 26px 64px -46px rgba(90,60,20,.4);
}
[data-theme="light"] .sdx__more #sd-toc .toc2__chs-h{ background:rgba(255,250,238,.85); }
[data-theme="light"] .sdx__more #sd-toc .toc2pg{ background:rgba(255,250,238,.6); }


/* ============================================================
   PATCH — Story detail tidy-up: genres position, progress ring visibility, bigger diamond
   ============================================================ */
/* Không hiển thị khối tên phụ cũ trong bảng giới thiệu nếu còn markup/cached HTML */
.sdx .ornf__names,
.sdx .ornf__names-alt{
  display:none !important;
}

/* Thể loại nằm ngay dưới cụm meta/tag */
.sdx .ornf__meta.ornf__meta--tags{
  margin-bottom:10px !important;
}
.sdx .ornf__genres{
  order:5 !important;
  margin:0 auto 22px !important;
  justify-content:center !important;
}

/* Nới bìa + khung kim cương nhưng vẫn giữ tâm và badge ở dưới bìa */
.sdx .sdx__cover-progress{
  width:min(100%, 660px) !important;
  max-width:660px !important;
  align-items:center !important;
}
.sdx .sdx__cover-progress .diamond,
.sdx .sdx__left .diamond{
  width:min(96%, 500px) !important;
  max-width:500px !important;
  margin:0 auto 48px !important;
  overflow:visible !important;
  place-items:center !important;
}
.sdx .sdx__cover-progress .diamond__img,
.sdx .diamond__img,
.sdx .sdx__cover-progress .diamond__grad{
  inset:8% !important;
  width:auto !important;
  height:auto !important;
  background-position:center center !important;
  background-size:cover !important;
}
.sdx .sdx__cover-progress .diamond__frame,
.sdx .diamond__frame{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
.sdx .sdx__cover-progress .diamond .diamond__badge,
.sdx .diamond .diamond__badge{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:-28px !important;
  transform:translateX(-50%) !important;
  z-index:30 !important;
  margin:0 !important;
  max-width:min(90%, 430px) !important;
}

/* Vòng tiến độ giữ nguyên vị trí ô giữa nhưng không bị khung/stat che khuất */
.sdx .sdx__sigils--storybook,
.sdx .sdx__left .sdx__sigils--wide.sdx__sigils--storybook{
  overflow:visible !important;
}
.sdx .sdx__sigils--storybook .sigil.sigil--progress,
.sdx .sdx__left .sdx__sigils--wide.sdx__sigils--storybook .sigil.sigil--progress{
  overflow:visible !important;
  min-height:126px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  z-index:20 !important;
  display:grid !important;
  place-items:center !important;
}
.sdx .sdx__sigils--storybook .sigil.sigil--progress::before,
.sdx .sdx__sigils--storybook .sigil.sigil--progress::after,
.sdx .sdx__sigils--storybook .sigil.sigil--progress .sigil__frame{
  display:none !important;
}
.sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring{
  position:relative !important;
  width:128px !important;
  height:128px !important;
  flex:0 0 128px !important;
  margin:-14px auto -10px !important;
  z-index:25 !important;
  overflow:visible !important;
}

@media (max-width:760px){
  .sdx .sdx__cover-progress .diamond,
  .sdx .sdx__left .diamond{
    width:min(90vw, 430px) !important;
    max-width:430px !important;
    margin-bottom:42px !important;
  }
  .sdx .sdx__cover-progress .diamond .diamond__badge,
  .sdx .diamond .diamond__badge{
    bottom:-22px !important;
    max-width:min(86vw, 360px) !important;
  }
  .sdx .sdx__sigils--storybook .sigil.sigil--progress{
    min-height:108px !important;
  }
  .sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring{
    width:104px !important;
    height:104px !important;
    flex-basis:104px !important;
    margin:-8px auto -8px !important;
  }
}


/* ============================================================
   FINAL FIX — Cân lại cụm thông số + vòng tiến độ Ornate
   Dán CUỐI assets/css/ornate.css
   - 5 ô thông số cùng kích cỡ
   - Ô tiến độ không còn hộp vuông phía sau
   - Vòng % nằm đúng giữa ô dưới, không bị che/khuất
   ============================================================ */

/* Lưới 3 cột x 2 hàng cân đều */
.sdx .sdx__sigils--wide.sdx__sigils--storybook,
.sdx .sdx__left .sdx__sigils--wide.sdx__sigils--storybook{
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 96px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 12px !important;
  width: min(100%, 520px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

/* Các ô thông số thường: ép về cùng chiều cao, không lệch */
.sdx .sdx__sigils--storybook .sigil:not(.sigil--progress){
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  padding: 10px 8px 8px !important;
  display: grid !important;
  grid-template-rows: 22px 28px 22px !important;
  align-items: center !important;
  justify-items: center !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 1 !important;
}

/* Text/icon trong ô thường cân lại */
.sdx .sdx__sigils--storybook .sigil:not(.sigil--progress) .sigil__ic{
  align-self: center !important;
  justify-self: center !important;
  line-height: 1 !important;
}
.sdx .sdx__sigils--storybook .sigil:not(.sigil--progress) .sigil__ic svg{
  width: 17px !important;
  height: 17px !important;
}
.sdx .sdx__sigils--storybook .sigil:not(.sigil--progress) .sigil__v{
  align-self: center !important;
  justify-self: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.sdx .sdx__sigils--storybook .sigil:not(.sigil--progress) .sigil__l{
  align-self: center !important;
  justify-self: center !important;
  min-height: 0 !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

/* Ô tiến độ: chỉ làm "ô đặt vòng", không còn nền/viền/hộp vuông */
.sdx .sdx__sigils--storybook .sigil.sigil--progress,
.sdx .sdx__sigils--wide.sdx__sigils--storybook .sigil.sigil--progress,
.sdx .sdx__left .sdx__sigils--wide.sdx__sigils--storybook .sigil.sigil--progress{
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  overflow: visible !important;
  transform: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 50 !important;
  contain: none !important;
}

/* Xóa mọi khung/corner/pseudo tạo hộp vuông phía sau vòng */
.sdx .sdx__sigils--storybook .sigil.sigil--progress::before,
.sdx .sdx__sigils--storybook .sigil.sigil--progress::after,
.sdx .sdx__sigils--storybook .sigil.sigil--progress .sigil__frame,
.sdx .sdx__sigils--storybook .sigil.sigil--progress .sigil__ic,
.sdx .sdx__sigils--storybook .sigil.sigil--progress .sigil__v,
.sdx .sdx__sigils--storybook .sigil.sigil--progress .sigil__l{
  display: none !important;
  content: none !important;
}

/* Vòng %: đặt tuyệt đối ở giữa ô, hơi dịch xuống nhẹ, không dùng margin âm */
.sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring,
.sdx .sdx__left .sdx__sigils--wide.sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring{
  position: absolute !important;
  left: 50% !important;
  top: 54% !important;
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  min-height: 112px !important;
  max-width: 112px !important;
  max-height: 112px !important;
  flex: 0 0 112px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 80 !important;
  overflow: visible !important;
  contain: none !important;
}

/* Đảm bảo phần glow/pseudo của vòng không bị cắt */
.sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring::before,
.sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring::after{
  display: block !important;
  overflow: visible !important;
}

/* Chữ trong vòng */
.sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring span{
  position: relative !important;
  z-index: 90 !important;
  font-size: 32px !important;
  line-height: .95 !important;
}

/* Label "TIẾN ĐỘ" nhỏ gọn hơn để không đẩy vòng */
.sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring span::after{
  display: block !important;
  margin-top: 3px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}

/* Dòng xx/xxx phía dưới: tạo khoảng cách sau cụm ô */
.sdx .orn-progress__line{
  margin-top: 22px !important;
}

/* Mobile: thu vòng và ô lại cho không tràn */
@media (max-width: 760px){
  .sdx .sdx__sigils--wide.sdx__sigils--storybook,
  .sdx .sdx__left .sdx__sigils--wide.sdx__sigils--storybook{
    grid-auto-rows: 86px !important;
    gap: 9px !important;
    width: min(100%, 430px) !important;
  }

  .sdx .sdx__sigils--storybook .sigil:not(.sigil--progress),
  .sdx .sdx__sigils--storybook .sigil.sigil--progress{
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
  }

  .sdx .sdx__sigils--storybook .sigil:not(.sigil--progress){
    padding: 8px 5px 7px !important;
    grid-template-rows: 18px 24px 20px !important;
  }

  .sdx .sdx__sigils--storybook .sigil:not(.sigil--progress) .sigil__v{
    font-size: 17px !important;
  }

  .sdx .sdx__sigils--storybook .sigil:not(.sigil--progress) .sigil__l{
    font-size: 9.5px !important;
  }

  .sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring,
  .sdx .sdx__left .sdx__sigils--wide.sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring{
    top: 54% !important;
    width: 94px !important;
    height: 94px !important;
    min-width: 94px !important;
    min-height: 94px !important;
    max-width: 94px !important;
    max-height: 94px !important;
    flex-basis: 94px !important;
  }

  .sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring span{
    font-size: 26px !important;
  }

  .sdx .sdx__sigils--storybook .sigil.sigil--progress .orn-progress__ring span::after{
    font-size: 9px !important;
  }

  .sdx .orn-progress__line{
    margin-top: 18px !important;
  }
}