.kanji-info-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem; /* tách riêng column để tăng khoảng cách chiều ngang */
  gap: 1.5rem;
}
.kanji-info-content {
  flex: 0 0 calc(65% - 0.75rem);
  max-width: calc(65% - 0.75rem);
}
.kanji-info-sidebar {
  flex: 0 0 calc(35% - 0.75rem);
  max-width: calc(35% - 0.75rem);
  font-size: 0.95rem;
  color: #333;
}
.kanji-info-sidebar-content{
  background: #fdfdfd;
  border: 1px solid #dce6f1;
  /*border-left: 6px solid #3399ff;*/
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  color: #222;
}
.kanji-info-sidebar-content > h3:first-child {
  margin-top: 0; /*Để thẳng hàng với bên trái*/
}


.kanji-info {
  padding: 1rem 1.5rem;
  margin: 0rem 0.5rem;
  font-family: "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  list-style: none;
  padding-left: 0;
}

.kanji-info li {
  margin: 0;               /* Không hở giữa các dòng */
  border: none;            /* Không viền giữa */
}

.kanji-info li + li {
  border-top: 1px dashed #ccc; /* Chỉ dùng đường kẻ nhẹ nếu cần */
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}



.kanji-info .section-title{
    display: inline-block;
    width: 75px;
    font-weight: bold;
    margin-right: 0.5rem;
}
.kanji-info .kanji-literal {
    font-size: 2rem;
    font-weight: 700;
    color: #003366;
    margin-bottom: 0.3rem;
}

.kanji-info .on-item {
  display: inline-block;
  margin-right: 0.75rem; /* khoảng cách giữa các âm */
  font-weight: 500;
}

/* Hiển thị cách viết hán tự */
.kanji-svg {
  width: 100%;
  /*max-width: 420px;*/
  height: auto;
  /*border: 1px solid #ccc;*/
  /*background: #fff;*/
  margin-top: 1rem;
}

.stroke-path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.path-index {
  fill: #e74c3c;
  font-size: 0.5rem;
  font-weight: 500; 
  text-anchor: middle;
  pointer-events: none;

}

.kanji-svg-wrapper {
  position: relative;
  display: inline-block; /* để wrapper vừa đúng kích thước SVG */
}

.kanji-svg-wrapper .viethantu {
  position: absolute;
  top: 0px;    /* khoảng cách tới đỉnh wrapper */
  right: -10px;  /* khoảng cách tới mép phải wrapper */
  width: 36px; /* điều chỉnh kích thước icon */
  height: 36px;
  cursor: pointer;
  /* tuỳ chọn: nổi bật hơn */
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}


