/* PHIMAI HEALTH | ผู้พัฒนาระบบ : นายวิษณุ เสาะสาย | ตำแหน่ง : เจ้าพนักงานธุรการ */
/* Scoped to the hero only; no Bootstrap, font or database settings are changed. */
.hero-circuit{position:relative;isolation:isolate;overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;background-color:#08262d}
.hero-circuit::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,24,31,.76) 0%,rgba(3,24,31,.40) 48%,rgba(3,24,31,.12) 100%)}
.hero-circuit__glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 83% 48%,#28d9d42e 0%,transparent 45%),radial-gradient(ellipse at 70% 80%,#eccb6e14 0%,transparent 40%)}
.hero-circuit__canvas{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.9;mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.16) 35%,#000 68%);-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.16) 35%,#000 68%)}
.hero-circuit__canvas canvas{display:block;width:100%;height:100%;pointer-events:none}
.hero-circuit__content{position:relative;z-index:2}
.hero-circuit .hero-kicker{font-size:clamp(1.1rem,2.25vw,2rem);line-height:1.6;text-shadow:0 2px 12px #0009;overflow-wrap:anywhere}
.hero-circuit h1{font-size:clamp(2rem,5.3vw,4.8rem);line-height:1.3;max-width:16ch;text-shadow:0 3px 24px #0008;overflow-wrap:anywhere}
.hero-circuit .btn{position:relative;min-height:48px;display:inline-flex;align-items:center;justify-content:center;white-space:normal}
.hero-circuit .btn:focus-visible{outline:3px solid #ffe6a6;outline-offset:5px}
@media(max-width:767px){.hero-circuit__canvas{opacity:.32;mask-image:linear-gradient(90deg,transparent,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 100%)}.hero-circuit::before{background:linear-gradient(90deg,#03181fc9,#03181f80)}.hero-circuit h1{max-width:100%}.hero-circuit .hero-circuit__content{padding-top:2.5rem!important;padding-bottom:2.5rem!important}.hero-circuit .btn{flex:1 1 180px}}
@media(prefers-reduced-motion:reduce){.hero-circuit__canvas{display:none}}
/* Reference: architectural image, teal overlay, gold kicker, transparent sphere. */
body.homepage .hero-header.hero-reference{min-height:614px;border-bottom:0;background-position:center 48%}
body.homepage .hero-header.hero-reference::before{background:linear-gradient(90deg,rgba(4,39,44,.72),rgba(5,38,42,.30) 63%,rgba(6,40,43,.22)),linear-gradient(0deg,rgba(2,38,35,.52),transparent 65%)}
.hero-reference .hero-circuit__glow{background:radial-gradient(ellipse at 72% 45%,#9ed4cb0a,transparent 50%)}
.hero-reference .hero-circuit__canvas{opacity:.80;mask-image:linear-gradient(90deg,transparent,#0009 35%,#000 65%);-webkit-mask-image:linear-gradient(90deg,transparent,#0009 35%,#000 65%)}
body.homepage .hero-reference .hero-kicker{color:#ddce98!important;font-size:clamp(1.1rem,2vw,1.7rem);margin-bottom:28px!important;line-height:1.6;text-shadow:0 2px 12px #05262d44}
body.homepage .hero-reference h1{font-size:clamp(2.1rem,4.4vw,3.75rem);line-height:1.58;font-weight:700;white-space:pre-line;max-width:18ch;margin-bottom:44px!important;text-shadow:0 2px 18px #05262d44;letter-spacing:0}
.hero-reference .btn.btn-primary{background:#0b6c73;border:1px solid #83b2b2aa;border-radius:12px;min-width:184px;min-height:58px;padding:15px 25px!important;color:#fff;box-shadow:0 6px 18px #001b2320}
.hero-reference .btn.btn-primary:hover{background:#10828a;border-color:#b2d7ce}
.hero-reference .btn:focus-visible{outline-color:#f0dd9b}
@media(max-width:767px){body.homepage .hero-header.hero-reference{min-height:540px;background-position:58% center}.hero-reference .hero-circuit__canvas{opacity:.38;mask-image:linear-gradient(90deg,transparent,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 100%)}body.homepage .hero-reference h1{font-size:clamp(2rem,8vw,3rem);line-height:1.45;max-width:100%}.hero-reference .btn.btn-primary{min-width:0;min-height:52px;flex:1 1 165px}}
@media(prefers-reduced-motion:reduce){.hero-reference .btn{transition:none!important}}

/* Homepage-only design tokens: Bootstrap forms and admin pages remain untouched. */
body.homepage{--home-ink:#16383f;--home-muted:#536c73;--home-teal:#0c6b73;--home-line:#d8e5e4;--home-radius:20px;color:var(--home-ink)}
.homepage #main-content>section{scroll-margin-top:24px}
.homepage #main-content>section:not(.hero-header){padding-top:clamp(28px,4.4vw,64px)!important;padding-bottom:clamp(28px,4.4vw,64px)!important}
.homepage #main-content>section:not(.hero-header)>.container{padding-top:12px!important;padding-bottom:12px!important}
.homepage #main-content .section-heading{max-width:800px;margin-left:auto;margin-right:auto;margin-bottom:32px}
.homepage #main-content .section-heading h2{font-size:clamp(1.7rem,2.7vw,2.6rem);line-height:1.45;color:var(--home-ink);overflow-wrap:anywhere}
.homepage #main-content :is(p,li){line-height:1.8}
.homepage #main-content :is(.service-item,.program-item,.events-item,.blog-item,.team-item,.testimonial-item,.unit-feed-card,.community-panel){border-radius:var(--home-radius);overflow:hidden;border-color:var(--home-line)!important;box-shadow:0 8px 28px #153d4610}
.homepage #main-content :is(.service-item,.blog-item,.program-item,.team-item){height:100%}
.homepage #main-content :is(.blog-content,.events-text,.program-text,.unit-feed-body){padding:24px!important;min-width:0}
.homepage #main-content :is(.card-photo,.team-photo,.event-photo){max-width:100%;object-fit:cover}
.homepage #main-content :is(h2,h3,h4,a){overflow-wrap:anywhere}
.homepage #main-content .btn{border-radius:12px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;white-space:normal;line-height:1.6}
.homepage #main-content .btn-primary,.homepage .back-to-top{background:var(--home-teal);border-color:var(--home-teal);color:#fff}
.homepage #main-content .btn-primary:hover{background:#08535b;border-color:#08535b}
.homepage #main-content .btn-outline-primary{color:var(--home-teal);border-color:var(--home-teal)}
.homepage #main-content .btn-outline-primary:hover{background:var(--home-teal);color:#fff}
.homepage :is(a,button,input,select,textarea):focus-visible{outline:3px solid #bc8b2c;outline-offset:4px}
.homepage .navbar-nav .nav-link{min-height:44px;display:flex;align-items:center}
.homepage .hero-unified .hero-circuit__content{padding-top:64px!important;padding-bottom:64px!important}
.homepage .hero-unified .hero-kicker{margin-bottom:22px!important}
.homepage .hero-unified h1{max-width:19ch;line-height:1.48;margin-bottom:32px!important}
.homepage #main-content :is(.row,.d-flex)>*{min-width:0}
.homepage .visitor-banner{margin-top:20px;margin-bottom:20px}
@media(min-width:1200px){.homepage #main-content>.container,.homepage #main-content>section>.container{max-width:1320px}}
@media(max-width:767px){.homepage .hero-unified .hero-circuit__content{padding-top:38px!important;padding-bottom:38px!important}.homepage #main-content :is(.blog-content,.events-text,.program-text,.unit-feed-body){padding:20px!important}.homepage #main-content .section-heading{margin-bottom:24px}.homepage .navbar-nav .nav-link{padding:10px 12px}.homepage .back-to-top{right:16px;bottom:20px}}
@media(prefers-reduced-motion:no-preference){.homepage #main-content .btn{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.homepage #main-content :is(.service-item,.blog-item,.unit-feed-card){transition:box-shadow .22s ease}.homepage #main-content :is(.service-item,.blog-item,.unit-feed-card):hover{box-shadow:0 14px 34px #153d461c}}
@media(prefers-reduced-motion:reduce){.homepage #main-content *{scroll-behavior:auto!important}}
@supports selector(html:has(body.homepage)){html:has(body.homepage){scroll-behavior:smooth;scroll-padding-top:24px}@media(prefers-reduced-motion:reduce){html:has(body.homepage){scroll-behavior:auto}}}
/* Visible even if JS/module loading or WebGL fails. */
.hero-fallback{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.72}
.hero-fallback-network{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-fallback-sphere{position:absolute;width:clamp(200px,22vw,320px);height:auto;left:69%;top:48%;translate:-50% -50%;pointer-events:none;filter:drop-shadow(0 0 12px #72d5bd18)}
[data-hero-render=webgl]>.hero-fallback{display:none}
@media(prefers-reduced-motion:no-preference){.hero-fallback-sphere{animation:heroFallbackOrbit 28s ease-in-out infinite}.hero-fallback-network{animation:heroFallbackDrift 22s ease-in-out infinite}@keyframes heroFallbackOrbit{0%,100%{transform:perspective(650px) rotateY(-16deg) rotateZ(-7deg)}50%{transform:perspective(650px) rotateY(23deg) rotateZ(8deg)}}@keyframes heroFallbackDrift{50%{transform:translate3d(8px,-9px,0)}}}
@media(max-width:767px){.hero-fallback{opacity:.30}.hero-fallback-sphere{left:77%;width:210px}}
@media(prefers-reduced-motion:reduce){.hero-fallback *{animation:none!important}}

[data-hero-paused=true] .hero-fallback *{animation-play-state:paused!important}