/* V80 — right-hand Hero photos only. V77/78 design and V79 calculator stay intact. */
body.energy-ui-v77 #hero .hero-composition-v80 {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr); gap:0 20px;
  position:relative; isolation:isolate;
}
body.energy-ui-v77 #hero .hero-roof-v80 {
  grid-column:1/-1; grid-row:1; display:block; position:relative;
  border:1px solid rgba(255,255,255,.6); border-radius:22px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,14,22,.23); background:#dce6e6; cursor:zoom-in;
}
body.energy-ui-v77 #hero .hero-roof-v80>img {
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:contain; object-position:center; transition:filter .2s ease;
}
body.energy-ui-v77 #hero .hero-roof-v80:hover>img { filter:brightness(1.035); }
body.energy-ui-v77 #hero .hero-proof-v80 {
  position:absolute; top:15px; left:15px; display:inline-flex; gap:7px; align-items:center;
  background:#fff; color:#193d50; padding:7px 11px; border-radius:999px;
  font-size:11px; line-height:1.5; font-weight:600; box-shadow:0 2px 12px #00182414;
}
body.energy-ui-v77 #hero .hero-proof-v80 i {width:7px; height:7px; background:#08aa4a; border-radius:50%; flex:none;}
body.energy-ui-v77 #hero .hero-expand-v80 {
  position:absolute; width:34px; height:34px; display:grid; place-items:center;
  right:14px; top:14px; background:#fff; color:#123e51; border-radius:50%;
  box-shadow:0 2px 10px #00182415;
}
body.energy-ui-v77 #hero .hero-expand-v80 svg {width:18px; height:18px;}
body.energy-ui-v77 #hero .hero-system-v80 {
  grid-column:2; grid-row:2; align-self:start; position:relative; z-index:2;
  display:block; margin:-42px 12px 0 -4px; padding:4px 4px 0; background:#fff;
  border-radius:15px; overflow:hidden; border:1px solid #ffffffcc;
  box-shadow:0 14px 36px #00152255; cursor:zoom-in;
  transform:rotate(0deg); transition:transform .2s ease,box-shadow .2s ease;
}
body.energy-ui-v77 #hero .hero-system-v80:hover { transform:translateY(-3px); box-shadow:0 18px 38px #00152266; }
body.energy-ui-v77 #hero .hero-system-v80>img {
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:contain;
  border-radius:10px 10px 0 0; background:#eef1f0;
}
body.energy-ui-v77 #hero .hero-system-label-v80 {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  color:#12394c; padding:8px 5px 9px; line-height:1.4;
}
body.energy-ui-v77 #hero .hero-system-label-v80 b { font-size:11px; font-weight:600; white-space:nowrap; }
body.energy-ui-v77 #hero .hero-system-label-v80 svg {width:15px; height:15px; flex:none; color:#057b95;}
body.energy-ui-v77 #hero .hero-visual-caption-v80 {grid-column:1; grid-row:2; align-self:center; min-width:0; padding:18px 0 8px 2px;}
body.energy-ui-v77 #hero .hero-visual-caption-v80>small {display:block; font-size:9px; letter-spacing:1.8px; font-weight:600; color:#86cabd; line-height:1.6; margin-bottom:9px;}
body.energy-ui-v77 #hero .hero-visual-caption-v80>strong {display:block; font-size:21px; font-weight:600; line-height:1.5; color:#fff;}
body.energy-ui-v77 #hero .hero-visual-caption-v80>p {font-size:12px; font-weight:400; line-height:1.85; color:#b8d0dc; margin:7px 0 15px;}
body.energy-ui-v77 #hero .hero-gallery-link-v80 {
  display:inline-flex; align-items:center; gap:9px; min-height:42px; padding:7px 11px;
  color:#e0f4f3; background:#ffffff08; border:1px solid #b8e8df45; border-radius:9px;
  font-size:12px; line-height:1.5; font-weight:400; transition:background .2s ease;
}
body.energy-ui-v77 #hero .hero-gallery-link-v80:hover {background:#ffffff18;}
body.energy-ui-v77 #hero .hero-gallery-link-v80 b {font-weight:600;}
body.energy-ui-v77 #hero .hero-gallery-link-v80 svg {width:16px; height:16px; flex:none;}
body.energy-ui-v77 #hero .hero-thumbnails-v80 {display:none;}
body.energy-ui-v77 #hero .hero-visual-v80 a:focus-visible {outline:3px solid #8ee3c6; outline-offset:4px;}
/* Native dialog is in the top layer: cookie/banner/header cannot cover controls. */
body.energy-ui-v77.hero-gallery-open-v80 {overflow:hidden!important;}
#hero-gallery-v80 {border:0; padding:0; margin:auto; width:min(1080px,calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 40px); border-radius:19px; background:#fff; color:#10384d; box-shadow:0 24px 100px #0009; font-family:'IBM Plex Sans Thai',Tahoma,sans-serif;}
#hero-gallery-v80:not([open]) {display:none;}
#hero-gallery-v80::backdrop {background:rgba(2,14,22,.87); backdrop-filter:blur(5px);}
#hero-gallery-v80 .hero-dialog-head-v80 {display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #e4edf0;}
#hero-gallery-v80 .hero-dialog-head-v80 small {display:block; font-size:9px; letter-spacing:1.5px; color:#567f8c; line-height:1.4;}
#hero-gallery-v80 .hero-dialog-head-v80 h2 {font-family:inherit; font-size:17px; line-height:1.5; font-weight:600; letter-spacing:0; margin:3px 0 0;}
#hero-gallery-v80 button {font-family:inherit; cursor:pointer;}
#hero-gallery-v80 .hero-dialog-close-v80 {flex:none; width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid #dbe7ec; border-radius:50%; background:#f2f7f8; color:#163e50;}
#hero-gallery-v80 .hero-dialog-close-v80 svg {width:20px; height:20px;}
#hero-gallery-v80 .hero-dialog-stage-v80 {height:min(650px,calc(100dvh - 224px)); min-height:140px; position:relative; background:#edf2f4; touch-action:pan-y;}
#hero-gallery-v80 #hero-gallery-image-v80 {width:100%; height:100%; max-height:none; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none;}
#hero-gallery-v80 .hero-dialog-prev-v80,#hero-gallery-v80 .hero-dialog-next-v80 {position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; padding:0; display:grid; place-items:center; background:#fffffff2; color:#143d51; border:1px solid #d9e5eb; border-radius:50%; box-shadow:0 4px 16px #00182422;}
#hero-gallery-v80 .hero-dialog-prev-v80 {left:12px;}
#hero-gallery-v80 .hero-dialog-next-v80 {right:12px;}
#hero-gallery-v80 .hero-dialog-prev-v80 svg,#hero-gallery-v80 .hero-dialog-next-v80 svg {width:21px; height:21px;}
#hero-gallery-v80 .hero-dialog-caption-v80 {display:flex; gap:14px; justify-content:space-between; align-items:center; min-height:46px; padding:10px 18px 5px; font-size:12px; line-height:1.6;}
#hero-gallery-v80 #hero-gallery-count-v80 {flex:none; color:#698391; font-variant-numeric:tabular-nums;}
#hero-gallery-v80 .hero-dialog-thumbs-v80 {display:flex; justify-content:center; gap:9px; padding:8px 18px 15px; overflow-x:auto;}
#hero-gallery-v80 .hero-dialog-thumbs-v80 button {width:74px; height:53px; flex:none; padding:2px; border:2px solid transparent; border-radius:8px; background:#edf3f5; overflow:hidden;}
#hero-gallery-v80 .hero-dialog-thumbs-v80 img {width:100%; height:100%; object-fit:cover; border-radius:4px;}
#hero-gallery-v80 .hero-dialog-thumbs-v80 button[aria-current="true"] {border-color:#039eaa; background:#d9f5ee;}
#hero-gallery-v80 button:focus-visible {outline:3px solid #008a9b; outline-offset:2px;}
@media (min-width:761px) and (max-width:1000px) {
 body.energy-ui-v77 #hero .hero-composition-v80 {column-gap:12px; grid-template-columns:minmax(0,1fr) minmax(0,.57fr);}
 body.energy-ui-v77 #hero .hero-system-v80 {margin:-20px 0 0 0; border-radius:12px; padding:3px 3px 0;}
 body.energy-ui-v77 #hero .hero-visual-caption-v80>strong {font-size:18px;}
 body.energy-ui-v77 #hero .hero-visual-caption-v80>p {font-size:11px; margin:5px 0 10px;}
 body.energy-ui-v77 #hero .hero-gallery-link-v80 {font-size:11px; gap:6px; padding:7px 8px;}
 body.energy-ui-v77 #hero .hero-proof-v80 {font-size:10px; padding:6px 9px; top:11px; left:11px;}
 body.energy-ui-v77 #hero .hero-expand-v80 {top:11px; right:11px; width:29px; height:29px;}
 body.energy-ui-v77 #hero .hero-system-label-v80 b {font-size:10px;}
}
@media (max-width:760px) {
 body.energy-ui-v77 #hero .hero-composition-v80 {display:flex; flex-direction:column; gap:0;}
 body.energy-ui-v77 #hero .hero-roof-v80 {border-radius:16px;}
 body.energy-ui-v77 #hero .hero-proof-v80 {top:11px; left:11px; padding:6px 9px; font-size:10px;}
 body.energy-ui-v77 #hero .hero-expand-v80 {top:10px; right:10px; width:30px; height:30px;}
 body.energy-ui-v77 #hero .hero-system-v80 {display:none;}
 body.energy-ui-v77 #hero .hero-thumbnails-v80 {display:grid; order:2; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:11px;}
 body.energy-ui-v77 #hero .hero-thumbnails-v80 a {min-width:0; position:relative; display:block; border:1px solid #ffffff75; background:#eff3f4; border-radius:9px; overflow:hidden; cursor:zoom-in;}
 body.energy-ui-v77 #hero .hero-thumbnails-v80 img {width:100%; height:92px; object-fit:cover; object-position:center;}
 body.energy-ui-v77 #hero .hero-thumbnails-v80 a:first-child img {object-position:55% 43%;}
 body.energy-ui-v77 #hero .hero-thumbnails-v80 span {position:absolute; inset:auto 0 0; padding:13px 5px 5px; color:#fff; background:linear-gradient(transparent,#001a2bd9); font-size:10px; text-align:center; font-weight:500; line-height:1.5;}
 body.energy-ui-v77 #hero .hero-visual-caption-v80 {order:3; padding:16px 0 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px;}
 body.energy-ui-v77 #hero .hero-visual-caption-v80>small,body.energy-ui-v77 #hero .hero-visual-caption-v80>p {display:none;}
 body.energy-ui-v77 #hero .hero-visual-caption-v80>strong {font-size:17px;}
 body.energy-ui-v77 #hero .hero-gallery-link-v80 {font-size:11px; min-height:40px; padding:7px 9px; gap:7px;}
 #hero-gallery-v80 {width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:13px;}
 #hero-gallery-v80 .hero-dialog-head-v80 {padding:11px 12px;}
 #hero-gallery-v80 .hero-dialog-head-v80 h2 {font-size:15px;}
 #hero-gallery-v80 .hero-dialog-stage-v80 {height:calc(100dvh - 220px); max-height:690px;}
 #hero-gallery-v80 .hero-dialog-caption-v80 {padding:9px 12px 4px; font-size:11px;}
 #hero-gallery-v80 .hero-dialog-thumbs-v80 {padding:8px 10px 12px; gap:7px;}
 #hero-gallery-v80 .hero-dialog-thumbs-v80 button {width:61px; height:48px;}
 #hero-gallery-v80 .hero-dialog-prev-v80 {left:7px;}
 #hero-gallery-v80 .hero-dialog-next-v80 {right:7px;}
 #hero-gallery-v80 .hero-dialog-prev-v80,#hero-gallery-v80 .hero-dialog-next-v80 {width:40px; height:40px;}
}
@media (prefers-reduced-motion:reduce) {
 body.energy-ui-v77 #hero .hero-system-v80,body.energy-ui-v77 #hero .hero-roof-v80>img,body.energy-ui-v77 #hero .hero-gallery-link-v80 {transition:none;}
}

/* Keep the new caption compact despite older global Hero paragraph rules. */
body.energy-ui-v77 #hero .hero-visual-caption-v80>p {font-size:13px!important; line-height:1.8!important; margin:7px 0 15px!important; font-weight:400!important;}
@media (min-width:761px) and (max-width:1000px) {body.energy-ui-v77 #hero .hero-visual-caption-v80>p {font-size:11px!important; margin:5px 0 10px!important;}}