/* Tab "Khởi động" của học sinh (public/khoi-dong.js). Bố cục theo "Ôn câu sai" của Dashboard (ba cột kiểu
   lichess.org/training: thông tin câu · bàn cờ · lượt đi + các nước + ô các câu), mặc theme của Lớp cờ thầy Hiệp:
   khối màu chữ trắng (.o-trang), thẻ trắng bên trong, nút dày có gờ đáy (.nut-lon / .nut-phu), chữ Nunito.
   Điện thoại: bàn cờ trên cùng sát mép, ngay dưới là lời nhắc và hai nút, rồi tới ô các câu. */

.man-khoi-dong { padding-bottom: 32px; }
.kd-cho { margin: 24px 0; font-weight: 700; color: var(--muc2); }
.kd-cho.loi { color: var(--xau); }

/* --- danh sách đề --------------------------------------------------------------------------------------------------- */
.kd-dau { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.kd-dau img { flex: none; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .12)); }
.kd-dau h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); color: var(--muc); }
.kd-dau p { margin: 4px 0 0; max-width: 60ch; color: var(--muc2); font-weight: 700; text-wrap: pretty; }
.kd-trong { max-width: 560px; }
.kd-ds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.kd-the {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ngay chu" "nut nut"; gap: 12px 14px;
  padding: 16px; border-radius: var(--bo); background: var(--the); box-shadow: inset 0 -5px 0 var(--vien), var(--bong);
}
.kd-the-ngay {
  grid-area: ngay; display: grid; place-items: center; align-content: center; width: 64px; height: 64px; border-radius: 18px;
  background: var(--nhan); color: var(--nhan-chu); box-shadow: inset 0 -4px 0 var(--nhan-dam);
}
.kd-the-ngay b { font: 900 1.6rem/1 var(--chu-to); }
.kd-the-ngay span { font: 800 .72rem/1.2 var(--chu); text-transform: uppercase; letter-spacing: .04em; }
.kd-the.xong .kd-the-ngay { background: #4cc46a; box-shadow: inset 0 -4px 0 #2f9a4b; color: #fff; }
.kd-the-chu { grid-area: chu; min-width: 0; align-self: center; }
.kd-the-chu h3 { font-size: 1.15rem; color: var(--muc); }
.kd-the-chu p { margin: 3px 0 0; color: var(--mo); font-weight: 700; font-size: .92rem; }
.kd-the-chu p b { color: var(--muc); font-size: 1.05rem; }
.kd-thanh { display: block; height: 10px; margin-top: 8px; border-radius: 999px; background: var(--nen2); overflow: hidden; }
.kd-thanh i { display: block; height: 100%; border-radius: inherit; background: var(--nhan); }
.kd-the.xong .kd-thanh i { background: #4cc46a; }
.kd-mo { grid-area: nut; justify-content: center; text-align: center; text-decoration: none; }

/* --- màn giải ------------------------------------------------------------------------------------------------------- */
.kd-top { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.kd-top .nut-tron { flex: none; display: grid; place-items: center; text-decoration: none; color: var(--muc); }
.kd-top .nut-tron svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.kd-tieu { flex: 1; min-width: 0; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem); color: var(--muc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-gio {
  flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 40px; padding: 0 12px; border-radius: 999px;
  background: var(--the); box-shadow: var(--bong); font: 800 1rem/1 var(--chu); font-variant-numeric: tabular-nums; color: var(--muc);
}
.kd-gio svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.kd-thu { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--vang-nhan); color: #3b2a00; font: 800 .85rem/1.1 var(--chu); }
@media (max-width: 480px) { .kd-thu { display: none; } }
.kd-gio.qua { background: color-mix(in srgb, var(--cta) 14%, var(--the)); color: var(--cta-dam); }

.kd {
  display: grid; gap: 16px 20px; align-items: start; justify-content: center;
  grid-template-columns: minmax(200px, 250px) minmax(0, 600px) minmax(260px, 320px); grid-template-areas: "trai ban phai";
}
.kd-trai { grid-area: trai; }
.kd-ban { grid-area: ban; padding: 4px; min-width: 0; }
.kd-ban .cg-wrap { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.kd-ban { border-radius: 14px; }
/* Đúng / sai: ĐỔI MÀU VIỀN sẵn có của bàn cờ (--khung của ban-co-cg.css), không bọc thêm một vòng nữa ra ngoài
   (người dùng 2026-11-10: "thêm 1 cái viền nữa bọc ra ngoài trông rất xấu"). */
.kd-ban cg-container { transition: box-shadow .2s ease; }
.kd-ban.ok { --khung: #2f9a4b; }
.kd-ban.sai { --khung: var(--xau); }
.kd-phai { grid-area: phai; display: grid; gap: 12px; position: sticky; top: 84px; }

/* cột trái: thông tin câu (khối màu, chữ trắng) */
.kd-trai h2 { margin: 0 0 8px; font-size: 2rem; }
.kd-trai h2 small { font-size: 1.05rem; font-weight: 800; opacity: .85; }
.kd-luot { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: rgb(255 255 255 / .16); font: 900 1.1rem/1 var(--chu-to); }
.kd-quan { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(0 0 0 / .45); }
.kd-quan.trang { background: #fff; } .kd-quan.den { background: #1d1d1d; box-shadow: inset 0 0 0 2px #fff; }
.kd-thong { display: grid; gap: 8px; margin: 0 0 12px; }
.kd-thong div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--vien); }
.kd-thong dt { font-weight: 700; color: var(--mo); }
.kd-thong dd { margin: 0; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.kd-thong .an { font-weight: 600; font-size: .85rem; color: var(--mo); }
.kd-nhac { margin: 0; font-size: .88rem; font-weight: 600; color: var(--muc2); text-wrap: pretty; }

/* lời nhắc: thẻ trạng thái của màn ván cờ (.trang-thai), tô theo kết quả */
.kd-loi { display: flex; align-items: flex-start; gap: 10px; }
.kd-loi > span { display: grid; gap: 4px; }
.kd-loi small { font: 700 .92rem/1.35 var(--chu); color: var(--muc2); }
.kd-loi svg { flex: none; width: 30px; height: 30px; padding: 4px; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.kd-loi[data-kieu="dung"] { background: #dff5e3; box-shadow: inset 0 -3px 0 #a9ddb4; }
.kd-loi[data-kieu="dung"] svg { background: #2f9a4b; }
.kd-loi[data-kieu="sai"] { background: color-mix(in srgb, var(--xau) 12%, #fff); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--xau) 30%, #fff); }
.kd-loi[data-kieu="sai"] svg { background: var(--xau); }
.kd-loi[data-kieu="het"] { background: #fff4c2; box-shadow: inset 0 -3px 0 #f0d36b; }

.kd-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; }
.kd-bar > * { min-width: 0; min-height: 54px; padding: 0 12px; justify-content: center; white-space: nowrap; font-size: 1.02rem; }
.kd-bar .nut-phu { display: inline-flex; align-items: center; gap: 6px; }
.kd-bar svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kd-bar button:disabled { opacity: .45; cursor: not-allowed; }

/* ô các câu: mỗi câu một ô trắng; đúng xanh, sai đỏ, đang xem viền vàng */
.kd-de h2 { margin-bottom: 10px; font-size: 1.15rem; }
.kd-phien { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.kd-o {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-height: 44px; padding: 0;
  border: 0; border-radius: 12px; background: #fff; color: #14303d; font: 900 1.05rem/1 var(--chu-to); cursor: pointer;
  box-shadow: inset 0 -4px 0 rgb(20 48 61 / .14); transition: transform .1s ease;
}
.kd-o:active { transform: translateY(2px); }
.kd-o svg { position: absolute; right: 3px; bottom: 5px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.kd-o.ok { background: #4cc46a; color: #fff; box-shadow: inset 0 -4px 0 #2f9a4b; }
.kd-o.sai { background: #ef6b8b; color: #fff; box-shadow: inset 0 -4px 0 #c0405f; }
.kd-o.dang { outline: 3px solid var(--vang-nhan); outline-offset: 2px; }
.kd-o:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* các nước (biên bản của màn ván cờ, tự đánh số) */
.kd-nuoc { list-style: none; padding: 8px 10px; max-height: 180px; }
.kd-nuoc li { display: flex; align-items: center; gap: 2px; }
.kd-nuoc .so { min-width: 2.4em; color: var(--mo); font-weight: 700; }
.kd-nuoc button.be { color: #237a3a; }
.kd-nuoc button.sai { color: var(--xau); text-decoration: line-through; text-decoration-thickness: 2px; }
.kd-nuoc button.dang { color: var(--nhan-chu); text-decoration: none; }
.kd-dieu { grid-template-columns: repeat(5, 1fr); }
.kd-dieu .dac { fill: currentColor; }
.glyph { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; font-weight: 400; }

/* màn rộng vừa: thông tin câu xuống dưới cột phải */
@media (max-width: 1099px) {
  .kd { grid-template-columns: minmax(0, 600px) minmax(260px, 320px); grid-template-areas: "ban phai" "ban trai"; }
  .kd-phai { position: static; }
}
/* điện thoại / máy tính bảng dọc: một cột, bàn cờ trên cùng */
@media (max-width: 759px) {
  .kd { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ban" "phai" "trai"; gap: 12px; }
  .kd-ban { margin: 0 -10px; }
  .kd-top { margin-bottom: 10px; }
  .kd-trai h2 { font-size: 1.6rem; }
  .kd-the { padding: 14px; }
  .kd-ds { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .kd-gio .het { display: none; }           /* điện thoại: chỉ số phút đã nghĩ, nhường chỗ cho tiêu đề */
  .kd-gio { padding: 0 10px; }
}
@media (max-width: 359px) { .kd-tieu .ten-kd { display: none; } }
@media (max-width: 340px) { .kd-bar { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .kd-ban cg-container, .kd-o { transition: none; } }