/* Thiết kế hiển thị kết quả tìm kiếm */
.sentence-container {
  background: #fdfdfd;
  border: 1px solid #dce6f1;
  /*border-left: 6px solid #3399ff;*/
  /*border-left:4px solid #3498db;*/
  border-radius: 12px;
  padding: 0.5rem 1.5rem 1.5rem 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  color: #222;
}

.sentence-container h3 {
  margin: 1.1rem 0 0.75rem;
  padding: 8px 12px 6px;
  font: 600 1.1rem/1.4 Arial, Helvetica, sans-serif;
  color: #036;
  background: #f7f7f7;
  border-left: 5px solid #f89174;
  border-bottom: 3px solid #dadada;
  clear: both;
}


.sentence-meaning, .sentence-word { display: flow-root; } /* tạo BFC, tránh sập margin */
.sentence-meaning h3, .sentence-word h3 { margin-block: 12px 10px; }
.jp {
    font-size: 1.4rem;
    color: #003366;
    margin-bottom: 0.5rem;
    font-weight: bold;
    line-height: 1.6;
}
ruby rt{
  font-size: 0.6em;
  line-height: 1;    /* tránh rt làm “đội” thêm line-height bất ngờ */
}
.vi {
    font-size: 1.1rem;
    color: #444;
}
.token-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-family: "Segoe UI", sans-serif;
  font-size: 0.95rem;
}
.token-table th, .token-table td {
  border: 1px solid #dcdcdc;
  padding: 0.4rem 0.6rem;
  text-align: center;
}
.token-table th {
  background-color: #f0f8ff;
  color: #003366;
}
.token-surface {
  font-weight: bold;
  font-size: 1.2rem;
  color: #003366;
}
.counter-list {
  margin-top: 1.5rem;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  color: #003300;
}
.counter-list li {
  margin-bottom: 0.4rem;
}

.rw__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.rw__card{display:block;padding:10px;border-radius:10px;text-decoration:none;border:1px solid #e5e7eb;background:#fff;color:#111}
.rw__row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.rw__word{font-weight:700;font-size:18px; line-height:1.2;}
.rw__reading{font-size:14px;color:#555; line-height:1.2;}
.rw__meaning{font-size:14px;color:#333; line-height:1.3;}

.rw__card:hover,.kanji-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  background-color: #f0f4ff;
  cursor: pointer;
}

/* Kanji grid giống rw__grid */
.kanji-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
}

/* Card giống rw__card */
.kanji-row{
  display:block;
  padding:10px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111;
}

/* Dòng đầu: chữ Kanji + Hán Việt (giống rw__row) */
.kanji-row .kanji-char{
  display:inline-block;
  font-weight:700;
  font-size:18px;     /* giống .rw__word */
  margin-right:8px;
}
.kanji-row .kanji-info{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  margin-bottom:6px;  /* giống .rw__row */
  flex-wrap:wrap;     /* nếu Hán Việt dài thì vẫn đẹp */
}
.kanji-row .kanji-hanviet{
  font-size:14px;
  color:#555;         /* giống .rw__reading */
}

/* Nghĩa (giống .rw__meaning) */
.kanji-row .kanji-nghia{
  font-size:14px;
  color:#333;
}