/* =========================================================================
   KHO ĐỒ NHỆN — giao diện dùng chung (đi kèm kho-do-ui.js)
   Mọi lớp bắt đầu bằng "kd-" để không đụng style riêng của từng game.
   ========================================================================= */
.kd-khoin,.kd-start,.kd-end,.kd-overlay,.kd-bong,.kd-tui{
  --kd-ink:#14274E; --kd-muted:#4E5F80; --kd-line:#C9D8F2; --kd-paper:#F7FAFF;
  --kd-gold:#F6B93B; --kd-gold-d:#E0912A; --kd-red:#E5484D; --kd-red-d:#B0383C;
  --kd-blue:#2F7BF5; --kd-green:#2FA36B; --kd-green-d:#1F7A4F;
  font-family:inherit; box-sizing:border-box;
}
.kd-khoin *,.kd-start *,.kd-end *,.kd-overlay *{box-sizing:border-box}
.kd-nhen{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:middle}

/* ---------- Nút chung ---------- */
.kd-btn{display:block;width:100%;margin-top:12px;border:none;border-radius:14px;padding:12px;cursor:pointer;text-align:center;
  text-decoration:none;font-family:inherit;font-weight:800;font-size:1.05rem;line-height:1.3;
  background:var(--kd-green);color:#fff;box-shadow:0 5px 0 var(--kd-green-d)}
.kd-btn:active{transform:translateY(2px);box-shadow:0 3px 0 var(--kd-green-d)}
.kd-btn.red{background:var(--kd-red);box-shadow:0 5px 0 var(--kd-red-d)}
.kd-btn.dark{background:var(--kd-ink);box-shadow:0 5px 0 #0A1630}
.kd-btn.ghost{background:#fff;color:var(--kd-muted);border:2px solid var(--kd-line);box-shadow:0 4px 0 var(--kd-line)}
.kd-btn:focus-visible,.kd-x:focus-visible,.kd-tab:focus-visible,.kd-slot:focus-visible,.kd-heropic:focus-visible,
.kd-chest:focus-visible,.kd-cta:focus-visible,.kd-nv-item:focus-visible,.kd-link:focus-visible{outline:3px solid var(--kd-blue);outline-offset:2px}
.kd-link{display:block;margin:10px auto 0;background:none;border:2px dashed currentColor;border-radius:10px;
  color:var(--kd-muted);font-family:inherit;font-weight:800;font-size:.82rem;padding:6px 12px;cursor:pointer}
.kd-link.danger{color:var(--kd-red)}
.kd-x{flex:none;width:40px;height:40px;border-radius:12px;border:2px solid var(--kd-line);background:#fff;color:var(--kd-ink);
  font-size:1.1rem;font-weight:900;cursor:pointer;font-family:inherit;padding:0}

/* ---------- Túi nhện con ---------- */
.kd-tui{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:var(--kd-ink);
  background:#fff;border:2px solid #F3C9CA;border-radius:20px;padding:3px 10px 3px 6px;white-space:nowrap;
  position:relative;font-size:.92rem;line-height:1}
.kd-tui .kd-nhen{width:22px;height:22px}
.kd-tui-n b{font-size:1.05em;color:#C2373C}
.kd-tui-bar{position:absolute;left:30px;right:10px;bottom:2px;height:3px;border-radius:2px;background:#F6DCDD;overflow:hidden}
.kd-tui-bar i{display:block;height:100%;background:var(--kd-red);border-radius:2px;transition:width .5s ease-out}
.kd-tui.kd-pop{animation:kdPop .45s cubic-bezier(.175,.885,.32,1.275)}

/* ---------- "+1 nhện con" bay lên ---------- */
.kd-bong{position:fixed;z-index:10060;transform:translate(-50%,-50%);pointer-events:none;
  display:flex;align-items:center;gap:3px;font-weight:900;font-size:1.4rem;color:#C2373C;
  text-shadow:0 2px 0 #fff,0 0 6px #fff;animation:kdBong 1.25s ease-out forwards}
.kd-bong .kd-nhen{width:34px;height:34px}
@keyframes kdBong{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}20%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}

/* ---------- Kho đồ (trong trang chủ) và các phần chung với màn cài đặt ---------- */
.kd-khoin{width:100%;color:var(--kd-ink)}
.kd-tabs{display:flex;gap:6px;margin-bottom:10px}
.kd-tab{position:relative;flex:1;min-width:0;font-family:inherit;font-weight:800;font-size:.86rem;cursor:pointer;padding:8px 2px;line-height:1.2;
  border-radius:12px;border:3px solid var(--kd-line);background:#fff;color:var(--kd-muted)}
.kd-tab small{display:block;font-size:.74rem}
.kd-tab[aria-selected="true"]{border-color:var(--c);background:var(--bg);color:var(--kd-ink);box-shadow:0 3px 0 var(--c)}
.kd-tab-dot{position:absolute;top:-5px;right:-3px;width:14px;height:14px;border-radius:50%;background:var(--kd-red);border:2px solid #fff}
.kd-herorow{display:flex;align-items:center;gap:14px;border-radius:16px;padding:10px 14px;margin-bottom:10px;
  background:linear-gradient(135deg,#1A2F52,#10233F);color:#fff;border:2px solid var(--kd-gold-d)}
.kd-heropic{width:64px;height:104px;flex:none;display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;cursor:pointer}
.kd-heropic.off{cursor:default}
.kd-heropic img{max-width:100%;max-height:100%;object-fit:contain}
.kd-heropic.off img{filter:brightness(0) invert(1);opacity:.22}
.kd-heropic.kd-cards{cursor:default}
.kd-heropic.kd-cards img{border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.kd-heropic.kd-cards.off img{filter:blur(4px) brightness(.5);opacity:.6}
.kd-heroinfo{flex:1;min-width:0}
.kd-heroinfo b{display:block;font-size:1rem;margin-bottom:2px}
.kd-heroinfo span{display:block;font-size:.8rem;opacity:.92;line-height:1.35}
.kd-bar{display:block;height:10px;margin-top:5px;border-radius:6px;background:#E3EBF7;overflow:hidden;border:1px solid var(--kd-line)}
.kd-bar i{display:block;height:100%;border-radius:6px;background:var(--c,var(--kd-red));transition:width .6s ease-out}
.kd-heroinfo .kd-bar{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.25);margin-top:8px}
.kd-heroinfo .kd-bar i{background:linear-gradient(90deg,#E5484D,#FF8A3D)}

/* Nút lớn "Chơi để nhận đồ" */
.kd-cta{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;margin:0 0 12px;cursor:pointer;
  font-family:inherit;color:#fff;background:var(--kd-red);border:none;border-radius:18px;padding:14px 12px;
  box-shadow:0 6px 0 var(--kd-red-d);animation:kdNhip 2.2s ease-in-out infinite}
.kd-cta:active{transform:translateY(3px);box-shadow:0 3px 0 var(--kd-red-d)}
.kd-cta-main{font-size:1.35rem;font-weight:900;letter-spacing:.3px}
.kd-cta-sub{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.84rem;font-weight:700;opacity:.95;text-align:left;line-height:1.35}
.kd-cta-sub .kd-nhen{width:22px;height:22px;background:#fff;border-radius:50%}
@keyframes kdNhip{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}

.kd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.kd-slot{position:relative;aspect-ratio:1/1.15;border-radius:14px;border:2px solid var(--kd-line);background:#fff;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 4px 4px;font-family:inherit;color:var(--kd-ink);cursor:pointer}
.kd-slot img{width:100%;height:68%;object-fit:contain}
.kd-slot span{font-size:.68rem;font-weight:800;line-height:1.2;text-align:center;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kd-slot.on{border-color:var(--c);background:var(--bg)}
.kd-slot.on.h3{box-shadow:0 0 0 2px #FFD36B inset}
.kd-slot.off{border-style:dashed}
.kd-slot.off img{filter:brightness(0);opacity:.14}
.kd-slot.off span{color:#AAB6CC}
.kd-slot em{position:absolute;top:-6px;right:-4px;background:var(--kd-red);color:#fff;font-size:.62rem;font-style:normal;
  font-weight:900;border-radius:8px;padding:2px 6px;animation:kdPop .45s cubic-bezier(.175,.885,.32,1.275)}
.kd-slot em.ok{background:var(--kd-green);font-size:.75rem;animation:none}
/* Bộ thẻ: ô dọc, thẻ chưa mở hiện mờ thay vì bóng đen */
.kd-grid.the{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.kd-grid.the .kd-slot{aspect-ratio:2/3.3}
.kd-grid.the .kd-slot img{height:80%;border-radius:6px}
.kd-grid.the .kd-slot.off img{filter:blur(5px) brightness(.55) saturate(.6);opacity:.55}

/* ---------- Thẻ nhiệm vụ trong game ---------- */
.kd-start{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;width:100%;color:var(--kd-ink);
  background:linear-gradient(135deg,#FFF6DD,#FFE9C2);border:3px solid var(--kd-gold-d);border-radius:18px;padding:14px 16px;
  box-shadow:0 4px 0 rgba(224,145,42,.35)}
.kd-start-top{font-weight:900;font-size:1rem;color:#A3470F}
.kd-start-name{font-size:1.25rem;line-height:1.3}
.kd-start small{font-size:.82rem;font-weight:700;color:var(--kd-muted)}
.kd-start-rule{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-size:.88rem;font-weight:700;color:#7A5418;margin-top:4px}
.kd-start-rule > .kd-nhen{width:24px;height:24px}
.kd-start .kd-btn{font-size:1.25rem;padding:14px;max-width:360px}

/* ---------- Màn kết thúc lượt ---------- */
.kd-end{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;width:100%;color:var(--kd-ink)}
.kd-me{width:170px;height:170px;border-radius:20px;overflow:hidden;border:4px solid var(--kd-gold-d);background:#FFE4E1;
  display:flex;align-items:center;justify-content:center;font-size:4.5rem;box-shadow:0 6px 16px rgba(0,0,0,.15);
  animation:kdPop .45s cubic-bezier(.175,.885,.32,1.275)}
.kd-me img{width:100%;height:100%;object-fit:cover}
.kd-me-txt{font-size:1.15rem;font-weight:900;color:var(--kd-red)}
.kd-end-title{font-size:1.35rem;font-weight:900;line-height:1.3;margin-top:4px}
.kd-end-nhen{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;color:#C2373C;font-size:1rem;text-align:left;max-width:360px}
.kd-end-nhen .kd-nhen{width:28px;height:28px}
.kd-end-items{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.kd-end-items img{width:76px;height:76px;object-fit:contain;background:#fff;border:2px solid var(--kd-line);border-radius:14px;padding:4px;
  animation:kdPop .5s cubic-bezier(.175,.885,.32,1.275) both}
.kd-end-small{font-size:.85rem;font-weight:700;color:var(--kd-muted)}
.kd-end-btns{width:100%;max-width:380px;display:flex;flex-direction:column}

/* ---------- Lớp phủ ---------- */
.kd-overlay{position:fixed;inset:0;z-index:10040;display:flex;justify-content:center;align-items:center;padding:16px;
  background:rgba(16,35,63,.84);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:kdFade .25s ease-out;
  color:var(--kd-ink);text-align:center}
.kd-overlay.kd-top{z-index:10050}
@keyframes kdFade{from{opacity:0}to{opacity:1}}
@keyframes kdPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.kd-card{background:#fff;border:6px solid var(--kd-gold);border-radius:24px;padding:20px 18px;max-width:360px;width:100%;
  box-shadow:0 12px 30px rgba(0,0,0,.4);animation:kdPop .4s cubic-bezier(.175,.885,.32,1.275);
  max-height:calc(100vh - 32px);overflow:auto}
.kd-hint{font-size:.92rem;font-weight:700;color:var(--kd-muted);line-height:1.45;margin-top:6px}
.kd-name{font-size:1.3rem;font-weight:900;color:var(--kd-red);line-height:1.3;margin-top:4px}
.kd-big{font-size:1.45rem;font-weight:900;line-height:1.3;margin:8px 0 2px}
.kd-head{font-size:1rem;font-weight:900;color:var(--kd-red);letter-spacing:.5px}
.kd-note{font-size:.8rem;font-weight:700;color:var(--kd-muted);opacity:.9;margin-top:8px}

/* Danh sách game để bé chọn (khi ba mẹ chọn nhiều game) */
.kd-nv-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;text-align:left}
.kd-nv-item{display:flex;align-items:center;gap:10px;width:100%;text-decoration:none;cursor:pointer;
  background:#fff;color:var(--kd-ink);border:2px solid var(--kd-gold-d);border-radius:14px;padding:10px 10px 10px 12px;
  font-family:inherit;font-size:1rem;box-shadow:0 3px 0 rgba(224,145,42,.35)}
.kd-nv-item:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(224,145,42,.35)}
.kd-nv-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.kd-nv-txt b{font-size:.98rem;line-height:1.25}
.kd-nv-txt small{font-size:.74rem;font-weight:700;color:var(--kd-muted)}
.kd-go{flex:none;font-size:1.8rem;line-height:1;font-weight:700;color:var(--kd-ink)}

/* ---------- Rương ---------- */
.kd-ruong-head{display:flex;justify-content:center;gap:4px}
.kd-ruong-head .kd-nhen{width:34px;height:34px;animation:kdHop .7s ease-in-out infinite alternate}
.kd-ruong-head .kd-nhen:nth-child(2){animation-delay:.2s}
.kd-ruong-head .kd-nhen:nth-child(3){animation-delay:.4s}
@keyframes kdHop{to{transform:translateY(-6px)}}
.kd-chest{font-size:5.5rem;line-height:1.1;cursor:pointer;user-select:none;display:inline-block;margin-top:4px;
  animation:kdShake .5s ease-in-out infinite}
@keyframes kdShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.kd-full{font-size:5rem;line-height:1.1}
.kd-prize{position:relative;width:200px;height:200px;margin:0 auto 4px;display:flex;align-items:center;justify-content:center}
.kd-prize.the{height:250px}
.kd-rays{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(rgba(246,185,59,.38) 0 12deg,transparent 12deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);
  animation:kdSpin 9s linear infinite}
.kd-prize.r3 .kd-rays{background:repeating-conic-gradient(rgba(229,72,77,.4) 0 12deg,rgba(246,185,59,.4) 12deg 24deg,transparent 24deg 36deg)}
@keyframes kdSpin{to{transform:rotate(360deg)}}
.kd-prize img{position:relative;max-width:82%;max-height:82%;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(20,39,78,.3));animation:kdPop .5s cubic-bezier(.175,.885,.32,1.275)}
.kd-prize.the img{max-height:96%;border-radius:10px}
.kd-rar{display:inline-block;font-size:.76rem;font-weight:900;letter-spacing:1px;padding:3px 12px;border-radius:20px;margin-top:4px}
.kd-rar.r1{background:#EAF1FC;color:var(--kd-blue)}
.kd-rar.r2{background:#FFF4E0;color:var(--kd-gold-d)}
.kd-rar.r3{background:linear-gradient(90deg,#FFD6D6,#FFE8B0);color:var(--kd-red)}
.kd-rar.r4{background:linear-gradient(90deg,#FFF1B8,#FFD36B);color:#8A5A00}
.kd-prog{margin-top:10px;font-size:.86rem;font-weight:800;color:var(--kd-muted)}
.kd-hero-img{display:block;height:min(230px,34vh);max-width:70%;object-fit:contain;margin:8px auto 4px;
  filter:drop-shadow(0 8px 14px rgba(20,39,78,.35));animation:kdSpinIn 1.1s ease-out}
@keyframes kdSpinIn{from{transform:rotate(-180deg) scale(.3)}to{transform:none}}
.kd-cardfan{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:10px 0 4px}
.kd-cardfan img{width:100%;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.25);animation:kdPop .5s both}
.kd-view{background:radial-gradient(circle,#fff 0 45%,#DFEAF9 75%);border-color:#fff}
.kd-view img{display:block;width:100%;max-height:50vh;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(20,39,78,.3))}
.kd-view.the img{max-height:62vh;border-radius:12px}

/* ---------- Cài đặt cho ba mẹ ---------- */
.kd-kho-wrap{align-items:flex-start;overflow-y:auto}
.kd-kho{background:var(--kd-paper);border:3px solid var(--kd-ink);border-radius:20px;padding:14px;width:100%;max-width:760px;
  margin:auto 0;text-align:left;animation:kdPop .3s ease-out;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.kd-kho-top{display:flex;align-items:center;gap:10px}
.kd-kho-title{flex:1;min-width:0;font-weight:900;font-size:1.12rem;color:var(--kd-red)}
.kd-kho-sub{font-size:.82rem;font-weight:700;color:var(--kd-muted);line-height:1.45;margin:6px 0 10px}
.kd-sec{margin:16px 0 0;font-size:1rem;color:var(--kd-ink)}
.kd-fs{border:2px solid var(--kd-line);border-radius:14px;padding:6px 10px 10px;margin:0 0 10px;background:#fff}
.kd-fs legend{font-weight:900;font-size:.92rem;padding:0 6px;color:var(--kd-ink)}
.kd-chk{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid #EEF2F9;cursor:pointer}
.kd-chk:last-child{border-bottom:0}
.kd-chk input{width:22px;height:22px;flex:none;accent-color:var(--kd-red);margin:0}
.kd-chk-t{flex:1;min-width:0;display:flex;flex-direction:column}
.kd-chk-t b{font-size:.9rem}
.kd-chk-t small{font-size:.72rem;font-weight:700;color:var(--kd-muted)}
.kd-stepper{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.kd-stepper b{font-size:1.4rem;min-width:28px;text-align:center}
.kd-stepper .kd-kho-sub{margin:0}
.kd-row{display:flex;gap:10px}
.kd-row .kd-btn{flex:1}
.kd-bame-all .kd-btn{margin:0 0 10px;font-size:.88rem;padding:8px}
.kd-pick .kd-slot.pick img{filter:grayscale(1);opacity:.35}
.kd-save{position:sticky;bottom:-14px;background:var(--kd-paper);padding:4px 0 10px;margin-top:6px}
.kd-tools{display:flex;flex-direction:column;align-items:center}

@media (max-width:420px){
  .kd-grid{grid-template-columns:repeat(3,1fr)}
  .kd-grid.the{grid-template-columns:repeat(3,1fr)}
  .kd-kho{padding:12px 10px}
  .kd-tab{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .kd-overlay *,.kd-khoin *,.kd-end *,.kd-bong,.kd-tui,.kd-cta{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
}