/* Company pages (About Us / Our Expertise): styles ported from the company-profile site, scoped under .cp */
.cp {
  --white: #ffffff; --teal: #1e8ab8; --teal-deep: #0c4a66; --ink: #0b2a3a;
  --purple: #8b5fbf; --purple-deep: #6f45a6; --blue: #2f72d4; --green: #258f78;
  --tint: #f2f8fb; --line: rgba(30, 138, 184, .22); --radius: 18px;
  --gutter: clamp(16px, 5vw, 48px);
  --font-th: "Noto Sans Thai", system-ui, sans-serif;
  --font-en: "Inter", "Noto Sans Thai", system-ui, sans-serif;
  font-family: var(--font-th); font-size: 17px; line-height: 1.8; color: var(--ink);
}
.cp h1, .cp h2, .cp p, .cp ul, .cp ol, .cp figure { margin: 0; }
.cp ul, .cp ol { padding: 0; list-style: none; }
.cp svg { max-width: 100%; }
.cp .section { padding: clamp(64px, 10vw, 120px) 0; }
.cp h2 {margin: 0;}
.cp .wrap {width: min(1160px, 100% - var(--gutter) * 2); margin-inline: auto;}
.cp .btn {display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 26px; border-radius: 999px; border: 2px solid transparent; font: 700 16px/1.5 var(--font-th); text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, color .2s;}
.cp .btn:hover {transform: translateY(-2px);}
.cp .btn-sm {min-height: 44px; padding: 8px 20px; font-size: 15px;}
.cp .btn-accent, .cp .btn-solid, .cp .btn-ghost, .cp .btn-ghost-dark, .cp .btn-pdf {color: #fff; border-color: transparent; background-size: 160% 100%; background-position: 0 50%;}
.cp .btn-accent {background-image: linear-gradient(110deg, #8b5fbf, #2f72d4); box-shadow: 0 8px 22px rgba(79, 94, 200, .35);}
.cp .btn-solid, .cp .btn-ghost, .cp .btn-ghost-dark {background-image: linear-gradient(110deg, #2f72d4, #1e8ab8); box-shadow: 0 8px 22px rgba(40, 120, 200, .32);}
.cp .btn-pdf {background-image: linear-gradient(110deg, #1e8ab8, #258f78); box-shadow: 0 8px 22px rgba(37, 143, 130, .32);}
.cp .btn-accent:hover, .cp .btn-solid:hover, .cp .btn-ghost:hover, .cp .btn-ghost-dark:hover, .cp .btn-pdf:hover {color: #fff; background-position: 100% 50%; filter: brightness(.93) saturate(1.1);}
.cp .section {padding: clamp(64px, 10vw, 120px) 0;}
.cp .section-tint {background: var(--tint);}
.cp h2 {font-size: clamp(28px, 5vw, 48px); line-height: 1.6; font-weight: 800; margin-bottom: clamp(28px, 5vw, 48px); color: var(--teal-deep);}
.cp h2::after {content: ""; display: block; width: 64px; height: 5px; margin-top: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));}
@media (max-width: 380px) {
.cp .btn {padding-inline: 20px;}
}
@media (prefers-reduced-motion: reduce) {
.cp .btn {transition: none;}
.cp .btn:hover {transform: none;}
}
.cp .page-hero {position: relative; isolation: isolate; overflow: hidden; padding: 130px 0 56px; background: radial-gradient(520px 320px at 8% 0%, rgba(139, 95, 191, .22), transparent 70%), radial-gradient(560px 340px at 95% 10%, rgba(47, 114, 212, .20), transparent 70%), radial-gradient(520px 320px at 60% 110%, rgba(37, 143, 120, .18), transparent 70%), #f8fbfd;}
.cp .crumb {display: inline-block; margin-bottom: 18px; padding: 8px 0; font-weight: 600; font-size: 15px; color: var(--teal-deep); text-decoration: none;}
.cp .crumb:hover {color: var(--purple);}
.cp .page-hero h1 {display: grid; gap: 6px;}
.cp .pt-en {font: 800 clamp(36px, 8vw, 72px)/1.1 var(--font-en); letter-spacing: -.03em; overflow-wrap: anywhere; background: linear-gradient(100deg, var(--purple) 0%, var(--blue) 45%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
.cp .pt-th {font: 700 clamp(20px, 3.6vw, 32px)/1.7 var(--font-th); color: var(--teal-deep);}
.cp .prose {display: grid; gap: 20px;}
.cp .prose p {max-width: 44em; font-size: 18px; line-height: 1.9;}
.cp .prose .lead {font-size: clamp(19px, 2.6vw, 24px); font-weight: 600; color: var(--teal-deep);}
.cp .contact-panel .btn-ghost {background: #fff; color: var(--teal-deep); border-color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .18);}
.cp .contact-panel .btn-ghost:hover {background: #fff; color: var(--purple-deep); filter: none;}
.cp .nw {white-space: nowrap;}
.cp .ab-intro {display: grid; gap: 32px; align-items: center;}
.cp .ab-name {margin-bottom: 8px; font: 800 clamp(34px, 7vw, 60px)/1.1 var(--font-en); letter-spacing: -.03em; background: linear-gradient(100deg, var(--purple) 0%, var(--blue) 45%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
.cp .ab-text .lead {margin-bottom: 18px; font-size: clamp(19px, 2.6vw, 25px); font-weight: 700; line-height: 1.8; color: var(--teal-deep);}
.cp .ab-chips {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;}
.cp .ab-chips li {padding: 7px 16px; border-radius: 999px; font-size: 14px; line-height: 1.6; font-weight: 600; color: #fff; background: linear-gradient(110deg, #8b5fbf, #2f72d4);}
.cp .ab-chips li:nth-child(2) {background: linear-gradient(110deg, #2f72d4, #1e8ab8);}
.cp .ab-chips li:nth-child(3) {background: linear-gradient(110deg, #1e8ab8, #258f78);}
.cp .ab-p {max-width: 42em; font-size: 18px; line-height: 1.95;}
.cp .ab-p-wide {max-width: 52em; margin-bottom: 28px;}
.cp .ab-fig {margin: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 24px 54px rgba(12, 74, 102, .25); aspect-ratio: 16 / 10;}
.cp .ab-art {display: block; width: 100%; height: 100%;}
.cp .ab-w {stroke-dasharray: 240 900; animation: abdrift 12s linear infinite;}
.cp .ab-w2 {animation-duration: 17s; animation-delay: -5s;}
.cp .ab-w3 {animation-duration: 22s; animation-delay: -9s;}
@keyframes abdrift {to { stroke-dashoffset: -1140; }}
.cp .ab-sp {animation: twinkle 4s ease-in-out infinite; opacity: .1;}
.cp .ab-stats-sec {background: var(--teal); color: #fff;}
.cp .ab-stats {display: grid; grid-template-columns: 1fr 1fr;}
.cp .ab-stats li {display: grid; gap: 2px; padding: 26px 12px; border-right: 1px solid rgba(255, 255, 255, .25);}
.cp .ab-stats li:nth-child(2) {border-right: 0;}
.cp .ab-stats li:nth-child(3) {grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .25); border-right: 0;}
.cp .ab-sn {font: 800 clamp(36px, 8vw, 60px)/1.15 var(--font-en); letter-spacing: -.02em;}
.cp .ab-sn:not(:empty) {overflow-wrap: anywhere;}
.cp .ab-sl {font-size: 15px; line-height: 1.6; opacity: .95;}
.cp .ab-types {display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));}
.cp .ab-type {display: flex; align-items: center; gap: 12px; padding: 16px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(12, 74, 102, .05); transition: transform .3s, box-shadow .3s, border-color .3s;}
.cp .ab-type:hover {transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 16px 34px rgba(12, 74, 102, .12);}
.cp .ab-ti {flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #8b5fbf, #2f72d4);}
.cp .ab-type:nth-child(3n+2) .ab-ti {background: linear-gradient(135deg, #2f72d4, #1e8ab8);}
.cp .ab-type:nth-child(3n) .ab-ti {background: linear-gradient(135deg, #1e8ab8, #258f78);}
.cp .ab-ti svg {width: 24px; height: 24px;}
.cp .ab-tn {font-weight: 600; font-size: 16px; line-height: 1.6; color: var(--teal-deep);}
.cp .ab-vals {display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-bottom: 26px;}
.cp .ab-val {display: grid; gap: 14px; align-content: space-between; min-height: 140px; padding: 20px 18px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #8b5fbf, #2f72d4); box-shadow: 0 14px 30px rgba(47, 114, 212, .22);}
.cp .ab-val:nth-child(2) {background: linear-gradient(135deg, #2f72d4, #1e8ab8);}
.cp .ab-val:nth-child(3) {background: linear-gradient(135deg, #1e8ab8, #1f8c98);}
.cp .ab-val:nth-child(4) {background: linear-gradient(135deg, #1f8c98, #258f78);}
.cp .ab-vi {display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .2);}
.cp .ab-vi svg {width: 24px; height: 24px;}
.cp .ab-vn {font-weight: 700; font-size: 18px; line-height: 1.6;}
.cp .ab-quote {position: relative; padding: clamp(24px, 4vw, 40px) clamp(22px, 4vw, 44px) clamp(24px, 4vw, 40px) clamp(28px, 4.5vw, 52px); border-radius: 20px; border: 1px solid rgba(0, 151, 224, .28); background: radial-gradient(420px 240px at 100% 0%, rgba(0, 151, 224, .14), transparent 70%), linear-gradient(120deg, #fff, #f1f9fd); box-shadow: 0 16px 38px rgba(12, 74, 102, .09);}
.cp .ab-quote::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 20px 0 0 20px; background: linear-gradient(180deg, #8b5fbf, #2f72d4 50%, #258f78);}
.cp .ab-quote p {font-size: clamp(19px, 2.8vw, 28px); font-weight: 700; line-height: 1.8; color: var(--teal-deep);}
@media (min-width: 720px) {
.cp .ab-stats {grid-template-columns: repeat(3, 1fr);}
.cp .ab-stats li {padding: 36px 28px;}
.cp .ab-stats li:nth-child(2) {border-right: 1px solid rgba(255, 255, 255, .25);}
.cp .ab-stats li:nth-child(3) {grid-column: auto; border-top: 0;}
.cp .ab-types {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;}
.cp .ab-vals {grid-template-columns: repeat(4, 1fr);}
}
@media (min-width: 900px) {
.cp .ab-intro {grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px;}
.cp .ab-types {grid-template-columns: repeat(5, minmax(0, 1fr));}
.cp .ab-type {flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px;}
}
@media (prefers-reduced-motion: reduce) {
.cp .ab-w, .cp .ab-sp {animation: none;}
.cp .ab-sp {opacity: .6;}
.cp .ab-type {transition: none;}
.cp .ab-type:hover {transform: none;}
}
.cp .ab-card {position: relative; overflow: hidden; padding: clamp(26px, 4vw, 44px); border-radius: 22px; color: #fff; background: radial-gradient(420px 260px at 0% 0%, rgba(139, 95, 191, .55), transparent 70%), radial-gradient(420px 260px at 100% 100%, rgba(37, 143, 120, .5), transparent 70%), linear-gradient(135deg, #0c3a5a 0%, #1b5aa6 55%, #1e8ab8 100%); box-shadow: 0 24px 54px rgba(12, 74, 102, .25);}
.cp .ab-card p {font-size: clamp(19px, 2.6vw, 26px); font-weight: 600; line-height: 1.95;}
.cp .ab-types {display: flex; flex-wrap: wrap; gap: 10px;}
.cp .ab-type {flex-direction: row; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 12px;}
.cp .ab-ti {width: 34px; height: 34px; border-radius: 9px;}
.cp .ab-ti svg {width: 19px; height: 19px;}
.cp .ab-tn {font-size: 15px; white-space: nowrap;}
@media (min-width: 900px) {
.cp .ab-types {display: flex; gap: 12px;}
.cp .ab-type {flex-direction: row; align-items: center; gap: 10px; padding: 8px 18px 8px 8px;}
}
.cp .page-hero--img {background: #0c3a5a; color: #fff; padding: 140px 0 72px;}
.cp .page-hero--img .ph-bg {position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block;}
.cp .page-hero--img::after {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 41, 74, .9) 0%, rgba(7, 41, 74, .55) 45%, rgba(7, 41, 74, .08) 100%);}
.cp .page-hero--img .crumb {color: #fff; opacity: .9;}
.cp .page-hero--img .crumb:hover {color: #d7c3f5; opacity: 1;}
.cp .page-hero--img .pt-en {background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff;}
.cp .page-hero--img .pt-th {color: #d8ecf8;}
.cp .ab-intro {grid-template-columns: 1fr;}
.cp .ab-text {max-width: 52em;}
@media (min-width: 900px) {
.cp .ab-intro {grid-template-columns: 1fr;}
}
.cp .page-hero--img .btn-ghost {background: #fff; color: var(--teal-deep); border-color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .22);}
.cp .page-hero--img .btn-ghost:hover {background: #fff; color: var(--purple-deep); filter: none;}
.cp .ab-area {display: grid; gap: 28px; align-items: center;}
.cp .ab-area-num {display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap;}
.cp .ab-big {font: 800 clamp(64px, 12vw, 104px)/1 var(--font-en); letter-spacing: -.04em; background: linear-gradient(100deg, var(--purple) 0%, var(--blue) 50%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
.cp .ab-big-l {font-weight: 700; font-size: clamp(18px, 2.6vw, 24px); line-height: 1.7; color: var(--teal-deep);}
.cp .ab-prov {display: flex; flex-wrap: wrap; gap: 10px; align-content: center;}
.cp .ab-prov li {padding: 9px 18px; border-radius: 8px; background: #fff; border: 1px solid rgba(30, 138, 184, .28); font-weight: 600; font-size: 16px; line-height: 1.6; color: var(--teal-deep); box-shadow: 0 6px 16px rgba(12, 74, 102, .05);}
.cp .ab-prov li:nth-child(4n+1) {border-color: rgba(139, 95, 191, .45);}
.cp .ab-prov li:nth-child(4n+2) {border-color: rgba(47, 114, 212, .45);}
.cp .ab-prov li:nth-child(4n+3) {border-color: rgba(30, 138, 184, .5);}
.cp .ab-prov li:nth-child(4n) {border-color: rgba(37, 143, 120, .5);}
.cp .ab-steps {display: grid; gap: 14px; counter-reset: none;}
.cp .ab-step {position: relative; display: grid; gap: 8px; padding: 22px 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(12, 74, 102, .06); overflow: hidden;}
.cp .ab-step::before {content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--c1, #8b5fbf), var(--c2, #2f72d4));}
.cp .ab-step:nth-child(1) {--c1: #8b5fbf; --c2: #6a63cc;}
.cp .ab-step:nth-child(2) {--c1: #6a63cc; --c2: #2f72d4;}
.cp .ab-step:nth-child(3) {--c1: #2f72d4; --c2: #1e8ab8;}
.cp .ab-step:nth-child(4) {--c1: #1e8ab8; --c2: #1f8c98;}
.cp .ab-step:nth-child(5) {--c1: #1f8c98; --c2: #258f78;}
.cp .ab-sno {position: absolute; right: 16px; top: 14px; font: 800 38px/1 var(--font-en); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c2) 55%, #fff);}
.cp .ab-sic {display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px color-mix(in srgb, var(--c2) 35%, transparent);}
.cp .ab-sic svg {width: 24px; height: 24px;}
.cp .ab-step h3 {margin: 6px 0 0; font-size: 19px; line-height: 1.6; color: var(--teal-deep);}
.cp .ab-step p {font-size: 15px; line-height: 1.8; color: #3b5a6b;}
.cp .ab-more-sec {padding-top: 0;}
.cp .ab-more {position: relative; overflow: hidden; display: grid; gap: 20px; align-items: center; padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px); border-radius: 24px; color: #fff; background: radial-gradient(420px 260px at 0% 0%, rgba(139, 95, 191, .55), transparent 70%), radial-gradient(420px 260px at 100% 100%, rgba(37, 143, 120, .5), transparent 70%), linear-gradient(135deg, #0c3a5a 0%, #1b5aa6 55%, #1e8ab8 100%); box-shadow: 0 24px 54px rgba(12, 74, 102, .25);}
.cp .ab-more h2 {margin: 0 0 8px; color: #fff;}
.cp .ab-more h2::after {background: linear-gradient(90deg, #d7c3f5, #fff, #9fe3d0);}
.cp .ab-more-p {max-width: 36em; font-size: 17px; line-height: 1.9; opacity: .95;}
.cp .ab-more .btn-ghost {background: #fff; color: var(--teal-deep); border-color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .2); justify-self: start;}
.cp .ab-more .btn-ghost:hover {background: #fff; color: var(--purple-deep); filter: none;}
@media (min-width: 720px) {
.cp .ab-steps {grid-template-columns: repeat(2, 1fr);}
.cp .ab-more {grid-template-columns: 1fr auto; gap: 36px;}
.cp .ab-more .btn-ghost {justify-self: end;}
}
@media (min-width: 900px) {
.cp .ab-area {grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px;}
.cp .ab-steps {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;}
.cp .ab-step {padding: 20px 14px 18px;}
}
@media (prefers-reduced-motion: reduce) {
.cp .ab-prov li {transition: none;}
}
.cp .ex-intro {display: grid; gap: 22px;}
.cp .ex-lead {font: 800 clamp(24px, 4.2vw, 40px)/1.6 var(--font-th); color: var(--teal-deep);}
.cp .ex-two, .cp .ex-types, .cp .ex-sys {display: grid; gap: 14px;}
.cp .ex-two {margin-top: 10px;}
.cp .ex-card {position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(12, 74, 102, .06); overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s;}
.cp .ex-card::before {content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--c1, #8b5fbf), var(--c2, #2f72d4));}
.cp .ex-card:hover {transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 16px 36px rgba(12, 74, 102, .12);}
.cp .ex-two .ex-card:nth-child(1), .cp .ex-types .ex-card:nth-child(1), .cp .ex-sys .ex-card:nth-child(1) {--c1: #8b5fbf; --c2: #6a63cc;}
.cp .ex-two .ex-card:nth-child(2), .cp .ex-types .ex-card:nth-child(2), .cp .ex-sys .ex-card:nth-child(2) {--c1: #6a63cc; --c2: #2f72d4;}
.cp .ex-types .ex-card:nth-child(3), .cp .ex-sys .ex-card:nth-child(3) {--c1: #2f72d4; --c2: #1e8ab8;}
.cp .ex-types .ex-card:nth-child(4), .cp .ex-sys .ex-card:nth-child(4) {--c1: #1e8ab8; --c2: #258f78;}
.cp .ex-ic {display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px color-mix(in srgb, var(--c2) 35%, transparent);}
.cp .ex-ic svg {width: 26px; height: 26px;}
.cp .ex-card h3 {margin: 6px 0 0; font-size: 20px; line-height: 1.6; color: var(--teal-deep);}
.cp .ex-types .ex-card h3 {font: 800 22px/1.4 var(--font-en); letter-spacing: -.01em;}
.cp .ex-card p {font-size: 16px; line-height: 1.85; color: #34546a;}
.cp .ex-chips {display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;}
.cp .ex-chips span {padding: 4px 12px; border-radius: 999px; font-size: 13px; line-height: 1.6; font-weight: 600; color: #fff; background: linear-gradient(110deg, var(--c1), var(--c2));}
.cp .ex-for {margin-top: 6px; padding-top: 10px; border-top: 1px dashed rgba(30, 138, 184, .35); font-size: 14px; line-height: 1.7; font-weight: 600; color: var(--c2);}
@media (min-width: 720px) {
.cp .ex-two, .cp .ex-types, .cp .ex-sys {grid-template-columns: repeat(2, 1fr);}
.cp .ex-intro .ab-p {max-width: 52em;}
}
@media (min-width: 1040px) {
.cp .ex-types {grid-template-columns: repeat(4, 1fr);}
.cp .ex-sys {grid-template-columns: repeat(4, 1fr);}
}
@media (prefers-reduced-motion: reduce) {
.cp .ex-card {transition: none;}
.cp .ex-card:hover {transform: none;}
}
.cp .ex-types .ex-card:nth-child(5) {--c1: #1f8c98; --c2: #258f78;}
.cp .ex-types .ex-card:nth-child(6) {--c1: #8b5fbf; --c2: #2f72d4;}
.cp .ex-types .ex-card:nth-child(3) {--c1: #2f72d4; --c2: #1e8ab8;}
.cp .ex-types .ex-card:nth-child(4) {--c1: #1e8ab8; --c2: #1f8c98;}
.cp .ex-sub {margin-top: -4px; font: 600 13px/1.6 var(--font-en); letter-spacing: .02em; color: var(--c2);}
.cp .ex-pts {display: grid; gap: 7px; margin: 4px 0 2px;}
.cp .ex-pts li {display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; font-size: 15px; line-height: 1.7; color: #2b4a5e;}
.cp .ex-ck {display: grid; place-items: center; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2));}
.cp .ex-ck svg {width: 12px; height: 12px;}
@media (min-width: 1040px) {
.cp .ex-types {grid-template-columns: repeat(3, 1fr);}
.cp .ex-sys {grid-template-columns: repeat(3, 1fr);}
}
.cp .dc-grid {display: grid; gap: 18px;}
.cp .dc-card {--c1: #8b5fbf; --c2: #2f72d4; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--c2) 25%, #fff); box-shadow: 0 16px 38px color-mix(in srgb, var(--c2) 12%, transparent);}
.cp .dc-gal {--c1: #1e8ab8; --c2: #258f78;}
.cp .dc-head {padding: 22px 24px; color: #fff; background: linear-gradient(120deg, var(--c1), var(--c2));}
.cp .dc-head h3 {margin: 0 0 4px; font: 800 clamp(24px, 3.4vw, 32px)/1.3 var(--font-en);}
.cp .dc-gal .dc-head h3 {font-family: var(--font-th);}
.cp .dc-head p {font-size: 16px; line-height: 1.8; opacity: .95;}
.cp .dc-body {display: grid; gap: 10px; padding: 22px 24px 26px;}
.cp .dc-body h4 {margin: 8px 0 0; font-size: 15px; line-height: 1.6; letter-spacing: .04em; color: var(--c2);}
.cp .dc-body > p {font-size: 16px; line-height: 1.9; color: #2b4a5e;}
.cp .dc-layers {display: flex; height: 54px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(12, 74, 102, .18);}
.cp .dc-layers span {display: grid; place-items: center; padding: 0 6px; text-align: center;}
.cp .dc-layers i {font-style: normal; font-weight: 700; font-size: 12.5px; line-height: 1.4;}
.cp .dc-layers .l-foil {flex: 0 0 22%; background: linear-gradient(135deg, #e6edf2, #b9c6d0); color: #28485b;}
.cp .dc-layers .l-foam {flex: 1; background: repeating-linear-gradient(45deg, #fff4cf, #fff4cf 7px, #ffe9a6 7px, #ffe9a6 14px); color: #5b4a12;}
.cp .dc-layers .l-steel {flex: 0 0 28%; background: linear-gradient(135deg, #9fb1be, #6f8696); color: #fff;}
.cp .dc-card .ex-pts li {font-size: 15.5px;}
.cp .dc-card .ex-pts b {color: var(--teal-deep); font-weight: 700;}
@media (min-width: 900px) {
.cp .dc-grid {grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;}
}
.cp .ex-sys .ex-card:nth-child(1) {--c1: #2f72d4; --c2: #1e8ab8;}
.cp .ex-sys .ex-card:nth-child(2) {--c1: #1e8ab8; --c2: #258f78;}
@media (min-width: 1040px) {
.cp .ex-sys {grid-template-columns: repeat(2, 1fr);}
}
.cp .btn-all {min-height: 64px; padding: 14px 48px; font-size: 22px; gap: 0;}
.cp .btn-all::after {content: "→"; display: inline-block; max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; transition: max-width .25s, margin-left .25s, opacity .25s;}
.cp .btn-all.btn-accent:hover, .cp .btn-all.btn-accent:focus-visible {background-image: linear-gradient(110deg, #1e8ab8, #258f78); background-position: 0 50%; filter: none; box-shadow: 0 12px 28px rgba(37, 143, 130, .4); transform: translateY(-3px) scale(1.04);}
.cp .btn-all:hover::after, .cp .btn-all:focus-visible::after {max-width: 1.5em; margin-left: 10px; opacity: 1;}
@media (max-width: 719px) {
.cp .hero .cta-row .btn {flex: 0 0 auto; min-height: 44px; padding: 8px 10px; font-size: 13px; white-space: nowrap;}
}
@media (max-width: 719px) {
.cp .ab-types {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;}
.cp .ab-type {flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; border-radius: 10px; font-size: 10.5px; line-height: 1.25; text-align: center; box-shadow: none; overflow-wrap: anywhere; word-break: break-word;}
.cp .ab-ti {width: 22px; height: 22px; border-radius: 7px;}
.cp .ab-ti svg {width: 13px; height: 13px;}
}
@media (max-width: 719px) {
.cp .ab-tn {font-size: 10.5px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere;}
}
@media (max-width: 719px) {
.cp .ab-chips {flex-wrap: nowrap; justify-content: center; gap: 5px;}
.cp .ab-chips li {flex: 0 0 auto; padding: 5px 10px; font-size: 12px; line-height: 1.5; white-space: nowrap;}
}
@media (max-width: 719px) {
.cp .ab-vals {grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px;}
.cp .ab-val {display: flex; align-items: center; gap: 12px; min-height: 0; padding: 10px 14px; border-radius: 14px;}
.cp .ab-vi {flex: none; width: 34px; height: 34px; border-radius: 10px;}
.cp .ab-vi svg {width: 19px; height: 19px;}
.cp .ab-vn {font-size: 16px; line-height: 1.4;}
}
@media (max-width: 719px) {
.cp .ab-vals {grid-template-columns: 1fr 1fr; gap: 8px;}
.cp .ab-val {gap: 8px; padding: 10px 10px;}
.cp .ab-vi {width: 28px; height: 28px; border-radius: 8px;}
.cp .ab-vi svg {width: 16px; height: 16px;}
.cp .ab-vn {font-size: 13px; line-height: 1.35; overflow-wrap: anywhere;}
}
@media (max-width: 719px) {
.cp .ab-quote {padding: 12px 14px 12px 20px; border-radius: 14px;}
.cp .ab-quote::before {width: 6px;}
.cp .ab-quote p {font-size: 15px; line-height: 1.55;}
}
@media (max-width: 719px) {
.cp .ab-prov {gap: 8px;}
.cp .ab-prov li {padding: 4px 14px; font-size: 15px;}
}
@media (min-width: 720px) {
.cp .ab-prov {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;}
.cp .ab-prov li {padding: 12px 8px; font-size: 18px; text-align: center; white-space: nowrap;}
}
@media (min-width: 900px) {
.cp .ab-area {grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px;}
}
@media (min-width: 1100px) {
.cp .ab-types {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;}
.cp .ab-type {justify-content: flex-start; gap: 10px; padding: 12px 8px 12px 12px; border-radius: 14px;}
.cp .ab-ti {width: 40px; height: 40px; border-radius: 11px;}
.cp .ab-ti svg {width: 22px; height: 22px;}
.cp .ab-tn {font-size: 15px;}
}
@media (max-width: 719px) {
.cp .ab-steps {gap: 10px;}
.cp .ab-step {grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 4px; padding: 14px 14px 12px; border-radius: 14px;}
.cp .ab-step::before {height: 4px;}
.cp .ab-sic {width: 36px; height: 36px; border-radius: 10px; box-shadow: none;}
.cp .ab-sic svg {width: 20px; height: 20px;}
.cp .ab-step h3 {margin: 0; font-size: 17px; line-height: 1.4;}
.cp .ab-step p {grid-column: 1 / -1; font-size: 14px; line-height: 1.5;}
.cp .ab-sno {top: 10px; right: 14px; font-size: 28px;}
}
@media (max-width: 719px) {
.cp .ab-steps {padding: 0;}
.cp .ab-step p {font-size: 13px;}
}
@media (max-width: 719px) {
.cp .ab-more {gap: 10px; padding: 16px 18px; border-radius: 18px;}
.cp .ab-more h2 {margin: 0 0 4px; font-size: 22px; line-height: 1.4;}
.cp .ab-more h2::after {margin-top: 6px;}
.cp .ab-more-p {font-size: 14px; line-height: 1.5;}
.cp .ab-more .btn {min-height: 40px; padding: 6px 20px; font-size: 15px;}
}
@media (max-width: 719px) {
.cp .ab-more-sec {display: none;}
}
@media (max-width: 719px) {
.cp .ex-card {grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 6px; padding: 16px 16px 14px;}
.cp .ex-card > * {grid-column: 1 / -1;}
.cp .ex-card > .ex-ic {grid-column: 1; width: 40px; height: 40px; border-radius: 11px; box-shadow: none;}
.cp .ex-card > .ex-ic svg {width: 22px; height: 22px;}
.cp .ex-card > h3 {grid-column: 2; margin: 0; font-size: 18px; line-height: 1.4;}
.cp .ex-types .ex-card > h3 {font-size: 19px;}
.cp .ex-card > p {font-size: 15px; line-height: 1.7;}
}
@media (max-width: 719px) {
.cp .ex-card > h3, .cp .ex-types .ex-card > h3 {font-size: 16px; line-height: 1.4; letter-spacing: 0; white-space: nowrap;}
}
@media (max-width: 719px) {
.cp .ex-sys .ex-card > h3 {font-size: 18px;}
}
.cp .home-btn-row {display: none;}
@media (max-width: 719px) {
.cp .home-btn-row {display: flex; justify-content: center; padding: 8px 0 28px;}
.cp .home-btn-row .btn {min-height: 44px; padding: 8px 32px; font-size: 16px;}
}
@media (max-width: 719px) {
.cp .page-hero--img .ph-bg {opacity: .5;}
}
@media (max-width: 719px) {
.cp .btn-all {min-height: 44px; padding: 8px 32px; font-size: 16px;}
.cp .btn-all::after {display: none;}
}
@media (max-width: 719px) {
.cp .section:has(#proj-detail) {padding-bottom: 20px;}
}
@media (max-width: 719px) {
.cp .page-hero:has(#proj-sub) {padding: 96px 0 24px;}
.cp .page-hero:has(#proj-sub) .pt-en {font-size: clamp(26px, 7.5vw, 34px); line-height: 1.2;}
}
.cp .pt-prov {display: block; font: 800 clamp(26px, 5vw, 48px)/1.2 var(--font-en); letter-spacing: -.02em; overflow-wrap: anywhere; background: linear-gradient(100deg, #1e8ab8 0%, #1f8c98 40%, #258f78 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
@media (max-width: 719px) {
.cp .page-hero:has(#proj-sub) .pt-prov {font-size: clamp(22px, 6.2vw, 28px);}
}
@media (max-width: 719px) {
.cp .home-btn-row--two {gap: 10px; padding-left: 16px; padding-right: 16px;}
.cp .home-btn-row--two .btn {padding: 8px 18px; font-size: 15px; white-space: nowrap;}
}
@media (max-width: 719px) {
.cp .home-btn-row--two {flex-wrap: wrap; justify-content: center; row-gap: 10px;}
}
@media (max-width: 719px) {
.cp .home-btn-row--two {flex-wrap: nowrap; gap: 6px; padding-left: 10px; padding-right: 10px;}
.cp .home-btn-row--two .btn {flex: 0 0 auto; padding: 7px 11px; font-size: 12.5px; min-height: 40px;}
}

/* Fit under the sticky site header */
.cp .page-hero--img { padding: 72px 0 56px; }
.cp .ph-bg { max-width: none; }
.cp-home-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px var(--gutter, 16px) 40px; }
.cp-home-links .btn { min-height: 44px; padding: 8px 22px; font-size: 15px; }

/* Let long labels wrap inside their card instead of overflowing */
.cp .ab-type { min-width: 0; }
.cp .ab-tn { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .cp .ab-tn { white-space: normal; }
}

/* About Us: 4 steps (installation and handover merged) */
.cp .ab-step:nth-child(4) { --c1: #1e8ab8; --c2: #258f78; }
@media (min-width: 900px) {
  .cp .ab-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* About Us steps: whole card links to the matching service page */
.cp .ab-step { transition: transform .3s, box-shadow .3s, border-color .3s; }
.cp .ab-step h3 a { color: inherit; text-decoration: none; }
.cp .ab-step h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cp .ab-step h3 a:focus-visible { outline: none; }
.cp .ab-step:has(h3 a:focus-visible) { outline: 3px solid var(--purple); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .cp .ab-step:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 16px 34px rgba(12, 74, 102, .14); }
  .cp .ab-step:hover h3 a { color: var(--blue); }
}
@media (prefers-reduced-motion: reduce) { .cp .ab-step { transition: none; } .cp .ab-step:hover { transform: none; } }

/* Contact page */
.cp .ct-link { display: inline-block; margin-top: 4px; font-weight: 700; font-size: 16px; color: var(--c2, var(--blue)); text-decoration: none; word-break: break-word; }
.cp .ct-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp .ct-list { display: grid; gap: 4px; margin-top: 2px; }
.cp .ct-list .ct-link { margin-top: 0; font-size: 18px; }
@media (max-width: 719px) {
  .cp .ex-card > .ct-link, .cp .ex-card > .ct-list { grid-column: 1 / -1; }
}

/* Contact page: Google Map */
.cp .ct-map { overflow: hidden; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 24px 54px rgba(12, 74, 102, .18); background: #dfeaf2; aspect-ratio: 16 / 9; min-height: 300px; }
.cp .ct-map iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
.cp .ct-map-actions { margin-top: 22px; }
@media (max-width: 719px) { .cp .ct-map { aspect-ratio: 4 / 5; } .cp .ct-map iframe { min-height: 360px; } }

/* Third card in a two-card style list (careers page) */
.cp .ex-two .ex-card:nth-child(3) { --c1: #2f72d4; --c2: #1e8ab8; }

/* Careers page: positions, benefits, application form */
.cp .cr-h4 { margin: 10px 0 0; font-size: 15px; font-weight: 800; color: var(--teal-deep); }
.cp .cr-apply { justify-self: start; margin-top: 8px; min-height: 44px; padding: 8px 22px; font-size: 15px; }
.cp .cr-tasks { --c1: #8b5fbf; --c2: #2f72d4; display: grid; gap: 10px; max-width: 52em; }
.cp .cr-tasks li { font-size: 17px; }
.cp .cr-benefits { display: grid; gap: 12px; grid-template-columns: 1fr; }
.cp .cr-benefits li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(12, 74, 102, .05); font-weight: 600; line-height: 1.6; color: var(--teal-deep); }
.cp .cr-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #8b5fbf, #258f78); }
.cp .cr-ic svg { width: 16px; height: 16px; }
@media (min-width: 640px) { .cp .cr-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cp .cr-benefits { grid-template-columns: repeat(4, 1fr); } }

.cp .cr-form { max-width: 880px; padding: clamp(20px, 4vw, 40px); border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(12, 74, 102, .10); }
.cp .cr-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cp .cr-grid { grid-template-columns: 1fr 1fr; } .cp .cr-full { grid-column: 1 / -1; } }
.cp .cr-field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cp .cr-field > span, .cp .cr-field > legend { font-weight: 700; font-size: 15px; color: var(--teal-deep); padding: 0; }
.cp .cr-field b, .cp .cr-consent b { color: #c0392b; }
.cp .cr-field input, .cp .cr-field select, .cp .cr-field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(30, 138, 184, .35); background: #f8fbfd; font: 500 16px/1.6 var(--font-th); color: var(--ink); }
.cp .cr-field textarea { resize: vertical; }
.cp .cr-field input:focus, .cp .cr-field select:focus, .cp .cr-field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(47, 114, 212, .2); }
.cp .cr-field input:user-invalid, .cp .cr-field select:user-invalid { border-color: #c0392b; }
.cp .cr-radio { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.cp .cr-radio legend { width: 100%; margin-bottom: 4px; }
.cp .cr-radio label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.cp .cr-radio input { width: 20px; min-height: 20px; height: 20px; accent-color: var(--blue); }
.cp .cr-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.7; }
.cp .cr-consent input { flex: none; width: 20px; height: 20px; margin-top: 4px; accent-color: var(--blue); }
.cp .cr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cp .cr-actions .btn { min-height: 52px; font-size: 16px; }
.cp .cr-status { margin-top: 14px; font-weight: 700; color: var(--green); min-height: 1.6em; }
.cp .cr-status.is-error { color: #c0392b; }
.cp .cr-note { margin-top: 8px; font-size: 14px; line-height: 1.8; color: #4a6577; }

/* Careers: CTA buttons */
.cp .cr-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cp .cr-cta { min-height: 54px; padding: 10px 32px; font-size: 17px; }
@media (max-width: 719px) {
  .cp .cr-cta-row .cr-cta { flex: 1 1 100%; }
  .cp .cr-join-sec { display: block; }
}
.cp .cr-join-sec { padding-top: clamp(24px, 6vw, 60px); padding-bottom: 0; }

/* About page chips: 8-step gradient */
.cp .ab-chips li:nth-child(1) { background: linear-gradient(110deg, #8b5fbf, #7a63c8); }
.cp .ab-chips li:nth-child(2) { background: linear-gradient(110deg, #7a63c8, #5f68d0); }
.cp .ab-chips li:nth-child(3) { background: linear-gradient(110deg, #5f68d0, #2f72d4); }
.cp .ab-chips li:nth-child(4) { background: linear-gradient(110deg, #2f72d4, #2780c6); }
.cp .ab-chips li:nth-child(5) { background: linear-gradient(110deg, #2780c6, #1e8ab8); }
.cp .ab-chips li:nth-child(6) { background: linear-gradient(110deg, #1e8ab8, #1f8c98); }
.cp .ab-chips li:nth-child(7) { background: linear-gradient(110deg, #1f8c98, #258f78); }
.cp .ab-chips li:nth-child(8) { background: linear-gradient(110deg, #258f78, #2a9a74); }

/* มือถือเท่านั้น: ส่วน "เกี่ยวกับ Pass Innovation" ตัวอักษรเล็กลงและจัดให้อ่านง่าย */
@media (max-width: 639px) {
  .cp .ab-about-sec .ab-p {
    font-size: 14px;
    line-height: 1.85;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-left: 3px solid var(--blue, #0097e0);
    border-radius: 0 12px 12px 0;
    background: rgba(0, 151, 224, 0.06);
    color: var(--text-soft, #3d5a6e);
  }
  .cp .ab-about-sec .ab-p:first-of-type {
    font-weight: 600;
    color: var(--navy-deep, #002c68);
    background: rgba(0, 151, 224, 0.1);
  }
  .cp .ab-about-sec .ab-p:last-of-type { margin-bottom: 0; }
}

/* มือถือเท่านั้น: ข้อความรายละเอียดทั่วไป (ไม่ใช่หัวข้อ) ในหน้า About และ Expertise ขนาด 14px เท่ากัน */
@media (max-width: 639px) {
  .cp .ab-p,
  .cp .ab-more-p,
  .cp .ab-step p,
  .cp .ab-quote p,
  .cp .ex-card p,
  .cp .dc-body p,
  .cp .dc-head p,
  .cp .ex-pts li,
  .cp .dc-card .ex-pts li { font-size: 14px; line-height: 1.85; }
}

/* มือถือเท่านั้น: ปุ่มสมัครงานออนไลน์ / สอบถามทาง LINE ความยาวพอดีข้อความ */
@media (max-width: 639px) {
  .cp .cr-cta-row .cr-cta { flex: 0 0 auto; padding: 10px 24px; }
}