/* =========================================================================
 *  guide.css — Trang Hướng dẫn sử dụng (/huong-dan)
 * =========================================================================
 *  Hai phần: giao diện bài viết, và bảng màu cho các hình vẽ SVG do
 *  modules/guide/illustrations.php sinh ra.
 *
 *  Màu của hình vẽ để trong CSS chứ không viết cứng vào từng thẻ SVG: đổi
 *  màu thương hiệu thì sửa một chỗ, cả chục hình đổi theo.
 * ====================================================================== */

.guide-page { padding: 8px 0 48px; }

/* ===================== Mục lục ===================== */

.guide-hero { max-width: 720px; margin: 8px 0 28px; }
.guide-hero h1 { font-size: 1.9rem; margin: 0 0 10px; }
.guide-hero p  { color: var(--rbnd-muted); margin: 0; font-size: 1.02rem; line-height: 1.6; }

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.guide-card {
    display: block;
    background: #fff;
    border: 1px solid var(--rbnd-border);
    border-radius: var(--rbnd-radius);
    padding: 20px;
    text-decoration: none;
    color: #212529;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.guide-card:hover {
    border-color: var(--rbnd-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, .08);
    color: #212529;
}

.guide-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #eef4ff;
    color: var(--rbnd-primary);
    font-size: 1.15rem;
    margin-bottom: 12px;
}
.guide-card__icon--sm { width: 36px; height: 36px; font-size: 1rem; margin-bottom: 8px; }

.guide-card h2 { font-size: 1.08rem; margin: 0 0 8px; line-height: 1.4; }
.guide-card p  { color: var(--rbnd-muted); font-size: .9rem; line-height: 1.55; margin: 0 0 14px; }

.guide-card__meta,
.guide-article__meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: .8rem; color: var(--rbnd-muted);
}
.guide-article__meta { margin: 12px 0 0; }

.guide-quick, .guide-help {
    margin-top: 32px;
    background: #f8f9fb;
    border: 1px solid var(--rbnd-border);
    border-radius: var(--rbnd-radius);
    padding: 20px 24px;
}
.guide-quick h2, .guide-help h2 { font-size: 1.05rem; margin: 0 0 12px; }
.guide-quick ul { margin: 0; padding: 0; list-style: none; display: grid;
                  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 20px; }
.guide-quick li a { color: var(--rbnd-primary); text-decoration: none; font-size: .92rem; }
.guide-quick li a:hover { text-decoration: underline; }
.guide-help p { margin: 0; color: var(--rbnd-muted); font-size: .92rem; line-height: 1.6; }

/* ===================== Bài viết ===================== */

.guide-article { max-width: 780px; }
.guide-article__head { margin: 8px 0 28px; }
.guide-article__head h1 { font-size: 1.7rem; margin: 0 0 10px; line-height: 1.3; }
.guide-lead { font-size: 1.02rem; line-height: 1.65; color: #495057; margin: 0; }

.guide-sec { margin: 0 0 36px; scroll-margin-top: 90px; }   /* chừa chỗ cho thanh điều hướng dính */

.guide-sec h2 {
    font-size: 1.2rem;
    margin: 0 0 14px;
    display: flex; align-items: center; gap: 10px;
}
.guide-sec__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 50%;
    background: var(--rbnd-primary); color: #fff;
    font-size: .85rem; font-weight: 700;
}
.guide-sec__link { color: var(--rbnd-border); text-decoration: none; font-weight: 400; }
.guide-sec h2:hover .guide-sec__link { color: var(--rbnd-primary); }

.guide-steps { margin: 0 0 16px; padding-left: 22px; }
.guide-steps li { margin-bottom: 10px; line-height: 1.65; }
.guide-steps a { color: var(--rbnd-primary); }
.guide-steps code, .guide-callout code {
    background: #f1f3f5; padding: 1px 6px; border-radius: 4px; font-size: .88em;
}

.guide-callout {
    display: flex; gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .92rem;
    line-height: 1.6;
    margin: 0 0 12px;
    border: 1px solid transparent;
}
.guide-callout i { margin-top: 3px; }
.guide-callout a { color: inherit; text-decoration: underline; }

