/* Start custom CSS for html, class: .elementor-element-72430be */.xgb-about-page,
.xgb-about-page *,
.xgb-about-page *::before,
.xgb-about-page *::after { box-sizing:border-box; }

.xgb-about-page {
  --xgb-orange:#ff6a00;
  --xgb-orange-dark:#e65800;
  --xgb-orange-soft:#fff4eb;
  --xgb-orange-border:#ffd4b3;
  --xgb-black:#111111;
  --xgb-text:#292929;
  --xgb-muted:#666b70;
  --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-about-page a { text-decoration:none; }

.xgb-about-breadcrumb {
  max-width:1180px;
  margin:0 auto;
  padding:20px 24px 8px;
}

.xgb-about-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-about-breadcrumb li { display:inline-flex;align-items:center;gap:8px; }
.xgb-about-breadcrumb li + li::before { content:"›";color:var(--xgb-orange);font-weight:900; }
.xgb-about-breadcrumb a { color:var(--xgb-text);font-weight:700; }
.xgb-about-breadcrumb a:hover { color:var(--xgb-orange); }

.xgb-about-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:32px;
  max-width:1180px;
  margin:0 auto;
  padding:18px 24px 64px;
}

.xgb-about-main,.xgb-about-article { min-width:0; }

.xgb-about-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,.13),transparent 33%),
    linear-gradient(135deg,#ffffff,#fffaf6);
  box-shadow:var(--xgb-shadow);
}

