/* Guide page styles */
    .guide-wrap {
        background: radial-gradient(1200px 600px at 50% -200px, rgba(118, 185, 0, .22), transparent 60%),
            linear-gradient(180deg, #000000, #0a0d10 60%, #080a0c);
        color: #e9eef2;
    }

        /* กันเนื้อหาชน navbar (เฉพาะหน้า guideline) */
        body.guide-wrap {
            padding-top: 92px;
            /* ปรับเลขได้ เช่น 80-110 */
        }

    .guide-hero {
        padding: 90px 0 40px;
        text-align: center;
    }

    .guide-hero h1 {
        font-weight: 800;
        letter-spacing: .5px;
        margin-bottom: 10px;
    }

    .guide-hero p {
        color: rgba(233, 238, 242, .75);
        max-width: 720px;
        margin: 0 auto;
        font-size: 1.05rem;
    }

    .guide-chipbar {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 18px;
    }

    .guide-chip {
        border: 1px solid rgba(118, 185, 0, .45);
        color: #dff7c7;
        background: rgba(118, 185, 0, .10);
        padding: 8px 12px;
        border-radius: 999px;
        font-size: .9rem;
        text-decoration: none;
    }

    .guide-section {
        padding: 48px 0;
    }

    .guide-section-title {
        font-weight: 800;
        margin-bottom: 10px;
        letter-spacing: .3px;
    }

    .guide-section-sub {
        color: rgba(233, 238, 242, .72);
        margin-bottom: 26px;
    }

    .guide-card {
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 16px;
        padding: 18px 18px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    }

    .guide-card+.guide-card {
        margin-top: 14px;
    }

    .guide-card-row {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .guide-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .10);
        background: rgba(255, 255, 255, .08);
        flex: 0 0 auto;
    }

    .guide-icon i {
        color: #76b900;
        font-size: 18px;
    }

    .guide-card h5 {
        margin: 0 0 6px;
        font-weight: 800;
    }

    .guide-card p {
        margin: 0;
        color: rgba(233, 238, 242, .78);
        line-height: 1.8;
    }

    /* right column: example boxes */
    .guide-example {
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 16px;
        padding: 18px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    }

    .guide-example h4 {
        font-weight: 800;
        margin-bottom: 10px;
    }

 .guide-codebox {
     background: #0f141a;
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: 14px;
     padding: 14px 14px;
     color: #dfe7ee;
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     line-height: 1.75;

     white-space: pre-line;
     /* ✅ เปลี่ยนจาก pre-wrap */
     text-align: left;
     /* ✅ ชิดซ้ายแน่นอน */
     margin: 0;
     /* กัน margin แปลกๆ */
 }
    

    /* use-cases style cards (เหมือนภาพล่าง) */
    .guide-gridcard {
        border-radius: 18px;
        padding: 22px;
        border: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
        height: 100%;
    }

    .guide-gridcard h4 {
        font-weight: 900;
        margin: 10px 0 14px;
    }

    .guide-gridcard ul {
        margin: 0;
        padding-left: 18px;
        color: rgba(233, 238, 242, .80);
    }

    .guide-gridcard li {
        margin: 8px 0;
    }

    .guide-mini {
        margin-top: 14px;
        font-weight: 700;
        color: rgba(233, 238, 242, .9);
    }

    .guide-mini-box {
        margin-top: 8px;
        background: #0f141a;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 14px;
        padding: 12px 14px;
        color: #e9eef2;
    }

    .bg-soft-blue {
        background: rgba(74, 137, 255, .16);
    }

    .bg-soft-green {
        background: rgba(70, 255, 165, .14);
    }

    .bg-soft-purple {
        background: rgba(178, 117, 255, .16);
    }