/* Tô màu phát âm trên từ (flashcard) */
.yh-fc-word-title .yh-pw.ok { color: #2f9d69; }
.yh-fc-word-title .yh-pw.mid { color: #e08a1e; }
.yh-fc-word-title .yh-pw.bad { color: #d94b4b; }
.yh-fc-word-title .yh-pw.na { color: inherit; }
.yh-fc-word-title .yh-pw-score { font-size: .3em; vertical-align: top; margin: .35em 0 0 .18em; font-weight: 800; color: #fff; background: #2f9d69; border-radius: 999px; padding: .12em .5em; line-height: 1.5; letter-spacing: 0; }
.yh-fc-word-title .yh-pw-score.mid { background: #e08a1e; }
.yh-fc-word-title .yh-pw-score.bad { background: #d94b4b; }
.yh-ph-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.yh-ph-word { display: inline-flex; align-items: center; gap: 1px; background: #f4f7fb; border: 1px solid #e6ebf2; border-radius: 999px; padding: 4px 10px 4px 8px; }
.yh-ph-word small { font-size: 12px; color: #64748b; margin-right: 6px; font-weight: 600; }
.yh-ph { font-style: normal; font-weight: 800; font-size: 16px; line-height: 1.2; padding: 0 3px; border-radius: 4px; cursor: help; }
.yh-ph.ok { color: #2f9d69; } .yh-ph.mid { color: #e08a1e; background: #fff4e3; } .yh-ph.bad { color: #d94b4b; background: #ffecec; } .yh-ph.na { color: #64748b; }
.yh-ph-word b { margin-left: 6px; font-size: 12px; color: #fff; background: #2f9d69; border-radius: 999px; padding: 1px 7px; }
.yh-ph-word b.mid { background: #e08a1e; } .yh-ph-word b.bad { background: #d94b4b; }
.yh-ph-legend { margin: 6px 0 0; font-size: 12px; color: #64748b; }
.yh-ph-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin: 0 2px 0 8px; }
.yh-ph-legend i.ok { background: #2f9d69; } .yh-ph-legend i.mid { background: #e08a1e; } .yh-ph-legend i.bad { background: #d94b4b; }
.yh-ph-legend i:first-child { margin-left: 0; }