.guide-callout--tip  { background: #eef4ff; border-color: #d6e4ff; color: #16406b; }
.guide-callout--note { background: #f4f6f8; border-color: #e3e6ea; color: #41505e; }
.guide-callout--warn { background: #fff5f5; border-color: #ffd9d9; color: #7a2226; }

/* ===================== Hình minh họa ===================== */

.guide-fig { margin: 0 0 18px; }
.guide-fig img, .guide-fig .gi {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--rbnd-border);
    border-radius: 10px;
    background: #fff;
}
.guide-fig figcaption {
    font-size: .85rem; color: var(--rbnd-muted);
    margin-top: 8px; line-height: 1.5;
}

/* ===================== Câu hỏi thường gặp ===================== */

.guide-faq { margin: 0; }
.guide-faq dt {
    font-weight: 600;
    margin-top: 16px;
    padding-left: 22px;
    position: relative;
}
.guide-faq dt::before { content: "?"; position: absolute; left: 0; color: var(--rbnd-primary); font-weight: 700; }
.guide-faq dd { margin: 6px 0 0 22px; color: #495057; line-height: 1.65; }
.guide-faq dd a { color: var(--rbnd-primary); }

/* ===================== Điều hướng cuối bài ===================== */

.guide-nav { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.guide-nav__item {
    flex: 1 1 240px;
    border: 1px solid var(--rbnd-border);
    border-radius: var(--rbnd-radius);
    padding: 14px 16px;
    text-decoration: none; color: #212529;
    display: flex; flex-direction: column; gap: 4px;
}
.guide-nav__item:hover { border-color: var(--rbnd-primary); color: #212529; }
.guide-nav__item span   { font-size: .78rem; color: var(--rbnd-muted); }
.guide-nav__item strong { font-size: .95rem; line-height: 1.4; }
.guide-nav__item--next { text-align: right; }

/* ===================== Mục lục bên phải ===================== */

.guide-toc {
    position: sticky; top: 86px;
    border: 1px solid var(--rbnd-border);
    border-radius: var(--rbnd-radius);
    padding: 18px 20px;
    background: #fff;
}
.guide-toc h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
                color: var(--rbnd-muted); margin: 0 0 10px; }
.guide-toc h3 + ul { margin: 0 0 20px; }
.guide-toc ul { list-style: none; margin: 0; padding: 0; }
.guide-toc li { margin-bottom: 8px; }
.guide-toc a  { color: #495057; text-decoration: none; font-size: .9rem; line-height: 1.45; }
.guide-toc a:hover { color: var(--rbnd-primary); }
.guide-toc__others i { color: var(--rbnd-primary); width: 16px; }

@media (max-width: 991.98px) {
    .guide-toc { position: static; margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .guide-card { transition: none; }
    .guide-card:hover { transform: none; }
}

/* =========================================================================
 *  Bảng màu cho hình vẽ SVG
 * ====================================================================== */

.gi { font-family: inherit; }

.gi-bg      { fill: #f6f8fa; }
.gi-chrome  { fill: #e9edf2; }
.gi-dot     { fill: #c7cfd8; }
.gi-url     { fill: #ffffff; }
.gi-url-text{ fill: #8a949e; font-size: 10px; }

.gi-card    { fill: #ffffff; stroke: #e3e6ea; stroke-width: 1; }
.gi-card--raised { filter: drop-shadow(0 8px 18px rgba(0,0,0,.16)); }
.gi-col     { fill: #eef1f5; stroke: #e3e6ea; }
.gi-veil    { fill: rgba(15, 23, 42, .45); }

.gi-img     { fill: #dde3ea; }
.gi-img--ok { fill: #d7e8d9; }
.gi-img--bad{ fill: #f0d7d7; }
.gi-strike  { stroke: #dc3545; stroke-width: 3; }

.gi-input   { fill: #ffffff; stroke: #ccd3da; }
.gi-input--focus { stroke: #0d6efd; stroke-width: 2; }
.gi-track   { fill: #e3e6ea; }
.gi-line    { fill: #d6dce3; }
.gi-line--price { fill: #f0b8bd; }
.gi-sep     { stroke: #eceff2; }

.gi-btn     { fill: #0d6efd; }
.gi-btn-text{ fill: #ffffff; font-size: 11px; font-weight: 600; }
.gi-btn-ghost { fill: #ffffff; stroke: #ccd3da; }

.gi-accent      { fill: #0d6efd; }
.gi-accent-soft { fill: #dbe7ff; }

.gi-h    { fill: #212529; font-size: 13px; font-weight: 700; }
.gi-lbl  { fill: #6c757d; font-size: 10px; }
.gi-ph   { fill: #98a2ac; font-size: 11px; }
.gi-sec  { fill: #8a949e; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.gi-note { fill: #55606b; font-size: 11px; }
.gi-note--dim { fill: #98a2ac; }
.gi-note--on  { fill: #0d6efd; font-weight: 600; }
.gi-price { fill: #dc3545; font-size: 14px; font-weight: 700; }
.gi-price--lg { font-size: 20px; }

.gi-chip      { fill: #eef4ff; stroke: #d6e4ff; }
.gi-chip-text { fill: #16406b; font-size: 10px; }
.gi-tab       { fill: #ffffff; stroke: #e3e6ea; }
.gi-tab--on   { fill: #eef4ff; stroke: #0d6efd; }
.gi-menu-active { fill: #eef4ff; }

.gi-trow      { fill: #ffffff; stroke: #eceff2; }
.gi-trow--on  { fill: #eef4ff; stroke: #0d6efd; }

.gi-ok      { fill: #198754; }
.gi-warn    { fill: #f0a500; }
.gi-bad     { fill: #dc3545; }
.gi-neutral { fill: #8a949e; }
.gi-dark    { fill: #343a40; }
.gi-tag-text{ fill: #ffffff; font-size: 10px; font-weight: 600; }

.gi-node        { fill: #ffffff; stroke: #ccd3da; }
.gi-node--ok    { fill: #e6f4ea; stroke: #198754; }
.gi-node--warn  { fill: #fff6e0; stroke: #f0a500; }
.gi-node--bad   { fill: #fdeaea; stroke: #dc3545; }
.gi-node-text   { fill: #343a40; font-size: 11px; }

.gi-step      { fill: #ffffff; stroke: #ccd3da; }
.gi-step--on  { fill: #0d6efd; stroke: #0d6efd; }
.gi-step-num  { fill: #6c757d; font-size: 11px; font-weight: 700; }
.gi-step--on + .gi-step-num { fill: #ffffff; }

.gi-arrow      { stroke: #0d6efd; stroke-width: 2; fill: none; }
.gi-arrow-head { fill: #0d6efd; }

/* Ba cấp VIP: khác nhau CẢ MÀU LẪN HÌNH, đúng như trên thẻ tin thật —
   chỉ khác màu thì người mù màu không phân biệt được Bạc với Vàng. */
.gi-silver      { stroke: #8e9aaf; stroke-width: 2; }
.gi-silver-dot  { fill: #8e9aaf; }
.gi-gold        { stroke: #f0a500; stroke-width: 2; }
.gi-gold-dot    { fill: #f0a500; }
.gi-diamond     { stroke: #e63946; stroke-width: 2; }
.gi-diamond-dot { fill: #e63946; }