/* Trang huong dan + xem truoc khi soan (13/10/2026) */
.hsearch { width: 100%; border: 1px solid #d6dee9; border-radius: 12px; padding: 11px 14px; outline: 0; background: #fff; margin-bottom: 12px; }
.hsearch:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #dbe7ff; }
.hcat { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 16px 4px 8px; }
.hlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.hitem { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.hitem:hover { border-color: #bcd3ff; box-shadow: 0 4px 14px rgba(37,99,235,.08); }
.hitem b { display: block; font-size: 15px; margin-bottom: 4px; color: var(--ink); }
.hitem span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.hitem .vtag { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: #b91c1c; background: #fee2e2; border-radius: 99px; padding: 1px 8px; }

.hart { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px 26px; }
@media (max-width: 560px) { .hart { padding: 16px 14px 20px; border-radius: 14px; } }
.hcrumb { font-size: 13px; margin-bottom: 8px; } .hcrumb a { text-decoration: none; }
.hart h1 { font-size: 24px; margin: 0 0 6px; line-height: 1.3; }
.hart .lead { color: #475569; font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.htoc { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 18px; font-size: 14px; }
.htoc b { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.htoc a { display: block; padding: 3px 0; text-decoration: none; }

.hbody { font-size: 15.5px; line-height: 1.7; color: #1e293b; }
.hbody h2 { font-size: 19px; margin: 26px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.hbody h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.hbody h3 { font-size: 16.5px; margin: 18px 0 8px; }
.hbody p { margin: 0 0 12px; }
.hbody ul { margin: 0 0 12px; padding-left: 22px; } .hbody ul li { margin: 3px 0; }
.hbody code { background: #f1f5f9; border-radius: 5px; padding: 1px 6px; font-size: 14px; }
.hbody ol.steps { list-style: none; counter-reset: st; padding: 0; margin: 0 0 14px; }
.hbody ol.steps > li { counter-increment: st; position: relative; padding: 0 0 16px 44px; }
.hbody ol.steps > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.hbody ol.steps > li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; background: #dbe7ff; }
.hbody ol.steps .st { padding-top: 3px; }
.hbody .sub { font-size: 14px; color: #475569; margin-top: 4px; }
.hbody figure { margin: 10px 0 14px; }
.hbody figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.hbody figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.hbody .callout { border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; font-size: 14.5px; }
.hbody .callout.note { background: #eff6ff; border-left: 4px solid #3b82f6; }
.hbody .callout.warn { background: #fff7ed; border-left: 4px solid #f97316; }
.hbody .callout.tip { background: #f0fdf4; border-left: 4px solid #22c55e; }
.hbody .callout.note::before { content: 'ℹ️ '; } .hbody .callout.warn::before { content: '⚠️ '; } .hbody .callout.tip::before { content: '💡 '; }
.hbody .vid, .hart > .vid { margin: 10px 0 16px; }
.hbody .vid video, .hart > .vid video { width: 100%; border-radius: 12px; background: #000; }
.vid.yt { position: relative; padding-top: 56.25%; } .vid.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.hmore { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.hmore b { font-size: 14px; } .hmore a { display: block; padding: 5px 0; text-decoration: none; }

/* nut "?" canh tinh nang (dung o moi trang) */
.helpq { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e0ecff; color: #1d4ed8 !important; font-size: 12.5px; font-weight: 800; text-decoration: none !important; vertical-align: middle; margin-left: 6px; line-height: 1; flex: none; }
.helpq:hover { background: #2563eb; color: #fff !important; }