/* Sirisup Premium 3.6: service showcase + gallery; no quotation or floating contact module. */
body.ss-bionic-site { --ss36-navy:#071c3a;--ss36-blue:#10447f;--ss36-red:#ed1239;--ss36-focus:#50c4ff; }
body.ss-bionic-site .ss-service-card,body.ss-bionic-site .ss-service-detail{position:relative;isolation:isolate;}
body.ss-bionic-site .ss-service-card::before {content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(138deg,rgba(86,190,255,.16),transparent 28%,transparent 70%,rgba(225,23,61,.09));opacity:.55;transition:opacity .28s ease;}
body.ss-bionic-site .ss-service-card:hover::before{opacity:1}
body.ss-bionic-site .ss-service-card.ss36-enhanced{padding-bottom:52px!important}
body.ss-bionic-site .ss36-service-action {position:absolute;bottom:14px;left:16px;right:16px;z-index:5;color:#fff!important;background:rgba(53,151,255,.16);border:1px solid rgba(169,207,255,.38);padding:10px 12px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;font:600 13px 'Prompt',sans-serif;text-decoration:none!important;transition:background .2s,border-color .2s,transform .2s}
body.ss-bionic-site .ss36-service-action:hover,body.ss-bionic-site .ss36-service-action:focus-visible{background:rgba(54,166,255,.34);border-color:#72cfff;transform:translateY(-2px)}
body.ss-bionic-site .ss-project-card.ss36-enhanced {position:relative;isolation:isolate}
body.ss-bionic-site .ss36-project-open{z-index:5;position:absolute;inset:0;cursor:zoom-in;border:0;background:transparent;text-align:left;color:transparent;font-size:0}
body.ss-bionic-site .ss36-project-open:focus-visible{outline:3px solid #37aefa;outline-offset:3px;border-radius:15px}
body.ss-bionic-site .ss-project-card.ss36-enhanced::after {content:'ดูภาพขยาย ↗';pointer-events:none;position:absolute;z-index:3;right:12px;top:12px;color:#fff;background:rgba(5,27,60,.8);padding:7px 11px;border-radius:9px;box-shadow:0 7px 25px rgba(0,0,0,.25);font:600 12px 'Prompt',sans-serif;opacity:0;transform:translateY(-4px);transition:all .25s}
body.ss-bionic-site .ss-project-card.ss36-enhanced:hover::after,body.ss-bionic-site .ss-project-card.ss36-enhanced:focus-within::after{opacity:1;transform:none}
body.ss36-modal-open{overflow:hidden!important}
.ss36-modal[hidden]{display:none!important}
.ss36-modal{position:fixed;z-index:100100;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;font-family:'Prompt',sans-serif}
.ss36-backdrop{position:absolute;inset:0;background:rgba(0,11,29,.82);backdrop-filter:blur(10px)}
.ss36-gallery-panel{position:relative;z-index:1;max-width:1120px;width:min(100%,1120px);border:1px solid rgba(159,203,255,.25);border-radius:20px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.46);background:#fff}
.ss36-gallery-panel{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);min-height:410px}
.ss36-gallery-visual{min-height:400px;position:relative;background:#061b38;display:grid;place-items:center}
.ss36-gallery-visual img{width:auto;height:auto;max-width:100%;max-height:75vh;object-fit:contain;background:#061b38}
.ss36-gallery-navigation{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:5px 9px;color:white;background:rgba(0,19,45,.78);border-radius:30px}
.ss36-gallery-navigation button{width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:white;font-size:28px;cursor:pointer}
.ss36-gallery-index{font:600 13px Montserrat,Arial,sans-serif;min-width:57px;text-align:center}
.ss36-gallery-detail{padding:60px 33px 30px;align-self:center}
.ss36-gallery-detail h2{font:700 clamp(24px,3vw,32px) 'Kanit','Prompt',sans-serif;color:#071c3a!important;line-height:1.3;margin:10px 0 17px}
.ss36-gallery-detail p{font:400 14px/1.85 'Prompt',sans-serif;color:#526780}
.ss36-small{color:#b10a2a;font:700 11px Montserrat,Arial,sans-serif;letter-spacing:.12em}
.ss36-close{position:absolute;z-index:4;top:14px;right:14px;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(24,54,100,.15);border-radius:12px;background:#fff;color:#132e50;font-size:26px;cursor:pointer}
.ss36-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:#e20c32;color:white!important;font:700 14px 'Prompt',sans-serif;padding:14px 18px;cursor:pointer;box-shadow:0 12px 25px rgba(216,13,52,.2);text-decoration:none!important}
.ss36-button:hover{background:#b90626}.ss36-button:disabled{opacity:.6;cursor:wait}
@media(max-width:480px){.ss36-modal{padding:9px}.ss36-gallery-detail h2{font-size:23px}.ss36-gallery-visual{min-height:220px}.ss36-gallery-visual img{max-height:37vh}}
@media(hover:none){body.ss-bionic-site .ss-project-card.ss36-enhanced::after{opacity:1;transform:none}}
@media(max-width:800px){.ss36-gallery-panel{grid-template-columns:1fr;max-width:560px;max-height:92vh;overflow:auto}.ss36-gallery-visual{min-height:260px}.ss36-gallery-visual img{max-height:46vh}.ss36-gallery-detail{padding:24px}}