/* ke-chuyen.css: trình phát chuyện dài (C3). Đi cùng ke-chuyen.js; mọi lớp bắt đầu bằng "kc-". Nền tối Khu Huấn Luyện, chữ kem, nhấn cam. */
.kc { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.kc[hidden] { display: none; }
html.kc-mo { overflow: hidden; }
.kc-nen { position: absolute; inset: 0; background: rgb(5 4 9 / .72); }
.kc-tam { position: relative; display: flex; flex-direction: column; width: min(600px, 100%); max-height: min(88dvh, 720px); padding: 18px 18px calc(16px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0; border: 1px solid rgb(255 226 196 / .16); border-bottom: 0; background: #170e26; color: #fff7f0;
  box-shadow: 0 -20px 60px rgb(0 0 0 / .55); font-family: "Be Vietnam Pro", system-ui, sans-serif; animation: kcLen .4s cubic-bezier(.22, .9, .24, 1) both; }
@keyframes kcLen { from { translate: 0 40px; opacity: 0; } }
@media (min-width: 700px) { .kc { align-items: center; } .kc-tam { border-radius: 28px; border-bottom: 1px solid rgb(255 226 196 / .16); } }
.kc-dau { display: flex; align-items: center; gap: 12px; padding-right: 2px; }
.kc-anh { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: contain; background: radial-gradient(circle at 50% 30%, #3a2a56, #150d22 78%); box-shadow: 0 0 0 2px #ffb46b; }
.kc-anh[hidden] { display: none; }
.kc-td { flex: 1; min-width: 0; }
.kc-ai { margin: 0; font-size: 13px; font-weight: 600; color: #ffb46b; }
.kc-ten { margin: 2px 0 0; font: 600 clamp(19px, 1vw + 16px, 24px)/1.2 "Bricolage Grotesque", "Be Vietnam Pro", system-ui, sans-serif; text-wrap: balance; }
.kc-dong { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 2px solid #ffe2c4; background: rgb(10 7 18 / .78); color: #ffe2c4; cursor: pointer; }
.kc-dong svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kc-chon { display: flex; gap: 8px; margin: 14px -18px 0; padding: 0 18px 4px; overflow-x: auto; scrollbar-width: none; }
.kc-chon::-webkit-scrollbar { display: none; }
.kc-chon[hidden] { display: none; }
.kc-chip { flex: none; min-height: 44px; max-width: 240px; padding: 6px 14px; border-radius: 99px; cursor: pointer; text-align: left;
  border: 1px solid rgb(255 226 196 / .26); background: rgb(10 7 18 / .5); color: rgb(255 247 240 / .78); font: 500 13.5px/1.3 inherit; }
.kc-chip[aria-pressed="true"] { background: linear-gradient(180deg, #ffe9d2, #ffb46b); border-color: transparent; color: #1a0f22; font-weight: 600; }
.kc-than { flex: 1; min-height: 150px; margin-top: 14px; padding: 16px 16px 18px; overflow-y: auto; border-radius: 20px; background: rgb(10 7 18 / .55); border: 1px solid rgb(255 226 196 / .12); }
.kc-chu { margin: 0; font-size: clamp(18px, .6vw + 16.5px, 21px); line-height: 1.65; color: rgb(255 247 240 / .42); }
.kc-chu span { transition: color .25s; }
.kc-chu span.ro { color: #fff7f0; }
.kc-ghi { margin: 10px 2px 0; font-size: 13px; color: rgb(255 247 240 / .6); }
.kc-ghi[hidden] { display: none; }
.kc-thanh { height: 4px; margin-top: 12px; border-radius: 4px; background: rgb(255 226 196 / .16); overflow: hidden; }
.kc-thanh i { display: block; width: 0; height: 100%; border-radius: 4px; background: #ffb46b; transition: width .15s linear; }
.kc-dk { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; margin-top: 12px; }
.kc-nut { min-height: 48px; padding: 0 8px; border-radius: 99px; cursor: pointer; border: 1px solid rgb(255 226 196 / .3); background: none; color: #fff7f0; font: 600 14.5px/1.2 inherit; }
.kc-nut:disabled { opacity: .35; cursor: default; }
.kc-choi { border: 0; background: linear-gradient(180deg, #ffe9d2, #ffb46b); color: #1a0f22; box-shadow: 0 6px 20px rgb(255 180 107 / .3); }
.kc-dem { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: rgb(255 247 240 / .55); }
.kc-nut:focus-visible, .kc-chip:focus-visible, .kc-dong:focus-visible { outline: 2px solid #ffe2c4; outline-offset: 3px; }
/* nút gọi trình phát đặt trong trang (tuỳ trang dùng hay không) */
.kc-goi { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 0 18px; border-radius: 99px; cursor: pointer;
  border: 1px solid rgb(255 180 107 / .6); background: rgb(255 180 107 / .1); color: #ffe2c4; font: 600 14.5px/1 "Be Vietnam Pro", system-ui, sans-serif; }
.kc-goi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kc-goi:hover { background: rgb(255 180 107 / .2); }
@media (prefers-reduced-motion: reduce) { .kc-tam { animation: none; } .kc-chu span, .kc-thanh i { transition: none; } }

/* ---- KIỂU BONG BÓNG (cô Ari 11/10): gọn, nằm tại chỗ dưới nhân vật, đuôi chỉ lên người đang kể; không phủ màn hình, không che nút */
.kc.kc-bong { position: relative; inset: auto; z-index: auto; display: block; margin: 12px 14px 6px; }
.kc-bong .kc-nen { display: none; }
.kc-bong .kc-tam { width: auto; max-height: none; padding: 10px 12px 10px; border-radius: 20px; border: 0; background: #fff4e6; color: #2a1830;
  box-shadow: 0 10px 26px rgb(0 0 0 / .4); animation: kcNo .3s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes kcNo { from { scale: .94; opacity: 0; } }
.kc-bong .kc-tam::before { content: ""; position: absolute; left: var(--kc-duoi, 50%); top: -8px; width: 18px; height: 18px; translate: -50% 0; rotate: 45deg; border-radius: 4px 0 0 0; background: #fff4e6; }
.kc-bong .kc-dau { gap: 8px; }
.kc-bong .kc-anh, .kc-bong .kc-ai { display: none; }
.kc-bong .kc-ten { margin: 0; font: 600 14px/1.3 "Be Vietnam Pro", system-ui, sans-serif; color: #a8305e; }
.kc-bong .kc-dong { width: 44px; height: 44px; margin: -6px -6px -6px 0; border: 0; background: none; color: #6b5a78; }
.kc-bong .kc-chon { margin: 4px -12px 0; padding: 0 12px 2px; gap: 6px; }
.kc-bong .kc-chip { min-height: 44px; max-width: 200px; padding: 4px 12px; border-color: rgb(42 24 48 / .18); background: none; color: #6b5a78; font-size: 12.5px; }
.kc-bong .kc-chip[aria-pressed="true"] { background: #ffd9ae; color: #2a1830; }
.kc-bong .kc-than { min-height: 0; max-height: 9.2em; margin-top: 6px; padding: 2px 2px 4px; border: 0; border-radius: 0; background: none; }
.kc-bong .kc-chu { font-size: 16px; line-height: 1.5; color: rgb(42 24 48 / .42); }
.kc-bong .kc-chu span.ro { color: #2a1830; }
.kc-bong .kc-ghi { margin: 4px 2px 0; font-size: 12px; color: #8a7a92; }
.kc-bong .kc-thanh { height: 3px; margin-top: 8px; background: rgb(42 24 48 / .12); }
.kc-bong .kc-thanh i { background: #e6803c; }
.kc-bong .kc-dk { grid-template-columns: 44px 1fr 44px auto; align-items: center; gap: 6px; margin-top: 6px; }
.kc-bong .kc-nut { min-height: 44px; border-color: rgb(42 24 48 / .2); color: #2a1830; font-size: 14px; }
.kc-bong .kc-lui, .kc-bong .kc-toi { padding: 0; font-size: 0; }
.kc-bong .kc-lui::before, .kc-bong .kc-toi::before { content: ""; display: block; width: 9px; height: 9px; margin: 0 auto; border: solid currentColor; border-width: 0 0 2px 2px; rotate: 45deg; translate: 2px 0; }
.kc-bong .kc-toi::before { rotate: -135deg; translate: -2px 0; }
.kc-bong .kc-choi { box-shadow: none; }
.kc-bong .kc-dem { display: none; }
.kc-bong .kc-nut:focus-visible, .kc-bong .kc-chip:focus-visible, .kc-bong .kc-dong:focus-visible { outline-color: #a8305e; }
@media (prefers-reduced-motion: reduce) { .kc-bong .kc-tam { animation: none; } }