.xgb-port-page,.xgb-port-page *,.xgb-port-page *::before,.xgb-port-page *::after{box-sizing: border-box}.xgb-port-page{--orange: #f45100;--orange-bright: #ff6a00;--orange-dark: #d93f00;--orange-deep: #b83500;--orange-soft: #fff5ee;--orange-soft-2: #fff9f5;--orange-line: #ffd0b4;--ink: #111316;--graphite: #1b1e22;--text: #3b4046;--muted: #747a81;--line: #e5e8eb;--soft: #f6f7f8;--white: #ffffff;--shadow: 0 18px 48px rgba(17,19,22,0.075);width: 100%;color: var(--text);background: linear-gradient( 180deg,#ffffff 0%,#ffffff 72%,#fafafa 100% );font-family: "Prompt","Noto Sans Thai",Arial,sans-serif;line-height: 1.75}.xgb-port-page a{text-decoration: none}.xgb-port-breadcrumb{max-width: 1380px;margin: 0 auto;padding: 20px 30px 8px}.xgb-port-breadcrumb ol{display: flex;flex-wrap: wrap;gap: 8px;margin: 0;padding: 0;list-style: none;color: var(--muted);font-size: 14px}.xgb-port-breadcrumb li{display: flex;align-items: center;gap: 8px}.xgb-port-breadcrumb li + li::before{content: "›";color: var(--orange);font-weight: 900}.xgb-port-breadcrumb a{color: var(--ink);font-weight: 800}.xgb-port-main{max-width: 1380px;margin: 0 auto;padding: 16px 30px 80px}.xgb-port-hero{position: relative;display: grid;grid-template-columns: minmax(0,1fr) 240px;gap: 30px;align-items: center;overflow: hidden;padding: 48px;border: 1px solid var(--orange-line);border-radius: 30px;background: radial-gradient( circle at 92% 2%,rgba(244,81,0,0.17),transparent 31% ),radial-gradient( circle at 5% 100%,rgba(255,106,0,0.06),transparent 24% ),linear-gradient( 135deg,#ffffff,#fff8f3 );box-shadow: var(--shadow)}.xgb-port-hero::after{content: "";position: absolute;top: -120px;right: 260px;width: 260px;height: 260px;border: 1px solid rgba(244,81,0,0.08);border-radius: 50%;pointer-events: none}.xgb-port-hero-copy{position: relative;z-index: 1;max-width: 930px}.xgb-port-kicker,.xgb-port-label{margin: 0 0 9px;color: var(--orange-dark);font-size: 11px;font-weight: 900;line-height: 1.3;letter-spacing: 0.11em}.xgb-port-hero h1{margin: 0 0 17px;max-width: 950px;color: var(--ink);font-size: clamp( 36px,4.6vw,58px );line-height: 1.12;letter-spacing: -0.036em;font-weight: 900}.xgb-port-lead{max-width: 850px;margin: 0;color: #4c5258;font-size: 17px}.xgb-keyword{color: var(--ink);font-weight: 900;background: linear-gradient( 180deg,transparent 68%,rgba(244,81,0,0.16) 0 )}.xgb-port-actions{display: flex;flex-wrap: wrap;gap: 10px;margin-top: 24px}.xgb-port-btn{display: inline-flex !important;min-height: 49px;align-items: center;justify-content: center;gap: 10px;padding: 12px 21px !important;border-radius: 999px;font-size: 14px;font-weight: 900;transition: transform 0.18s ease,background 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease}.xgb-port-btn-primary{color: #ffffff !important;background: linear-gradient( 135deg,var(--orange-bright),var(--orange-dark) );box-shadow: 0 12px 28px rgba(244,81,0,0.22)}.xgb-port-btn-secondary{color: var(--ink) !important;border: 1px solid var(--orange-line);background: rgba(255,255,255,0.92)}@media (hover: hover){.xgb-port-btn-primary:hover{transform: translateY(-2px);background: linear-gradient( 135deg,var(--orange-dark),var(--orange-deep) );box-shadow: 0 16px 32px rgba(244,81,0,0.27)}.xgb-port-btn-secondary:hover{transform: translateY(-2px);border-color: #ffae7a;background: var(--orange-soft)}}.xgb-port-hero-stat{position: relative;z-index: 1;display: flex;flex-direction: column;min-height: 220px;align-items: center;justify-content: center;padding: 25px;overflow: hidden;border: 1px solid rgba(255,255,255,0.07);border-radius: 24px;color: #fff;text-align: center;background: radial-gradient( circle at 100% 0%,rgba(244,81,0,0.45),transparent 38% ),linear-gradient( 145deg,#111316,#22262b );box-shadow: 0 18px 40px rgba(17,19,22,0.18)}.xgb-port-hero-stat::before{content: "";position: absolute;width: 90px;height: 90px;right: -22px;bottom: -22px;border: 1px solid rgba(255,255,255,0.08);border-radius: 50%}.xgb-port-hero-stat span{color: #ffad75;font-size: 10px;font-weight: 900;letter-spacing: 0.13em}.xgb-port-hero-stat strong{margin: 8px 0 7px;color: #fff;font-size: 74px;font-weight: 900;line-height: 0.94;letter-spacing: -0.065em}.xgb-port-hero-stat p{max-width: 150px;margin: 0;color: #d5d8dc;font-size: 12px;line-height: 1.6}.xgb-port-cover{margin: 30px 0 0;overflow: hidden;border: 1px solid var(--orange-line);border-radius: 26px;background: #f5f6f7;box-shadow: var(--shadow)}.xgb-port-cover img{display: block;width: 100%;height: auto;max-height: 680px;object-fit: cover;object-position: top center}.xgb-port-section{margin-top: 30px;padding: 35px;border: 1px solid var(--line);border-radius: 26px;background: #fff}.xgb-port-section-head{display: flex;justify-content: space-between;gap: 30px;align-items: flex-end;margin-bottom: 25px}.xgb-port-section-head > div{max-width: 780px}.xgb-port-section-head > p{max-width: 440px;margin: 0;color: var(--muted);font-size: 14px;line-height: 1.7;text-align: right}.xgb-port-section h2,.xgb-port-demo h2,.xgb-port-final-cta h2{margin: 0;color: var(--ink);font-size: clamp( 27px,3.1vw,37px );line-height: 1.28;font-weight: 900;letter-spacing: -0.022em}.xgb-port-gallery-section{overflow: visible}.xgb-port-gallery{display: grid;grid-template-columns: repeat( 3,minmax(0,1fr) );gap: 24px;align-items: stretch}.xgb-port-card{min-width: 0;display: flex;flex-direction: column;overflow: hidden;border: 1px solid #e1e4e7;border-radius: 20px;background: #fff;box-shadow: 0 12px 30px rgba(17,19,22,0.05);transition: transform 0.22s ease,box-shadow 0.22s ease,border-color 0.22s ease}@media (hover: hover){.xgb-port-card:hover{transform: translateY(-5px);border-color: #ffad77;box-shadow: 0 24px 48px rgba(17,19,22,0.095)}}.xgb-port-image-link{position: relative;display: block;overflow: hidden;aspect-ratio: 16 / 10;background: linear-gradient( 145deg,#181a1d,#292d31 );border-bottom: 1px solid #eceeef}.xgb-port-image-link::after{content: "";position: absolute;inset: 0;pointer-events: none;box-shadow: inset 0 -45px 60px rgba(0,0,0,0.035)}.xgb-port-image-link img{display: block;width: 100%;height: 100%;object-fit: cover;object-position: top center;transition: transform 0.4s ease}@media (hover: hover){.xgb-port-card:hover .xgb-port-image-link img{transform: scale(1.02)}}.xgb-port-card-meta{display: flex;min-height: 86px;justify-content: space-between;gap: 16px;align-items: flex-end;margin-top: auto;padding: 16px 17px 17px;background: #fff}.xgb-port-card-meta span{display: block;color: var(--orange-dark);font-size: 10px;font-weight: 900;letter-spacing: 0.08em}.xgb-port-card-meta strong{display: block;margin-top: 3px;color: var(--ink);font-size: 14px;line-height: 1.4}.xgb-port-card-meta > a{flex-shrink: 0;color: var(--orange-dark);font-size: 11px;font-weight: 900;white-space: nowrap;transition: color 0.18s ease}@media (hover: hover){.xgb-port-card-meta > a:hover{color: var(--orange-deep)}}.xgb-port-focus{border-color: var(--orange-line);background: radial-gradient( circle at 100% 0%,rgba(244,81,0,0.06),transparent 30% ),linear-gradient( 135deg,#fff,#fff9f5 )}.xgb-port-focus-grid,.xgb-port-process-grid{display: grid;grid-template-columns: repeat( 4,minmax(0,1fr) );gap: 14px}.xgb-port-focus-grid article,.xgb-port-process-grid article{position: relative;overflow: hidden;padding: 21px;border: 1px solid var(--orange-line);border-radius: 18px;background: #fff}.xgb-port-focus-grid article::after,.xgb-port-process-grid article::after{content: "";position: absolute;top: 0;left: 0;width: 44px;height: 3px;background: var(--orange)}.xgb-port-focus-grid span,.xgb-port-process-grid span{display: block;margin-bottom: 8px;color: var(--orange-dark);font-size: 10px;font-weight: 900;letter-spacing: 0.08em}.xgb-port-focus-grid strong,.xgb-port-process-grid strong{display: block;margin-bottom: 6px;color: var(--ink);font-size: 17px;line-height: 1.4}.xgb-port-focus-grid p,.xgb-port-process-grid p{margin: 0;color: var(--muted);font-size: 13px;line-height: 1.68}.xgb-port-process{background: linear-gradient( 180deg,#f8f9fa,#f4f5f6 )}.xgb-port-demo,.xgb-port-final-cta{position: relative;display: flex;justify-content: space-between;gap: 32px;align-items: center;overflow: hidden;margin-top: 30px;padding: 34px 36px;border: 1px solid var(--orange-line);border-radius: 25px;background: radial-gradient( circle at 93% 0%,rgba(244,81,0,0.13),transparent 30% ),linear-gradient( 135deg,#fff,#fff8f3 )}.xgb-port-demo::after,.xgb-port-final-cta::after{content: "";position: absolute;width: 190px;height: 190px;right: -80px;bottom: -105px;border: 1px solid rgba(244,81,0,0.10);border-radius: 50%;pointer-events: none}.xgb-port-demo > div:first-child,.xgb-port-final-cta > div:first-child{position: relative;z-index: 1;max-width: 810px}.xgb-port-demo p,.xgb-port-final-cta p{margin: 8px 0 0;color: var(--muted);font-size: 15px}.xgb-port-faq details{margin: 11px 0;overflow: hidden;border: 1px solid var(--line);border-radius: 16px;background: #fff;transition: border-color 0.18s ease,background 0.18s ease}.xgb-port-faq details[open]{border-color: var(--orange-line);background: var(--orange-soft-2)}.xgb-port-faq summary{position: relative;cursor: pointer;padding: 18px 54px 18px 19px;color: var(--ink);font-weight: 900;list-style: none}.xgb-port-faq summary::-webkit-details-marker{display: none}.xgb-port-faq summary::after{content: "+";position: absolute;top: 50%;right: 19px;display: flex;width: 28px;height: 28px;align-items: center;justify-content: center;transform: translateY(-50%);border-radius: 50%;background: var(--orange-soft);color: var(--orange-dark);font-size: 20px;font-weight: 700}.xgb-port-faq details[open] summary::after{content: "−"}.xgb-port-faq details p{margin: 0;padding: 0 19px 19px;color: #60666c;font-size: 14px;line-height: 1.75}.xgb-port-faq details a{color: var(--orange-dark);font-weight: 800}.xgb-port-page a:focus-visible,.xgb-port-page summary:focus-visible{outline: 3px solid var(--orange-dark);outline-offset: 3px}@media (max-width: 1100px){.xgb-port-gallery{grid-template-columns: repeat( 2,minmax(0,1fr) )}.xgb-port-focus-grid,.xgb-port-process-grid{grid-template-columns: repeat( 2,minmax(0,1fr) )}}@media (max-width: 820px){.xgb-port-hero{grid-template-columns: 1fr}.xgb-port-hero-stat{min-height: 0;align-items: flex-start;text-align: left}.xgb-port-hero-stat strong{font-size: 56px}.xgb-port-section-head{display: block}.xgb-port-section-head > p{max-width: none;margin-top: 11px;text-align: left}.xgb-port-demo,.xgb-port-final-cta{display: block}.xgb-port-demo .xgb-port-actions{margin-top: 21px}.xgb-port-final-cta > .xgb-port-btn{margin-top: 21px}}@media (max-width: 640px){.xgb-port-breadcrumb{padding: 15px 16px 5px}.xgb-port-main{padding: 12px 16px 48px}.xgb-port-hero{gap: 22px;padding: 28px 21px;border-radius: 22px}.xgb-port-hero h1{font-size: 32px;line-height: 1.18}.xgb-port-lead{font-size: 15px;line-height: 1.75}.xgb-port-actions{flex-direction: column}.xgb-port-btn{width: 100%}.xgb-port-hero-stat{border-radius: 18px}.xgb-port-cover{margin-top: 20px;border-radius: 19px}.xgb-port-section{margin-top: 20px;padding: 23px 18px;border-radius: 20px}.xgb-port-section h2,.xgb-port-demo h2,.xgb-port-final-cta h2{font-size: 27px}.xgb-port-gallery{grid-template-columns: 1fr;gap: 16px}.xgb-port-card{border-radius: 16px}.xgb-port-card-meta{min-height: 80px;padding: 14px 15px 15px}.xgb-port-focus-grid,.xgb-port-process-grid{grid-template-columns: 1fr}.xgb-port-focus-grid article,.xgb-port-process-grid article{padding: 18px}.xgb-port-demo,.xgb-port-final-cta{margin-top: 20px;padding: 24px 19px;border-radius: 20px}.xgb-port-faq summary{padding: 17px 50px 17px 16px}.xgb-port-faq details p{padding: 0 16px 17px}}@media (prefers-reduced-motion: reduce){.xgb-port-btn,.xgb-port-card,.xgb-port-image-link img{transition: none}.xgb-port-card:hover,.xgb-port-btn:hover{transform: none}.xgb-port-card:hover .xgb-port-image-link img{transform: none}}.xgb-port-process-grid p a,.xgb-port-final-cta p a{color: var(--orange-dark);font-weight: 800;text-decoration: underline;text-underline-offset: 3px}