/* FYD Experience Core — ChangThai Player skin */
.dn-reader.is-skin-changthai {
  --dn-bg: #fdfbf9;
  --dn-panel: #ffffff;
  --dn-panel-soft: #faf6f4;
  --dn-text: #2a2425;
  --dn-muted: #746b6d;
  --dn-line: #ece5e0;
  --dn-accent: #b56b6f;
  --dn-accent-strong: #98585d;
  --dn-accent-soft: #f7ebec;
  --dn-teal: #167f80;
  --dn-teal-soft: #e7f5f3;
  --dn-gold: #d8a64c;
  --dn-shadow: 0 16px 44px rgba(71,47,51,.08);
  grid-template-columns: 292px minmax(0,1fr);
  background-color: var(--dn-bg);
  background-image:
    linear-gradient(color-mix(in srgb,var(--dn-accent) 10%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--dn-accent) 10%,transparent) 1px,transparent 1px),
    radial-gradient(circle at 8% 5%,color-mix(in srgb,var(--dn-accent) 7%,transparent),transparent 26%),
    radial-gradient(circle at 94% 4%,rgba(22,127,128,.055),transparent 28%);
  background-size: 20px 20px,20px 20px,auto,auto;
  color: var(--dn-text);
  font-family: "Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.dn-reader.is-skin-changthai,
.dn-reader.is-skin-changthai * { letter-spacing: normal; }
.dn-reader.is-skin-changthai h1,
.dn-reader.is-skin-changthai h2,
.dn-reader.is-skin-changthai h3,
.dn-reader.is-skin-changthai .dn-brand,
.dn-reader.is-skin-changthai .dn-account-stats strong {
  font-family: "Comfortaa","Arial Rounded MT Bold",sans-serif;
}

