/* Thiện Mộc An — Đọc Bài Viết 1.1.3.
 * Desktop: 1 compact, aligned control row.
 * Mobile: four buttons stay on one low row, with two compact selectors.
 * Scoped to the reader only; avoid changing other WordPress widgets.
 */
.tma-reader,
.tma-reader *,
.tma-reader *::before,
.tma-reader *::after { box-sizing: border-box !important; }

.tma-reader {
  display: grid !important;
  grid-template-columns: max-content minmax(0,1fr);
  gap: 0 12px;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 12px 0 !important;
  padding: 9px 11px !important;
  border: 1px solid #d8e2e8;
  border-radius: 9px;
  background: #f7fafb;
  color: #20323b;
  font-family: inherit;
  line-height: 1.3;
  text-align: left;
  clear: both;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.tma-reader__label {
  display: block;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
.tma-reader__buttons {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(245px,0.78fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.tma-reader__actions {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 5px;
  min-width: 0;
  width: 100%;
}
.tma-reader__actions button {
  appearance: none;
  -webkit-appearance: none;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 33px !important;
  min-height: 33px !important;
  max-height: 33px !important;
  padding: 3px 4px !important;
  margin: 0 !important;
  border: 1px solid #176a65 !important;
  border-radius: 6px !important;
  background: #176a65 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  text-align: center !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .12s ease;
}
.tma-reader__actions button:hover:not(:disabled) { background: #11504c !important; }
.tma-reader__actions button:focus-visible,
.tma-reader select:focus-visible { outline: 2px solid #80beb8 !important; outline-offset: 2px; }
.tma-reader__actions button:disabled { opacity: .46 !important; cursor: not-allowed; }
.tma-reader__icon { flex: none; font-size: 12px; line-height: 1; }
.tma-reader__text { min-width: 0; }

.tma-reader__options {
  display: grid !important;
  grid-template-columns: minmax(104px,0.8fr) minmax(135px,1.2fr);
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
}
.tma-reader__field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #20323b !important;
  font-family: inherit !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  white-space: nowrap;
}
.tma-reader__field-name {
  flex: none;
  display: block;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}
.tma-reader select {
  display: block !important;
  appearance: auto;
  -webkit-appearance: menulist;
  flex: 1 1 0;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 33px !important;
  min-height: 33px !important;
  max-height: 33px !important;
  margin: 0 !important;
  padding: 3px 22px 3px 6px !important;
  border: 1px solid #aabec6 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #20323b !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-overflow: ellipsis !important;
}

/* Live updates stay accessible to screen readers; display only actionable
   messages to keep the player slim when idle, playing or paused. */
.tma-reader__status {
  grid-column: 1 / -1;
  margin: 0 !important;
  max-width: 100%;
  color: #4a5860 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
}
.tma-reader__status:not(.tma-reader__status--notice) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}
.tma-reader__status--notice {
  position: static;
  display: block;
  margin-top: 6px !important;
}

/* Narrow desktops/tablets: enough space for one button row but place
   short title above when the available viewport becomes limited. */
@media (max-width: 800px) {
  .tma-reader {
    grid-template-columns: minmax(0,1fr);
    gap: 5px 0;
  }
  .tma-reader__buttons {
    grid-template-columns: minmax(0,1fr);
    gap: 6px;
  }
  .tma-reader__options { grid-template-columns: minmax(105px,0.45fr) minmax(0,1fr); }
}

@media (max-width: 600px) {
  .tma-reader {
    gap: 4px 0;
    margin: 8px 0 !important;
    padding: 7px 8px !important;
    border-radius: 8px;
  }
  .tma-reader__label {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .tma-reader__buttons { gap: 5px; }
  .tma-reader__actions { gap: 4px; }
  .tma-reader__actions button {
    flex-direction: column !important;
    gap: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 2px 1px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    border-radius: 5px !important;
  }
  .tma-reader__actions .tma-reader__icon {
    display: block !important;
    flex: none !important;
    font-size: 11px !important;
    line-height: 12px !important;
  }
  .tma-reader__actions .tma-reader__text {
    display: block !important;
    max-width: 100%;
    font-size: 10px !important;
    line-height: 12px !important;
    white-space: nowrap !important;
  }
  .tma-reader__options {
    grid-template-columns: minmax(111px,.52fr) minmax(0,1fr);
    gap: 6px;
  }
  .tma-reader__field { gap: 4px !important; }
  .tma-reader__field-name { font-size: 10px !important; }
  .tma-reader select {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 2px 20px 2px 5px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
  }
  .tma-reader__status--notice { margin-top: 3px !important; font-size: 10.5px !important; }
}

@media (max-width: 340px) {
  .tma-reader { padding: 6px !important; }
  .tma-reader__actions { gap: 3px; }
  .tma-reader__actions button {
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
  }
  .tma-reader__actions .tma-reader__text { font-size: 9.2px !important; }
  .tma-reader__options { grid-template-columns: 108px minmax(0,1fr); gap: 4px; }
  .tma-reader__field { gap: 3px !important; }
  .tma-reader__field-name { font-size: 9.5px !important; }
  .tma-reader select { font-size: 10.5px !important; }
}