/* ==========================================================================
   Hướng dẫn chung (/huong-dan và các trang con). Dùng lại khung .xh-* của trang
   xếp hạng (skill-tabs.css), file này chỉ thêm các khối riêng của bài hướng dẫn.
   ========================================================================== */
.hb-hub .page-header-wrapper { display: none !important; }
.hg { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #c4cad8; }
.hg .xh-section { margin: 0 0 14px; }
.hg .xh-content { display: block; }
.hg p { color: #c4cad8; font-size: 15px; line-height: 1.75; margin: 0 0 12px; }
.hg p:last-child { margin-bottom: 0; }
.hg strong, .hg b { color: #fff; }
.hg a { color: #ceae7e; text-decoration: none; border-bottom: 1px dashed rgba(206,174,126,.45); }
.hg a:hover { color: #fff; border-bottom-color: #fff; }
.hg h3 {
  font-family: 'Be Vietnam Pro', 'Open Sans', sans-serif; font-size: 16.5px; font-weight: 700;
  color: #fff; line-height: 1.4; letter-spacing: 0; margin: 18px 0 8px;
}
.hg ul.hg-list { margin: 0 0 12px; padding: 0 0 0 20px; }
.hg ul.hg-list li { color: #c4cad8; font-size: 15px; line-height: 1.7; margin: 0 0 6px; }

/* Mục lục */
.hg-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.hg-toc li { margin: 0; }
.hg-toc a {
  display: inline-block; background: #1a1d27; border: 1px solid #2a2f3e; border-radius: 999px;
  padding: 6px 12px; font-size: 13px; color: #d6dae7; border-bottom-width: 1px;
}
.hg-toc a:hover { border-color: #ceae7e; color: #ceae7e; }

/* Các bước đánh số */
.hg-steps { counter-reset: hgstep; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.hg-steps > li {
  counter-increment: hgstep; position: relative; background: #1a1d27; border: 1px solid #2a2f3e;
  border-radius: 10px; padding: 14px 16px 14px 56px; margin: 0;
}
.hg-steps > li::before {
  content: counter(hgstep); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(206,174,126,.15); border: 1.5px solid #ceae7e; color: #ceae7e;
  font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.hg-steps__t { display: block; font-family: 'Be Vietnam Pro', 'Open Sans', sans-serif; font-weight: 700; color: #fff; font-size: 15.5px; line-height: 1.4; margin: 2px 0 4px; }
.hg-steps__d { display: block; color: #b6bcd1; font-size: 14.5px; line-height: 1.7; }

/* Bảng */
.hg-table-wrap { overflow-x: auto; margin: 6px 0 4px; border: 1px solid #2a2f3e; border-radius: 10px; }
.hg-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; margin: 0; }
.hg-table th {
  background: #232838; color: #ceae7e; text-align: left; font-weight: 700; padding: 10px 12px;
  border-bottom: 1px solid #2a2f3e; font-family: 'Be Vietnam Pro', 'Open Sans', sans-serif;
}
.hg-table td { padding: 10px 12px; border-bottom: 1px solid #23283a; color: #d6dae7; vertical-align: top; line-height: 1.6; }
.hg-table tr:last-child td { border-bottom: 0; }
.hg-table tr:nth-child(even) td { background: rgba(255,255,255,.015); }

/* Ô mẹo / lưu ý */
.hg-tip {
  background: rgba(206,174,126,.07); border: 1px solid rgba(206,174,126,.35); border-left: 4px solid #ceae7e;
  border-radius: 10px; padding: 12px 16px; margin: 10px 0 0; color: #e2d6c2; font-size: 14.5px; line-height: 1.7;
}
.hg-tip__t { display: block; font-weight: 800; color: #ceae7e; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 4px; }
.hg-tip--warn { background: rgba(229,115,115,.07); border-color: rgba(229,115,115,.35); border-left-color: #e57373; color: #ead3d3; }
.hg-tip--warn .hg-tip__t { color: #e57373; }

/* Lưới thẻ (trang chủ đề /huong-dan, bài liên quan) */
.hg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.hg-card {
  display: block; background: #1a1d27; border: 1px solid #2a2f3e !important; border-radius: 12px;
  padding: 16px 18px; transition: border-color .15s, transform .15s; text-decoration: none !important;
}
.hg-card:hover { border-color: #ceae7e !important; transform: translateY(-2px); }
.hg-card__k { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #ceae7e; margin: 0 0 6px; }
.hg-card__t { display: block; font-family: 'Be Vietnam Pro', 'Open Sans', sans-serif; font-weight: 700; font-size: 16.5px; color: #fff; line-height: 1.4; margin: 0 0 6px; }
.hg-card__d { display: block; font-size: 13.5px; color: #9aa1b5; line-height: 1.6; }

@media (max-width: 549px) {
  .hg p, .hg ul.hg-list li { font-size: 14.5px; }
  .hg-steps > li { padding: 12px 12px 12px 48px; }
  .hg-steps > li::before { left: 10px; top: 12px; width: 26px; height: 26px; font-size: 13px; }
  .hg-grid { grid-template-columns: 1fr; }
}