/* Trang Luyện viết chữ Hán theo nét (kanji/index.php) */
html { scrollbar-gutter: stable; }
.kj-wrap { max-width: 980px; margin: 0 auto; }
.kj-num { width: 40px; height: 40px; border-radius: .6rem; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; flex-shrink: 0; }
.kj-lbl { font-size: .8rem; font-weight: 600; color: var(--gray-600, #718096); margin: .75rem 0 .35rem; }
.kj-prog { font-size: .82rem; color: var(--gray-600, #718096); }
.kj-prog b { color: #2c7a7b; }

/* Chữ của bài, nhóm theo từ */
.kj-chips { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: .9rem; }
.kj-grp { display: flex; gap: .3rem; padding: .3rem; border-radius: .6rem; background: var(--gray-50, #f7fafc); border: 1px solid var(--gray-200, #e2e8f0); }
.kj-chip { position: relative; width: 3rem; height: 3.5rem; padding: .2rem 0 0; border: 1px solid var(--gray-200, #e2e8f0); border-radius: .5rem;
           background: #fff; color: var(--gray-800, #2d3748); display: flex; flex-direction: column; align-items: center; line-height: 1.1; cursor: pointer; }
.kj-chip span { font-size: 1.5rem; }
.kj-chip small { font-size: .55rem; color: var(--gray-600, #718096); text-transform: uppercase; white-space: nowrap; margin-top: .15rem; }
.kj-chip .kj-st { position: absolute; top: -.5rem; right: -.4rem; font-style: normal; font-size: .62rem; line-height: 1.25; padding: 0 .15rem;
                  border-radius: .5rem; background: #fff; color: #d69e2e; }
.kj-chip .kj-st:empty { display: none; }
.kj-chip.chua .kj-st { background: #fed7d7; color: #c53030; }   /* mới tự viết dưới 2 sao → chưa tính (10/10/2026) */
.kj-low { color: #c53030; font-weight: 600; }
.kj-chip.on { border-color: #319795; background: #e6fffa; box-shadow: 0 0 0 2px rgba(49, 151, 149, .35); }
.kj-chip.nodata { opacity: .4; }

/* Ô viết + điều khiển */
.kj-main { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-start; }
.kj-left { flex: 0 1 344px; min-width: 0; }
.kj-right { flex: 1 1 260px; min-width: 0; }
#kjPad { display: block; margin: 0 auto; box-sizing: content-box; background: #fffdf7; border: 2px solid #d6d3d1; border-radius: .5rem;
         touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kj-modes { display: flex; gap: .4rem; margin-top: .6rem; }
.kj-modes .btn { flex: 1 1 0; font-size: .82rem; font-weight: 600; padding: .45rem .25rem; white-space: nowrap; }
.kj-modes .btn.on { background: #2d3748; border-color: #2d3748; color: #fff; }
.kj-msg { min-height: 3.4em; margin-top: .6rem; padding: .45rem .65rem; border-radius: .5rem; font-size: .9rem;
          background: var(--gray-50, #f7fafc); border: 1px dashed var(--gray-200, #e2e8f0); }
.kj-msg.ok { color: #276749; background: #f0fff4; border-color: #9ae6b4; }
.kj-msg.err { color: #c53030; background: #fff5f5; border-color: #feb2b2; }
.kj-stars { color: #d69e2e; letter-spacing: .08em; font-size: 1.1rem; }
.kj-nav { display: flex; gap: .4rem; margin-top: .6rem; }
.kj-nav .btn { flex: 1 1 0; font-size: .85rem; }
.kj-pulse { animation: kjPulse 1.2s ease-in-out infinite; }
@keyframes kjPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(49, 151, 149, .6); } 50% { box-shadow: 0 0 0 .3rem rgba(49, 151, 149, 0); } }

/* Thông tin chữ đang luyện */
.kj-cur { display: flex; align-items: center; gap: .75rem; }
.kj-big { font-size: 3.4rem; line-height: 1; }
.kj-hv { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #2c7a7b; }
.kj-in { font-size: .88rem; margin-top: .4rem; }
.kj-fan { display: flex; flex-wrap: wrap; gap: .3rem; }
.kj-fan svg { width: 46px; height: 46px; border: 1px solid var(--gray-200, #e2e8f0); border-radius: .35rem; background: #fff; cursor: pointer; }
.kj-fan svg:hover { border-color: #319795; }
.kj-how { font-size: .8rem; color: var(--gray-600, #718096); margin-top: .9rem; padding-top: .6rem; border-top: 1px dashed var(--gray-200, #e2e8f0); }

/* Từ của bài */
.kj-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.kj-word { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: .1rem; padding: .5rem .65rem;
           border: 1px solid var(--gray-200, #e2e8f0); border-radius: .6rem; background: #fff; color: var(--gray-800, #2d3748); }
.kj-word:hover { border-color: #319795; }
.kj-word .w { font-size: 1.3rem; line-height: 1.2; }
.kj-word .r { font-size: .8rem; color: var(--gray-600, #718096); }
.kj-word .m { font-size: .8rem; }

/* Thẻ lật 漢字のことば: 2 mặt chồng cùng 1 ô lưới → thẻ cao theo mặt dài hơn, không cần đặt chiều cao cố định */
.kj-fcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.kj-fc { display: grid; perspective: 900px; cursor: pointer; border-radius: .7rem; outline: none;
         -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.kj-fc:focus-visible { box-shadow: 0 0 0 3px rgba(49, 151, 149, .45); }
.kj-fc-in { display: grid; min-height: 120px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.4, .2, .2, 1); }
.kj-fc.is-back .kj-fc-in { transform: rotateY(180deg); }
.kj-fc-face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
              text-align: center; padding: .7rem .6rem; border-radius: .7rem; border: 1px solid var(--gray-200, #e2e8f0);
              -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: visibility 0s .25s; }
.kj-fc-front { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.kj-fc:hover .kj-fc-front { border-color: #319795; box-shadow: 0 3px 10px rgba(49, 151, 149, .18); }
.kj-fc-front .w { font-size: 1.9rem; line-height: 1.15; color: var(--gray-800, #2d3748); }
.kj-fc.long .kj-fc-front .w { font-size: 1.5rem; }    /* 5 chữ (旅行します) — không bị ngắt giữa từ */
.kj-fc.xlong .kj-fc-front .w { font-size: 1.2rem; }
.kj-fc-hint { font-size: .7rem; color: var(--gray-400, #a0aec0); }
.kj-fc-back { transform: rotateY(180deg); background: #e6fffa; border-color: #81e6d9; visibility: hidden; }
.kj-fc.is-back .kj-fc-back { visibility: visible; }
.kj-fc.is-back .kj-fc-front { visibility: hidden; }
.kj-fc-back .r { font-size: 1.1rem; line-height: 1.25; color: var(--gray-800, #2d3748); }
.kj-fc-back .hv { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #2c7a7b; }
.kj-fc-back .m { font-size: .85rem; line-height: 1.3; }
.kj-fc-write { margin-top: .3rem; font-size: .75rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px;
               border: 1px solid #319795; background: #fff; color: #2c7a7b; }
.kj-fc-write:hover { background: #319795; color: #fff; }

/* Đăng nhập Mã TTS + thẻ học viên (dùng .qz-card / .qz-student của assets/css/quiz.css) */
.kj-login { max-width: 480px; }
/* Dải nhận diện học viên GỌN (~70px) để ô viết không bị đẩy xuống khuất màn hình điện thoại */
.kj-me { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .7rem; margin-bottom: .75rem; }
.kj-me .qz-student { gap: .6rem; min-width: 0; }
.kj-me .qz-photo { width: 42px; height: 56px; border-width: 1px; border-radius: .4rem; }
.kj-me .qz-photo i { font-size: 1.5rem; }
.kj-me .qz-name { font-size: .95rem; margin-bottom: 0; }
.kj-me .qz-info { font-size: .78rem; line-height: 1.35; }
.kj-me-out { flex-shrink: 0; }
.kj-me-out .btn { font-size: .72rem; padding: .2rem .5rem; }
.kj-save { min-height: 1.3em; margin-top: .3rem; font-size: .78rem; color: var(--gray-600, #718096); }
.kj-save.ok { color: #2f855a; }
.kj-save.queued { color: #b7791f; }
.kj-save.login, .kj-save.fail { color: #c53030; }

@media (max-width: 576px) {
  nav.navbar.sticky-top { position: relative; }
  .kj-headrow { flex-wrap: nowrap !important; }
  .kj-head-btns .btn span { display: none; }       /* nút đầu trang chỉ còn biểu tượng → khung tiêu đề 1 dòng */
  .kj-head-btns .btn i { margin-right: 0 !important; }
  .kj-left { flex-basis: 100%; }
  .kj-chips { gap: .45rem .5rem; }
  .kj-chip { width: 2.8rem; height: 3.3rem; }
  .kj-chip span { font-size: 1.35rem; }
  .kj-modes .btn { font-size: .78rem; }
  .kj-big { font-size: 2.8rem; }
  .kj-words, .kj-fcs { grid-template-columns: 1fr 1fr; }
  .kj-fc-in { min-height: 110px; }
  .kj-fc-front .w { font-size: 1.7rem; }
  .kj-fc.long .kj-fc-front .w { font-size: 1.45rem; }
  .kj-fc.xlong .kj-fc-front .w { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kj-pulse { animation: none; outline: 2px solid #319795; }
  .kj-fc-in, .kj-fc-face { transition: none; }
}