/* CO-CHU-0311 */
/* Hoạt hình hội thoại kiểu SuperChinese (hoat-hinh.js, YEU-CAU.md mục 20.11) - Đã tối ưu thu gọn kích thước chữ và khung cảnh để hiển thị nhiều dòng hội thoại nối tiếp bên dưới và không tràn lề trái */
.slide.hh-on .e-scene.hh-host { position: sticky; top: -8px; z-index: 4; padding: 0 0 4px; margin: 0 0 2px; font-size: 14px; background: var(--bg, #F6F8F5); border-radius: 0 0 14px 14px; max-width: 100%; box-sizing: border-box; }
.slide.hh-on .e-scene.hh-host::before { content: none; }
.hh-scene { position: relative; border-radius: 14px; overflow: hidden; border: 2px solid #CFE6D0; box-shadow: 0 3px 10px rgba(28, 49, 40, .08); background: #FFF3DF; margin-bottom: 2px; max-width: 100%; box-sizing: border-box; }
.hh-scene svg { display: block; width: 100%; height: 146px; transition: height .4s ease; }
.slide.hh-nho .hh-scene svg { height: 96px; }
.hh-cap { position: absolute; left: 10px; top: 6px; font-style: normal; font-size: 13px; font-weight: 700; color: #1C3128; background: rgba(255, 255, 255, .88); padding: 2px 8px; border-radius: 99px; }
.hh-frame { fill: rgba(255, 255, 255, 0); stroke: rgba(11, 108, 243, 0); stroke-width: 4; transition: fill .3s, stroke .3s; }
.hh-ch.noi .hh-frame { fill: rgba(255, 255, 255, .55); stroke: #0B6CF3; filter: drop-shadow(0 0 8px rgba(11, 108, 243, .55)); }
.hh-tag { fill: rgba(255, 255, 255, .92); stroke: #CFE6D0; stroke-width: 1.5; }
.hh-ch.noi .hh-tag { fill: #0B6CF3; stroke: #0B6CF3; }
.hh-tag-t { font: 700 12px Arial, "Noto Sans SC", sans-serif; fill: #1C3128; }
.hh-ch.noi .hh-tag-t { fill: #fff; }
.hh-body { animation: hh-breathe 3.2s ease-in-out infinite; }
.hh-ch.noi .hh-body { animation: hh-bob .42s ease-in-out infinite alternate; }
.hh-eyes { transform-box: fill-box; transform-origin: center; animation: hh-blink 4.2s infinite; }
.hh-ch[data-c="baoxin"] .hh-eyes { animation-delay: -1.6s; }
.hh-ch[data-c="liwei"] .hh-eyes { animation-delay: -2.9s; }
.hh-arm { transform-box: fill-box; transform-origin: 50% 0; transition: transform .3s; }
.hh-arm-l { transform: rotate(8deg); }
.hh-arm-r { transform: rotate(-8deg); }
.hh-ch.noi[data-side="L"] .hh-arm-r { animation: hh-gest-r .55s ease-in-out infinite alternate; }
.hh-ch.noi[data-side="R"] .hh-arm-l { animation: hh-gest-l .55s ease-in-out infinite alternate; }
.hh-ch.noi.wave[data-side="L"] .hh-arm-r { animation: hh-wave-r .38s ease-in-out infinite alternate; }
.hh-ch.noi.wave[data-side="R"] .hh-arm-l { animation: hh-wave-l .38s ease-in-out infinite alternate; }
@keyframes hh-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes hh-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes hh-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes hh-gest-r { from { transform: rotate(-20deg); } to { transform: rotate(-62deg); } }
@keyframes hh-gest-l { from { transform: rotate(20deg); } to { transform: rotate(62deg); } }
@keyframes hh-wave-r { from { transform: rotate(-135deg); } to { transform: rotate(-165deg); } }
@keyframes hh-wave-l { from { transform: rotate(135deg); } to { transform: rotate(165deg); } }
.hh-bub { animation: hh-pop .35s cubic-bezier(.2, 1.5, .5, 1) both; }
.hh-bub-b { fill: #fff; stroke: #0B6CF3; stroke-width: 2.5; }
.hh-bub-zh { font: 700 18px "Noto Sans SC", Arial, sans-serif; fill: #1C3128; }
.hh-bub-vi { font: italic 600 12px Arial, sans-serif; fill: #3D6B4A; }
@keyframes hh-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hh-prop { animation: hh-breathe 2s ease-in-out infinite; }

/* Khung dưới: karaoke (cỡ chữ thu gọn vừa mắt để hiển thị nối tiếp nhiều câu hội thoại) */
.slide.hh-on .e-bubble.hh-line > .bb > .py { display: none; }
.e-bubble.hh-line .zh.line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1px 5px; font-size: 19.5px; line-height: 1.15; padding-top: 2px; }
.e-bubble.hh-line .vi { font-style: italic; font-size: 14px; line-height: 1.3; margin-top: 1px; }
.hk { position: relative; display: inline-flex; flex-direction: column; align-items: center; padding: 1px 2px 1px; border-radius: 7px; transition: background .2s, color .2s; }
.hk-py { font-family: Arial, sans-serif; font-size: 13px; font-weight: 600; color: #5B6F63; line-height: 1.15; white-space: nowrap; }
.hk-zh { font-family: var(--zh, "Noto Sans SC"), sans-serif; font-weight: 700; color: #1C3128; white-space: nowrap; }
.e-bubble.hh-cur .zh.line { font-size: 21px; }
.e-bubble.hh-cur .hk-py { font-size: 14px; }
.e-bubble.hh-cur .bb { border-color: #0B6CF3; box-shadow: 0 0 0 2.5px rgba(11, 108, 243, .22); }
.hk.on { background: #E0F2FE; box-shadow: none; border-radius: 6px; }
.hk.on .hk-zh { color: #0284C7; }
.hk.on .hk-py { color: #0369A1; }
.hk.da .hk-zh { color: #0B6CF3; }
.hk-moi { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translate(-50%, 6px) scale(.6); opacity: 0; pointer-events: none; white-space: nowrap;
  font: italic 700 11.5px Arial, sans-serif; color: #fff; background: #0B6CF3; padding: 2px 7px; border-radius: 99px; box-shadow: 0 3px 8px rgba(11, 108, 243, .3); transition: opacity .25s, transform .3s cubic-bezier(.2, 1.5, .5, 1); z-index: 3; }
.hk-moi::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: #0B6CF3; }
.hk.moi-on .hk-moi { opacity: 1; transform: translate(-50%, 0) scale(1); }
.e-bubble.hh-line .bb { overflow: visible; padding: 6px 11px; }
.slide.hh-on .s-els { gap: 7px; }

/* Cô giảng chỗ khó: đổi màu nhẹ cho cụm đang giảng, không khoanh tròn hay gạch chân */
.hk.hh-chi { background: #E0F2FE; border-radius: 7px; box-shadow: none; }
.hk.hh-chi::after { content: none !important; display: none !important; }
.hk.hh-chi .hk-zh { color: #0284C7; }
.hk.hh-chi .hk-py { color: #0369A1; }

/* Đọc theo vai: gam màu xanh dịu nhẹ, không dùng màu đỏ */
.e-bubble.vai-doc .hk-zh, .e-bubble.vai-doc .hk-py { color: #0284C7 !important; }

@media (max-width: 720px) {
  .hh-scene svg { height: 128px; }
  .slide.hh-nho .hh-scene svg { height: 84px; }
  .slide.hh-on .e-scene.hh-host { top: -6px; }
  .e-bubble.hh-line .zh.line { font-size: 18.5px; gap: 1px 4px; }
  .e-bubble.hh-cur .zh.line { font-size: 20.5px; }
  .hk-py { font-size: 12.5px; }
  .e-bubble.hh-cur .hk-py { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .hh-body, .hh-eyes, .hh-arm, .hh-bub, .hk.hh-chi::after { animation: none !important; } }