/* Hướng dẫn mở đầu (js/ext_tutor.js) + tinh linh (js/ext_guide.js): bảng bài học dưới thanh HP, vòng chỉ nút, hộp nhận bài */
#tutor { top: 118px; left: 12px; width: 250px; padding: 6px 8px 6px; font-size: 12px; pointer-events: auto; z-index: 6; }
#tutor .tt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
#tutor .tt-head b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--gold); font-family: var(--f-head); font-size: 13px; }
#tutor .tt-n { color: var(--cream-2, #ecdfc2); font-weight: 700; }
#tutor .mini { padding: 1px 7px; font-size: 11px; line-height: 16px; }
#tutor .tt-row { position: relative; padding: 4px 6px 4px 24px; margin: 3px 0; border-radius: 6px; background: rgba(0, 0, 0, .25); color: #cfc6d8; }
#tutor .tt-row > i, #tutor .tt-t > i { position: absolute; left: 7px; top: 5px; width: 12px; font-style: normal; font-weight: 900; text-align: center; }
#tutor .tt-row.done { color: #8fd49a; }
#tutor .tt-row.done > i { color: #8fd49a; }
#tutor .tt-row.lock { color: #7a7286; }
#tutor .tt-row.lock .kit-lock { left: 6px; top: 5px; }
#tutor .tt-row.cur { background: rgba(255, 213, 106, .14); border: 1px solid rgba(255, 213, 106, .45); color: #fff4d8; padding-left: 24px; }
#tutor .tt-t { position: relative; display: flex; align-items: center; gap: 6px; font-weight: 700; }
#tutor .tt-t > i { left: -17px; top: 1px; color: var(--gold); animation: tt-blink 1.2s infinite; }
#tutor .tt-t .mini { margin-left: auto; }
#tutor .tt-step { margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: #ffe7a6; }
#tutor .tt-step b { color: #fff; }
#tutor .tt-foot { display: flex; gap: 4px; margin-top: 4px; justify-content: flex-end; }
@keyframes tt-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* vòng quanh nút thật trên HUD + nhãn "Bước N" (lessons.js .lsr) */
#tut-ring { position: fixed; z-index: 95; pointer-events: none; border: 3px solid #ffd56a; border-radius: 10px; box-shadow: 0 0 0 3px rgba(42, 36, 53, .9), 0 0 18px 4px rgba(255, 213, 106, .55); animation: tt-ring 1s ease-in-out infinite; }
#tut-ring .tr-tag { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 3px 9px; border-radius: 8px; background: #2a2435; color: #ffe7a6; border: 2px solid #ffd56a; font: 700 12px/1.3 var(--f-text); box-shadow: 0 3px 0 rgba(0, 0, 0, .4); max-width: 260px; white-space: normal; }
#tut-ring .tr-tag::before { content: ''; position: absolute; right: 100%; top: 50%; margin-top: -5px; border: 5px solid transparent; border-right-color: #ffd56a; }
#tut-ring.onright .tr-tag { left: auto; right: calc(100% + 10px); }
#tut-ring.onright .tr-tag::before { right: auto; left: 100%; border-right-color: transparent; border-left-color: #ffd56a; }
#tut-ring.up .tr-tag { top: auto; bottom: 100%; transform: none; margin-bottom: 10px; left: 50%; right: auto; transform: translateX(-50%); }
#tut-ring.up .tr-tag::before { right: auto; left: 50%; top: 100%; margin: 0 0 0 -5px; border: 5px solid transparent; border-top-color: #ffd56a; }
@keyframes tt-ring { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* hộp nhận bài (TALK.pop .tt-pop) */
.kpop.tt-pop .pop-box { width: min(560px, 94vw); text-align: left; }
.kpop.tt-pop h2 { text-align: center; }
.tt-giver { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 10px; }
.tt-giver img { width: 96px; height: 96px; image-rendering: pixelated; flex: none; border-radius: 12px; background: rgba(0, 0, 0, .12); }
.tt-giver b { display: block; color: var(--ink, #2a2435); margin-bottom: 2px; }
.tt-giver p { margin: 0; font-style: italic; color: #4a4258; line-height: 1.35; }
.tt-what { background: rgba(0, 0, 0, .06); border-radius: 10px; padding: 8px 12px; }
.tt-what > b { display: inline-block; padding: 1px 8px; border-radius: 8px; background: #2a2435; color: #ffe7a6; font-size: 12px; margin-bottom: 4px; }
.tt-what ol { margin: 4px 0 6px; padding: 0; list-style: none; counter-reset: tt; }
.tt-what li { position: relative; padding: 3px 0 3px 46px; counter-increment: tt; line-height: 1.3; }
.tt-what li::before { content: counter(tt); position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #2a2435; color: #ffe7a6; font: 700 11px/18px var(--f-head); text-align: center; }
.tt-what li i { position: absolute; left: 24px; top: 2px; font-style: normal; }
.tt-learn { font-size: 12px; color: #4a4258; }
.tt-later { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.tt-later .mini { font-size: 12px; padding: 2px 10px; }
.tt-end { text-align: center; }
.tt-resume { display: block; width: 100%; margin-top: 8px; }
.kpop.tt-pop h2 { margin-top: 44px; }
#tut-ring .tr-tag { width: max-content; }