/* ============================================================
   Shared furniture for every page in this set:
   the language switch, the listen button and the audio bar.
   One file so a fix lands on all pages at once.
   ============================================================ */

/* ---------- language switch, pinned top-right ---------- */
#langbar{
  position:fixed; top:14px; right:14px; z-index:80;
  display:flex; align-items:center; gap:4px;
  padding:5px 8px; border-radius:999px;
  background:rgba(26,22,34,.94); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 26px rgba(26,22,34,.3); backdrop-filter:blur(8px);
}
#langbar .globe{font-size:14px; margin-right:2px; opacity:.85}
#langbar button{
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1);
  color:#fff; font:inherit; font-size:12.5px; font-weight:700;
  padding:6px 12px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:background .15s, color .15s;
}
#langbar button:hover{background:rgba(255,255,255,.2)}
#langbar button.on{background:#FFD9A0; color:#2A2235; border-color:#FFD9A0; font-weight:800}

/* the Vietnamese twin shown underneath in EN+VI mode */
.vi-sub{
  display:block; margin-top:5px; padding-left:10px;
  border-left:2.5px solid currentColor; opacity:.82;
  font-size:.93em; font-weight:500; line-height:1.5;
}

/* ---------- tap-to-hear ---------- */
.speak{
  cursor:pointer; position:relative; border-bottom:1.5px dotted currentColor;
  transition:background .15s;
}
.speak::after{
  content:"\1F50A"; font-size:.72em; margin-left:4px; opacity:.42;
  vertical-align:middle; border:0;
}
.speak:hover{background:rgba(255,193,120,.22)}
.speak.playing{background:rgba(255,193,120,.42); border-radius:4px}
.speak.playing::after{opacity:1}

/* ---------- audio bar, pinned bottom-centre ---------- */
#audiobar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:80;
  display:flex; align-items:center; gap:9px; max-width:94vw;
  padding:9px 14px; border-radius:999px;
  background:rgba(26,22,34,.94); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 26px rgba(26,22,34,.3); backdrop-filter:blur(8px);
  color:#fff; font-size:13px;
}
#audiobar .hint{color:#D8CFE4; font-weight:500; white-space:nowrap}
#audiobar .hint b{color:#FFD9A0; font-weight:800}
#audiobar button{
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1);
  color:#fff; font:inherit; font-size:12.5px; font-weight:700;
  padding:6px 11px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
#audiobar button:hover{background:rgba(255,255,255,.2)}
#audiobar button.on{background:#FFD9A0; color:#2A2235; border-color:#FFD9A0}
#audiobar.loading{opacity:.7}

#voicewarn{
  position:fixed; left:50%; transform:translateX(-50%); bottom:82px; z-index:81;
  max-width:90vw; padding:11px 16px; border-radius:13px;
  background:#7A1F3D; color:#fff; font-size:13.5px; line-height:1.5;
  box-shadow:0 8px 26px rgba(42,34,53,.32); display:none;
}
#voicewarn.show{display:block}

@media(max-width:620px){
  #langbar{top:10px; right:10px; padding:4px 6px; gap:3px}
  #langbar .globe{display:none}
  #langbar button{font-size:11.5px; padding:5px 9px}
  #audiobar{bottom:10px; padding:7px 11px; gap:7px; font-size:12px}
  #audiobar .hint{display:none}
}
@media print{
  #langbar, #audiobar, #voicewarn{display:none !important}
  .speak{border-bottom:0}
  .speak::after{display:none}
}