.xgb-about-hero::before {
  content:"";
  position:absolute;
  top:0;left:0;width:7px;height:100%;
  background:linear-gradient(180deg,var(--xgb-orange),#ff9a51);
}

.xgb-about-kicker,.xgb-about-section-label {
  margin:0 0 10px;
  color:var(--xgb-orange);
  font-size:13px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:.08em;
}

.xgb-about-hero h1 {
  max-width:850px;
  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-about-lead {
  max-width:870px;
  margin:0;
  color:#41464b;
  font-size:18px;
}

.xgb-about-lead-secondary { margin-top:14px; }

.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-about-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-about-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.xgb-about-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;
}

.xgb-about-btn:hover { transform:translateY(-2px); }
.xgb-about-btn-primary {
  color:#fff!important;
  background:linear-gradient(135deg,var(--xgb-orange),var(--xgb-orange-dark));
  box-shadow:0 12px 26px rgba(255,106,0,.2);
}
.xgb-about-btn-secondary {
  color:var(--xgb-black)!important;
  border:1px solid var(--xgb-orange-border);
  background:#fff;
}

.xgb-about-featured,.xgb-about-inline { margin:28px 0; }

.xgb-about-media-frame {
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--xgb-orange-border);
  border-radius:24px;
  background:linear-gradient(135deg,#fff8f2,#f4f4f5);
  box-shadow:var(--xgb-shadow);
}

.xgb-about-media-frame img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.xgb-about-featured figcaption,.xgb-about-inline figcaption {
  margin-top:9px;
  color:var(--xgb-muted);
  font-size:13px;
  text-align:center;
}

.xgb-about-section {
  margin:0 0 28px;
  padding:30px;
  border:1px solid var(--xgb-line);
  border-radius:24px;
  background:#fff;
}

.xgb-about-highlight {
  border-color:var(--xgb-orange-border);
  background:linear-gradient(135deg,#fff,#fffaf6);
}

.xgb-about-section h2,.xgb-about-related h2,.xgb-about-final-cta h2 {
  margin:0 0 15px;
  color:var(--xgb-black);
  font-size:clamp(24px,3vw,31px);
  line-height:1.35;
  font-weight:900;
}

.xgb-about-section h3 { margin:0 0 7px;color:var(--xgb-black);font-size:19px;line-height:1.45; }
.xgb-about-section p,.xgb-about-related p,.xgb-about-final-cta p {
  margin:0 0 15px;
  color:#42464b;
  font-size:16px;
}

.xgb-about-feature-grid,.xgb-about-system-grid,.xgb-about-audience-grid,.xgb-about-related-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
}

.xgb-about-feature-card,.xgb-about-system-card,.xgb-about-audience-grid>article,.xgb-about-related-grid>a {
  padding:20px;
  border:1px solid var(--xgb-orange-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 26px rgba(17,17,17,.035);
}

.xgb-about-feature-card>span,.xgb-about-system-card>span,.xgb-about-related-grid>a>span {
  display:inline-flex;
  margin-bottom:10px;
  color:var(--xgb-orange);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.xgb-about-feature-card p,.xgb-about-system-card p,.xgb-about-audience-grid p,.xgb-about-related-grid>a p {
  margin:0;
  color:var(--xgb-muted);
  font-size:14.5px;
}

.xgb-about-system-card,.xgb-about-related-grid>a { color:inherit; }
.xgb-about-system-card strong { display:block;margin-top:14px;color:var(--xgb-orange-dark);font-size:14px; }

.xgb-about-callout {
  margin:20px 0 0;
  padding:20px 22px;
  border-left:5px solid var(--xgb-orange);
  border-radius:16px;
  background:var(--xgb-orange-soft);
}
.xgb-about-callout strong { color:var(--xgb-black);font-size:17px; }
.xgb-about-callout p { margin:6px 0 0; }

.xgb-about-audience-grid strong {
  display:block;
  margin-bottom:7px;
  color:var(--xgb-black);
  font-size:17px;
}

.xgb-about-faq details {
  margin:12px 0;
  border:1px solid var(--xgb-line);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.xgb-about-faq summary { cursor:pointer;padding:17px 18px;color:var(--xgb-black);font-weight:900; }
.xgb-about-faq details p { padding:0 18px 18px;margin:0; }

.xgb-about-related,.xgb-about-final-cta {
  margin:28px 0;
  padding:30px;
  border:1px solid var(--xgb-line);
  border-radius:24px;
}

.xgb-about-related { background:var(--xgb-soft); }

.xgb-about-final-cta {
  border-color:var(--xgb-orange-border);
  background:
    radial-gradient(circle at 90% 10%,rgba(255,106,0,.12),transparent 30%),
    linear-gradient(135deg,#fffaf6,#fff);
}

.xgb-about-related-grid>a strong {
  display:block;
  color:var(--xgb-black);
  font-size:16px;
  line-height:1.45;
}

.xgb-about-sidebar {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.xgb-about-side-card {
  padding:20px;
  border:1px solid var(--xgb-line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 28px rgba(17,17,17,.04);
}

.xgb-about-side-card h2 { margin:0 0 12px;color:var(--xgb-black);font-size:18px;line-height:1.4; }
.xgb-about-toc nav,.xgb-about-side-links { display:grid;gap:6px; }

.xgb-about-toc a,.xgb-about-side-links a {
  display:block;
  padding:9px 10px;
  border-radius:10px;
  color:#45494e;
  font-size:14px;
  font-weight:700;
}

.xgb-about-toc a:hover,.xgb-about-side-links a:hover {
  color:var(--xgb-orange-dark);
  background:var(--xgb-orange-soft);
}

.xgb-about-side-cta {
  border-color:var(--xgb-orange-border);
  background:linear-gradient(135deg,#fff7f1,#fff);
}

.xgb-about-side-cta>span {
  display:block;
  margin-bottom:8px;
  color:var(--xgb-orange);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}

.xgb-about-side-cta p { color:var(--xgb-muted);font-size:14px; }

@media(min-width:1025px) {
  .xgb-about-sidebar { position:sticky;top:24px;align-self:start; }
}

@media(max-width:1024px) {
  .xgb-about-layout { grid-template-columns:1fr; }
  .xgb-about-sidebar { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:720px) {
  .xgb-about-breadcrumb { padding:16px 16px 6px; }
  .xgb-about-layout { gap:22px;padding:14px 16px 42px; }
  .xgb-about-hero { padding:28px 22px;border-radius:22px; }
  .xgb-about-hero h1 { font-size:31px; }
  .xgb-about-lead { font-size:16px; }
  .xgb-about-section,.xgb-about-related,.xgb-about-final-cta { padding:22px 18px;border-radius:20px; }
  .xgb-about-feature-grid,.xgb-about-system-grid,.xgb-about-audience-grid,.xgb-about-related-grid,.xgb-about-sidebar { grid-template-columns:1fr; }
  .xgb-about-actions { flex-direction:column;align-items:stretch; }
  .xgb-about-btn { width:100%; }
  .xgb-about-media-frame { border-radius:19px; }
}/* End custom CSS */