[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #e9e4d6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #2b2b33;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
body { display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
#thanh {
  flex: none; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center;
  padding: 6px 10px; background: #f3efe3; border-bottom: 1px solid #d9d2bf; touch-action: manipulation;
}
.nhom { display: flex; gap: 6px; align-items: center; }
#thanh button {
  min-width: 46px; height: 46px; padding: 0 10px; border: 1px solid #cfc6ad; border-radius: 12px; background: #fffdf5;
  font-size: 22px; line-height: 1; color: inherit; cursor: pointer; touch-action: manipulation;
}
#thanh button.chu { font-size: 28px; font-family: "Segoe Print", "Comic Sans MS", "Chalkboard SE", cursive; min-width: 52px; }
#thanh button.chon { background: #ffe9a8; border-color: #e0b43b; box-shadow: inset 0 0 0 2px #e0b43b; }
#thanh button.nho { min-width: 40px; font-size: 18px; opacity: 0.75; }
#thanh button:active { transform: scale(0.96); }
#vo { position: relative; flex: 1; min-height: 0; touch-action: none; overflow: hidden; }
#vo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#c-song { touch-action: none; }
#bang-do {
  position: fixed; right: 10px; bottom: 10px; max-width: min(92vw, 420px); background: rgba(255, 253, 245, 0.97);
  border: 1px solid #cfc6ad; border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); z-index: 5;
}
#bang-do .dau { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#bang-do button { font-size: 15px; padding: 8px 12px; border-radius: 10px; border: 1px solid #cfc6ad; background: #fff; }
#bang-do pre { font-size: 12.5px; line-height: 1.45; margin: 8px 0; white-space: pre-wrap; user-select: text; -webkit-user-select: text; }
#bang-do .hang { display: flex; gap: 8px; flex-wrap: wrap; }
#bang-do .ghi { font-size: 12px; opacity: 0.7; margin: 6px 0 0; }