/* Mỗi nét một màu khác nhau */
.stroke-0  { stroke: #1b1f3b; }
.stroke-1  { stroke: #2c3e50; }
.stroke-2  { stroke: #3d3d6b; }
.stroke-3  { stroke: #4b0082; }
.stroke-4  { stroke: #5d1451; }
.stroke-5  { stroke: #6e2c00; }
.stroke-6  { stroke: #7b241c; }
.stroke-7  { stroke: #8b0000; }
.stroke-8  { stroke: #8e44ad; }
.stroke-9  { stroke: #943126; }
.stroke-10 { stroke: #a04000; }
.stroke-11 { stroke: #a52a2a; }
.stroke-12 { stroke: #b03a2e; }
.stroke-13 { stroke: #b22222; }
.stroke-14 { stroke: #ba4a00; }
.stroke-15 { stroke: #b7410e; }
.stroke-16 { stroke: #c0392b; }
.stroke-17 { stroke: #ca6f1e; }
.stroke-18 { stroke: #cd5c5c; }
.stroke-19 { stroke: #d35400; }
.stroke-20 { stroke: #d2691e; }
.stroke-21 { stroke: #da2c43; }
.stroke-22 { stroke: #dc7633; }
.stroke-23 { stroke: #e17055; }
.stroke-24 { stroke: #e74c3c; }
.stroke-25 { stroke: #eb4d4b; }
.stroke-26 { stroke: #ee5a24; }
.stroke-27 { stroke: #f39c12; }
.stroke-28 { stroke: #f45050; }
.stroke-29 { stroke: #ff5e57; }
.stroke-30 { stroke: #ff6347; }
.stroke-31 { stroke: #ff6f61; }
.stroke-32 { stroke: #ff7f50; }
.stroke-33 { stroke: #ff8c00; }
.stroke-34 { stroke: #ff9f43; }

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-button svg,
.icon-button .fa-play {
  font-size: 1.25rem;      /* điều chỉnh kích thước */
  color: #333;             /* màu icon */
}

.icon-button:hover svg,
.icon-button:hover .fa-play {
  color: #e74c3c;          /* đổi màu khi hover */
}

.kanji-detail 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;
}


@media (max-width: 768px) {
  .kanji-info {
    padding: 1rem;
    font-size: 0.95rem;
  }
  
  .kanji-info-content, .kanji-info-sidebar {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
    .kanji-info-content {
        order: 2; /* chuyển xuống sau */
    }

    .kanji-info-sidebar {
        order: 1; /* chuyển lên trước */
    }
  
}


/*
********************************************
START TỪ LIÊN QUAN
********************************************
*/

.rw { margin-top:16px; }
.rw__head { display:flex; justify-content:space-between; align-items:center; margin-top:-8px; margin-bottom:4px;}
.rw__title { display:flex; align-items:center; gap:8px; }
.rw__icon { font-size:18px; }
.rw__count { color:#6b7280; } /* gray-500 */

.rw__grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:10px;
}

.rw__card {
  border:1px solid #e5e7eb; /* gray-200 */
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
  text-decoration: none;
  color: inherit;

}
.rw__card:hover { transform: translateY(-1px); border-color:#dbeafe; box-shadow: 0 4px 10px rgba(59,130,246,.08); }
.rw__row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.rw__word { font-weight:700; font-size:18px; line-height:1; }
.rw__reading { font-size:13px; color:#374151; /* gray-700 */ }
.rw__meaning { font-size:13px; color:#4b5563; margin-top:4px; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden; }

.rw__badges { display:flex; gap:6px; margin-left:auto; }
.badge {
  font-size:11px; line-height:1; padding:4px 6px; border-radius:999px; border:1px solid #e5e7eb; color:#374151; background:#f9fafb;
}
.badge--vi   { border-color:#34d39933; color:#065f46; background:#ecfdf5; }      /* xanh lục nhạt */
.badge--nf   { border-color:#60a5fa33; color:#1e3a8a; background:#eff6ff; }      /* xanh lam nhạt */
.badge--len  { border-color:#fbbf2433; color:#7c2d12; background:#fffbeb; }      /* vàng nhạt */

.rw__btn {
  font-size:13px; padding:6px 10px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
}
.rw__btn:hover { background:#f9fafb; }
.rw__btn--primary { border-color:#3b82f6; color:#0b57d0; background:#eef2ff; }
.rw__btn--primary:hover { background:#e0e7ff; }

.rw__error {
  border:1px dashed #fecaca; background:#fef2f2; color:#7f1d1d;
  border-radius:10px; padding:8px 10px; margin:8px 0;
}

.rw__foot{
  margin-top:6px;
}
/* Skeleton loading */
.skel {
  border-radius:10px; overflow:hidden; position:relative; background: #f3f4f6;
  height:64px;
}
.skel::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0));
  transform: translateX(-100%); animation: sh 1.2s infinite;
}
@keyframes sh { 100% { transform: translateX(100%); } }

/* dark mode nhẹ (tùy trang của bạn) */
@media (prefers-color-scheme: dark) {
  .rw__card { background:#0b0f14; border-color:#1f2937; }
  .rw__btn { background:#0b0f14; border-color:#1f2937; color:#cbd5e1; }
  .rw__grid .badge { border-color:#253041; background:#101826; color:#cbd5e1; }
  .rw__meaning, .rw__reading, .rw__count { color:#9ca3af; }
}

/*
********************************************
END TỪ LIÊN QUAN
********************************************
*/