/* ═══════════════════════════════════════════════════
   on_tap_tuvung.css – Ôn tập từ vựng (đọc từ Sổ Riêng)
   ═══════════════════════════════════════════════════ */

.ot-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:16px 0;
}
.ot-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#cfe0f2;
  cursor:pointer;
  user-select:none;
}
.ot-toggle input{ accent-color:#4facfe; }
.ot-hint{
  font-size:12px;
  color:#5f7d9d;
  margin-left:auto;
}
.ot-hint code{
  background:rgba(90,150,210,.15);
  padding:1px 5px;
  border-radius:5px;
}

.ot-search-wrap{ margin:0 0 16px; }
.ot-search{
  width:100%;
  box-sizing:border-box;
  padding:11px 15px;
  border-radius:10px;
  border:1px solid rgba(120,150,190,.3);
  background:rgba(8,20,36,.6);
  color:#dcecfb;
  font-size:14px;
  outline:none;
  transition:border-color .15s;
}
.ot-search:focus{ border-color:#6fb1ff; }

.ot-group{
  margin-bottom:14px;
  background:rgba(13,28,48,.55);
  border:1px solid rgba(90,150,210,.22);
  border-radius:14px;
  overflow:hidden;
}
.ot-group > summary{
  cursor:pointer;
  padding:13px 16px;
  font-size:14px;
  font-weight:700;
  color:#cfe0f2;
  background:rgba(20,45,78,.45);
  list-style:none;
  user-select:none;
}
.ot-group > summary::-webkit-details-marker{ display:none; }
.ot-group > summary::before{ content:"▸  "; color:#6fb1ff; }
.ot-group[open] > summary::before{ content:"▾  "; }
.ot-group > summary:hover{ background:rgba(30,60,95,.55); }
.ot-group .ot-table{ border:none; border-radius:0; margin:0; }

.ot-table{
  width:100%;
  border-collapse:collapse;
  background:rgba(13,28,48,.6);
  border:1px solid rgba(90,150,210,.22);
  border-radius:14px;
  overflow:hidden;
  font-size:14px;
}
.ot-table th{
  text-align:left;
  padding:10px 14px;
  background:rgba(20,45,78,.6);
  color:#8fb0d0;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.ot-table td{
  padding:9px 14px;
  border-top:1px solid rgba(90,150,210,.12);
  color:#dcecfb;
  vertical-align:middle;
}
.ot-table tr:hover td{ background:rgba(30,60,95,.25); }
.ot-hanzi{
  font-size:19px;
  font-weight:700;
  color:#eaf3fc;
  display:flex;
  align-items:center;
  gap:8px;
}

.ot-speak-btn{
  border:1px solid rgba(120,150,190,.3);
  background:rgba(20,45,78,.35);
  color:#8fd6ff;
  border-radius:7px;
  padding:2px 7px;
  font-size:13px;
  line-height:1.6;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.ot-speak-btn:hover{ background:rgba(40,80,130,.5); border-color:#6fb1ff; }

.ot-input{
  width:100%;
  box-sizing:border-box;
  padding:8px 11px;
  border-radius:8px;
  border:1px solid rgba(120,150,190,.3);
  background:rgba(8,20,36,.6);
  color:#eaf3fc;
  font-size:14px;
  outline:none;
  transition:border-color .15s, background .15s;
}
.ot-input:focus{ border-color:#6fb1ff; }
.ot-input:disabled{ color:#8fb0d0; background:rgba(8,20,36,.3); }
.ot-input.ot-dung{ border-color:#5fd08a; background:rgba(40,100,70,.25); color:#bdf5d3; }
.ot-input.ot-sai{ border-color:#f87171; background:rgba(110,40,40,.25); color:#f9c6c6; }

.ot-write-btn{
  border:1px solid rgba(120,150,190,.35);
  background:rgba(20,45,78,.4);
  color:#cfe0f2;
  border-radius:8px;
  padding:5px 9px;
  font-size:14px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.ot-write-btn:hover{ background:rgba(40,80,130,.5); border-color:#6fb1ff; }

/* ── Modal luyện viết ── */
.ot-modal{
  position:fixed;
  inset:0;
  background:rgba(5,12,22,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:80;
  padding:16px;
}
.ot-modal-box{
  background:rgba(15,30,50,.98);
  border:1px solid rgba(90,150,210,.3);
  border-radius:16px;
  padding:20px;
  max-width:94vw;
  max-height:90vh;
  overflow:auto;
}
.ot-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:19px;
  font-weight:800;
  color:#eaf3fc;
  margin-bottom:16px;
}
#otWriteTitle{
  display:flex;
  align-items:center;
  gap:10px;
}
.ot-modal-x{
  background:none;
  border:none;
  color:#8fb0d0;
  font-size:18px;
  cursor:pointer;
  padding:2px 6px;
}
.ot-modal-x:hover{ color:#eaf3fc; }

.ot-write-grids{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
.ot-write-cell{
  width:158px;
  height:158px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(90,150,210,.35);
  border-radius:8px;
  background-color:rgba(8,20,36,.5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline x1='50' y1='0' x2='50' y2='100' stroke='%235a789a' stroke-width='0.8' stroke-dasharray='3 3'/%3E%3Cline x1='0' y1='50' x2='100' y2='50' stroke='%235a789a' stroke-width='0.8' stroke-dasharray='3 3'/%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%235a789a' stroke-width='0.8' stroke-dasharray='3 3'/%3E%3Cline x1='100' y1='0' x2='0' y2='100' stroke='%235a789a' stroke-width='0.8' stroke-dasharray='3 3'/%3E%3C/svg%3E");
  background-size:100% 100%;
}

.ot-write-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:18px;
}
.ot-write-msg{
  text-align:center;
  font-size:12.5px;
  color:#f0c060;
  margin-top:10px;
  min-height:16px;
}

@media (max-width:640px){
  .ot-hint{ margin-left:0; width:100%; }
  .ot-table{ font-size:13px; }
  .ot-hanzi{ font-size:17px; }
  .ot-write-cell{ width:120px; height:120px; }
}