.daily-kanji-empty{color:#6b7280;font-size:.95rem;margin:10px 2px}

.daily-kanji-card-grid{display:grid;grid-template-columns:1fr;gap:12px}

.daily-kanji-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  transition:background .2s,transform .15s,box-shadow .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.daily-kanji-card:hover{background:#f7fbff;transform:translateY(-1px);box-shadow:0 6px 14px rgba(37,99,235,.08)}

.daily-kanji-link{display:flex;flex-direction:column;gap:8px;padding:14px 16px;color:inherit;text-decoration:none}

.daily-kanji-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.daily-kanji-literal{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.daily-kanji-literal .kanji{font-size:1.9rem;font-weight:900;color:#0f172a;line-height:1}
.daily-kanji-literal .hv{font-size:1rem;font-weight:700;color:#9a3412}

.pill{font-size:.78rem;line-height:1;padding:4px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#f9fafb;color:#374151;white-space:nowrap}
.pill.jlpt{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}

/* Cho phép ellipsis hoạt động trong layout flex */
.daily-kanji-card,.daily-kanji-link{min-width:0}

/* Nghĩa: 1 dòng + ellipsis */
.daily-kanji-meaning{
  font-size:.98rem;color:#1f2937;line-height:1.45;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%
}

/* On/Kun: mỗi loại 1 dòng + ellipsis */
.daily-kanji-reading{
  margin-top:2px;font-size:.95rem;color:#374151;display:flex;flex-direction:column;gap:2px
}
.daily-kanji-reading div{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%
}


/* ==== Danh sách từ (1 cột) ==== */
.daily-word-card-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ==== Thẻ từ ==== */
.daily-word-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: background 0.2s, transform 0.15s;
}

.daily-word-card:hover {
  background: #f3f8ff;
  transform: translateY(-1px);
}

.daily-word-card a {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
}

/* ==== Header chứa từ + nút âm thanh ==== */
.daily-word-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* ----- Nút TTS: hit area rộng, dễ bấm ----- */
.daily-word-tts-btn{
  background:#eef4ff;            /* nền nhạt để thấy vùng bấm */
  border:1px solid #c7d2fe;
  color:#1e40af;
  border-radius:999px;            /* viên thuốc */
  padding:8px 14px;               /* mở rộng vùng bấm ngang */
  min-width:44px;                 /* chuẩn hit target */
  min-height:22px;                /* chuẩn hit target */
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
  user-select:none;
}
.daily-word-tts-btn:hover{
  background:#e0e7ff;
  box-shadow:0 2px 8px rgba(30,64,175,.15);
  transform:translateY(-1px);
}
.daily-word-tts-btn:active{
  transform:translateY(0);
}

/* ==== Nội dung ==== */
.daily-word-jp {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
}

.daily-word-reading {
  margin-top: 2px;
  font-size: 0.95rem;
  color: #2563eb;
}

.daily-word-vi {
  margin-top: 4px;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.4;
}


a, a:hover {
  text-decoration: none;
}

ol.toplist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

ol.toplist li {
  margin: 0;
}

ol.toplist a {
  display: inline-block;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: .35rem .9rem;
  color: #222;
  font-size: .95rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

ol.toplist a:hover {
  background: #eceff3;
  border-color: #d9dee3;
  color: #222;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

ol.toplist a:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ==== Bố cục tổng ==== */
.home-sections {
  display: flex;
  flex-direction: row;          /* Nằm ngang */
  justify-content: center;
  align-items: flex-start;
  gap: 12px;                    /* Khoảng cách giữa các khối */
  max-width: 1200px;
  font-family: "Noto Sans", "Noto Sans JP", Inter, system-ui, sans-serif;
}

/* ==== Mỗi khối riêng ==== */
.home-block.compact {
  flex: 1 1 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
  min-width: 220px;
  transition: all .2s ease;
}

.home-block.compact > h2 {
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #222;
  border-left: 6px solid #2563eb;
  padding-left: 8px;
}

.daily-kanji-card-grid{
  display:grid;
  grid-template-columns:1fr; /* mặc định 1 cột */
  gap:12px;
}

/* 2 cột chỉ ở tầm tablet: 640–899px */
@media (min-width: 640px) and (max-width: 899px) {
  .daily-kanji-card-grid { grid-template-columns: 1fr 1fr; }
}

/* >=900px quay về 1 cột (nếu bạn muốn giữ 1 cột trong mỗi khối ở desktop) */
@media (min-width: 900px) {
  .daily-kanji-card-grid { grid-template-columns: 1fr; }
}

/* ==== Responsive tổng cho .home-sections ==== */
@media (max-width: 899px) {
  .home-sections {
    flex-direction: column;     /* Xếp dọc */
    gap: 12px;
    align-items: stretch;
  }
  .home-block.compact {
    width: 100%;
    max-width: none;
  }
}
@media (min-width: 900px) {
  .home-sections { align-items: stretch; }
  .home-block.compact {
    display: flex;
    flex-direction: column;
  }
}