/* Sidebar */
.dn-reader.is-skin-changthai .dn-sidebar {
  min-width: 292px;
  padding: 64px 22px 28px;
  background: color-mix(in srgb,var(--dn-panel) 96%,transparent);
  border-right: 1px solid var(--dn-line);
  box-shadow: 10px 0 34px rgba(71,47,51,.035);
}
.dn-reader.is-skin-changthai .dn-brand {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0 0 14px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb,var(--dn-accent) 30%,var(--dn-line));
  border-radius: 12px;
  background: var(--dn-accent-soft);
  color: var(--dn-accent-strong);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: none;
}
.dn-reader.is-skin-changthai .dn-experience-kind {
  margin-bottom: 7px;
  color: var(--dn-teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.dn-reader.is-skin-changthai .dn-sidebar h2 {
  margin: 0 0 24px;
  color: var(--dn-text);
  font-size: 24px;
  line-height: 1.35;
}
.dn-reader.is-skin-changthai .dn-close-toc,
.dn-reader.is-skin-changthai .dn-toggle-toc {
  border: 1px solid var(--dn-line);
  background: var(--dn-panel);
  color: var(--dn-muted);
  box-shadow: 0 8px 20px rgba(71,47,51,.05);
}
.dn-reader.is-skin-changthai .dn-close-toc:hover,
.dn-reader.is-skin-changthai .dn-toggle-toc:hover {
  border-color: var(--dn-accent);
  color: var(--dn-accent-strong);
}
.dn-reader.is-skin-changthai .dn-toc .dn-arc {
  margin: 24px 0 9px;
  color: var(--dn-accent-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
}
.dn-reader.is-skin-changthai .dn-toc a {
  min-height: 48px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--dn-text);
  font-weight: 600;
}
.dn-reader.is-skin-changthai .dn-toc a span {
  min-width: 28px;
  color: var(--dn-muted);
  font-weight: 700;
}
.dn-reader.is-skin-changthai .dn-toc li.is-active a,
.dn-reader.is-skin-changthai .dn-toc a:hover {
  border-color: color-mix(in srgb,var(--dn-accent) 22%,var(--dn-line));
  background: var(--dn-accent-soft);
  color: var(--dn-accent-strong);
}
.dn-reader.is-skin-changthai .dn-toc li.is-active a span { color: var(--dn-accent-strong); }

/* Main + toolbar */
.dn-reader.is-skin-changthai .dn-main {
  background-color: transparent;
  color: var(--dn-text);
}
.dn-reader.is-skin-changthai .dn-toolbar {
  justify-content: flex-start;
  min-height: 72px;
  gap: 10px;
  padding: 12px 20px;
  background: color-mix(in srgb,var(--dn-panel) 92%,transparent);
  border-bottom: 1px solid color-mix(in srgb,var(--dn-line) 88%,transparent);
  backdrop-filter: blur(16px);
}
.dn-reader.is-skin-changthai .dn-toolbar button,
.dn-reader.is-skin-changthai .dn-toolbar a.dn-app-nav,
.dn-reader.is-skin-changthai .dn-toggle-toc,
.dn-reader.is-skin-changthai .dn-close-toc {
  width: 46px;
  height: 46px;
  border: 1px solid var(--dn-line);
  border-radius: 14px;
  background: var(--dn-panel);
  color: var(--dn-muted);
  box-shadow: 0 7px 18px rgba(71,47,51,.045);
  transition: transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease;
}
.dn-reader.is-skin-changthai .dn-toolbar button:hover,
.dn-reader.is-skin-changthai .dn-toolbar a.dn-app-nav:hover {
  transform: translateY(-1px);
  border-color: var(--dn-accent);
  color: var(--dn-accent-strong);
}
.dn-reader.is-skin-changthai .dn-toolbar .dn-app-nav.is-active {
  border-color: color-mix(in srgb,var(--dn-accent) 45%,var(--dn-line));
  background: var(--dn-accent-soft);
  color: var(--dn-accent-strong);
  box-shadow: 0 9px 20px rgba(181,107,111,.11);
}
.dn-reader.is-skin-changthai .dn-toolbar [data-dn-nav-id="account"] { margin-left: auto; }
.dn-reader.is-skin-changthai .dn-toolbar-title { color: var(--dn-text); font-weight: 700; }

/* Gutenberg content */
.dn-reader.is-skin-changthai .dn-chapter {
  max-width: 940px;
  margin: 32px auto 24px;
  padding: clamp(28px,4vw,48px);
  border: 1px solid var(--dn-line);
  border-radius: 26px;
  background: var(--dn-panel);
  box-shadow: var(--dn-shadow);
}
.dn-reader.is-skin-changthai .dn-kicker,
.dn-reader.is-skin-changthai .dn-view-kicker {
  color: var(--dn-accent-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.dn-reader.is-skin-changthai .dn-chapter h1,
.dn-reader.is-skin-changthai .dn-view-heading h1,
.dn-reader.is-skin-changthai .dn-map-empty h1,
.dn-reader.is-skin-changthai .dn-wiki-detail h1 {
  color: var(--dn-text);
  letter-spacing: -.5px;
}
.dn-reader.is-skin-changthai .dn-chapter h1 {
  margin: 10px 0 26px;
  font-size: clamp(32px,4vw,48px);
  line-height: 1.22;
}
.dn-reader.is-skin-changthai .dn-content,
.dn-reader.is-skin-changthai .dn-wiki-detail-content {
  color: var(--dn-text);
  font-size: 18px;
  line-height: 1.82;
}
.dn-reader.is-skin-changthai .dn-content a,
.dn-reader.is-skin-changthai .dn-wiki-detail-content a { color: var(--dn-accent-strong); }
.dn-reader.is-skin-changthai .dn-chapter-nav { max-width: 940px; padding: 0 0 44px; }
.dn-reader.is-skin-changthai .dn-nav-link {
  border: 1px solid var(--dn-line);
  border-radius: 14px;
  background: var(--dn-panel);
  color: var(--dn-text);
  box-shadow: 0 7px 18px rgba(71,47,51,.04);
}
.dn-reader.is-skin-changthai .dn-nav-link:hover {
  border-color: var(--dn-accent);
  background: var(--dn-accent-soft);
  color: var(--dn-accent-strong);
}

/* HTML package stage */
.dn-reader.is-skin-changthai .dn-main.dn-html-active [data-dn-panel="reader"] { height: calc(100% - 73px); }
.dn-reader.is-skin-changthai .dn-html-stage,
.dn-reader.is-skin-changthai .dn-html-frame { background: #fdfbf9; }
.dn-reader.is-skin-changthai .dn-html-stage {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

/* Library, Wiki, Map, Account */
.dn-reader.is-skin-changthai .dn-view-container,
.dn-reader.is-skin-changthai .dn-account-shell { color: var(--dn-text); }
.dn-reader.is-skin-changthai .dn-story-card,
.dn-reader.is-skin-changthai .dn-wiki-card,
.dn-reader.is-skin-changthai .dn-wiki-grid>div,
.dn-reader.is-skin-changthai .dn-owned-item,
.dn-reader.is-skin-changthai .dn-checkin-panel {
  border: 1px solid var(--dn-line);
  border-radius: 18px;
  background: var(--dn-panel);
  color: var(--dn-text)!important;
  box-shadow: 0 9px 28px rgba(71,47,51,.045);
}
.dn-reader.is-skin-changthai .dn-story-card:hover,
.dn-reader.is-skin-changthai .dn-story-card.is-current,
.dn-reader.is-skin-changthai .dn-wiki-card:hover,
.dn-reader.is-skin-changthai .dn-owned-item:hover {
  border-color: color-mix(in srgb,var(--dn-accent) 50%,var(--dn-line));
  background: var(--dn-accent-soft);
}
.dn-reader.is-skin-changthai .dn-story-card-icon {
  border-color: color-mix(in srgb,var(--dn-accent) 22%,var(--dn-line));
  border-radius: 14px;
  background: var(--dn-accent-soft);
  color: var(--dn-accent-strong);
}
.dn-reader.is-skin-changthai .dn-story-card-body strong,
.dn-reader.is-skin-changthai .dn-wiki-card strong,
.dn-reader.is-skin-changthai .dn-owned-item strong { color: var(--dn-text); }
.dn-reader.is-skin-changthai .dn-story-card-body>span,
.dn-reader.is-skin-changthai .dn-wiki-card small,
.dn-reader.is-skin-changthai .dn-owned-item>span { color: var(--dn-muted); }
.dn-reader.is-skin-changthai .dn-story-card-body small,
.dn-reader.is-skin-changthai .dn-wiki-card>span,
.dn-reader.is-skin-changthai .dn-owned-item .dn-owned-type { color: var(--dn-accent-strong)!important; }
.dn-reader.is-skin-changthai .dn-wiki-filters button,
.dn-reader.is-skin-changthai .dn-wiki-back,
.dn-reader.is-skin-changthai .dn-account-tabs button {
  border-color: var(--dn-line);
  border-radius: 12px;
  background: var(--dn-panel);
  color: var(--dn-muted);
}
.dn-reader.is-skin-changthai .dn-wiki-filters button.is-active,
.dn-reader.is-skin-changthai .dn-account-tabs button.is-active {
  border-color: var(--dn-accent);
  background: var(--dn-accent-soft);
  color: var(--dn-accent-strong);
}
.dn-reader.is-skin-changthai .dn-checkin-button,
.dn-reader.is-skin-changthai .dn-profile-action {
  border-color: var(--dn-accent);
  border-radius: 13px;
  background: linear-gradient(145deg,var(--dn-accent),var(--dn-accent-strong));
  color: #fff;
  box-shadow: 0 10px 22px rgba(181,107,111,.18);
}
.dn-reader.is-skin-changthai .dn-coupon-item {
  border-color: var(--dn-accent);
  border-radius: 16px;
  background: var(--dn-accent-soft);
}
.dn-reader.is-skin-changthai .dn-coupon-item code { background: #fff; color: var(--dn-accent-strong); }
.dn-reader.is-skin-changthai .dn-locked-chapter,
.dn-reader.is-skin-changthai .dn-reader-notice {
  border-color: var(--dn-line);
  border-radius: 18px;
  background: var(--dn-panel-soft);
  color: var(--dn-text);
}

@media (max-width:820px) {
  .dn-reader.is-skin-changthai .dn-sidebar {
    width: min(88vw,330px);
    min-width: 0;
    border-right: 1px solid var(--dn-line);
    box-shadow: 18px 0 48px rgba(71,47,51,.16);
  }
  .dn-reader.is-skin-changthai .dn-toolbar {
    min-height: 66px;
    padding: max(10px,env(safe-area-inset-top)) 12px 10px;
    gap: 7px;
  }
  .dn-reader.is-skin-changthai .dn-toolbar button,
  .dn-reader.is-skin-changthai .dn-toolbar a.dn-app-nav { width: 42px; height: 42px; border-radius: 13px; }
  .dn-reader.is-skin-changthai .dn-main.dn-html-active [data-dn-panel="reader"] { height: calc(100% - 66px - env(safe-area-inset-top)); }
  .dn-reader.is-skin-changthai .dn-chapter {
    margin: 14px 12px 18px;
    padding: 24px 20px;
    border-radius: 22px;
  }
  .dn-reader.is-skin-changthai .dn-chapter-nav { padding: 0 12px max(30px,env(safe-area-inset-bottom)); }
  .dn-reader.is-skin-changthai .dn-content { font-size: 17px; line-height: 1.78; }
}

/* v1.7.10 — không trừ chiều cao toolbar lần thứ hai; CSS Grid đã dành sẵn hàng toolbar. */
.dn-reader.is-skin-changthai .dn-main.dn-html-active > [data-dn-panel="reader"] {
  height: 100% !important;
  min-height: 0 !important;
}
.dn-reader.is-skin-changthai .dn-main.dn-html-active .dn-html-stage,
.dn-reader.is-skin-changthai .dn-main.dn-html-active .dn-html-frame {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}


/* v1.7.12 — ChangThai Player tối giản như Fizy: không sidebar, chỉ giữ nút về trang chủ. */
.dn-reader.is-skin-changthai,
.dn-reader.is-skin-changthai.dn-sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr) !important;
}
.dn-reader.is-skin-changthai .dn-sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}
.dn-reader.is-skin-changthai .dn-main {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
.dn-reader.is-skin-changthai .dn-toolbar {
  min-height: 68px;
  padding: 10px 18px;
  gap: 0;
}
.dn-reader.is-skin-changthai .dn-toolbar > :not([data-dn-nav-id="home"]) {
  display: none !important;
}
.dn-reader.is-skin-changthai .dn-toolbar [data-dn-nav-id="home"] {
  display: inline-flex !important;
  margin: 0 !important;
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
@media (max-width: 820px) {
  .dn-reader.is-skin-changthai .dn-toolbar {
    min-height: 62px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  }
  .dn-reader.is-skin-changthai .dn-toolbar [data-dn-nav-id="home"] {
    width: 42px;
    height: 42px;
  }
}


/* v1.7.13 — Player sát mép trên và ẩn hoàn toàn khoảng trống của WordPress admin bar. */
html.dn-reader-active,
html.dn-reader-active body,
body.dn-reader-active,
body.dn-reader-active.admin-bar {
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  top: 0 !important;
}
html.dn-reader-active { scroll-padding-top: 0 !important; }
body.dn-reader-active #wpadminbar { display: none !important; }
.dn-reader.is-skin-changthai {
  inset: 0 !important;
  top: 0 !important;
}
.dn-reader.is-skin-changthai .dn-toolbar {
  top: 0 !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
}


/* v1.7.14 — ChangThai headless player: HTML Package tự sở hữu toàn bộ giao diện. */
.dn-reader.is-skin-changthai .dn-toolbar {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.dn-reader.is-skin-changthai .dn-main,
.dn-reader.is-skin-changthai .dn-main.dn-html-active {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.dn-reader.is-skin-changthai .dn-main.dn-html-active > [data-dn-panel="reader"] {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.dn-reader.is-skin-changthai .dn-main.dn-html-active .dn-html-stage,
.dn-reader.is-skin-changthai .dn-main.dn-html-active .dn-html-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}


/* v1.8.8 — Fizy entry access gate. The package remains pure fast-static after access is granted. */
.dn-reader.is-skin-changthai.has-entry-gate .dn-main {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100% !important;
  overflow: auto !important;
  padding: 24px !important;
  background: var(--dn-bg) !important;
}
.dn-reader.is-skin-changthai.has-entry-gate .dn-main > [data-dn-panel="reader"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
}
.dn-reader.is-skin-changthai.has-entry-gate .dn-chapter {
  width: min(520px, 100%) !important;
  margin: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.dn-reader.is-skin-changthai.has-entry-gate .dn-chapter > .dn-kicker,
.dn-reader.is-skin-changthai.has-entry-gate .dn-chapter > h1,
.dn-reader.is-skin-changthai.has-entry-gate .dn-chapter-nav,
.dn-reader.is-skin-changthai.has-entry-gate .dn-html-stage {
  display: none !important;
}
.dn-reader.is-skin-changthai .dn-entry-access-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: clamp(28px, 6vw, 48px);
  text-align: center;
  border: 1px solid var(--dn-line);
  border-radius: 26px;
  background: var(--dn-panel);
  box-shadow: 0 20px 60px rgba(71,47,51,.13);
}
.dn-reader.is-skin-changthai .dn-entry-access-work {
  color: var(--dn-accent-strong);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}
.dn-reader.is-skin-changthai .dn-entry-access-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--dn-accent-soft);
  font-size: 30px;
}
.dn-reader.is-skin-changthai .dn-entry-access-gate strong {
  margin: 2px 0 0;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.25;
}
.dn-reader.is-skin-changthai .dn-entry-access-gate p {
  max-width: 420px;
  margin: 0;
  color: var(--dn-muted);
  line-height: 1.7;
}
.dn-reader.is-skin-changthai .dn-entry-access-gate .dn-login-button {
  min-width: min(100%, 280px);
  margin-top: 8px;
  border-radius: 14px;
}
@media (max-width: 600px) {
  .dn-reader.is-skin-changthai.has-entry-gate .dn-main { padding: 14px !important; }
  .dn-reader.is-skin-changthai .dn-entry-access-gate { padding: 30px 20px; border-radius: 22px; }
}
