.dict-guide {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-soft: #e0e7ff;
  --border: #e5e7eb;
  --ok: #059669;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin: 24px auto;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  scroll-margin-top: 80px;
}
@media (prefers-color-scheme: dark) {
  .dict-guide{
    --bg:#0b1020; --card:#0f1730; --text:#e5e7eb; --muted:#9aa3b2;
    --accent:#60a5fa; --accent-soft:#132146; --border:#1f2a44; --ok:#34d399;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
}
.dict-guide h1,.dict-guide h2,.dict-guide h3,.dict-guide strong{
  font-family: Arial;
}
.dict-guide h1{
  font-size: clamp(22px, 2.2vw + 12px, 32px);
  margin: 0 0 6px;
  letter-spacing:.3px;
}
.dict-guide .sub{
  color: var(--muted);
  margin: 0 0 16px;
}
.dict-guide .tip{
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--muted);
  display: flex; gap: 10px; align-items: flex-start;
}
.dict-guide .tip b{ color: var(--text); }
.dict-guide .grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.dict-guide li{ margin: 6px 0; }
@media (min-width: 760px){ .dict-guide .grid{ grid-template-columns: 1fr 1fr; } }

.card{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.card h3{
  margin: 0 0 8px;
  font-size: 18px;
  display: flex; align-items: center; gap: 10px;
}
.chip{
  display:inline-block; font-size:12px; padding:3px 8px; border-radius:999px;
  background: var(--accent-soft); color: var(--accent); border:1px solid var(--border);
}
.card ol, .card ul{ margin: 8px 0 0 20px; }

.dict-guide .ex{
  margin-top: 10px; font-size: 14px; color: var(--muted);
}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #00000010;
  padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border);
}

/* Accordion for “Mẹo tra cứu” */
details.guide-acc{
  background: transparent; border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; margin-top: 16px;
}
details.guide-acc > summary{
  cursor: pointer; list-style: none; font-weight: 600;
}
details.guide-acc > summary::-webkit-details-marker{ display:none; }
details.guide-acc[open]{ background: var(--card); }

.ok{ color: var(--ok); font-weight: 600; }


/* ===== Chỉ áp dụng cho section #tinh-nang ở HOME ===== */
#tinh-nang .grid{display:grid; gap:16px;}
#tinh-nang .grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){
  #tinh-nang .grid.cols-3{grid-template-columns:1fr;}
}

#tinh-nang .feature{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px;
}
#tinh-nang .feature h3{
  margin:0 0 6px; font-size:18px; color:#1f2937;
}
#tinh-nang .feature p{
  margin:0; color:#6b7280;
}

/* Hàng KPI (icon + nội dung) */
#tinh-nang .kpi{
  display:flex; gap:12px; align-items:center;
}
#tinh-nang .kpi .ico{
  flex:0 0 40px; width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:900;
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
}