:root{
  --card:#fff; --ink:#1f2937; --muted:#6b7280; --bd:#e5e7eb;
  --pri:#2563eb; --pri-weak:#dbeafe; --badge:#eef6ff; --chip:#f1f5f9;
}

/* Reset & Base */
*{box-sizing:border-box;}
a{color:var(--pri);text-decoration:none;}
a.row-link {
  text-decoration: none;
  color: inherit;
  display: block;
}



/* Container & Card */
.grammar-container{margin:0 auto;padding-top:1rem;}
.card{
  background:var(--card);border:1px solid var(--bd);border-radius:16px;
  padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.04);
  display:grid;gap:6px;
}

/* Title row (detail + list) */
.title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.title{font-weight:750;font-size:clamp(20px,3.8vw,28px);letter-spacing:.2px;}
.jlpt{
  margin-left:auto;background:var(--pri-weak);color:#1e3a8a;
  border:1px solid #bfdbfe;padding:6px 10px;border-radius:999px;font-weight:650;
}
.meta{color:#cd1616;font-size:14px;}

/* List page rows */
.list{display:grid;gap:10px;}
.row{
  display:grid;gap:8px;grid-template-columns:1fr auto;align-items:flex-start;
  padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--bd);
}
.row:hover{box-shadow:0 6px 18px rgba(0,0,0,.04);}
.row .title{font-weight:650;font-size:16px;margin:0;}

/* Badges (list JLPT chip) */
.badges{display:flex;gap:6px;align-items:center;justify-content:flex-end;}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border-radius:999px;background:var(--badge);color:#0b63b5;font-size:12px;
  border:1px solid #d6e6ff;
}

/* JLPT pastel (list) */
.badge.jlpt.jlpt-N5{background:#e8fff3;border-color:#bfe9d1;color:#0f7b4f;}
.badge.jlpt.jlpt-N4{background:#eef9ff;border-color:#cde7fb;color:#0b63b5;}
.badge.jlpt.jlpt-N3{background:#f4f0ff;border-color:#dfd6fb;color:#5c3bb3;}
.badge.jlpt.jlpt-N2{background:#fff6e8;border-color:#f7e0be;color:#a15b0b;}
.badge.jlpt.jlpt-N1{background:#ffeef0;border-color:#f6c9cf;color:#b32745;}
.badge.jlpt.jlpt-NA{background:#f1f5f9;border-color:#e2e8f0;color:#64748b;}

/* Nội dung (detail) */
.main-content h3{font-size:18px;margin:14px 0 10px;}
.grammar-container .detial-card h3{
  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;
}
.muted{color:var(--muted);}
mark{background:#fff3a3;padding:0 2px;border-radius:3px;}

/* Examples (detail) */
.examples{display:flex;flex-direction:column;gap:12px;}
.ex{padding:3px;background:#fff;}
.ex .vi{color:var(--ink);margin-left:22px;}
.ex .en{color:#334155;margin-left:22px;font-style:italic;}
.ex .sep{height:6px;}

/* Pager (list) */
.pager{
  display:flex;gap:8px;justify-content:center;align-items:center;
  margin-top:14px;flex-wrap:wrap;
}
.pager a,.pager span{
  padding:8px 12px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--ink);
}
.pager .current{background:var(--chip);font-weight:600;}

/* Responsive */
@media (max-width:640px){
  .row{grid-template-columns:1fr;}
  .badges{justify-content:flex-start;}
}