/*
 * Sách nhiều định dạng · sách nói · mua có thời hạn (sân thử PA2).
 * Đặc tả: he-thong-nhan-dien/DAC-TA-SACH-NOI.md · bản mẫu ban-mau/sach-noi.html.
 * Chỉ nạp ở detail.html. Dùng token thật của PA2 (--mz-*, --mzd-*, --ui-*), theo Sáng/Tối
 * (html[data-mz-theme]) và Quốc tang (body.theme-quoc-tang).
 * Không bóng, không gradient, không khung trang trí; góc vuông. Chỉ nút kéo của thanh tiến độ,
 * radio và nút kéo tròn vì là control (§4.2).
 */

/* ------------------------------------------------------------------ */
/* 0. Token                                                            */
/* ------------------------------------------------------------------ */
body {
  --sn-page: var(--mz-paper, #fbf7ef);
  --sn-ink: var(--mz-ink, #231a14);
  --sn-strong: #1a120d;
  --sn-muted: var(--mz-muted, #6b5d4f);
  --sn-rule: var(--mz-rule, rgba(35, 26, 20, 0.2));
  --sn-rule-strong: var(--mz-rule-strong, rgba(35, 26, 20, 0.55));
  --sn-accent: var(--mz-red, #8f131a);
  --sn-fill: var(--mz-red-fill, var(--mz-red, #8f131a));
  --sn-fill-hover: var(--mz-red-fill-hover, var(--mz-red-dark, #6e0f15));
  --sn-on-fill: var(--mz-on-red, #ffffff);
  --sn-field: var(--mz-field, #ffffff);
  --sn-raised: #fffdf9;
  --sn-success: #2f6f34;
  --sn-warning: #8a5300;
  --sn-danger: #b3121c;
  --sn-focus: var(--mz-red, #8f131a);
  --sn-cond: var(--mz-condensed, "Roboto Condensed", "Arial Narrow", Arial, sans-serif);
  --sn-serif: var(--mz-serif, "Merriweather", Georgia, serif);
}

html[data-mz-theme="dark"] body:not(.theme-quoc-tang) {
  --sn-strong: var(--mzd-strong, #faf3e6);
  --sn-raised: var(--mzd-raised, #3e3d39);
  --sn-success: var(--mzd-success, #a5d49c);
  --sn-warning: var(--mzd-warning, #e9c37e);
  --sn-danger: var(--mzd-danger, #f29488);
  --sn-focus: var(--mzd-focus, #d9b877);
}

/* Quốc tang: ba màu trạng thái cùng xám (vì vậy luôn có biểu tượng + chữ, §3.2, §6.5). */
body.theme-quoc-tang {
  --sn-strong: var(--ui-text-strong, #111111);
  --sn-raised: var(--quoc-tang-elevated, #ececec);
  --sn-success: var(--ui-text-strong, #111111);
  --sn-warning: var(--ui-text-strong, #111111);
  --sn-danger: var(--ui-text-strong, #111111);
  --sn-focus: var(--ui-text-strong, #111111);
}

body.theme-quoc-tang :is(.sn-player, html body .sn-mini, html body .sn-buy-page) img {
  filter: grayscale(1);
}

/* ------------------------------------------------------------------ */
/* 1. Phần chung                                                       */
/* ------------------------------------------------------------------ */
html body .sn-ic {
  display: inline-block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
html body .sn-ic .f { fill: currentColor; stroke: none; }
html body .sn-ic .cut { fill: none; stroke: var(--sn-page); }
html body .sn-seek-ic { flex: 0 0 auto; }

html body .sn-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html body .sn-ok { color: var(--sn-success) !important; }
html body .sn-warn { color: var(--sn-warning) !important; }
html body .sn-danger { color: var(--sn-danger) !important; }
html body .sn-mut { color: var(--sn-muted) !important; }
html body .sn-ink { color: var(--sn-ink) !important; }
html body .sn-nocase { text-transform: none; }

html body .sn-kick {
  margin: 0;
  color: var(--sn-accent);
  font: 700 12px/16px var(--sn-cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Nút web: Roboto Condensed 700 IN HOA giãn 0,12em (DAC-TA-WEB §5.4). */
html body .sn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  height: 48px;
  margin: 0;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--sn-ink);
  font: 700 15px/1 var(--sn-cond);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
}
html body .sn-btn .sn-ic { letter-spacing: 0; }
html body .sn-btn:focus-visible,
html body .sn-tab:focus-visible,
html body .sn-player :focus-visible,
html body .sn-mini :focus-visible,
html body .sn-buy-page a:focus-visible {
  outline: 2px solid var(--sn-focus);
  outline-offset: 3px;
}
html body .sn-btn--primary {
  border-color: var(--sn-fill);
  background: var(--sn-fill);
  color: var(--sn-on-fill);
}
html body .sn-btn--primary:hover { border-color: var(--sn-fill-hover); background: var(--sn-fill-hover); color: var(--sn-on-fill); }
html body .sn-btn--outline { border-color: var(--sn-ink); }
html body .sn-btn--outline:hover { background: var(--sn-ink); color: var(--sn-page); }
html body .sn-btn--accent-outline { border-color: var(--sn-accent); color: var(--sn-accent); }
html body .sn-btn--accent-outline:hover { background: var(--sn-accent); color: var(--sn-page); }
html body .sn-btn--text { height: 44px; padding: 0 2px; }
html body .sn-btn--text u {
  text-decoration: underline;
  text-decoration-color: var(--sn-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
html body .sn-btn--text:hover u { text-decoration-color: currentColor; }
html body .sn-btn--save.is-active .sn-ic path { fill: currentColor; }
html body .sn-btn[disabled] { cursor: default; opacity: 0.7; }
html body .sn-dot { margin: 0 -2px; }

html body .sn-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 22px;
}
html body .sn-fine {
  max-width: 60ch;
  margin: 14px 0 0;
  color: var(--sn-muted);
  font: italic 400 13px/20px var(--sn-serif);
}
html body .sn-demo-note {
  margin: 14px 0 0;
  color: var(--sn-muted);
  font: italic 400 12.5px/18px var(--sn-serif);
}

/* Câu đồng ý thụ động dưới nút mua, nâng cấp, thanh toán (D-128, DAC-TA-WEB §7.1.3).
   DOM: <p> ngay sau nút. 1280: đứng dưới cả hàng nút, cùng lề trái (order đưa xuống cuối hàng, không đảo
   lên trước nút). 390: ngay dưới nút chính, trước nút chữ. Không khung, nền, bóng, icon. */
html body p.st-agree {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--sn-muted);
  font: 400 14px/22px var(--sn-cond);
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: pretty;
}
html body .st-agree a {
  padding: 5px 0;
  color: var(--sn-ink);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
html body .st-agree a:hover,
html body .st-agree a:focus-visible { color: var(--sn-accent); }
html body .st-agree a:focus-visible { outline: 2px solid var(--sn-focus); outline-offset: 3px; }
html body .sn-acts > p.st-agree { flex: 0 0 100%; order: 10; margin: -4px 0 0; }
@media (max-width: 768px) {
  html body p.st-agree { line-height: 24px; }
  html body .sn-acts > p.st-agree { order: 0; margin: 0; }
}

/* Radio vuông góc của STBook: chấm tròn là control. */
html body .sn-radio {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid var(--sn-rule-strong);
  border-radius: 50%;
}
html body .is-on > .sn-radio { border-color: var(--sn-accent); }
html body .is-on > .sn-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sn-accent);
}

/* ------------------------------------------------------------------ */
/* 2. Chi tiết: tác giả, bộ chọn định dạng (§2)                        */
/* ------------------------------------------------------------------ */
html body[data-page-kind="detail"] .sn-header .book-detail-title.detail-title.detail-title {
  margin-bottom: 14px;
}
html body .sn-byline {
  margin: 0;
  color: var(--sn-accent);
  font: 700 13px/18px var(--sn-cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html body .sn-tabs {
  display: grid;
  grid-template-columns: repeat(var(--sn-tab-count, 3), minmax(0, 1fr));
  margin-top: 26px;
  border-top: 1px solid var(--sn-rule);
  border-bottom: 1px solid var(--sn-rule);
}
html body .sn-tab {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 13px 16px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sn-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
html body .sn-tab + .sn-tab { border-left: 1px solid var(--sn-rule); }
html body .sn-tab__name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sn-muted);
  font: 700 16px/22px var(--sn-cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
html body .sn-tab:hover .sn-tab__name { color: var(--sn-ink); }
html body .sn-tab.is-on .sn-tab__name { color: var(--sn-strong); }
html body .sn-tab.is-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--sn-accent);
}
html body .sn-tab__sub {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--sn-muted);
  font: italic 400 13px/18px var(--sn-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .sn-tab__status {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  margin-top: 8px;
  color: var(--sn-ink);
  font: 700 13.5px/18px var(--sn-cond);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 3. Khối hành động, khối mua, trạng thái (§3)                        */
/* ------------------------------------------------------------------ */
html body .sn-action { margin-bottom: 8px; }
html body .sn-single {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 26px 0 -8px;
  color: var(--sn-muted);
  font: 700 11.5px/16px var(--sn-cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html body .sn-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  color: var(--sn-ink);
  font: 700 15px/20px var(--sn-cond);
  letter-spacing: 0.02em;
}
html body .sn-stat + .sn-acts { margin-top: 16px; }
html body .sn-guest-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 24px 0 -12px;
  color: var(--sn-muted);
  font: 700 13px/18px var(--sn-cond);
  letter-spacing: 0.04em;
}

html body .sn-buy-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 26px;
}
html body .sn-buy-groups--one { grid-template-columns: minmax(0, 1fr); max-width: 330px; margin-top: 20px; }
html body .sn-group__title {
  margin: 0;
  color: var(--sn-strong);
  font: 700 16px/22px var(--sn-serif);
}
html body .sn-group__title small {
  display: block;
  margin-top: 2px;
  color: var(--sn-muted);
  font: italic 400 13px/18px var(--sn-serif);
}
html body .sn-plans { margin-top: 10px; }
html body .sn-plan {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 54px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--sn-rule);
  color: var(--sn-ink);
  cursor: pointer;
}
html body .sn-plan + .sn-plan { border-top: 0; }
html body .sn-plan.is-on::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--sn-accent);
  pointer-events: none;
}
html body .sn-plan:focus-within { outline: 2px solid var(--sn-focus); outline-offset: 2px; z-index: 1; }
html body .sn-plan:has(.sn-plan__input:focus:not(:focus-visible)) { outline: 0; }
html body .sn-plan__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
html body .sn-plan__term {
  flex: 1;
  min-width: 0;
  color: var(--sn-ink);
  font: 700 15px/20px var(--sn-cond);
  letter-spacing: 0.02em;
}
html body .sn-plan__term small {
  display: block;
  color: var(--sn-muted);
  font: italic 400 12.5px/17px var(--sn-serif);
  letter-spacing: 0;
}
html body .sn-plan__price {
  color: var(--sn-strong);
  font: 700 15px/20px var(--sn-cond);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
}
html body .sn-plan__price s {
  display: block;
  color: var(--sn-muted);
  font: 400 12.5px/17px var(--sn-cond);
}

html body .sn-buy-groups + .sn-acts .sn-btn--save { margin-left: auto; }

html body .sn-resume { max-width: 360px; margin-top: 14px; }
html body .sn-resume__row {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: var(--sn-ink);
  font: 400 13.5px/18px var(--sn-cond);
  font-variant-numeric: tabular-nums;
}
html body .sn-resume__pct { color: var(--sn-muted); }
html body .sn-bar {
  position: relative;
  height: 3px;
  margin-top: 6px;
  background: var(--sn-rule);
}
html body .sn-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--sn-accent);
}
html body .sn-kept {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  color: var(--sn-ink);
  font: 400 14px/20px var(--sn-serif);
}
html body .sn-kept .sn-ic { color: var(--sn-muted); }

html body .sn-desc-note {
  margin: -6px 0 14px;
  color: var(--sn-muted);
  font: italic 400 13px/18px var(--sn-serif);
}

@media (max-width: 768px) {
  html body .sn-tabs { margin-top: 20px; }
  html body .sn-tab { padding: 11px 6px 12px 9px; }
  html body .sn-tab__name { gap: 5px; font-size: 14.5px; letter-spacing: 0.1em; }
  html body .sn-tab__name .sn-ic { width: 18px; height: 18px; }
  html body .sn-tab__sub { font-size: 12px; }
  html body .sn-tab__status { gap: 3px; margin-top: 6px; font-size: 12.5px; }
  html body .sn-tab__status .sn-ic { width: 15px; height: 15px; }
  html body .sn-tab__from { display: none; }
  html body .sn-buy-groups { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 22px; }
  html body .sn-buy-groups--one { max-width: none; }
  html body .sn-acts { gap: 8px 16px; }
  html body .sn-acts > .sn-btn--primary,
html body .sn-acts > .sn-btn--outline,
html body .sn-acts > .sn-btn--accent-outline { flex: 1 1 100%; }
  html body .sn-buy-groups + .sn-acts .sn-btn--save { margin-left: 0; }
  html body .sn-resume { max-width: none; }
}

/* ------------------------------------------------------------------ */
/* 4. Trình nghe (§4.2, §4.3)                                          */
/* ------------------------------------------------------------------ */
html.sn-player-open,
body.sn-player-open { overflow: hidden; }

html body .sn-player {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
  background: var(--sn-page);
  color: var(--sn-ink);
  font-family: var(--sn-serif);
}
html body .sn-player button { font-family: inherit; }

html body .sn-pl-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--sn-rule);
  background: var(--sn-page);
}
html body .sn-pl-back {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding-right: 16px;
  border-right: 1px solid var(--sn-rule);
  color: var(--sn-ink);
  font: 700 14px/16px var(--sn-cond);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
html body .sn-pl-back:hover { color: var(--sn-accent); }
html body .sn-pl-back .sn-ic { width: 20px; height: 20px; }
html body .sn-pl-back__x { display: none; }
html body .sn-pl-logo { display: block; flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; }
html body .sn-pl-tt { flex: 1; min-width: 0; }
html body .sn-pl-tt small {
  display: block;
  overflow: hidden;
  color: var(--sn-accent);
  font: 700 10.5px/14px var(--sn-cond);
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
html body .sn-pl-tt b {
  display: block;
  overflow: hidden;
  color: var(--sn-strong);
  font: 700 15px/20px var(--sn-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .sn-pl-tools { display: flex; align-items: center; }
html body .sn-pl-tb {
  position: relative;
  width: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sn-ink);
  font: 700 14px/16px var(--sn-cond) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
html body .sn-pl-tb + .sn-pl-tb { border-left: 1px solid var(--sn-rule); }
html body .sn-pl-tb .sn-ic { width: 21px; height: 21px; }
html body .sn-pl-tb:hover { color: var(--sn-accent); }
html body .sn-pl-tb.is-on { color: var(--sn-accent); }
html body .sn-pl-tb.is-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sn-accent);
}
html body .sn-pl-tb.is-set .sn-pl-tb__label { font-variant-numeric: tabular-nums; }

html body .sn-pl-left {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  grid-column: 1;
  grid-row: 2;
}
html body .sn-pl-body {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 72px 48px 24px;
  overflow: auto;
}
html body .sn-pl-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin: auto 0;
}
html body .sn-pl-cover { flex: 0 0 auto; width: 300px; }
html body .sn-pl-cover img,
html body .sn-scr__cover img,
html body .sn-mini__cover img,
html body .sn-sum__cover img,
html body .sn-msum__cover img {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid var(--sn-rule);
  outline-offset: -1px;
}
html body .sn-pl-info { flex: 0 1 476px; width: 476px; min-width: 0; }
html body .sn-pl-kick {
  margin: 0;
  color: var(--sn-accent);
  font: 700 12.5px/16px var(--sn-cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html body .sn-pl-kick__reader { display: none; }
html body .sn-pl-title {
  margin: 10px 0 0;
  color: var(--sn-strong);
  font: 900 30px/37px var(--sn-serif);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
html body .sn-pl-by {
  margin: 10px 0 0;
  color: var(--sn-accent);
  font: 700 13px/18px var(--sn-cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html body .sn-pl-reader {
  margin: 6px 0 0;
  color: var(--sn-muted);
  font: italic 400 14px/20px var(--sn-serif);
}
html body .sn-pl-ch {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--sn-rule);
}
html body .sn-pl-ch small {
  display: block;
  color: var(--sn-muted);
  font: 700 11.5px/16px var(--sn-cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html body .sn-pl-ch b {
  display: block;
  margin-top: 4px;
  color: var(--sn-strong);
  font: 700 16px/23px var(--sn-serif);
}

/* Thanh tiến độ chương: rãnh 3 px, nút kéo tròn 15 px (control). */
html body .sn-track { position: relative; height: 15px; margin-top: 20px; }
html body .sn-track__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 3px;
  background: var(--sn-rule);
}
html body .sn-track__rail i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(7.5px + (100% - 15px) * var(--sn-p, 0));
  background: var(--sn-accent);
}
html body .sn-track__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 15px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
html body .sn-track__input::-webkit-slider-runnable-track { height: 15px; background: transparent; border: 0; }
html body .sn-track__input::-moz-range-track { height: 15px; background: transparent; border: 0; }
html body .sn-track__input::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--sn-accent);
  -webkit-appearance: none;
  appearance: none;
}
html body .sn-track__input::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--sn-accent);
}
html body .sn-pl-times {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--sn-muted);
  font: 400 14px/18px var(--sn-cond);
  font-variant-numeric: tabular-nums;
}
html body .sn-pl-times b { color: var(--sn-strong); font-weight: 700; }

/* Hàng điều khiển: tâm nút Phát trùng tâm thanh tiến độ (lưới 1fr auto 1fr). */
html body .sn-pl-ctl {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  margin-top: 20px;
}
html body .sn-pl-ctl > :first-child { justify-self: end; }
html body .sn-pl-ctl > :last-child { justify-self: start; }
html body .sn-pl-seek {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sn-ink);
  font: 700 15px/1 var(--sn-cond) !important;
  letter-spacing: 0.12em;
  white-space: nowrap;
  cursor: pointer;
}
html body .sn-pl-seek:hover { color: var(--sn-accent); }
html body .sn-pl-play {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--sn-fill);
  color: var(--sn-on-fill);
  cursor: pointer;
}
html body .sn-pl-play:hover { background: var(--sn-fill-hover); }
html body .sn-pl-sub {
  display: grid;
  grid-template-columns: repeat(4, auto);
  width: max-content;
  margin: 24px auto 0;
  border: 1px solid var(--sn-rule);
}
html body .sn-pl-sub > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sn-ink);
  font: 700 13px/16px var(--sn-cond) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
html body .sn-pl-sub > button + button { border-left: 1px solid var(--sn-rule); }
html body .sn-pl-sub > button:hover { color: var(--sn-accent); }
html body .sn-pl-sub .sn-ic { width: 19px; height: 19px; }
html body .sn-pl-sim {
  max-width: 476px;
  margin: 18px auto 0;
  color: var(--sn-muted);
  font: italic 400 12.5px/18px var(--sn-serif);
  text-align: center;
}

html body .sn-pl-bot {
  flex: 0 0 auto;
  height: 49px;
  border-top: 1px solid var(--sn-rule);
  background: var(--sn-page);
}
html body .sn-bar--book { height: 3px; margin: -1px 0 0; }
html body .sn-pl-bot__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 46px;
  padding: 0 24px;
  color: var(--sn-muted);
  font: 400 13.5px/18px var(--sn-cond);
  font-variant-numeric: tabular-nums;
}
html body .sn-pl-bot__row a { color: var(--sn-accent); font-weight: 700; }
html body .sn-pl-bot__strong { color: var(--sn-ink); font-weight: 700; }
/* Nghe thử đang chạy: nhãn son, đậm (DOC-SACH §7.2). */
html body .sn-pl-bot__strong.sn-pl-bot__sample { color: var(--sn-accent); }
html body .sn-pl-bot__rest { color: var(--sn-ink); font-weight: 700; }
html body .sn-pl-bot__short { display: none; }

html body .sn-pl-pill {
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 6px 0 16px;
  border: 1px solid var(--sn-rule-strong);
  background: var(--sn-raised);
  color: var(--sn-ink);
  font: 400 14px/18px var(--sn-cond);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
}
html body .sn-pl-pill[hidden] { display: none; }
html body .sn-pl-pill button {
  height: 26px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid var(--sn-rule);
  border-radius: 0;
  background: transparent;
  color: var(--sn-accent);
  font: 700 14px/1 var(--sn-cond) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Danh sách chương: ghim phải khi ≥ 1040 px. */
html body .sn-pl-side {
  display: none;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--sn-rule-strong);
  background: var(--sn-raised);
  overscroll-behavior: contain;
}
html body .sn-pl-side__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 18px 20px 0;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--sn-accent);
  color: var(--sn-accent);
  font: 700 11.5px/15px var(--sn-cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html body .sn-pl-side__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--sn-rule-strong);
}
html body .sn-pl-side__meta {
  color: var(--sn-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
html body .sn-chl { margin: 8px 0 0; padding: 0; list-style: none; }
html body .sn-chl__item button {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  border: 0;
  border-bottom: 1px solid var(--sn-rule);
  border-radius: 0;
  background: transparent;
  color: var(--sn-ink);
  text-align: left;
  cursor: pointer;
}
html body .sn-chl__item button:hover .sn-chl__title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sn-rule-strong); }
html body .sn-chl__no { color: var(--sn-muted); font: 900 13px/19px var(--sn-serif); }
html body .sn-chl__no .sn-ic { width: 17px; height: 17px; vertical-align: -3px; }
html body .sn-chl__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--sn-ink);
  font: 400 13.5px/19px var(--sn-serif);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
html body .sn-chl__du {
  color: var(--sn-muted);
  font: 400 13px/19px var(--sn-cond);
  font-variant-numeric: tabular-nums;
}
html body .sn-chl__item.is-done .sn-chl__title { color: var(--sn-muted); }
html body .sn-chl__item.is-on button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sn-accent);
}
html body .sn-chl__item.is-on .sn-chl__no,
html body .sn-chl__item.is-on .sn-chl__title { color: var(--sn-accent); font-weight: 700; }
html body .sn-chl__tag {
  display: block;
  margin-top: 3px;
  color: var(--sn-accent);
  font: 700 10.5px/14px var(--sn-cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html body .sn-chl__tag span {
  margin-left: 6px;
  color: var(--sn-muted);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-transform: none;
}

@media (min-width: 1040px) {
  html body .sn-player.is-side-open { grid-template-columns: minmax(0, 1fr) 360px; }
  html body .sn-player.is-side-open .sn-pl-side { display: block; grid-column: 2; grid-row: 2; }
  html body .sn-pl-overlay-mini { display: none; }
}

/* Bảng Tốc độ / Hẹn giờ (§4.5): bám nút, nền raised, kẻ son 3 px ở đầu, không bóng. */
html body .sn-pop {
  position: absolute;
  z-index: 10;
  box-sizing: border-box;
  width: 340px;
  max-width: calc(100% - 24px);
  padding: 4px 18px 18px;
  border: 1px solid var(--sn-rule-strong);
  border-top: 3px solid var(--sn-accent);
  background: var(--sn-raised);
}
html body .sn-pop[hidden] { display: none; }
html body .sn-pop__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 10px;
  color: var(--sn-accent);
  font: 700 11.5px/15px var(--sn-cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html body .sn-pop__meta {
  color: var(--sn-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}
html body .sn-pop__note {
  margin: 10px 0 0;
  color: var(--sn-muted);
  font: italic 400 12.5px/18px var(--sn-serif);
}
html body .sn-speed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--sn-rule);
  border-left: 1px solid var(--sn-rule);
}
html body .sn-speed button {
  position: relative;
  height: 48px;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--sn-rule);
  border-bottom: 1px solid var(--sn-rule);
  border-radius: 0;
  background: transparent;
  color: var(--sn-ink);
  font: 700 16px/1 var(--sn-cond) !important;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
html body .sn-speed button.is-on { color: var(--sn-accent); }
html body .sn-speed button.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--sn-accent);
}
html body .sn-tlist button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--sn-rule);
  border-radius: 0;
  background: transparent;
  color: var(--sn-ink);
  font: 700 15px/20px var(--sn-cond) !important;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}
html body .sn-tlist button:first-child { border-top: 1px solid var(--sn-rule); }
html body .sn-tlist button.is-on { color: var(--sn-strong); }
html body .sn-tlist em {
  margin-left: auto;
  color: var(--sn-muted);
  font: normal 400 13px/18px var(--sn-cond);
  font-variant-numeric: tabular-nums;
}

/* Màn trạng thái (§5): đang tải, lỗi, hết sách. */
html body .sn-pl-screen {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  bottom: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: var(--sn-page);
}
html body .sn-pl-screen[hidden] { display: none; }
html body .sn-scr {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  padding: 28px 24px;
  text-align: center;
}
html body .sn-scr__cover { width: 120px; margin-bottom: 20px; }
html body .sn-scr__ic { color: var(--sn-ink); margin-bottom: 12px; }
html body .sn-scr__kicker {
  margin: 0;
  color: var(--sn-accent);
  font: 700 12px/16px var(--sn-cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html body .sn-scr__title { margin: 8px 0 0; color: var(--sn-strong); font: 900 22px/28px var(--sn-serif); }
html body .sn-scr__title--sm { font: 700 16px/22px var(--sn-serif); }
html body .sn-scr__by {
  margin: 8px 0 0;
  color: var(--sn-accent);
  font: 700 12px/16px var(--sn-cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html body .sn-scr__text { margin: 8px 0 0; color: var(--sn-ink); font: 400 15px/24px var(--sn-serif); }
html body .sn-scr__meta { margin: 12px 0 0; color: var(--sn-muted); font: italic 400 14px/20px var(--sn-serif); }
html body .sn-scr__load {
  position: relative;
  width: 160px;
  height: 3px;
  margin-top: 18px;
  overflow: hidden;
  background: var(--sn-rule);
}
html body .sn-scr__load--wide { width: 100%; max-width: 480px; }
html body .sn-scr__load i {
  position: absolute;
  left: 30%;
  top: 0;
  bottom: 0;
  width: 40%;
  background: var(--sn-accent);
  animation: sn-run 1.4s ease-in-out infinite;
}
@keyframes sn-run {
  0% { left: -40%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html body .sn-scr__load i { animation: none; }
}
html body .sn-acts--center { justify-content: center; }
html body .sn-acts--stack { flex-direction: column; align-items: stretch; width: 100%; }

/* Bảng chương phủ (dưới 1040 px). */
@media (max-width: 1039px) {
  html body .sn-player.is-side-open .sn-pl-side {
    position: absolute;
    left: 0;
    right: 0;
    top: 56px;
    bottom: 56px;
    z-index: 6;
    display: block;
    border-left: 0;
    background: var(--sn-page);
  }
  html body .sn-player.is-side-open .sn-pl-back__arrow { display: none; }
  html body .sn-player.is-side-open .sn-pl-back__x { display: inline-block; }
  html body .sn-pl-overlay-mini { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; }
  html body .sn-pl-overlay-mini:empty { display: none; }
  html body .sn-pl-overlay-mini .sn-mini__in { padding-left: 12px; border-top: 1px solid var(--sn-rule); background: var(--sn-page); height: 56px; }
}

@media (max-width: 899px) {
  html body .sn-pl-body { align-items: flex-start; padding: 22px 24px 24px; }
  html body .sn-pl-main { flex-direction: column; align-items: stretch; gap: 0; width: 100%; max-width: 520px; margin: 0 auto; }
  html body .sn-pl-cover { width: 168px; margin: 0 auto; }
  html body .sn-pl-info { width: auto; flex: 0 0 auto; }
  html body .sn-pl-kick { margin-top: 20px; font-size: 11.5px; }
  html body .sn-pl-kick__reader { display: inline; }
  html body .sn-pl-reader { display: none; }
  html body .sn-pl-title { margin-top: 6px; font-size: 20px; line-height: 26px; }
  html body .sn-pl-by { margin-top: 6px; font-size: 12px; }
  html body .sn-pl-ch { margin-top: 12px; padding-top: 10px; }
  html body .sn-pl-ch b { overflow: hidden; margin-top: 2px; font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
  html body .sn-pl-ch small .sn-sr { display: none; }
  html body .sn-track { margin-top: 18px; }
  html body .sn-pl-ctl { gap: 18px; margin-top: 12px; }
  html body .sn-pl-sub { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: 18px; }
  html body .sn-pl-sub > button { flex-direction: column; gap: 2px; height: 54px; padding: 0 2px; font-size: 12.5px !important; letter-spacing: 0.1em; }
  html body .sn-pl-sub__long { display: none; }
  html body .sn-pl-bot__row { padding: 0 16px; font-size: 12.5px; }
  html body .sn-pl-bot__rest, html body .sn-pl-bot__long { display: none; }
  html body .sn-pl-bot__short { display: inline; }
  html body .sn-pl-pill { top: 12px; }
}

@media (max-width: 640px) {
  html body .sn-pl-top { gap: 6px; padding: 0 8px 0 4px; }
  html body .sn-pl-back { justify-content: center; width: 44px; height: 44px; padding: 0; border-right: 0; }
  html body .sn-pl-back__label, html body .sn-pl-logo, html body .sn-pl-tb__label { display: none; }
  html body .sn-pl-tt b { font-size: 14px; }
  html body .sn-pl-tb { justify-content: center; width: 44px; height: 44px; padding: 0; }
  html body .sn-pl-tb + .sn-pl-tb { border-left: 0; }
  html body .sn-pl-tb.is-on::after { display: none; }
  html body .sn-pl-tb .sn-ic { width: 24px; height: 24px; }
}

/* ------------------------------------------------------------------ */
/* 5. Mini player (§4.4)                                               */
/* ------------------------------------------------------------------ */
body.sn-has-mini { padding-bottom: 56px; }
html body .sn-mini {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  height: 56px;
  border-top: 1px solid var(--sn-rule);
  background: var(--sn-page);
  color: var(--sn-ink);
}
html body .sn-mini__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 100%;
  padding: 0 12px 0 31px;
}
html body .sn-mini__in::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: var(--sn-mini-p, 0%);
  height: 2px;
  background: var(--sn-accent);
}
html body .sn-mini__open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* Bìa không bao giờ bị cắt: ô 27×40 giữ nguyên, bìa lệch tỉ lệ thu vừa ô, căn đáy giữa.
   Ảnh co theo bìa (max-*) nên viền 1px ôm sát bìa, ô để trong suốt. */
html body .sn-mini__cover {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 27px;
  height: 40px;
  overflow: hidden;
  background: transparent;
}
html body .sn-mini__cover img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
html body .sn-mini__text { flex: 1; min-width: 0; }
html body .sn-mini__text b {
  display: block;
  overflow: hidden;
  color: var(--sn-strong);
  font: 700 14px/19px var(--sn-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .sn-mini__text small {
  display: block;
  overflow: hidden;
  color: var(--sn-muted);
  font: 400 12.5px/16px var(--sn-cond);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .sn-mini__open:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sn-rule-strong); }
html body .sn-mini__time {
  color: var(--sn-muted);
  font: 400 12.5px/16px var(--sn-cond);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html body .sn-mini__btn {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sn-ink);
  cursor: pointer;
}
html body .sn-mini__pp { color: var(--sn-strong); }
html body .sn-mini__x { color: var(--sn-muted); }
html body .sn-mini__btn:hover { color: var(--sn-accent); }

@media (max-width: 768px) {
  html body .sn-mini__in { gap: 10px; padding-left: 12px; }
  html body .sn-mini__time { display: none; }
}

/* ------------------------------------------------------------------ */
/* 6. Luồng mua (§3.7)                                                 */
/* ------------------------------------------------------------------ */
html body .sn-buy-page { padding-bottom: 24px; }
html body .sn-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 0;
  padding: 0;
  border-bottom: 1px solid var(--sn-rule);
  list-style: none;
}
html body .sn-step {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 12px 12px 0;
  color: var(--sn-muted);
  font: 700 13px/18px var(--sn-cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html body .sn-step + .sn-step { padding-left: 16px; border-left: 1px solid var(--sn-rule); }
html body .sn-step b { color: var(--sn-muted); font: 900 20px/1 var(--sn-serif); letter-spacing: 0; }
html body .sn-step__ok { align-self: center; color: var(--sn-success); }
html body .sn-step.is-current { color: var(--sn-strong); }
html body .sn-step.is-current b { color: var(--sn-accent); }
html body .sn-step.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--sn-accent);
}
html body .sn-buy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 64px;
  align-items: start;
  padding: 32px 0 64px;
}
html body .sn-buy__main { min-width: 0; max-width: 640px; }
html body .sn-buy__title { margin: 8px 0 0; color: var(--sn-strong); font: 900 32px/38px var(--sn-serif); letter-spacing: -0.01em; }
html body .sn-buy__title:focus { outline: 0; }
html body .sn-buy__lead { max-width: 60ch; margin: 10px 0 0; color: var(--sn-ink); font: 400 15px/24px var(--sn-serif); }

html body .sn-form { margin: 0; }
html body .sn-fld { margin: 20px 0 0; min-width: 0; }
html body .sn-fld > label,
html body .sn-fld > legend {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  color: var(--sn-strong);
  font: 700 12px/16px var(--sn-cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html body .sn-fld i { margin-left: 3px; color: var(--sn-accent); font-style: normal; }
html body .sn-fld > label small {
  margin-left: 6px;
  color: var(--sn-muted);
  font: italic 400 12.5px/16px var(--sn-serif);
  letter-spacing: 0;
  text-transform: none;
}

html body .sn-inp {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--sn-rule-strong);
  border-radius: 0;
  background: var(--sn-field);
  color: var(--sn-ink);
  font: 400 15px/22px var(--sn-serif);
  box-shadow: none;
}
html body .sn-inp::placeholder { color: var(--sn-muted); font-style: italic; opacity: 1; }
html body .sn-inp:focus-visible { outline: 2px solid var(--sn-focus); outline-offset: 3px; }
html body .has-err > .sn-inp { padding: 0 13px; border: 2px solid var(--sn-danger); }
html body .sn-err {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 0 0;
  color: var(--sn-danger);
  font: 400 13.5px/18px var(--sn-serif);
}
html body .sn-hint { margin: 6px 0 0; color: var(--sn-muted); font: italic 400 13px/18px var(--sn-serif); }

html body .sn-acts--form { margin-top: 28px; }

html body .sn-short { display: none; }

html body .sn-sum { border-top: 3px solid var(--sn-accent); padding-top: 3px; }
html body .sn-sum::before { content: ""; display: block; height: 1px; background: var(--sn-rule-strong); }
html body .sn-sum__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  color: var(--sn-accent);
  font: 700 12px/16px var(--sn-cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html body .sn-sum__head a,
html body .sn-msum__price a {
  color: var(--sn-ink);
  letter-spacing: 0.12em;
  text-decoration: underline;
  text-decoration-color: var(--sn-rule-strong);
  text-underline-offset: 4px;
}
html body .sn-sum__book {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--sn-rule);
}
html body .sn-sum__cover { flex: 0 0 auto; width: 60px; }
html body .sn-sum__book b { display: block; color: var(--sn-strong); font: 700 15px/21px var(--sn-serif); }
html body .sn-sum__book small {
  display: block;
  margin-top: 6px;
  color: var(--sn-accent);
  font: 700 11.5px/15px var(--sn-cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html body .sn-sum__rows { margin: 0; }
html body .sn-sum__rows > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sn-rule);
  font: 400 14.5px/20px var(--sn-cond);
}
html body .sn-sum__rows dt { color: var(--sn-muted); }
html body .sn-sum__rows dd {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--sn-strong);
  font-weight: 700;
  text-align: right;
}
html body .sn-sum__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; }
html body .sn-sum__total b { color: var(--sn-strong); font: 700 16px/22px var(--sn-serif); }
html body .sn-sum__total span { color: var(--sn-strong); font: 900 28px/32px var(--sn-serif); font-variant-numeric: tabular-nums; }
html body .sn-sum__vat { margin: 4px 0 0; color: var(--sn-muted); font: italic 400 13px/18px var(--sn-serif); text-align: right; }
html body .sn-msum { display: none; }

html body .sn-pay-note { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sn-rule-strong); }
html body .sn-pay-note h2 { margin: 0; color: var(--sn-strong); font: 700 16px/22px var(--sn-serif); }
html body .sn-pay-note p { max-width: 62ch; margin: 6px 0 0; color: var(--sn-ink); font: 400 14.5px/23px var(--sn-serif); }

html body .sn-res__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 900 26px/32px var(--sn-serif);
}
html body .sn-res p { margin: 8px 0 0; color: var(--sn-ink); font: 400 15px/24px var(--sn-serif); overflow-wrap: anywhere; }
html body .sn-res p.sn-res__code { margin-top: 10px; color: var(--sn-muted); font: 400 13.5px/18px var(--sn-cond); font-variant-numeric: tabular-nums; }
html body .sn-res .sn-scr__load { margin-top: 16px; }
html body .sn-sim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  margin-top: 36px;
  padding-top: 10px;
  border-top: 1px solid var(--sn-rule);
}
html body .sn-sim > span {
  color: var(--sn-muted);
  font: 700 11.5px/16px var(--sn-cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html body .sn-sim .sn-btn { height: 36px; font-size: 13px; color: var(--sn-muted); }
html body .sn-sim .sn-btn[aria-pressed="true"] { color: var(--sn-accent); }

@media (max-width: 768px) {
  html body .sn-buy-crumb { display: none; }
  html body .sn-steps { margin-top: 4px; }
  html body .sn-step { flex-direction: column; gap: 4px; padding: 10px 6px 10px 0; font-size: 11px; line-height: 14px; letter-spacing: 0.1em; }
  html body .sn-step + .sn-step { padding-left: 10px; }
  html body .sn-step b { font-size: 18px; }
  html body .sn-step__ok { display: none; }
  html body .sn-msum {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--sn-rule);
  }
  html body .sn-msum__cover { flex: 0 0 auto; width: 32px; }
  html body .sn-msum__text { flex: 1; min-width: 0; }
  html body .sn-msum__text b {
    display: block;
    overflow: hidden;
    color: var(--sn-strong);
    font: 700 14px/19px var(--sn-serif);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html body .sn-msum__text small { display: block; color: var(--sn-muted); font: 400 13px/18px var(--sn-cond); }
  html body .sn-msum__price { color: var(--sn-strong); font: 900 17px/22px var(--sn-serif); text-align: right; white-space: nowrap; }
  html body .sn-msum__price a {
    display: block;
    margin-top: 2px;
    font: 700 11.5px/16px var(--sn-cond);
    text-transform: uppercase;
    text-underline-offset: 3px;
  }
  html body .sn-buy { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 0 32px; }
  html body .sn-sum { display: none; }
  html body .sn-buy__title { font-size: 24px; line-height: 30px; }
  
  
  
  html body .sn-btn--wide-m { flex: 1 1 100%; }
  html body .sn-long { display: none; }
  html body .sn-short { display: inline; }
  html body .sn-res__title { font-size: 22px; line-height: 28px; }
}

/* ------------------------------------------------------------------ */
/* 7. Vá kiểu chung của styles.css (ảnh bo 10 px, ô nhập có viền/bo)    */
/* ------------------------------------------------------------------ */
html body :is(.sn-player, html body .sn-mini, html body .sn-buy-page) img { border-radius: 0; box-shadow: none; }
html body .sn-track .sn-track__input.sn-track__input {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
}
html body .sn-buy-page .sn-inp.sn-inp { border-radius: 0; box-shadow: none; }
html body .sn-player:focus { outline: 0; }
html body .sn-header .sn-byline { text-align: left; }
/* Mini player không che bong bóng hỏi đáp (book-qa-messenger, z 260): đẩy cả khối lên 56 px. */
body.sn-has-mini .book-qa-messenger { bottom: 56px; }
/* styles.css đặt mọi button rộng 100% — trả lại bề rộng theo nội dung. */
html body .sn-btn, html body .sn-pl-seek, html body .sn-pl-pill button { width: auto; }
html body .sn-acts--stack > .sn-btn { flex: 0 0 auto; }
html body .sn-pl-play { width: 64px; }
html body .sn-mini__btn { width: 44px; }
html body .sn-header .sn-byline { align-self: stretch; width: 100%; text-align: left; }
html body .sn-header :is(.sn-action, .sn-tabs) { align-self: stretch; width: 100%; box-sizing: border-box; }
html body .sn-steps { scroll-margin-top: 72px; }
html body .sn-player.has-screen .sn-pl-tools { visibility: hidden; }
/* Nút "thích" (tính năng thật) giữ nguyên, nằm dưới khối hành động, ngoài phần đổi theo tab. */
html body[data-page-kind="detail"] .sn-header .detail-like-cluster.detail-like-cluster { align-self: flex-start; justify-content: flex-start; margin: 14px 0 0 -10px; }

/* ------------------------------------------------------------------ */
/* 8. Nâng lên trọn bộ (§3.8)                                          */
/* ------------------------------------------------------------------ */
html body .sn-plan--up { padding-top: 10px; padding-bottom: 10px; }
html body .sn-plan__term small b { color: var(--sn-ink); font-style: normal; font-weight: 700; font-family: var(--sn-cond); }
html body .sn-hid-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--sn-muted);
  font: italic 400 12.5px/18px var(--sn-serif);
}
html body .sn-hid-note .sn-ic { margin-top: 1px; }
html body .sn-up-link { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--sn-rule); max-width: 520px; }
html body .sn-btn--accent { color: var(--sn-accent); height: auto; min-height: 32px; white-space: normal; text-align: left; justify-content: flex-start; gap: 8px; }
html body .sn-btn--accent u { text-decoration-color: currentColor; text-underline-offset: 4px; line-height: 1.5; }
html body .sn-up-link .sn-fine { margin-top: 4px; }
html body .sn-sum__note { margin: 10px 0 0; color: var(--sn-muted); font: italic 400 13px/19px var(--sn-serif); }
html body .sn-sum__rows dt { min-width: 0; }
html body .sn-sum__rows dd { white-space: nowrap; }
html body .sn-res .sn-tabs--static { margin: 18px 0 4px; }
html body .sn-tabs--static .sn-tab { cursor: default; }

/* Nhãn "Chưa nối thanh toán" / "Bản mẫu thiết kế" đầu cột thanh toán (2026-10-04, nối API thật). */
html body .sn-buy__main > .sn-stat:first-child { margin: 0 0 20px; }
/* Quyền nghe đã hết hạn (DAC-TA-DOC-SACH §7.4, §11.7): dòng hết hạn màu danger ngay trên nút Gia hạn; dòng lịch sử màu phụ. */
html body .sn-scr__expiry,
html body .sn-scr__keep { display: inline-flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; text-align: left; font: 400 14px/20px var(--sn-serif); }
html body .sn-scr__expiry { color: var(--sn-danger); font-weight: 700; }
html body .sn-scr__keep { margin-top: 14px; color: var(--sn-muted); }
html body .sn-scr__expiry svg,
html body .sn-scr__keep svg { flex: 0 0 auto; }