.xgb-open-page,.xgb-open-page *,.xgb-open-page *::before,.xgb-open-page *::after{box-sizing: border-box}.xgb-open-page{--xgb-orange: #ff6a00;--xgb-orange-dark: #e65800;--xgb-orange-soft: #fff4eb;--xgb-orange-border: #ffd7bb;--xgb-black: #111111;--xgb-text: #252525;--xgb-muted: #666a70;--xgb-line: #e8e8e8;--xgb-soft: #f7f7f8;--xgb-white: #ffffff;--xgb-shadow: 0 16px 44px rgba(17,17,17,.08);width: 100%;color: var(--xgb-text);background: var(--xgb-white);font-family: "Prompt","Noto Sans Thai",Arial,sans-serif;line-height: 1.82}.xgb-open-page a{text-decoration: none}.xgb-open-breadcrumb{max-width: 1180px;margin: 0 auto;padding: 20px 24px 8px}.xgb-open-breadcrumb ol{display: flex;flex-wrap: wrap;gap: 8px;align-items: center;margin: 0;padding: 0;list-style: none;color: var(--xgb-muted);font-size: 14px}.xgb-open-breadcrumb li{display: inline-flex;align-items: center;gap: 8px}.xgb-open-breadcrumb li + li::before{content: "›";color: var(--xgb-orange);font-weight: 900}.xgb-open-breadcrumb a{color: var(--xgb-text);font-weight: 700}.xgb-open-breadcrumb a:hover{color: var(--xgb-orange)}.xgb-open-layout{display: grid;grid-template-columns: minmax(0,1fr) 320px;gap: 32px;max-width: 1180px;margin: 0 auto;padding: 18px 24px 64px}.xgb-open-main{min-width: 0}.xgb-open-article{min-width: 0}.xgb-open-hero{position: relative;overflow: hidden;padding: 42px;border: 1px solid var(--xgb-orange-border);border-radius: 28px;background: radial-gradient(circle at 92% 0%,rgba(255,106,0,.11),transparent 32%),linear-gradient(135deg,#ffffff,#fffaf6);box-shadow: var(--xgb-shadow)}.xgb-open-hero::before{content: "";position: absolute;top: 0;left: 0;width: 7px;height: 100%;background: linear-gradient(180deg,var(--xgb-orange),#ff9a51)}.xgb-open-kicker,.xgb-open-section-label{margin: 0 0 10px;color: var(--xgb-orange);font-size: 13px;line-height: 1.3;font-weight: 900;letter-spacing: .08em;text-transform: uppercase}.xgb-open-hero h1{max-width: 820px;margin: 0 0 18px;color: var(--xgb-black);font-size: clamp(31px,4.2vw,48px);line-height: 1.2;letter-spacing: -.025em;font-weight: 900}.xgb-open-lead{max-width: 840px;margin: 0;color: #42464b;font-size: 18px}.xgb-keyword{color: var(--xgb-black);font-weight: 900;background: linear-gradient(180deg,transparent 66%,rgba(255,106,0,.16) 0)}.xgb-keyword-link,.xgb-open-section p a{display: inline !important;color: var(--xgb-orange-dark) !important;font-weight: 800 !important;border-bottom: 1px solid rgba(230,88,0,.4);background: linear-gradient(180deg,transparent 66%,rgba(255,106,0,.08) 0)}.xgb-keyword-link:hover,.xgb-open-section p a:hover{color: var(--xgb-black) !important;border-bottom-color: var(--xgb-orange)}.xgb-open-actions{display: flex;flex-wrap: wrap;gap: 12px;margin-top: 24px}.xgb-open-btn{display: inline-flex !important;align-items: center;justify-content: center;min-height: 48px;padding: 12px 20px !important;border-radius: 999px;font-size: 15px;line-height: 1.3;font-weight: 900;transition: transform .2s ease,box-shadow .2s ease,background .2s ease}.xgb-open-btn:hover{transform: translateY(-2px)}.xgb-open-btn-primary{color: #ffffff !important;background: linear-gradient(135deg,var(--xgb-orange),var(--xgb-orange-dark));box-shadow: 0 12px 26px rgba(255,106,0,.2)}.xgb-open-btn-secondary{color: var(--xgb-black) !important;border: 1px solid var(--xgb-orange-border);background: #ffffff}.xgb-open-featured,.xgb-open-inline-visual{margin: 28px 0}.xgb-open-media-frame{position: relative;overflow: hidden;width: 100%;aspect-ratio: 16 / 9;border: 1px solid var(--xgb-orange-border);border-radius: 24px;background: radial-gradient(circle at 78% 25%,rgba(255,106,0,.10),transparent 28%),linear-gradient(135deg,#fff9f4,#f4f4f5);box-shadow: var(--xgb-shadow)}.xgb-open-media-frame img{display: block;width: 100%;height: 100%;object-fit: cover;object-position: center}.xgb-open-featured-img,.xgb-open-inline-img{border: 0}.xgb-open-media-frame-featured{aspect-ratio: 16 / 9}.xgb-open-media-frame-inline{aspect-ratio: 16 / 9}.xgb-open-featured figcaption,.xgb-open-inline-visual figcaption{margin-top: 9px;color: var(--xgb-muted);font-size: 13px;text-align: center}.xgb-open-section{margin: 0 0 28px;padding: 30px;border: 1px solid var(--xgb-line);border-radius: 24px;background: #ffffff}.xgb-open-section h2,.xgb-open-demo h2,.xgb-open-related h2,.xgb-open-final-cta h2{margin: 0 0 15px;color: var(--xgb-black);font-size: clamp(24px,3vw,31px);line-height: 1.35;font-weight: 900;letter-spacing: -.012em}.xgb-open-section h3{margin: 18px 0 8px;color: var(--xgb-black);font-size: 19px;line-height: 1.45;font-weight: 900}.xgb-open-section p,.xgb-open-demo p,.xgb-open-related p,.xgb-open-final-cta p{margin: 0 0 15px;color: #42464b;font-size: 16px}.xgb-open-summary{background: linear-gradient(135deg,#ffffff,#fffaf6);border-color: var(--xgb-orange-border)}.xgb-open-summary-grid,.xgb-open-system-grid,.xgb-open-related-grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 14px;margin-top: 20px}.xgb-open-summary-card,.xgb-open-system-card,.xgb-open-related-grid > a{position: relative;overflow: hidden;padding: 20px;border: 1px solid var(--xgb-orange-border);border-radius: 18px;background: #ffffff;box-shadow: 0 10px 26px rgba(17,17,17,.035);transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease}.xgb-open-summary-card:hover,.xgb-open-system-card:hover,.xgb-open-related-grid > a:hover{transform: translateY(-3px);border-color: #ff9f5c;box-shadow: 0 16px 34px rgba(17,17,17,.08)}.xgb-open-summary-card > span,.xgb-open-system-card > span,.xgb-open-related-grid > a > span{display: inline-flex;margin-bottom: 10px;color: var(--xgb-orange);font-size: 12px;font-weight: 900;letter-spacing: .08em}.xgb-open-summary-card h3,.xgb-open-system-card h3{margin: 0 0 7px;color: var(--xgb-black);font-size: 19px}.xgb-open-summary-card p,.xgb-open-system-card p,.xgb-open-related-grid > a p{margin: 0;color: var(--xgb-muted);font-size: 14.5px}.xgb-open-system-card{color: inherit}.xgb-open-system-card strong{display: block;margin-top: 14px;color: var(--xgb-orange-dark);font-size: 14px}.xgb-open-callout{margin: 20px 0;padding: 20px 22px;border-left: 5px solid var(--xgb-orange);border-radius: 16px;background: var(--xgb-orange-soft)}.xgb-open-callout strong{color: var(--xgb-black);font-size: 17px}.xgb-open-callout p{margin: 6px 0 0}.xgb-open-steps{display: grid;gap: 12px;margin: 20px 0;padding: 0;list-style: none;counter-reset: xgbstep}.xgb-open-steps li{position: relative;padding: 18px 18px 18px 64px;border: 1px solid var(--xgb-line);border-radius: 17px;background: var(--xgb-soft);counter-increment: xgbstep}.xgb-open-steps li::before{content: counter(xgbstep);position: absolute;top: 17px;left: 18px;display: grid;place-items: center;width: 32px;height: 32px;border-radius: 50%;color: #ffffff;background: var(--xgb-orange);font-weight: 900}.xgb-open-steps strong{display: block;color: var(--xgb-black);font-size: 16px}.xgb-open-steps span{display: block;margin-top: 4px;color: var(--xgb-muted);font-size: 14.5px}.xgb-open-table-wrap{overflow-x: auto;margin: 20px 0;border: 1px solid var(--xgb-orange-border);border-radius: 18px}.xgb-open-table{width: 100%;min-width: 720px;border-collapse: collapse;background: #ffffff}.xgb-open-table th{padding: 15px 16px;color: #ffffff;background: var(--xgb-black);text-align: left;font-weight: 900}.xgb-open-table td{padding: 15px 16px;border-bottom: 1px solid var(--xgb-line);vertical-align: top;color: #444}.xgb-open-table tr:last-child td{border-bottom: 0}.xgb-open-table td:first-child{color: var(--xgb-orange-dark);font-weight: 900}.xgb-open-demo,.xgb-open-final-cta{margin: 28px 0;padding: 30px;border: 1px solid var(--xgb-orange-border);border-radius: 24px;background: radial-gradient(circle at 90% 10%,rgba(255,106,0,.12),transparent 30%),linear-gradient(135deg,#fffaf6,#ffffff)}.xgb-open-faq details{margin: 12px 0;border: 1px solid var(--xgb-line);border-radius: 16px;background: #ffffff;overflow: hidden}.xgb-open-faq summary{cursor: pointer;padding: 17px 18px;color: var(--xgb-black);font-weight: 900}.xgb-open-faq details p{padding: 0 18px 18px;margin: 0}.xgb-open-related{margin: 28px 0;padding: 30px;border: 1px solid var(--xgb-line);border-radius: 24px;background: var(--xgb-soft)}.xgb-open-related-grid > a{color: inherit}.xgb-open-related-grid > a strong{display: block;color: var(--xgb-black);font-size: 16px;line-height: 1.45}.xgb-open-sidebar{display: flex;flex-direction: column;gap: 16px}.xgb-open-side-card{padding: 20px;border: 1px solid var(--xgb-line);border-radius: 20px;background: #ffffff;box-shadow: 0 10px 28px rgba(17,17,17,.04)}.xgb-open-side-card h2{margin: 0 0 12px;color: var(--xgb-black);font-size: 18px;line-height: 1.4}.xgb-open-toc nav,.xgb-open-side-links{display: grid;gap: 6px}.xgb-open-toc a,.xgb-open-side-links a{display: block;padding: 9px 10px;border-radius: 10px;color: #45494e;font-size: 14px;font-weight: 700}.xgb-open-toc a:hover,.xgb-open-side-links a:hover{color: var(--xgb-orange-dark);background: var(--xgb-orange-soft)}.xgb-open-side-cta{border-color: var(--xgb-orange-border);background: linear-gradient(135deg,#fff7f1,#ffffff)}.xgb-open-side-cta > span{display: block;margin-bottom: 8px;color: var(--xgb-orange);font-size: 12px;font-weight: 900;letter-spacing: .08em}.xgb-open-side-cta p{color: var(--xgb-muted);font-size: 14px}@media (min-width: 1025px){.xgb-open-sidebar{position: sticky;top: 24px;align-self: start}}@media (max-width: 1024px){.xgb-open-layout{grid-template-columns: 1fr}.xgb-open-sidebar{display: grid;grid-template-columns: repeat(2,minmax(0,1fr))}}@media (max-width: 720px){.xgb-open-breadcrumb{padding: 16px 16px 6px}.xgb-open-layout{gap: 22px;padding: 14px 16px 42px}.xgb-open-hero{padding: 28px 22px;border-radius: 22px}.xgb-open-hero h1{font-size: 31px}.xgb-open-lead{font-size: 16px}.xgb-open-section,.xgb-open-demo,.xgb-open-related,.xgb-open-final-cta{padding: 22px 18px;border-radius: 20px}.xgb-open-summary-grid,.xgb-open-system-grid,.xgb-open-related-grid,.xgb-open-sidebar{grid-template-columns: 1fr}.xgb-open-actions{flex-direction: column;align-items: stretch}.xgb-open-btn{width: 100%}.xgb-open-media-frame{border-radius: 19px}.xgb-open-media-frame-featured,.xgb-open-media-frame-inline{aspect-ratio: 16 / 9}}