/* Thanh phát đen–vàng thống nhất ở mọi trang có trình phát, gồm trang nghe. */
.player {
  --brand: #e6b85f;
  --surface: #141719;
  --surface2: #1b1d20;
  --line: #30302c;
  --text: #eee9df;
  --dh-petal2: #e6b85f;
  --dh-yellow: #e6b85f;
  --dh-pink-line: #55442b;
  --mono: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #101214f5;
  border: 1px solid #705933;
  border-radius: 8px;
  color: #eee3cc;
  box-shadow: 0 -8px 25px #0003;
  padding: 8px 10px 6px;
  font-family: var(--mono);
  animation: none;
  transition: none;
}
.player .pl-title { font-family: inherit; font-size: 16px; line-height: 1.5; }
.player .pl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.player .pl-transport, .player .pl-tools { display: flex; align-items: center; gap: 8px; }
.player .pl-tools { justify-self: end; }
.player .pl-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player .pl-info { min-width: 0; }
.player .pl-volume { position: relative; display: flex; align-items: center; gap: 6px; flex: none; }
.player .pl-vol-toggle { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #645333; border-radius: 50%; color: #e8cc98; background: #1b1d20; }
.player .pl-vol-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.player .pl-volume-pop { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 32; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76px; padding: 12px; border: 1px solid #645333; border-radius: 8px; background: #141719; box-shadow: 0 8px 24px #0006; }
.player .volume-range { writing-mode: vertical-lr; direction: rtl; width: 32px; height: 112px; margin: 0; accent-color: #e6b85f; touch-action: none; }
.player .volume-range:focus-visible { outline: 2px solid #e6b85f; outline-offset: 3px; border-radius: 4px; }
.player .pl-vol-value { min-width: 36px; text-align: center; font-size: 14px; color: #c6b897; font-variant-numeric: tabular-nums; }
.player .pl-sub { font-family: inherit; font-size: 14px; color: #c6b897; }
.player .pl-seek span { font-size: 14px; }
.player .pl-btn { width: 48px; height: 48px; font-size: 20px; background: #e6b85f; color: #211809; box-shadow: none; }
.player .pl-speed, .player .pl-moon { height: 36px; font-size: 14px; color: #e8cc98; border-color: #645333; }
.player .pl-speed.on { color: #e6b85f; border-color: #e6b85f; }
.player .pl-moon.on { color: #211809; background: #e6b85f; border-color: #e6b85f; }
.player .pl-seek span { font-family: inherit; color: #c6b897; }
.player .seek-range::-webkit-slider-thumb { background: #e6b85f; border-color: #101214; }
.player .seek-range::-moz-range-thumb { background: #e6b85f; border-color: #101214; }
body .player .timer-pop { background: #141719; color: #eee9df; border: 1px solid #5a492f; border-radius: 8px; }
body .player .timer-grid button { background: #20221e; border-color: #66502e; }
body .player .timer-grid button.on { background: #3c2f1a; color: #f3d58f; }
.player button:focus-visible { outline: 2px solid #f1c875; outline-offset: 4px; }
body.has-player { padding-bottom: calc(120px + var(--safe-b)); }
@media (max-width: 560px) {
  .player { left: 8px; right: 8px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .player .pl-row { gap: 8px; }
  .player .pl-left { display: contents; }
  .player .pl-info { grid-column: 1 / -1; grid-row: 1; }
  .player .pl-text { flex: 1; flex-direction: row; align-items: center; gap: 8px; }
  .player .pl-title { flex: 1; min-width: 0; font-size: 16px; }
  .player .pl-sub { flex: none; max-width: 40%; font-size: 14px; }
  .player .pl-volume { grid-column: 1; grid-row: 2; }
  .player .pl-transport { grid-column: 2; grid-row: 2; }
  .player .pl-tools { grid-column: 3; grid-row: 2; }
  .player .pl-vol-toggle { width: 40px; height: 40px; }
  .player .pl-row { row-gap: 4px; }
  body.has-player { padding-bottom: calc(150px + var(--safe-b)); }
}