/* Nút nổi + player. Biến --bsk-tts-* do PHP in vào style của .bsk-tts (BSK_TTS_Nut::style). */
.bsk-tts { position: fixed; z-index: 9990; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.bsk-tts--duoi-phai { bottom: var(--bsk-tts-doc, 24px); right: var(--bsk-tts-ngang, 20px); }
.bsk-tts--duoi-trai { bottom: var(--bsk-tts-doc, 24px); left: var(--bsk-tts-ngang, 20px); }
.bsk-tts--tren-phai { top: var(--bsk-tts-doc, 24px); right: var(--bsk-tts-ngang, 20px); }
.bsk-tts--tren-trai { top: var(--bsk-tts-doc, 24px); left: var(--bsk-tts-ngang, 20px); }

/* Nút nghe là <button>, mà theme và kit Elementor (.elementor-kit-NNNN button …) đặt
   padding/font/bo góc/nền cho MỌI button với độ ưu tiên (0,1,1) — cao hơn một class
   của ta — nên trên site thật nút phình to, chữ đổi font, icon SVG mất. Lá chắn:
   mọi thuộc tính hình hài đặt !important và ĐỌC TỪ BIẾN; các biến thể (kiểu, cỡ,
   màn hẹp) chỉ đổi biến trên .bsk-tts, không đụng thuộc tính. */
.bsk-tts { --bsk-tts-pad: 10px 16px; --bsk-tts-bo: 999px; --bsk-tts-w: auto; --bsk-tts-h: auto; --bsk-tts-gap: 8px; --bsk-tts-mg: 0; }
.bsk-tts__nut { display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: var(--bsk-tts-gap) !important; padding: var(--bsk-tts-pad) !important; margin: var(--bsk-tts-mg) !important;
  width: var(--bsk-tts-w) !important; height: var(--bsk-tts-h) !important; min-width: 0 !important; min-height: 0 !important;
  border: 0 !important; border-radius: var(--bsk-tts-bo) !important; box-sizing: border-box !important;
  background: var(--bsk-tts-mau, #0f766e) !important; background-image: none !important; color: var(--bsk-tts-mau-chu, #fff) !important;
  font-family: inherit !important; font-size: inherit !important; font-weight: 600 !important; line-height: 1 !important;
  letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.bsk-tts__nut:hover { filter: brightness(1.1); }
.bsk-tts__nut:focus-visible, .bsk-tts__player button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.bsk-tts__nut[aria-expanded="true"] { display: none !important; }
.bsk-tts__svg { display: block !important; width: 1.4em; height: 1.4em; flex: none; fill: currentColor !important; }
.bsk-tts__emoji { font-size: 1.3em; line-height: 1; }
.bsk-tts__anh { height: 1.4em; width: auto; max-width: 2.2em; object-fit: contain; display: block; }

/* Cỡ: đổi padding + chữ; tròn thì đổi đường kính. */
.bsk-tts--co-nho { font-size: 13px; }
.bsk-tts--co-nho { --bsk-tts-pad: 8px 13px; }
.bsk-tts--co-vua { font-size: 14px; }
.bsk-tts--co-lon { font-size: 16px; }
.bsk-tts--co-lon { --bsk-tts-pad: 13px 20px; }

/* Nhãn vẫn nằm trong aria-label của nút; ẩn phần chữ nhìn thấy thôi. */
.bsk-tts--an-nhan .bsk-tts__nhan { display: none; }
.bsk-tts--an-nhan { --bsk-tts-gap: 0; --bsk-tts-pad: 10px 12px; }
.bsk-tts--an-nhan.bsk-tts--co-nho { --bsk-tts-pad: 8px 12px; }
.bsk-tts--an-nhan.bsk-tts--co-lon { --bsk-tts-pad: 13px 12px; }

/* Kiểu: vien = pill (mặc định ở trên); vuong = bo góc nhẹ; tron = chỉ icon. */
.bsk-tts--kieu-vuong { --bsk-tts-bo: 10px; }
.bsk-tts--kieu-tron { --bsk-tts-w: 52px; --bsk-tts-h: 52px; --bsk-tts-pad: 0; --bsk-tts-bo: 50%; --bsk-tts-gap: 0; }
.bsk-tts--kieu-tron.bsk-tts--co-nho { --bsk-tts-w: 44px; --bsk-tts-h: 44px; }
.bsk-tts--kieu-tron.bsk-tts--co-lon { --bsk-tts-w: 64px; --bsk-tts-h: 64px; }
.bsk-tts--kieu-tron .bsk-tts__svg, .bsk-tts--kieu-tron .bsk-tts__anh { width: 50%; height: 50%; max-width: none; }
.bsk-tts--kieu-tron .bsk-tts__emoji { font-size: 1.6em; }

/* Nhịp: mời bấm lần đầu, JS thêm --da-bam để tắt sau khi đã bấm. */
@keyframes bsk-tts-nhip {
  0%   { box-shadow: 0 4px 14px rgba(0,0,0,.2), 0 0 0 0 var(--bsk-tts-mau, #0f766e); }
  70%  { box-shadow: 0 4px 14px rgba(0,0,0,.2), 0 0 0 12px rgba(0,0,0,0); }
  100% { box-shadow: 0 4px 14px rgba(0,0,0,.2), 0 0 0 0 rgba(0,0,0,0); }
}
/* Không dùng :not(.bsk-tts--da-bam) ở rule bật nhịp: :not() đếm vào độ ưu tiên
   (0,3,0) và thắng luôn rule "giảm chuyển động" (0,2,0) bên dưới — người bật
   reduced-motion vẫn thấy nhấp nháy. Tắt nhịp bằng rule riêng đặt SAU, và rule
   reduced-motion chồng hai class để cao hơn cả hai. */
.bsk-tts--nhip .bsk-tts__nut { animation: bsk-tts-nhip 2s ease-out infinite; }
.bsk-tts--da-bam .bsk-tts__nut { animation: none; }
@media (prefers-reduced-motion: reduce) { .bsk-tts.bsk-tts--nhip .bsk-tts__nut { animation: none; } }

.bsk-tts__player { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
  background: #fff; color: #1f2937; box-shadow: 0 6px 20px rgba(0,0,0,.22); min-width: 300px; font-size: 14px; }
.bsk-tts__player[hidden] { display: none; }
/* Lá chắn cho các nút trong player (Phát, tốc độ, Đóng): theme/kit Elementor
   tô nền, font serif, padding to cho mọi <button> — không chặn thì player thành
   ba cục màu chữ chân. Thuộc tính hình hài !important; nút Phát đổi qua biến. */
.bsk-tts__player button { --bsk-tts-btn-nen: transparent; --bsk-tts-btn-chu: inherit;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 0 !important; border-radius: 8px !important; background: var(--bsk-tts-btn-nen) !important; background-image: none !important;
  color: var(--bsk-tts-btn-chu) !important; font-family: inherit !important; font-size: inherit !important; font-weight: 500 !important;
  line-height: 1 !important; letter-spacing: normal !important; text-transform: none !important; text-shadow: none !important; box-shadow: none !important;
  padding: 6px 8px !important; margin: 0 !important; min-width: 36px !important; min-height: 36px !important; width: auto !important; height: auto !important;
  cursor: pointer; }
.bsk-tts__player button:hover { --bsk-tts-btn-nen: #f3f4f6; --bsk-tts-btn-chu: #1f2937; }
/* Phải chồng .bsk-tts__player button (0,1,1) — một class trần (0,1,0) thua rule chung
   dù đứng sau, và nút Phát thành trong suốt trên site thật. */
.bsk-tts__player button.bsk-tts__play, .bsk-tts__player button.bsk-tts__play:hover { --bsk-tts-btn-nen: var(--bsk-tts-mau, #0f766e); --bsk-tts-btn-chu: var(--bsk-tts-mau-chu, #fff); }
/* Hover của theme hay đặt color/background !important cho button:hover — chốt lại bằng
   !important ở độ ưu tiên cao hơn, và chỉ sáng nhẹ lên thay vì đổi màu. */
.bsk-tts .bsk-tts__player button.bsk-tts__play:hover { background: var(--bsk-tts-mau, #0f766e) !important; color: var(--bsk-tts-mau-chu, #fff) !important; filter: brightness(1.12); }
.bsk-tts .bsk-tts__player button:not(.bsk-tts__play):hover { background: #f3f4f6 !important; color: #1f2937 !important; }
.bsk-tts__seek { flex: 1 !important; width: auto !important; min-width: 80px !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; accent-color: var(--bsk-tts-mau, #0f766e); }
.bsk-tts__time { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px !important; font-family: inherit !important; color: #4b5563 !important; margin: 0 !important; }
/* Icon SVG trong nút lùi/tiến/âm lượng: cỡ nhỏ, thừa hưởng --bsk-tts-btn-chu qua
   currentColor nên đổi theo màu chữ nút mà không cần khai riêng. */
/* Icon SVG: lá chắn chung ẩn cả hai trước, rồi hiện đúng một theo class
   bsk-tts--tat-tieng trên .bsk-tts (JS toggle theo audio.muted) — cả hai luật
   này !important nên không rule nào thắng do thứ tự nạp, chỉ do độ khớp. */
.bsk-tts__svg-icon { display: block !important; width: 1em; height: 1em; flex: none; fill: currentColor !important; }
.bsk-tts__am svg, .bsk-tts__tat svg { display: none !important; }
.bsk-tts:not(.bsk-tts--tat-tieng) .bsk-tts__am-bat, .bsk-tts--tat-tieng .bsk-tts__am-tat { display: block !important; }

/* Bảng âm lượng: popover nổi trên nút loa, không chiếm chỗ hàng ngang của
   player — trước đây thanh trượt luôn hiện, tốn chỗ trên màn hẹp. */
.bsk-tts__vol-boc { position: relative; display: inline-flex; }
.bsk-tts__vol-hop { position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px; background: #fff; padding: 10px; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.bsk-tts__vol-hop[hidden] { display: none; }
/* Player ở góc trên: mở popover xuống dưới nút, không đè lên đầu trang. */
.bsk-tts--tren-phai .bsk-tts__vol-hop, .bsk-tts--tren-trai .bsk-tts__vol-hop { bottom: auto; top: calc(100% + 8px); }
.bsk-tts__vol { width: 110px !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; accent-color: var(--bsk-tts-mau, #0f766e); }
/* Nút tắt tiếng trong bảng: chỉ icon, đứng trước thanh trượt; icon đổi theo trạng thái như nút loa ngoài. */
.bsk-tts__tat { color: #4b5563 !important; }
.bsk-tts--tat-tieng .bsk-tts__tat { color: #b91c1c !important; }

@media (max-width: 600px) {
  /* Màn hẹp: mọi kiểu thu thành tròn chỉ icon, player bung ngang trọn đáy (hoặc đỉnh). */
  .bsk-tts { left: 12px; right: 12px; display: flex; }
  .bsk-tts--duoi-phai, .bsk-tts--duoi-trai { bottom: var(--bsk-tts-doc, 24px); top: auto; }
  .bsk-tts--tren-phai, .bsk-tts--tren-trai { top: var(--bsk-tts-doc, 24px); bottom: auto; }
  .bsk-tts__nhan { display: none; }
  /* Kể cả tròn nhỏ/lớn cũng về một cỡ 52 để không đè lên nội dung — đổi biến là đủ. */
  .bsk-tts, .bsk-tts--kieu-tron.bsk-tts--co-nho, .bsk-tts--kieu-tron.bsk-tts--co-lon {
    --bsk-tts-w: 52px; --bsk-tts-h: 52px; --bsk-tts-pad: 0; --bsk-tts-bo: 50%; --bsk-tts-gap: 0; }
  .bsk-tts .bsk-tts__svg, .bsk-tts .bsk-tts__anh { width: 50%; height: 50%; max-width: none; }
  .bsk-tts .bsk-tts__emoji { font-size: 1.6em; }
  .bsk-tts--duoi-phai, .bsk-tts--tren-phai { --bsk-tts-mg: 0 0 0 auto; }
  .bsk-tts--duoi-trai, .bsk-tts--tren-trai { --bsk-tts-mg: 0 auto 0 0; }
  .bsk-tts__player { min-width: 0; width: 100%; box-sizing: border-box; }
}