.xgbdemo-article,.xgbdemo-article *{box-sizing: border-box}.xgbdemo-article{--orange: #ff6a00;--orange-dark: #d95400;--orange-soft: #fff4ec;--black: #101114;--graphite: #1a1d22;--text: #353a40;--muted: #737a83;--line: #e6e8eb;--surface: #ffffff;--surface-soft: #f7f8fa;--warning: #fff7ec;--shadow: 0 18px 50px rgba(16,17,20,0.08);width: min(1180px,calc(100% - 40px));margin: 0 auto;padding: 18px 0 80px;color: var(--text);font-family: "Prompt","Noto Sans Thai",Arial,sans-serif;line-height: 1.82}.xgbdemo-article a{color: var(--orange-dark);text-decoration: none}.xgbdemo-breadcrumb ol{display: flex;flex-wrap: wrap;gap: 8px;margin: 0 0 22px;padding: 0;list-style: none;color: var(--muted);font-size: 13px}.xgbdemo-breadcrumb li:not(:last-child)::after{content: "/";margin-left: 8px;color: #a7abb0}.xgbdemo-hero{position: relative;overflow: hidden;padding: 54px 56px;border: 1px solid var(--line);border-radius: 26px;background: radial-gradient(circle at 90% 10%,rgba(255,106,0,0.14),transparent 34%),linear-gradient(135deg,#fff 0%,#fafafa 100%);box-shadow: var(--shadow)}.xgbdemo-kicker,.xgbdemo-eyebrow{display: inline-block;margin: 0 0 12px;color: var(--orange-dark);font-size: 12px;font-weight: 800;letter-spacing: 0.12em}.xgbdemo-hero h1{max-width: 980px;margin: 0;color: var(--black);font-size: clamp(32px,4vw,54px);line-height: 1.24;letter-spacing: -0.025em}.xgbdemo-lead{max-width: 970px;margin: 22px 0 0;color: #4c5158;font-size: 18px}.xgbdemo-actions{display: flex;flex-wrap: wrap;gap: 12px;margin-top: 28px}.xgbdemo-btn{display: inline-flex;min-height: 48px;align-items: center;justify-content: center;padding: 12px 21px;border: 1px solid var(--line);border-radius: 12px;font-weight: 700;transition: transform 0.2s ease,border-color 0.2s ease}.xgbdemo-btn:hover{transform: translateY(-2px)}.xgbdemo-btn--primary{border-color: var(--orange);background: var(--orange);color: #fff !important;box-shadow: 0 10px 26px rgba(255,106,0,0.2)}.xgbdemo-btn--secondary{background: #fff;color: var(--black) !important}.xgbdemo-btn--secondary:hover{border-color: var(--orange)}.xgbdemo-cover{display: block;margin: 30px 0 0}.xgbdemo-cover img{display: block;width: 100%;max-width: 100%;height: auto;aspect-ratio: 16 / 9;object-fit: cover;border: 1px solid var(--line);border-radius: 22px;box-shadow: var(--shadow)}.xgbdemo-cover figcaption{margin-top: 10px;color: var(--muted);font-size: 12px;text-align: center}.xgbdemo-content{padding-top: 18px}.xgbdemo-section{margin-top: 24px;padding: 38px;border: 1px solid var(--line);border-radius: 22px;background: var(--surface)}.xgbdemo-section h2{margin: 0 0 16px;color: var(--black);font-size: clamp(24px,2.8vw,34px);line-height: 1.32;letter-spacing: -0.015em}.xgbdemo-section h3{margin: 6px 0 10px;color: var(--black);font-size: 18px;line-height: 1.45}.xgbdemo-section p{margin: 14px 0 0}.xgbdemo-answer{border-color: rgba(255,106,0,0.28);background: linear-gradient(135deg,#fff 0%,var(--orange-soft) 100%)}.xgbdemo-grid,.xgbdemo-warning-grid,.xgbdemo-role-grid,.xgbdemo-status-grid,.xgbdemo-check-grid{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 14px;margin-top: 22px}.xgbdemo-grid article,.xgbdemo-warning-grid article,.xgbdemo-role-grid article,.xgbdemo-status-grid article,.xgbdemo-check-grid > div{min-width: 0;padding: 19px;border: 1px solid var(--line);border-radius: 15px;background: var(--surface-soft);color: var(--black);font-weight: 700}.xgbdemo-warning-grid article{border-color: #efd7b5;background: var(--warning)}.xgbdemo-role-grid span{display: block;color: var(--orange-dark);font-size: 11px;font-weight: 800;letter-spacing: 0.08em}.xgbdemo-role-grid strong{display: block;margin-top: 7px}.xgbdemo-compare{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 16px;margin-top: 22px}.xgbdemo-compare article{padding: 26px;border: 1px solid var(--line);border-radius: 18px;background: var(--surface-soft)}.xgbdemo-compare article > span{color: var(--orange-dark);font-size: 11px;font-weight: 800;letter-spacing: 0.08em}.xgbdemo-compare ul{margin: 12px 0 0;padding-left: 20px}.xgbdemo-four,.xgbdemo-five,.xgbdemo-three{display: grid;gap: 14px;margin-top: 22px}.xgbdemo-four{grid-template-columns: repeat(4,minmax(0,1fr))}.xgbdemo-five{grid-template-columns: repeat(5,minmax(0,1fr))}.xgbdemo-three{grid-template-columns: repeat(3,minmax(0,1fr))}.xgbdemo-four article,.xgbdemo-five article,.xgbdemo-three article{padding: 22px;border: 1px solid var(--line);border-radius: 16px;background: var(--surface-soft)}.xgbdemo-four span,.xgbdemo-five span,.xgbdemo-three span{display: block;color: var(--orange-dark);font-size: 11px;font-weight: 800;letter-spacing: 0.08em}.xgbdemo-four strong,.xgbdemo-five strong,.xgbdemo-three strong{display: block;margin-top: 7px;color: var(--black)}.xgbdemo-framework{display: grid;grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap: 8px;align-items: stretch;margin-top: 24px}.xgbdemo-framework > div{display: flex;min-height: 100px;flex-direction: column;justify-content: center;padding: 14px;border: 1px solid var(--line);border-radius: 14px;background: var(--surface-soft);text-align: center}.xgbdemo-framework > div span{color: var(--orange-dark);font-size: 10px;font-weight: 800}.xgbdemo-framework > div strong{margin-top: 5px;color: var(--black);font-size: 13px}.xgbdemo-framework > b{display: flex;align-items: center;color: var(--orange)}.xgbdemo-framework__core{border-color: rgba(255,106,0,0.46) !important;background: var(--graphite) !important}.xgbdemo-framework__core span{color: #ff9d59 !important}.xgbdemo-framework__core strong{color: #fff !important}.xgbdemo-flow,.xgbdemo-decision{display: flex;flex-wrap: wrap;gap: 8px;align-items: center;margin-top: 22px;padding: 20px;border-radius: 16px;background: var(--surface-soft)}.xgbdemo-flow span,.xgbdemo-decision span{padding: 9px 12px;border: 1px solid #dfe2e5;border-radius: 10px;background: #fff;color: var(--black);font-size: 13px;font-weight: 700}.xgbdemo-flow b,.xgbdemo-decision b{color: var(--orange)}.xgbdemo-flow--long span{flex: 1 1 125px;text-align: center}.xgbdemo-decision strong{padding: 10px 14px;border-radius: 10px;background: var(--black);color: #fff}.xgbdemo-note{margin-top: 22px;padding: 18px 20px;border-left: 4px solid var(--orange);border-radius: 0 12px 12px 0;background: var(--orange-soft)}.xgbdemo-scenario-grid,.xgbdemo-scenario-list{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 12px;margin-top: 22px}.xgbdemo-scenario-grid article,.xgbdemo-scenario-list article{display: flex;gap: 12px;align-items: center;padding: 17px;border: 1px solid var(--line);border-radius: 14px;background: var(--surface-soft)}.xgbdemo-scenario-grid span,.xgbdemo-scenario-list span{display: flex;width: 34px;height: 34px;flex: 0 0 auto;align-items: center;justify-content: center;border-radius: 9px;background: var(--black);color: #fff;font-size: 11px;font-weight: 800}.xgbdemo-test-case,.xgbdemo-dialog{display: grid;grid-template-columns: 1fr auto 1fr auto 1fr;gap: 12px;align-items: stretch;margin-top: 22px}.xgbdemo-test-case > div,.xgbdemo-dialog > div{display: flex;min-height: 110px;flex-direction: column;justify-content: center;padding: 20px;border: 1px solid var(--line);border-radius: 15px;background: var(--surface-soft);text-align: center}.xgbdemo-test-case span,.xgbdemo-dialog span{color: var(--orange-dark);font-size: 10px;font-weight: 800;letter-spacing: 0.08em}.xgbdemo-test-case strong,.xgbdemo-dialog strong{margin-top: 7px;color: var(--black)}.xgbdemo-test-case > b,.xgbdemo-dialog > b{display: flex;align-items: center;color: var(--orange)}.xgbdemo-test-case__result,.xgbdemo-dialog__result{border-color: rgba(255,106,0,0.4) !important;background: var(--orange-soft) !important}.xgbdemo-evaluation{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 10px;margin-top: 22px}.xgbdemo-evaluation > div{display: grid;grid-template-columns: 38px 1fr;gap: 12px;align-items: center;min-height: 66px;padding: 12px 15px;border: 1px solid var(--line);border-radius: 13px;background: var(--surface-soft)}.xgbdemo-evaluation span{display: flex;width: 34px;height: 34px;align-items: center;justify-content: center;border-radius: 9px;background: var(--black);color: #fff;font-size: 11px;font-weight: 800}.xgbdemo-evaluation p{margin: 0}.xgbdemo-table-wrap{margin-top: 22px;overflow-x: auto;border: 1px solid var(--line);border-radius: 16px}.xgbdemo-table{width: 100%;min-width: 920px;border-collapse: collapse;background: #fff}.xgbdemo-table th,.xgbdemo-table td{padding: 14px 16px;border-bottom: 1px solid var(--line);text-align: left;vertical-align: top}.xgbdemo-table th{background: var(--black);color: #fff;font-size: 13px}.xgbdemo-table tbody tr:nth-child(even){background: var(--surface-soft)}.xgbdemo-table tr:last-child td{border-bottom: 0}.xgbdemo-brand{border-color: rgba(255,106,0,0.3);background: radial-gradient(circle at 100% 0%,rgba(255,106,0,0.12),transparent 35%),#fff}.xgbdemo-faq details{margin-top: 11px;border: 1px solid var(--line);border-radius: 13px;background: var(--surface-soft)}.xgbdemo-faq summary{position: relative;padding: 17px 48px 17px 18px;color: var(--black);font-weight: 700;cursor: pointer;list-style: none}.xgbdemo-faq summary::-webkit-details-marker{display: none}.xgbdemo-faq summary::after{content: "+";position: absolute;top: 50%;right: 18px;transform: translateY(-50%);color: var(--orange);font-size: 24px}.xgbdemo-faq details[open] summary::after{content: "−"}.xgbdemo-faq details p{margin: 0;padding: 0 18px 20px}.xgbdemo-cta{margin-top: 28px;padding: 46px;overflow: hidden;border-radius: 24px;background: radial-gradient(circle at 100% 0%,rgba(255,106,0,0.26),transparent 35%),var(--black);color: #d9dce1}.xgbdemo-cta h2{max-width: 900px;margin: 0;color: #fff;font-size: clamp(28px,3.6vw,42px);line-height: 1.3}.xgbdemo-cta p{max-width: 940px;margin-top: 16px}.xgbdemo-cta .xgbdemo-eyebrow{color: #ff9d59}.xgbdemo-cta .xgbdemo-btn--secondary{border-color: rgba(255,255,255,0.2);background: rgba(255,255,255,0.06);color: #fff !important}@media (max-width: 1100px){.xgbdemo-framework{grid-template-columns: 1fr}.xgbdemo-framework > b{justify-content: center;transform: rotate(90deg)}.xgbdemo-five{grid-template-columns: repeat(3,minmax(0,1fr))}.xgbdemo-four{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (max-width: 980px){.xgbdemo-grid,.xgbdemo-warning-grid,.xgbdemo-role-grid,.xgbdemo-status-grid,.xgbdemo-check-grid{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (max-width: 720px){.xgbdemo-article{width: min(100% - 24px,1180px);padding-bottom: 48px}.xgbdemo-hero,.xgbdemo-section,.xgbdemo-cta{padding: 26px 20px;border-radius: 18px}.xgbdemo-lead{font-size: 16px}.xgbdemo-grid,.xgbdemo-warning-grid,.xgbdemo-role-grid,.xgbdemo-status-grid,.xgbdemo-check-grid,.xgbdemo-compare,.xgbdemo-four,.xgbdemo-five,.xgbdemo-three,.xgbdemo-scenario-grid,.xgbdemo-scenario-list,.xgbdemo-evaluation{grid-template-columns: 1fr}.xgbdemo-flow,.xgbdemo-decision{flex-direction: column;align-items: stretch}.xgbdemo-flow b,.xgbdemo-decision b{align-self: center;transform: rotate(90deg)}.xgbdemo-flow span,.xgbdemo-decision span,.xgbdemo-decision strong{width: 100%;text-align: center}.xgbdemo-test-case,.xgbdemo-dialog{grid-template-columns: 1fr}.xgbdemo-test-case > b,.xgbdemo-dialog > b{justify-content: center;transform: rotate(90deg)}.xgbdemo-actions{flex-direction: column}.xgbdemo-btn{width: 100%}.xgbdemo-cover img{border-radius: 16px}}.xgbdemo-video-grid{display: grid;grid-template-columns: repeat(5,minmax(0,1fr));gap: 12px;margin-top: 22px}.xgbdemo-video-grid a{display: block;overflow: hidden;border: 1px solid var(--line);border-radius: 14px;background: var(--surface-soft);color: var(--black);transition: transform 0.2s ease,border-color 0.2s ease}.xgbdemo-video-grid a:hover{transform: translateY(-2px);border-color: var(--orange)}.xgbdemo-video-grid img{display: block;width: 100%;height: auto;aspect-ratio: 16 / 9;object-fit: cover}.xgbdemo-video-grid span{display: block;padding: 10px 12px;font-size: 13px;font-weight: 700;line-height: 1.5}.xgbdemo-three p,.xgbdemo-four p{margin: 8px 0 0;font-size: 14px;line-height: 1.7}.xgbdemo-three article > a{display: inline-block;margin-top: 10px;font-size: 13px;font-weight: 700}.xgbdemo-section p a,.xgbdemo-breadcrumb a{font-weight: 700}.xgbdemo-article a:focus-visible,.xgbdemo-article summary:focus-visible{outline: 3px solid rgba(255,106,0,0.3);outline-offset: 3px}@media (max-width: 980px){.xgbdemo-video-grid{grid-template-columns: repeat(3,minmax(0,1fr))}.xgbdemo-three{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (max-width: 720px){.xgbdemo-video-grid{grid-template-columns: repeat(2,minmax(0,1fr))}.xgbdemo-three{grid-template-columns: 1fr}}