/* Vendors */ /** * Swiper 12.1.3 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2026 Vladimir Kharlampidi * * Released under the MIT License * * Released on: March 24, 2026 */ :root{--swiper-theme-color:#007aff} :host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1} .swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1} .swiper-vertical>.swiper-wrapper{flex-direction:column} .swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1} .swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)} .swiper-horizontal{touch-action:pan-y} .swiper-vertical{touch-action:pan-x} .swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%} .swiper-slide-invisible-blank{visibility:hidden} .swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto} .swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height} .swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)} .swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px} .swiper-3d .swiper-wrapper{transform-style:preserve-3d} .swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}} .swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}} .swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}} .swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10} .swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}} .swiper-lazy-preloader-white{--swiper-preloader-color:#fff} .swiper-lazy-preloader-black{--swiper-preloader-color:#000} @keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}} .swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)} .swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}} .swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}} .swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}} :root{--swiper-navigation-size:44px} .swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}::slotted(svg),svg{height:100%;-o-object-fit:contain;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}} .swiper-button-lock{display:none} .swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)} .swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}} .swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)} .swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(0deg)}}} .swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(90deg)}}} .swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}} .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%} .swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}} .swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}} .swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)} .swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}} .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}} .swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s} .swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)} .swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}} .swiper-pagination-lock{display:none} .swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}} .swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%} .swiper-scrollbar-cursor-drag{cursor:move} .swiper-scrollbar-lock{display:none} .swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}} .swiper-slide-zoomed{cursor:move;touch-action:none} .swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000} .swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out} .swiper-grid>.swiper-wrapper{flex-wrap:wrap} .swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap} .swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}} .swiper.swiper-cube{overflow:visible} .swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}} .swiper.swiper-flip{overflow:visible} .swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}} .swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}} .swiper.swiper-cards{overflow:visible} .swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}} /* ─── Pagination base ─── */ .swiper-pagination-bullet{pointer-events:auto;position:relative;height:3px;overflow:hidden;border-radius:0.75rem;transition-property:opacity;transition-duration:500ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)} .swiper-pagination-bullet-active { opacity: 1; } .swiper-pagination-bullet-active::after { content: ""; position:absolute; left:0px; top:0px; height:100%; } @keyframes fillbar{ from{width:0%} to{width:100%}} .swiper-pagination-bullet-active::after{animation:fillbar .3s linear forwards} /* ─── Controls base ─── */ .swiper-btn-prev, .swiper-btn-next{pointer-events:auto;height:1.5rem;width:1.5rem} .pagination-bar{pointer-events:auto;position:static;display:flex;width:-moz-fit-content !important;width:fit-content !important;align-items:center;gap:0.75rem} :root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-shadow: none;--f-button-transition: all .15s ease;--f-button-transform: none;--f-button-outline-width: 1px;--f-button-outline-color: rgba(0, 0, 0, .7);--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-opacity: 1;--f-button-svg-disabled-opacity: .5;--f-button-svg-transition: opacity .15s ease;--f-button-svg-transform: none} .f-button{width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);transform:var(--f-button-transform);transition:var(--f-button-transition);backdrop-filter:var(--f-button-backdrop-filter);display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;pointer-events:all;cursor:pointer;overflow:hidden} @media(hover:hover){.f-button:hover:not([aria-disabled]){color:var(--f-button-hover-color, var(--f-button-color));background-color:var(--f-button-hover-bg, var(--f-button-bg))}} .f-button:active:not([aria-disabled]){color:var(--f-button-active-color, var(--f-button-hover-color, var(--f-button-color)));background-color:var(--f-button-active-bg, var(--f-button-hover-bg, var(--f-button-bg)))} .f-button:focus{outline:none} .f-button:focus-visible{outline:var(--f-button-outline-width) solid var(--f-button-outline-color);outline-offset:var(--f-button-outline-offset)} .f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);transform:var(--f-button-svg-transform);fill:var(--f-button-svg-fill);filter:var(--f-button-svg-filter);opacity:var(--f-button-svg-opacity, 1);transition:var(--f-button-svg-transition);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .f-button[aria-disabled]{cursor:default} .f-button[aria-disabled] svg{opacity:var(--f-button-svg-disabled-opacity)} [data-panzoom-action=toggleFS] g:first-child{display:flex} [data-panzoom-action=toggleFS] g:last-child{display:none} .in-fullscreen [data-panzoom-action=toggleFS] g:first-child{display:none} .in-fullscreen [data-panzoom-action=toggleFS] g:last-child{display:flex} [data-autoplay-action=toggle] svg g:first-child{display:flex} [data-autoplay-action=toggle] svg g:last-child{display:none} .has-autoplay [data-autoplay-action=toggle] svg g:first-child{display:none} .has-autoplay [data-autoplay-action=toggle] svg g:last-child{display:flex} :fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:first-child{display:none} :fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:last-child{display:flex} :root{--f-spinner-color-1: rgba(0, 0, 0, .1);--f-spinner-color-2: rgba(17, 24, 28, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px} .f-spinner{position:absolute;top:50%;left:50%;margin:0;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height);translate:-50% -50%;border:var(--f-spinner-border-width) solid var(--f-spinner-color-1);border-top-color:var(--f-spinner-color-2);border-radius:var(--f-spinner-border-radius);animation:f-spinner .75s linear infinite,f-fadeIn .2s ease .2s both} @keyframes f-spinner{to{rotate:360deg}} .f-panzoom,.f-zoomable{position:relative;overflow:hidden;display:flex;align-items:center;flex-direction:column} .f-panzoom:before,.f-panzoom:after,.f-zoomable:before,.f-zoomable:after{display:block;content:""} .f-panzoom:not(.has-controls):before,.f-zoomable:not(.has-controls):before{margin-bottom:auto} .f-panzoom:after,.f-zoomable:after{margin-top:auto} .f-panzoom.in-fullscreen,.f-zoomable.in-fullscreen{position:fixed;top:0;left:0;margin:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:unset!important;z-index:9999} .f-panzoom__wrapper{position:relative;min-width:0;min-height:0;max-width:100%;max-height:100%} .f-panzoom__wrapper.will-zoom-out{cursor:zoom-out} .f-panzoom__wrapper.can-drag{cursor:move;cursor:grab} .f-panzoom__wrapper.will-zoom-in{cursor:zoom-in} .f-panzoom__wrapper.is-dragging{cursor:move;cursor:grabbing} .f-panzoom__wrapper.has-error{display:none} .f-panzoom__content{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%} .f-panzoom__content.is-lazyloading,.f-panzoom__content.has-lazyerror{visibility:hidden} img.f-panzoom__content{width:auto;height:auto;vertical-align:top;-o-object-fit:contain;object-fit:contain;transition:none;-webkit-user-select:none;-moz-user-select:none;user-select:none} .f-panzoom__wrapper>.f-panzoom__content{visibility:hidden} .f-panzoom__viewport{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10} .f-panzoom__viewport>.f-panzoom__content{width:100%;height:100%;-o-object-fit:fill;object-fit:fill} picture.f-panzoom__content img{vertical-align:top;width:100%;height:auto;max-height:100%;-o-object-fit:contain;object-fit:contain;transition:none;-webkit-user-select:none;-moz-user-select:none;user-select:none} .f-panzoom__protected{position:absolute;inset:0;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none} html.with-panzoom-in-fullscreen{overflow:hidden} .f-fadeIn{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;z-index:2} .f-fadeOut{animation:var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;z-index:1} @keyframes f-fadeIn{0%{opacity:0}to{opacity:1}} @keyframes f-fadeOut{to{opacity:0}} .f-crossfadeIn{animation:var(--f-transition-duration, .2s) ease both f-crossfadeIn;z-index:2} .f-crossfadeOut{animation:calc(var(--f-transition-duration, .2s) * .2) ease calc(var(--f-transition-duration, .2s) * .8) both f-crossfadeOut;z-index:1} @keyframes f-crossfadeIn{0%{opacity:0}to{opacity:1}} @keyframes f-crossfadeOut{to{opacity:0}} .is-horizontal .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextX} .is-horizontal .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevX} .is-horizontal .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextX} .is-horizontal .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevX} @keyframes f-slideInPrevX{0%{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}} @keyframes f-slideInNextX{0%{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}} @keyframes f-slideOutNextX{to{transform:translate(calc(-100% - var(--f-carousel-gap, 0)))}} @keyframes f-slideOutPrevX{to{transform:translate(calc(100% + var(--f-carousel-gap, 0)))}} .is-vertical .f-slideIn.from-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInNextY} .is-vertical .f-slideIn.from-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideInPrevY} .is-vertical .f-slideOut.to-next{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutNextY} .is-vertical .f-slideOut.to-prev{animation:var(--f-transition-duration, .85s) cubic-bezier(.16,1,.3,1) f-slideOutPrevY} @keyframes f-slideInPrevY{0%{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}} @keyframes f-slideInNextY{0%{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}to{transform:translateZ(0)}} @keyframes f-slideOutNextY{to{transform:translateY(calc(-100% - var(--f-carousel-gap, 0)))}} @keyframes f-slideOutPrevY{to{transform:translateY(calc(100% + var(--f-carousel-gap, 0)))}} .f-zoomInUp{animation:var(--f-transition-duration, .3s) ease both f-zoomInUp} .f-zoomOutDown{animation:var(--f-transition-duration, .3s) ease both f-zoomOutDown} @keyframes f-zoomInUp{0%{transform:scale(var(--f-zoomInUp-scale, .975)) translate3d(var(--f-zoomInUp-x, 0),var(--f-zoomInUp-y, 16px),0);opacity:var(--f-zoomInUp-opacity, 0)}to{transform:scale(1) translateZ(0);opacity:1}} @keyframes f-zoomOutDown{to{transform:scale(var(--f-zoomOutDown-scale, .975)) translate3d(var(--f-zoomOutDown-x, 0),var(--f-zoomOutDown-y, 16px),0);opacity:0}} .f-throwOutUp{animation:var(--f-throwOutUp-duration, .2s) ease-out both f-throwOutUp} .f-throwOutDown{animation:var(--f-throwOutDown-duration, .2s) ease-out both f-throwOutDown} @keyframes f-throwOutUp{to{transform:translate3d(0,calc(var(--f-throwOutUp-y, 150px) * -1),0);opacity:0}} @keyframes f-throwOutDown{to{transform:translate3d(0,var(--f-throwOutDown-y, 150px),0);opacity:0}} .has-iframe .f-html,.has-pdf .f-html,.has-gmap .f-html{width:100%;height:100%;min-height:1px;overflow:visible} .has-pdf .f-html,.has-gmap .f-html{padding:0} .f-html{position:relative;box-sizing:border-box;margin:var(--f-html-margin, 0);padding:var(--f-html-padding, 2rem);color:var(--f-html-color, currentColor);background:var(--f-html-bg)} .is-loading>.f-html{opacity:0} .f-html.is-error{text-align:center} .f-iframe{display:block;margin:0;border:0;height:100%;width:100%} .f-caption{align-self:center;flex-shrink:0;margin:var(--f-caption-margin);padding:var(--f-caption-padding, 16px 8px);max-width:100%;max-height:calc(80vh - 100px);overflow:auto;overflow-wrap:anywhere;line-height:var(--f-caption-line-height);color:var(--f-caption-color);background:var(--f-caption-bg);font:var(--f-caption-font);text-wrap:balance} .has-html5video .f-html,.has-youtube .f-html,.has-vimeo .f-html{padding:0;width:100%;height:100%;min-height:1px;overflow:visible;max-width:var(--f-video-width, 960px);max-height:var(--f-video-height, 540px);aspect-ratio:var(--f-video-aspect-ratio);background:var(--f-video-bg, rgba(0, 0, 0, .9))} .f-html5video{border:0;display:block;height:100%;width:100%;background:transparent} .f-button.is-arrow{--f-button-width: var(--f-arrow-width, 46px);--f-button-height: var(--f-arrow-height, 46px);--f-button-svg-width: var(--f-arrow-svg-width, 24px);--f-button-svg-height: var(--f-arrow-svg-height, 24px);--f-button-svg-stroke-width: var(--f-arrow-svg-stroke-width, 1.75);--f-button-border-radius: var(--f-arrow-border-radius, unset);--f-button-bg: var(--f-arrow-bg, transparent);--f-button-hover-bg: var(--f-arrow-hover-bg, var(--f-arrow-bg));--f-button-active-bg: var(--f-arrow-active-bg, var(--f-arrow-hover-bg));--f-button-shadow: var(--f-arrow-shadow);--f-button-color: var(--f-arrow-color);--f-button-hover-color: var(--f-arrow-hover-color, var(--f-arrow-color));--f-button-active-color: var( --f-arrow-active-color, var(--f-arrow-hover-color) );overflow:visible} .f-button.is-arrow.is-prev,.f-button.is-arrow.is-next{position:absolute;transform:translate(0);z-index:20} .is-horizontal .f-button.is-arrow.is-prev,.is-horizontal .f-button.is-arrow.is-next{inset:50% auto auto;transform:translateY(-50%)} .is-horizontal.is-ltr .f-button.is-arrow.is-prev{left:var(--f-arrow-pos, 0)} .is-horizontal.is-ltr .f-button.is-arrow.is-next{right:var(--f-arrow-pos, 0)} .is-horizontal.is-rtl .f-button.is-arrow.is-prev{right:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)} .is-horizontal.is-rtl .f-button.is-arrow.is-next{left:var(--f-arrow-pos, 0);transform:translateY(-50%) rotateY(180deg)} .is-vertical.is-ltr .f-button.is-arrow.is-prev,.is-vertical.is-rtl .f-button.is-arrow.is-prev{top:var(--f-arrow-pos, 0);right:auto;bottom:auto;left:50%;transform:translate(-50%)} .is-vertical.is-ltr .f-button.is-arrow.is-next,.is-vertical.is-rtl .f-button.is-arrow.is-next{top:auto;right:auto;bottom:var(--f-arrow-pos, 0);left:50%;transform:translate(-50%)} .is-vertical .f-button.is-arrow.is-prev svg,.is-vertical .f-button.is-arrow.is-next svg{transform:rotate(90deg)} .f-carousel__toolbar{display:grid;grid-template-columns:1fr auto 1fr;margin:var(--f-toolbar-margin, 0);padding:var(--f-toolbar-padding, 8px);line-height:var(--f-toolbar-line-height);background:var(--f-toolbar-bg, none);box-shadow:var(--f-toolbar-shadow, none);backdrop-filter:var(--f-toolbar-backdrop-filter);position:relative;z-index:20;color:var(--f-toolbar-color, currentColor);font-size:var(--f-toolbar-font-size, 17px);font-weight:var(--f-toolbar-font-weight, inherit);font-family:var(--f-toolbar-font, -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif);text-shadow:var(--f-toolbar-text-shadow);text-align:center;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;white-space:nowrap;pointer-events:none} .f-carousel__toolbar.is-absolute{position:absolute;top:0;left:0;right:0} .f-carousel__toolbar .f-button:focus-visible{position:relative;z-index:1} .f-carousel__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:var(--f-toolbar-gap, 0)} .f-carousel__toolbar__column.is-left{display:flex;justify-self:flex-start;justify-content:flex-start} .f-carousel__toolbar__column.is-middle{display:flex;justify-content:center} .f-carousel__toolbar__column.is-right{display:flex;justify-self:flex-end;justify-content:flex-end;flex-flow:nowrap} .f-carousel__toolbar__column{pointer-events:none} .f-carousel__toolbar__column>*{pointer-events:all} .f-counter{position:relative;display:flex;flex-direction:row;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin:var(--f-counter-margin, 0);padding:var(--f-counter-padding, 4px);line-height:var(--f-counter-line-height);background:var(--f-counter-bg);border-radius:var(--f-counter-border-radius)} .f-counter span{padding:0 var(--f-counter-gap, 4px)} :root{--f-thumbs-gap: 8px;--f-thumbs-margin: 0;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-bg: transparent;--f-thumbs-transition: max-height .3s ease, max-width .3s ease, padding .3s ease;--f-thumbs-z-index: 1;--f-thumbs-viewport-padding-x: 0px;--f-thumbs-viewport-padding-y: 0px;--f-thumb-width: 94px;--f-thumb-height: 76px;--f-thumb-clip-width: 46px;--f-thumb-extra-gap: 16px;--f-thumb-opacity: 1;--f-thumb-transition: opacity .3s ease, transform .15s ease;--f-thumb-border: none;--f-thumb-border-radius: 4px;--f-thumb-shadow: none;--f-thumb-bg: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .05));--f-thumb-focus-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;--f-thumb-selected-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;--f-thumb-border-transition: all .1s ease;--f-thumb-img-width: 100%;--f-thumb-img-height: 100%;--f-thumb-img-fit: cover;--f-thumb-img-position: 50% 20%} .f-thumbs{--f-carousel-slide-width: var(--f-thumb-width);--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: var(--f-thumbs-gap);position:relative;box-sizing:border-box;flex-shrink:0;margin:var(--f-thumbs-margin);padding:var(--f-thumbs-padding-y) var(--f-thumbs-padding-x);overflow:hidden;background:var(--f-thumbs-bg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:var(--f-thumbs-transition);z-index:var(--f-thumbs-z-index)} .f-thumbs.is-horizontal{max-height:calc(var(--f-carousel-slide-height) + var(--f-thumbs-padding-y) * 2)} .f-thumbs.is-horizontal.is-hidden{max-height:0;--f-thumbs-padding-y: 0} .f-thumbs.is-vertical{max-width:calc(var(--f-carousel-slide-width) + var(--f-thumbs-padding-x) * 2)} .f-thumbs.is-vertical.is-hidden{max-width:0;--f-thumbs-padding-x: 0} .f-thumbs.is-scrollable.is-hidden{max-height:0;--f-thumbs-padding-y: 0} .f-thumbs.is-ltr{direction:ltr} .f-thumbs.is-rtl{direction:rtl} .f-thumbs img{display:block;width:var(--f-thumb-img-width);height:var(--f-thumb-img-height);-o-object-fit:var(--f-thumb-img-fit);object-fit:var(--f-thumb-img-fit);-o-object-position:var(--f-thumb-img-position);object-position:var(--f-thumb-img-position);pointer-events:none;border-radius:inherit;color:transparent} .f-thumbs img[data-lazy-src]{visibility:hidden} .f-thumbs img.has-lazyerror{display:none} .f-thumbs__viewport{box-sizing:border-box;height:100%;padding:var(--f-thumbs-viewport-padding-y) var(--f-thumbs-viewport-padding-x);overflow:visible;display:grid} .f-thumbs__slide{position:relative;box-sizing:border-box;grid-area:1/1;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);margin:0;padding:0;display:flex;align-items:center;flex-direction:column;cursor:pointer;overflow:visible} .f-thumbs__slide:hover button{opacity:var(--f-thumb-hover-opacity, 1);transform:var(--f-thumb-hover-transform, none)} .f-thumbs__slide:hover button:after{border:var(--f-thumb-hover-border, none);box-shadow:var(--f-thumb-hover-shadow, var(--f-thumb-shadow))} .f-thumbs__slide button{all:unset;display:block;margin:auto;padding:0;position:relative;overflow:visible;width:100%;height:100%;outline:none;transition:var(--f-thumb-transition);border-radius:var(--f-thumb-border-radius);opacity:var(--f-thumb-opacity);transform:var(--f-thumb-transform);background:var(--f-thumb-bg)} .f-thumbs__slide button:after{content:"";position:absolute;inset:0;z-index:1;transition:var(--f-thumb-border-transition);border-radius:inherit;border:var(--f-thumb-border);box-shadow:var(--f-thumb-shadow)} .f-thumbs__slide button:focus-within{opacity:var(--f-thumb-focus-opacity, 1);transform:var(--f-thumb-focus-transform, none)} .f-thumbs__slide button:focus-within:after{border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, var(--f-thumb-shadow))} .f-thumbs__slide:active{opacity:var(--f-thumb-active-opacity, 1);transform:var(--f-thumb-active-transform, none)} .f-thumbs__slide:active:after{border:var(--f-thumb-active-border, none);box-shadow:var(--f-thumb-active-shadow, var(--f-thumb-shadow))} .f-thumbs__slide.is-selected{z-index:2} .f-thumbs__slide.is-selected button{opacity:var(--f-thumb-selected-opacity, 1);transform:var(--f-thumb-selected-transform, none)} .f-thumbs__slide.is-selected button:after{border:var(--f-thumb-selected-border, none);box-shadow:var(--f-thumb-selected-shadow, var(--f-thumb-shadow))} .f-thumbs.is-modern{--f-carousel-slide-width: calc( var(--f-thumb-clip-width) + var(--f-thumbs-gap) );--f-carousel-slide-height: var(--f-thumb-height);--f-carousel-gap: 0;--width-diff: calc((var(--f-thumb-width) - var(--f-thumb-clip-width)))} .f-thumbs.is-modern .f-thumbs__viewport{width:calc(100% + var(--f-carousel-slide-width) * 2 + var(--f-thumbs-padding-x));margin-inline:calc((var(--f-carousel-slide-width) + var(--f-thumbs-padding-x)) * -1)} .f-thumbs.is-modern .f-thumbs__slide{--clip-shift: calc((var(--width-diff) * .5) * var(--progress));--clip-path: inset( 0 var(--clip-shift) round var(--f-thumb-border-radius, 0) );padding:0;overflow:visible;left:var(--shift, 0);will-change:left;transition:left var(--f-transition-duration) var(--f-transition-easing)} .f-thumbs.is-modern .f-thumbs__slide button{display:block;margin-inline:50%;width:var(--f-thumb-width);clip-path:var(--clip-path);border:none;box-shadow:none;transition:clip-path var(--f-transition-duration) var(--f-transition-easing),opacity var(--f-thumb-transition-duration, .2s) var(--f-thumb-transition-easing, ease)} .f-thumbs.is-modern .f-thumbs__slide button:after{display:none} .f-thumbs.is-modern .f-thumbs__slide:focus:not(:focus-visible){outline:none} .f-thumbs.is-modern .f-thumbs__slide:focus-within:not(.is-selected) button:before{content:"";position:absolute;z-index:1;top:0;left:var(--clip-shift);bottom:0;right:var(--clip-shift);transition:border var(--f-transition-duration) var(--f-transition-easing),box-shadow var(--f-transition-duration) var(--f-transition-easing);border-radius:inherit;border:var(--f-thumb-focus-border, none);box-shadow:var(--f-thumb-focus-shadow, none)} .f-thumbs.is-modern{--f-transition-duration: .25s;--f-transition-easing: ease-out} .f-thumbs.is-modern.is-syncing{--f-transition-duration: 0s} .f-thumbs.is-scrollable .f-thumbs__viewport{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--f-thumb-width),1fr));grid-auto-rows:var(--f-thumb-height);gap:var(--f-thumbs-gap);overflow:auto;overscroll-behavior:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none} .f-thumbs.is-scrollable .f-thumbs__viewport .f-thumbs__slide{grid-area:auto;display:block;position:relative;max-width:100%;width:var(--f-thumb-width);height:var(--f-thumb-height);cursor:pointer;outline:none} :root{--f-progressbar-height: 3px;--f-progressbar-color: var(--f-carousel-theme-color, #575ad6);--f-progressbar-opacity: 1;--f-progressbar-z-index: 30} .f-progressbar{position:absolute;top:0;left:0;right:0;z-index:var(--f-progressbar-z-index);height:var(--f-progressbar-height);transform:scaleX(0);transform-origin:0;opacity:var(--f-progressbar-opacity);background:var(--f-progressbar-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;animation-name:f-progressbar;animation-play-state:running;animation-timing-function:linear} .f-progressbar:empty{display:block} button>.f-progressbar{--f-progressbar-height: 100%;--f-progressbar-opacity: .2} @keyframes f-progressbar{0%{transform:scaleX(0)}to{transform:scaleX(1)}} [data-fullscreen-action=toggle] svg g:first-child{display:flex} [data-fullscreen-action=toggle] svg g:last-child{display:none} :fullscreen [data-fullscreen-action=toggle] svg g:first-child{display:none} :fullscreen [data-fullscreen-action=toggle] svg g:last-child{display:flex} .in-fullscreen-mode>.f-carousel{flex:1;min-width:0!important;min-height:0!important} html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto} html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px));overflow:hidden!important;overscroll-behavior-y:none} .fancybox__dialog{position:fixed;inset:0;z-index:1050;width:100%;height:100vh;max-height:unset;max-width:unset;padding:0;margin:0;border:0;overflow:hidden;background:transparent;touch-action:none;overscroll-behavior:contain} .fancybox__dialog:focus{outline:none} .fancybox__dialog::backdrop{opacity:0} @supports (height: 100dvh){.fancybox__dialog{height:100dvh}} .fancybox__dialog *:empty{display:block} .fancybox__container{--fancybox-color: #dbdbdb;--fancybox-backdrop-bg: rgba(24, 24, 27, .95);--f-toolbar-margin: 0;--f-toolbar-padding: 8px;--f-toolbar-gap: 0;--f-toolbar-color: #ddd;--f-toolbar-font-size: 16px;--f-toolbar-font-weight: 500;--f-toolbar-font: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;--f-toolbar-line-height: var(--f-button-height);--f-toolbar-text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);--f-toolbar-shadow: none;--f-toolbar-bg: none;--f-counter-margin: 0;--f-counter-padding: 0px 10px;--f-counter-gap: 4px;--f-counter-line-height: var(--f-button-height);--f-carousel-gap: 17px;--f-carousel-slide-width: 100%;--f-carousel-slide-height: 100%;--f-carousel-slide-padding: 0;--f-carousel-slide-bg: unset;--f-html-color: #222;--f-html-bg: #fff;--f-error-color: #fff;--f-error-bg: #333;--f-caption-margin: 0;--f-caption-padding: 16px 8px;--f-caption-color: var(--fancybox-color, #dbdbdb);--f-caption-bg: transparent;--f-caption-font: inherit;--f-caption-line-height: 1.375;--f-spinner-color-1: rgba(255, 255, 255, .2);--f-spinner-color-2: rgba(255, 255, 255, .8);--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-border-radius: 50%;--f-spinner-border-width: 4px;--f-progressbar-color: rgba(255, 255, 255);--f-button-width: 46px;--f-button-height: 46px;--f-button-color: #ddd;--f-button-hover-color: #fff;--f-button-outline-width: 1px;--f-button-outline-color: rgba(255, 255, 255, .75);--f-button-outline-offset: 0px;--f-button-bg: rgba(54, 54, 54, .75);--f-button-border: 0;--f-button-border-radius: 0;--f-button-shadow: none;--f-button-transition: all .2s ease;--f-button-transform: none;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.75;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .01)), drop-shadow(1px 2px 1px rgba(24, 24, 27, .05));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: .5;--f-arrow-pos: 32px;--f-arrow-width: 50px;--f-arrow-height: 50px;--f-arrow-svg-width: 24px;--f-arrow-svg-height: 24px;--f-arrow-svg-stroke-width: 2.5;--f-arrow-border-radius: 50%;--f-arrow-bg: rgba(54, 54, 54, .65);--f-arrow-color: #ddd;--f-arrow-hover-color: #fff;--f-close-button-width: 30px;--f-close-button-height: 30px;--f-close-button-svg-width: 24px;--f-close-button-svg-height: 24px;--f-close-button-svg-stroke-width: 1.75;--f-close-border-radius: 4px;--f-close-button-color: #fff;--f-close-button-hover-color: #fff;--f-close-button-bg: transparent;--f-close-button-hover-bg: transparent;--f-close-button-active-bg: transparent;--f-thumbs-margin: 0px;--f-thumbs-padding-x: 8px;--f-thumbs-padding-y: 8px;--f-thumbs-bg: none;--f-thumb-transition: all .2s ease;--f-thumb-width: 94px;--f-thumb-height: 76px;--f-thumb-opacity: 1;--f-thumb-border: none;--f-thumb-shadow: none;--f-thumb-transform: none;--f-thumb-focus-opacity: 1;--f-thumb-focus-border: none;--f-thumb-focus-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);--f-thumb-focus-transform: none;--f-thumb-hover-opacity: 1;--f-thumb-hover-border: none;--f-thumb-hover-transform: none;--f-thumb-active-opacity: var(--f-thumb-hover-opacity);--f-thumb-active-border: var(--f-thumb-hover-border);--f-thumb-active-transform: var(--f-thumb-hover-transform);--f-thumb-selected-opacity: 1;--f-thumb-selected-border: none;--f-thumb-selected-shadow: inset 0 0 0 2px #fff;--f-thumb-selected-transform: none;--f-scrollbar-width: 7px;--f-scrollbar-track-bg: #444;--f-scrollbar-track-border-radius: 10px;--f-scrollbar-track-shadow: inset 0 0 6px rgba(0, 0, 0, .2);--f-scrollbar-thumb-bg: #ddd;--f-scrollbar-thumb-border-radius: 10px} .fancybox__container[theme=light]{--fancybox-color: #222;--fancybox-backdrop-bg: rgba(255, 255, 255, .97);--f-toolbar-color: var(--fancybox-color, #222);--f-toolbar-text-shadow: none;--f-toolbar-font-weight: 400;--f-html-color: var(--fancybox-color, #222);--f-html-bg: #fff;--f-error-color: #555;--f-error-bg: #fff;--f-video-bg: #fff;--f-caption-color: #333;--f-spinner-color-1: rgba(0, 0, 0, .2);--f-spinner-color-2: rgba(0, 0, 0, .8);--f-spinner-border-width: 3.5px;--f-progressbar-color: rgba(111, 111, 116);--f-button-color: #333;--f-button-hover-color: #000;--f-button-outline-color: rgba(0, 0, 0, .85);--f-button-bg: rgba(255, 255, 255, .85);--f-button-svg-stroke-width: 1.3;--f-button-svg-filter: none;--f-arrow-bg: rgba(255, 255, 255, .85);--f-arrow-color: #333;--f-arrow-hover-color: #000;--f-arrow-svg-stroke-width: 1.3;--f-close-button-color: #555;--f-close-button-hover-color: #000;--f-thumb-bg: linear-gradient(#ebeff2, #e2e8f0);--f-thumb-focus-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #888;--f-thumb-selected-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #000;--f-scrollbar-track-bg: #ddd;--f-scrollbar-thumb-bg: #444} .fancybox__container{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column} .fancybox__container:focus{outline:none} .fancybox__container.has-vertical-thumbs{flex-direction:row-reverse} .fancybox__container.has-vertical-thumbs:not(.is-closing) .fancybox__viewport{overflow-x:clip;overflow-y:visible} .fancybox__container>*:not(.fancybox__carousel),.fancybox__container .fancybox__carousel>*:not(.fancybox__grid,.fancybox__viewport),.fancybox__container .fancybox__column>*:not(.fancybox__viewport),.fancybox__container .fancybox__slide:not(.is-selected),.fancybox__container .fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper,.f-spinner){opacity:var(--f-drag-opacity, 1)} .fancybox__container:not(.is-ready,.is-hiding){visibility:hidden} .fancybox__container.is-revealing>*:not(.fancybox__carousel),.fancybox__container.is-revealing .fancybox__carousel>*:not(.fancybox__grid,.fancybox__viewport),.fancybox__container.is-revealing .fancybox__column>*:not(.fancybox__viewport),.fancybox__container.is-revealing .fancybox__slide:not(.is-selected),.fancybox__container.is-revealing .fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper){animation:var(--f-interface-enter-duration, .35s) ease none f-fadeIn} .fancybox__container.is-hiding>*:not(.fancybox__carousel),.fancybox__container.is-hiding .fancybox__carousel>*:not(.fancybox__grid,.fancybox__viewport),.fancybox__container.is-hiding .fancybox__column>*:not(.fancybox__viewport),.fancybox__container.is-hiding .fancybox__slide.is-selected>*:not(.f-html,.f-panzoom__wrapper){animation:var(--f-interface-exit-duration, .35s) ease forwards f-fadeOut} .fancybox__container.is-hiding .fancybox__carousel .fancybox__slide:not(.is-selected){opacity:0} .fancybox__container.is-hiding{pointer-events:none} .fancybox__container.is-idle .f-carousel__toolbar{pointer-events:none;opacity:0} .fancybox__container.is-idle .f-button.is-arrow{opacity:0} .fancybox__container.is-idle.is-ready .f-carousel__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut} .fancybox__container.is-idle.is-ready .f-button.is-arrow{animation:.15s ease-out both f-fadeOut} .fancybox__backdrop{position:fixed;inset:0;z-index:-1;background:var(--fancybox-backdrop-bg);filter:var(--fancybox-backdrop-filter)} .fancybox__carousel{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;z-index:10;overflow-y:visible;overflow-x:clip} .fancybox__carousel.is-vertical{--f-carousel-slide-height: 100%} .fancybox__carousel.is-ltr{direction:ltr} .fancybox__carousel.is-rtl{direction:rtl} .fancybox__carousel>.f-button.is-arrow:before{position:absolute;content:"";inset:-30px;z-index:1} .fancybox__viewport{display:grid;flex:1;min-height:0;min-width:0;position:relative;overflow:visible;transform:translate3d(0,var(--f-drag-offset, 0),0)} .fancybox__viewport.is-draggable{cursor:move;cursor:grab} .fancybox__viewport.is-dragging{cursor:move;cursor:grabbing} .fancybox__viewport [data-selectable],.fancybox__viewport [contenteditable]{cursor:auto} .fancybox__slide{box-sizing:border-box;position:relative;grid-area:1/1;display:flex;align-items:center;flex-direction:column;width:var(--f-carousel-slide-width);height:var(--f-carousel-slide-height);min-width:0;min-height:0;max-width:100%;margin:0;padding:var(--f-carousel-slide-padding);background:var(--f-carousel-slide-bg);backface-visibility:hidden;transform:translateZ(0);will-change:transform} .fancybox__slide:before,.fancybox__slide:after{display:block;content:""} .fancybox__slide:before{margin-bottom:auto} .fancybox__slide:after{margin-top:auto} .fancybox__slide.is-selected{z-index:1} .fancybox__slide.f-zoomable{overflow:visible} .fancybox__slide.has-error{--f-html-color: var(--f-error-color, --f-html-color);--f-html-bg: var(--f-error-bg, --f-html-bg)} .fancybox__slide.has-html{overflow:auto;padding:8px} .fancybox__slide.has-iframe{overflow:hidden;padding:8px 0} .fancybox__slide.has-close-btn{padding-top:34px} .fancybox__slide.has-controls:before{margin:0} .fancybox__slide .f-spinner{cursor:pointer} .fancybox__container.is-closing .f-caption,.fancybox__slide.is-loading .f-caption{visibility:hidden} .fancybox__container.is-closing .fancybox__carousel,.fancybox__container.is-closing .fancybox__viewport,.fancybox__container.is-closing .fancybox__slide.is-selected{overflow:visible} .f-button.is-close-button{--f-button-width: var(--f-close-button-width);--f-button-height: var(--f-close-button-height);--f-button-border-radius: var(--f-close-border-radius);--f-button-color: var(--f-close-button-color);--f-button-hover-color: var(--f-close-button-hover-color);--f-button-bg: var(--f-close-button-bg);--f-button-hover-bg: var(--f-close-button-hover-bg);--f-button-active-bg: var(--f-close-button-active-bg);--f-button-svg-width: var(--f-close-button-svg-width);--f-button-svg-height: var(--f-close-button-svg-height);--f-button-svg-stroke-width: var(--f-close-button-svg-stroke-width);position:absolute;top:calc((var(--f-button-height) + 2px) * -1);right:0;z-index:10} .is-loading .f-button.is-close-button{visibility:hidden} .fancybox__thumbs{flex:0 1 100%} .fancybox__thumbs.is-scrollable{--f-thumbs-cols: 1;--f-thumbs-gap: 8px;--f-thumbs-transition: none;--f-thumbs-padding-x: 4px;--f-thumbs-padding-y: 8px;--f-thumbs-viewport-padding-x: 4px;--f-thumbs-viewport-padding-y: 0px;max-width:calc(var(--f-thumb-width) * var(--f-thumbs-cols) + var(--f-thumbs-gap) * (var(--f-thumbs-cols) - 1) + var(--f-thumbs-padding-x) * 2 + var(--f-thumbs-viewport-padding-x) * 2)} .fancybox__thumbs.is-scrollable ::-webkit-scrollbar{width:var(--f-scrollbar-width)} .fancybox__thumbs.is-scrollable ::-webkit-scrollbar-track{background:var(--f-scrollbar-track-bg);border-radius:var(--f-scrollbar-track-border-radius);box-shadow:var(--f-scrollbar-track-shadow)} .fancybox__thumbs.is-scrollable ::-webkit-scrollbar-thumb{background:var(--f-scrollbar-thumb-bg);border-radius:var(--f-scrollbar-thumb-border-radius)} .fancybox__thumbs.is-scrollable.is-hidden{max-width:0;--f-thumbs-padding-x: 0;max-height:unset;--f-thumbs-padding-y: unset} .fancybox__thumbs.is-scrollable .f-thumbs__viewport{overflow-x:hidden!important;grid-template-columns:repeat(auto-fill,calc((100% - var(--f-thumbs-gap) * (var(--f-thumbs-cols) - 1)) / var(--f-thumbs-cols)))!important} /* Base */ /* Components */ /* Cards */ /* Sections */ /* Button */ /* card-count component */ .card-count{display:flex;flex-direction:column;gap:0.5rem;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .card-count__content{display:flex;align-items:center;gap:0.75rem} @media (min-width: 1920px){ .card-count__content{gap:2rem}} .card-count__list{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:2rem} @media (min-width: 768px){ .card-count__list{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 1024px){ .card-count__list{gap:2rem}} @media (min-width: 1920px){ .card-count__list{gap:4rem}} .card-count__line{height:1px;background-color:rgb(0 0 0 / 0.1)} .card-count__desc{font-size:14px;line-height:20px;font-weight:600;--tw-text-opacity:1;color:rgb(77 77 77 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .card-count__desc{font-size:16px;line-height:24px}} @media (min-width: 1536px){ .card-count__desc{font-size:18px;line-height:28px}} /* count component */ .count{position:relative;display:inline-flex;flex-direction:column;gap:0.5rem} .count__value{font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .count__value{font-size:36px;line-height:48px}} @media (min-width: 1536px){ .count__value{font-size:48px;line-height:68px}} .count__suffix{position:absolute;right:-0.75rem;top:-0.5rem;font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .card-count__label{min-width:0px;font-size:12px;line-height:16px;font-weight:700;text-transform:uppercase;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .card-count__label span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .video-modal{position:relative} .video-modal__trigger{position:relative;display:block;aspect-ratio:684/385;width:100%;cursor:pointer;overflow:hidden;border-radius:0.5rem} .video-modal__trigger img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms} .video-modal__trigger:hover img{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .video-modal__play{position:absolute;inset:0px;display:flex;align-items:center;justify-content:center;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .video-modal__play svg{height:3.5rem;width:3.5rem} @media (min-width: 768px){ .video-modal__play svg{height:88px;width:88px}} .sample-form{position:fixed;bottom:0px;right:0px;z-index:50;max-width:384px} @media (min-width: 1024px){ .sample-form{max-width:540px}} .sample-form{display:flex;flex-direction:column;gap:1rem} @media (min-width: 1024px){ .sample-form{gap:1.25rem}} @media (min-width: 1536px){ .sample-form{gap:1.5rem}} .sample-form{padding-left:1.5rem;padding-right:1.5rem;padding-top:1.5rem;padding-bottom:0px} @media (min-width: 1280px){ .sample-form{padding-left:2rem;padding-right:2rem;padding-top:2.5rem;padding-bottom:2rem}} .sample-form{overflow-y:auto; border-radius: 8px; background: linear-gradient(118deg, #004b49 -7.19%, #00b1ac 135.76%); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25)} .sample-form__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem} @media (min-width: 640px){ .sample-form__header{align-items:center}} .sample-form__title{font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));font-size:16px;line-height:24px} @media (min-width: 1536px){ .sample-form__title{font-size:32px;line-height:44px}} .sample-form__close{height:1.5rem;width:1.5rem} @media (min-width: 1536px){ .sample-form__close{height:2.5rem;width:2.5rem}} .sample-form__close{flex-shrink:0;cursor:pointer} .sample-form__form{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:1rem} /* fullname + gender */ .sample-form__top{display:flex;flex-direction:column;justify-content:space-between} @media (min-width: 768px){ .sample-form__top{flex-direction:row;align-items:flex-end}} .sample-form__top{gap:1rem} @media (min-width: 1536px){ .sample-form__top{gap:2.5rem}} /* phone + email */ .sample-form__grid{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))} @media (min-width: 768px){ .sample-form__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}} .sample-form__grid{gap:1rem} @media (min-width: 1536px){ .sample-form__grid{gap:2.5rem}} .sample-form__field{display:flex;flex:1 1 0%;flex-direction:column;gap:0.25rem;line-height:0.5} .sample-form__label{display:flex;align-items:center;gap:0.25rem;font-size:14px;line-height:20px} @media (min-width: 1536px){ .sample-form__label{font-size:18px;line-height:28px}} .sample-form__label{font-weight:600;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .sample-form__required{--tw-text-opacity:1;color:rgb(237 37 37 / var(--tw-text-opacity, 1))} .sample-form__input{width:100%;background-color:transparent;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));border-bottom-width:1px;border-color:rgb(255 255 255 / 0.3);outline:2px solid transparent;outline-offset:2px} .sample-form__input::-moz-placeholder{--tw-text-opacity:1;color:rgb(208 223 222 / var(--tw-text-opacity, 1))} .sample-form__input::placeholder{--tw-text-opacity:1;color:rgb(208 223 222 / var(--tw-text-opacity, 1))} .sample-form__gender{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem} .sample-form__gender .wpcf7-radio{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem} .sample-form__gender .wpcf7-list-item{margin:0px} .sample-form__gender .wpcf7-list-item label{display:flex;cursor:pointer;align-items:center;gap:0.5rem;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .sample-form__gender input[type="radio"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0} .sample-form__gender .wpcf7-list-item-label{position:relative;padding-left:2rem} .sample-form__gender .wpcf7-list-item-label::before { content: ""; position:absolute; left:0px; top:50%; height:1.5rem; width:1.5rem; --tw-translate-y:-50%; transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius:9999px; background-color:transparent; border: 1px solid #70fbe6; } .sample-form__gender .wpcf7-list-item-label::after { content: ""; position:absolute; left:7px; top:50%; height:10px; width:10px; --tw-translate-y:-50%; transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius:9999px; opacity:0; background: #00a194; } .sample-form__gender input[type="radio"]:checked + .wpcf7-list-item-label::before { background: #e6f3ff; border-color: #00a194; } .sample-form__gender input[type="radio"]:checked + .wpcf7-list-item-label::after{opacity:1} .sample-form__submit .wpcf7-submit{width:100%; /* base styles for the button */ border-radius:9999px; font-size:16px; line-height:24px; font-weight:700; transition-property:all; transition-duration:500ms; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); display:flex; align-items:center; justify-content:center; gap:0.5rem} .sample-form__submit .wpcf7-submit:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .sample-form__submit .wpcf7-submit:disabled{cursor:not-allowed;opacity:0.5} .sample-form__submit .wpcf7-submit { /* base styles for the button */ border-radius:9999px; font-size:16px; line-height:24px; font-weight:700; transition-property:all; transition-duration:500ms; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); display:flex; align-items:center; justify-content:center; gap:0.5rem; } .sample-form__submit .wpcf7-submit:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .sample-form__submit .wpcf7-submit:disabled{cursor:not-allowed;opacity:0.5} .sample-form__submit .wpcf7-submit{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1));border-width:1px;--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))} .sample-form__submit .wpcf7-submit:hover{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .sample-form__submit .wpcf7-submit{padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem} @media (min-width: 1536px){ .sample-form__submit .wpcf7-submit{padding-left:2rem;padding-right:2rem;padding-top:1rem;padding-bottom:1rem}} .sample-form-overlay{position:fixed;inset:0px;z-index:40;background-color:rgb(0 0 0 / 0.5); backdrop-filter: blur(4px)} /* Request Form */ .request-form{position:fixed;top:50%;left:50%;z-index:50;--tw-translate-x:-50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:75%} @media (min-width: 1024px){ .request-form{width:100%;max-width:720px}} .request-form{display:flex;flex-direction:column;gap:1.5rem} @media (min-width: 1024px){ .request-form{gap:2.5rem}} .request-form{padding-left:1.25rem;padding-right:1.25rem;padding-top:1.5rem;padding-bottom:1.5rem} @media (min-width: 640px){ .request-form{padding-left:2rem;padding-right:2rem;padding-top:2rem;padding-bottom:2rem}} @media (min-width: 1024px){ .request-form{padding-left:2.5rem;padding-right:2.5rem}} .request-form{max-height:100vh;overflow-y:auto; border-radius: 8px; background: linear-gradient(118deg, #004b49 -7.19%, #00b1ac 135.76%); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25); transition-property:all; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration:300ms} .request-form--hidden{pointer-events:none;visibility:hidden;--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0} .request-form-overlay{position:fixed;inset:0px;z-index:40;background-color:rgb(0 0 0 / 0.5); backdrop-filter: blur(4px); transition-property:all; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration:300ms} .request-form-overlay--hidden{pointer-events:none;visibility:hidden;opacity:0} .request-form__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem} @media (min-width: 640px){ .request-form__header{align-items:center}} .request-form__title{font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));font-size:24px;line-height:32px} @media (min-width: 1024px){ .request-form__title{font-size:28px;line-height:40px}} @media (min-width: 1280px){ .request-form__title{font-size:32px;line-height:44px}} .request-form__close{flex-shrink:0} .request-form__form{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:1.5rem} @media (min-width: 1024px){ .request-form__form{gap:2.5rem}} /* fullname + gender */ .request-form__top{display:flex;flex-direction:column;justify-content:space-between} @media (min-width: 768px){ .request-form__top{flex-direction:row;align-items:flex-end}} .request-form__top{gap:1.5rem} @media (min-width: 1024px){ .request-form__top{gap:2.5rem}} /* phone + email */ .request-form__grid{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))} @media (min-width: 768px){ .request-form__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}} .request-form__grid{gap:1.5rem} @media (min-width: 1024px){ .request-form__grid{gap:2.5rem}} .request-form__field{display:flex;flex:1 1 0%;flex-direction:column;gap:0.75rem} .request-form__label{display:flex;align-items:center;gap:0.25rem;font-size:16px;line-height:24px} @media (min-width: 1280px){ .request-form__label{font-size:18px;line-height:28px}} .request-form__label{font-weight:600;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .request-form__required{--tw-text-opacity:1;color:rgb(237 37 37 / var(--tw-text-opacity, 1))} .request-form__input{width:100%;background-color:transparent;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));border-bottom-width:1px;border-color:rgb(255 255 255 / 0.3);outline:2px solid transparent;outline-offset:2px} .request-form__input::-moz-placeholder{--tw-text-opacity:1;color:rgb(208 223 222 / var(--tw-text-opacity, 1))} .request-form__input::placeholder{--tw-text-opacity:1;color:rgb(208 223 222 / var(--tw-text-opacity, 1))} .request-form__gender{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem} .request-form__radio{display:flex;align-items:center;gap:0.5rem;cursor:pointer;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .request-form__radio-icon{height:1.5rem;width:1.5rem;flex-shrink:0;border-radius:9999px;background-color:transparent; border: 1px solid #70fbe6; position: relative} .request-form__radio-icon--active { background: #e6f3ff; border: 1px solid #00a194; &::after { content: ""; } &::after{position:absolute} &::after{top:50%} &::after{left:50%} &::after{height:10px} &::after{width:10px} &::after{border-radius:9999px} &::after { background: #00a194; transform: translate(-50%, -50%); } } .contact-widget{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;display:flex;flex-direction:column;align-items:center;gap:0.75rem} .contact-widget--hidden{pointer-events:none;visibility:hidden;opacity:0;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .contact__icon--scroll{border-width:1px;--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1));background-color:transparent;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1));visibility:hidden;opacity:0;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms; &.show{visibility:visible} &.show{opacity:1}} .sample-form{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .sample-form--hidden{pointer-events:none;visibility:hidden;--tw-translate-y:1rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0} #contact-phone, #contact-hotline, #btn-sample-form{height:3rem;width:3rem;display:flex;cursor:pointer;align-items:center;justify-content:center;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} #contact-hotline{position:relative} .activity{position:absolute;top:0px;right:0px;height:0.75rem;width:0.75rem; border-radius: 10.272px; background: #05ff00; box-shadow: 0 0 8.56px 0 rgba(78, 242, 64, 0.6)} #btnScrollTop{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px;border-width:1px;--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1));background-color:transparent;display:flex;cursor:pointer;align-items:center;justify-content:center;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} /* Pages */ /* Section: Hero */ .hero{position:relative;isolation:isolate;overflow:hidden;min-height:640px} @media (min-width: 1536px){ .hero{height:960px}} .hero-slider, .hero-slider .swiper-wrapper, .hero-slider .swiper-slide{height:100%} .hero-slider{position:relative;z-index:10} .hero-slider .swiper-slide{position:relative;overflow:hidden} /* Image / video của từng slide */ .hero-slider .swiper-slide > img, .hero-slider .swiper-slide > video{pointer-events:none;position:absolute;inset:0px;z-index:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover} /* Overlay phủ toàn bộ hero */ .hero__background{position:absolute;inset:0px;z-index:20; background: linear-gradient( 90deg, rgba(2, 75, 64, 0.92) 0%, rgba(2, 75, 64, 0.72) 38%, rgba(2, 75, 64, 0.45) 62%, rgba(2, 75, 64, 0.12) 100% ); pointer-events: none} /* Content: top 25px, bottom 345px trên 2xl */ .hero__content{position:relative;z-index:20;display:flex;max-width:48rem;flex-direction:column;justify-content:center;gap:1rem} @media (min-width: 1280px){ .hero__content{gap:2rem}} .hero__content{min-height:640px;padding-top:7rem;padding-bottom:7rem} @media (min-width: 1536px) { .hero__content { height: calc(960px - 25px - 345px); padding-top: 25px; padding-bottom: 0; } } .hero__title{font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .hero__title{font-size:36px;line-height:48px}} @media (min-width: 1536px){ .hero__title{font-size:48px;line-height:60px}} /* Action */ .hero-action{position:absolute;bottom:0px;left:0px;right:0px;z-index:40} /* Action: bottom 129px trên 2xl */ .hero-action{position:absolute;left:0px;right:0px;z-index:40;padding-top:0px;padding-bottom:0px; bottom: 40px} @media (min-width: 1536px) { .hero-action { bottom: 129px; } } .hero-action__layout{pointer-events:auto;display:flex;align-items:center;gap:0.75rem} .hero-action .swiper-pagination-bullet{width:3rem;background-color:rgb(255 255 255 / 0.5)} @media (min-width: 1024px){ .hero-action .swiper-pagination-bullet{width:4rem}} @media (min-width: 1536px){ .hero-action .swiper-pagination-bullet{width:6rem}} .hero-action .swiper-pagination-bullet-active{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))} .hero-action .swiper-pagination-bullet-active::after{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))} .hero-btn{display:flex;align-items:center;gap:0.25rem} /* ─── Buttons override cho hero ─── */ .hero-btn-prev, .hero-btn-next{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} /* ─── Content ─── */ .hero__content{position:relative;z-index:30;display:flex;max-width:48rem;flex-direction:column;gap:1rem} @media (min-width: 1280px){ .hero__content{gap:2rem}} .hero__content{flex:1 1 0%;padding-top:15vh;padding-bottom:1rem} @media (min-width: 768px){ .hero__content{padding-bottom:2rem}} /* Section: About */ .about__inner{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));align-items:center;gap:1.5rem;padding-top:3rem;padding-bottom:3rem} @media (min-width: 1024px){ .about__inner{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 1280px){ .about__inner{padding-top:150px;padding-bottom:150px}} .about__content{display:flex;flex-direction:column;gap:1rem} @media (min-width: 768px){ .about__content{gap:2rem}} .about__label{font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .about__label{font-size:48px;line-height:68px}} @media (min-width: 1536px){ .about__label{font-size:54px;line-height:72px}} .about__desc{font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(77 77 77 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .about__desc{font-size:18px;line-height:28px}} @media (min-width: 1536px){ .about__desc{font-size:20px;line-height:32px}} .about__desc span{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} /* Section: Our Products */ .our-products__inner{display:flex;flex-direction:column;align-items:center;gap:2rem;padding-top:3rem;padding-bottom:3rem} @media (min-width: 1024px){ .our-products__inner{gap:4rem}} @media (min-width: 1280px){ .our-products__inner{padding-top:120px;padding-bottom:120px}} .our-products__header{display:flex;width:100%;align-items:center;justify-content:space-between} .our-products__title{font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .our-products__title{font-size:48px;line-height:68px}} @media (min-width: 1536px){ .our-products__title{font-size:54px;line-height:72px}} .our-products__slider{position:relative;display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:1.5rem} @media (min-width: 640px){ .our-products__slider{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 1024px){ .our-products__slider{grid-template-columns:repeat(3, minmax(0, 1fr))}} @media (min-width: 1280px){ .our-products__slider{gap:2.5rem}} .our-products__slider { list-style: none; padding: 0; margin: 0; } /* Pagination our-products */ /* ─── Pagination override cho our-products ─── */ .our-product__wrap{position:relative} .our-product__btn--next, .our-product__btn--prev{position:absolute;top:50%;z-index:10;display:flex;height:2.5rem;width:2.5rem;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .our-product__btn--prev{left:0px;--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .our-product__btn--next{right:0px;--tw-translate-x:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .our-products__pagination{display:flex;justify-content:center} .our-products__pagination .swiper-pagination-bullet{width:3rem;--tw-bg-opacity:1;background-color:rgb(179 179 179 / var(--tw-bg-opacity, 1))} .our-products__pagination .swiper-pagination-bullet-active{--tw-bg-opacity:1;background-color:rgb(15 95 90 / var(--tw-bg-opacity, 1))} .our-products__pagination .swiper-pagination-bullet-active::after{--tw-bg-opacity:1;background-color:rgb(15 95 90 / var(--tw-bg-opacity, 1))} /* Section: Impact */ .impact{position:relative; background: linear-gradient(155deg, #003b36 -22.57%, #00a194 84.33%)} .impact__bg{position:absolute;inset:0px;z-index:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover} .impact__inner{position:relative;z-index:50;display:flex;flex-direction:column;align-items:center;gap:5rem;padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .impact__inner{padding-top:120px;padding-bottom:120px}} .impact__content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .impact__title{text-align:center;font-size:32px;line-height:44px;font-weight:700} @media (min-width: 768px){ .impact__title{font-size:48px;line-height:68px}} @media (min-width: 1536px){ .impact__title{font-size:54px;line-height:72px}} .impact__desc{max-width:80rem;text-align:center;font-size:16px;line-height:24px} @media (min-width: 768px){ .impact__desc{font-size:18px;line-height:28px}} @media (min-width: 1536px){ .impact__desc{font-size:20px;line-height:32px}} .impact__media{width:100%;max-width:1240px;aspect-ratio:1240/551} .impact__media img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover} /* Section: Factory */ .factory{position:relative;overflow:hidden;--tw-bg-opacity:1;background-color:rgb(246 249 248 / var(--tw-bg-opacity, 1))} .factory-swiper{width:100%} .factory-slide{padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .factory-slide{padding-top:120px;padding-bottom:120px}} .factory__title{margin-bottom:2rem;text-align:center;font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .factory__title{font-size:48px;line-height:68px}} @media (min-width: 1280px){ .factory__title{margin-bottom:4rem}} @media (min-width: 1536px){ .factory__title{font-size:54px;line-height:72px}} /* 2 cột: text | video */ .factory__inner{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:2rem} @media (min-width: 1280px){ .factory__inner{grid-template-columns:4fr 6fr;gap:1rem}} @media (min-width: 1920px){ .factory__inner{gap:2.5rem}} /* Cột trái */ .factory__info{display:flex;flex-direction:column;gap:2rem} .factory__header{display:flex;flex-direction:column;gap:1rem} .factory__subtitle{font-size:24px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .factory__subtitle{font-size:28px;line-height:40px}} .factory__desc{margin-bottom:1rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(77 77 77 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .factory__desc{font-size:16px;line-height:24px}} .factory__desc span{font-weight:700} /* Nav nằm giữa text và video khi < xl */ .factory__nav{display:flex;justify-content:flex-start;gap:0.75rem} @media (min-width: 1280px) { .factory__info{height:100%;justify-content:space-between} } .factory__btn{display:flex;height:3rem;width:3rem;cursor:pointer;align-items:center;justify-content:center;border-radius:1.5rem;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms; background: rgba(194, 194, 194, 0.2)} .factory__btn:hover{opacity:0.75} /* Cột phải */ .factory__media{width:100%} /* Section: News */ .news__inner{padding-top:2rem;padding-bottom:2rem} @media (min-width: 1280px){ .news__inner{padding-top:100px;padding-bottom:100px}} .news__header{margin-bottom:2.5rem;display:flex;align-items:center;justify-content:space-between} .news__title{font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .news__title{font-size:48px;line-height:68px}} @media (min-width: 1536px){ .news__title{font-size:54px;line-height:72px}} .news__slider-wrap{position:relative} /* ============================================= LAYOUT ============================================= */ .news-card-list{z-index:0;display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:1.5rem} @media (min-width: 768px){ .news-card-list{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 1280px){ .news-card-list{grid-template-columns:repeat(3, minmax(0, 1fr))}} .news-card-list{margin:0px;list-style-type:none;padding:0px} .news__btn--next, .news__btn--prev{display:flex;align-items:center;justify-content:center;border-radius:9999px;padding:0.75rem;--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms} .news__btn--next:hover, .news__btn--prev:hover{opacity:0.75} .news__btn--prev{position:absolute;left:0px;top:50%;z-index:50;--tw-translate-y:-50%;--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .news__btn--next{position:absolute;right:0px;top:50%;z-index:50;--tw-translate-y:-50%;--tw-translate-x:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} /* Section: Contact */ .contact{position:relative;padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .contact{padding-top:120px;padding-bottom:120px}} .contact__bg{position:absolute;inset:0px;z-index:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover} .contact__inner{position:relative;z-index:10;display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:3rem} @media (min-width: 1024px){ .contact__inner{grid-template-columns:7fr 5fr}} .contact__content{display:flex;flex-direction:column;gap:1.5rem} @media (min-width: 1280px){ .contact__content{gap:3rem}} .contact__title{margin-bottom:1rem;font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .contact__title{font-size:48px;line-height:68px}} @media (min-width: 1536px){ .contact__title{font-size:54px;line-height:72px}} .contact__desc{font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(40 43 48 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .contact__desc{font-size:18px;line-height:28px}} @media (min-width: 1536px){ .contact__desc{font-size:20px;line-height:32px}} .contact__form{display:flex;flex-direction:column;gap:2rem} @media (min-width: 1024px){ .contact__form{gap:3rem}} @media (min-width: 1536px){ .contact__form{gap:4rem}} .contact__row{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:1.5rem} @media (min-width: 640px){ .contact__row{grid-template-columns:repeat(2, minmax(0, 1fr))}} .contact__fields{display:flex;flex-direction:column;gap:1.5rem} @media (min-width: 1536px){ .contact__fields{gap:2.5rem}} .contact__field{display:flex;flex-direction:column;gap:0.5rem} .contact__label{font-size:14px;line-height:20px;font-weight:600;--tw-text-opacity:1;color:rgb(72 79 87 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .contact__label{font-size:16px;line-height:24px}} @media (min-width: 1536px){ .contact__label{font-size:18px;line-height:28px}} .contact__required{--tw-text-opacity:1;color:rgb(237 37 37 / var(--tw-text-opacity, 1))} .contact__input::-moz-placeholder{--tw-text-opacity:1;color:rgb(153 153 153 / var(--tw-text-opacity, 1))} .contact__input::placeholder{--tw-text-opacity:1;color:rgb(153 153 153 / var(--tw-text-opacity, 1))} .contact__input, .contact__textarea { /* input styles */ width:100%; background-color:transparent; padding:0.75rem; --tw-text-opacity:1; color:rgb(72 79 87 / var(--tw-text-opacity, 1)); border: none; border-bottom: 1px solid #6a6a6a80; } .contact__textarea{resize:none} /* focus state */ .contact__input:focus, .contact__textarea:focus { outline: none; } /* Section: CEO Statement */ .ceo__inner{padding-top:2.5rem;padding-bottom:2.5rem} @media (min-width: 1280px){ .ceo__inner{padding-top:5rem;padding-bottom:5rem}} .ceo__inner{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:3rem} @media (min-width: 1280px){ .ceo__inner{flex-direction:row}} @media (min-width: 1920px){ .ceo__inner{gap:5rem}} /* Ảnh CEO */ .ceo__media{margin:0px;width:100%} @media (min-width: 1024px){ .ceo__media{flex-shrink:0;width:598px}} .ceo__media img{aspect-ratio:598/672;width:100%;-o-object-fit:cover;object-fit:cover} /* Cột nội dung */ .ceo__content{display:flex;flex-direction:column;gap:2rem} @media (min-width: 1280px){ .ceo__content{gap:3.5rem}} .ceo__quote-icon{height:auto;width:40px;flex-shrink:0} @media (min-width: 1024px){ .ceo__quote-icon{width:60px}} @media (min-width: 1280px){ .ceo__quote-icon{width:79px}} /* Blockquote */ .ceo__blockquote{margin:0px;display:flex;flex-direction:column;gap:1rem;padding:0px} .ceo__label{font-size:18px;line-height:28px;font-weight:600;--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} .ceo__quote{font-size:16px;line-height:24px;font-weight:700;--tw-text-opacity:1;color:rgb(77 77 77 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .ceo__quote{font-size:18px;line-height:28px}} @media (min-width: 1536px){ .ceo__quote{font-size:20px;line-height:32px}} /* Footer: tên + chức vụ */ .ceo__footer{display:flex;flex-direction:column;gap:0.5rem;border-top-width:1px;padding-top:1rem; border-color: rgba(0, 0, 0, 0.2)} .ceo__role{font-size:18px;line-height:28px;--tw-text-opacity:1;color:rgb(153 153 153 / var(--tw-text-opacity, 1))} .ceo__name{font-size:16px;line-height:24px;font-weight:700;--tw-text-opacity:1;color:rgb(77 77 77 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .ceo__name{font-size:18px;line-height:28px}} @media (min-width: 1536px){ .ceo__name{font-size:20px;line-height:32px}} /* Section */ .vision-mission{padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .vision-mission{padding-top:120px;padding-bottom:120px}} .vision-mission{position:relative;overflow:hidden;min-height:400px} @media (min-width: 1024px){ .vision-mission{min-height:500px}} @media (min-width: 1280px){ .vision-mission{min-height:600px}} @media (min-width: 1536px){ .vision-mission{min-height:720px}} .vision-mission{--tw-bg-opacity:1;background-color:rgb(10 90 82 / var(--tw-bg-opacity, 1))} @media (min-width: 1024px){ .vision-mission{background-color:transparent}} /* Overlay gradient */ .vision-mission::after { content: ""; position:absolute; inset:0px; z-index:10; display:none; } @media (min-width: 1024px){ .vision-mission::after{display:block}} .vision-mission::after { background: linear-gradient(90deg, #00453e 0%, rgba(0, 69, 62, 0) 100%); } .vision-mission__bg{position:absolute;inset:0px;height:100%;width:100%;-o-object-fit:cover;object-fit:cover;display:none} @media (min-width: 1024px){ .vision-mission__bg{display:block}} .vision-mission .container{position:relative;z-index:20;height:100%;display:flex;flex-direction:column} /* Content */ .vision-mission__content{position:relative;z-index:20;display:flex;flex-direction:column;justify-content:center;gap:1.5rem} @media (min-width: 1536px){ .vision-mission__content{gap:2rem}} .vision-mission__content{flex:1 1 0%;max-width:600px} .vision-mission__divider{height:1px;width:100%;flex-shrink:0;margin-top:1rem; background-color: rgba(255, 255, 255, 0.24)} /* Card */ .vision-card{display:flex;flex-direction:column;gap:1rem;padding-top:1.5rem;padding-bottom:1.5rem} .vision-card__title{font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));font-size:24px;line-height:32px} @media (min-width: 1536px){ .vision-card__title{font-size:28px;line-height:40px}} .vision-card__desc{color:rgb(255 255 255 / 0.8);font-size:14px;line-height:20px} @media (min-width: 768px){ .vision-card__desc{font-size:16px;line-height:24px}} @media (min-width: 1536px){ .vision-card__desc{font-size:18px;line-height:28px}} /* Section: tabpanel */ .tab-section__label{margin-bottom:2rem;font-size:24px;line-height:32px;font-weight:600;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .tab-section__label{font-size:48px;line-height:60px}} /* Section: timeline */ .timeline-section{padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .timeline-section{padding-top:120px;padding-bottom:120px}} .timeline-section { border-bottom: 1px solid #e8e8e8; background: linear-gradient(155deg, #003b36 -22.57%, #00a194 84.33%), #00a194; } /* .timeline-section__inner { @apply grid grid-cols-1 gap-16; } */ .timeline-section__stage{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));align-items:center;gap:3rem} @media (min-width: 1024px){ .timeline-section__stage{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 1920px){ .timeline-section__stage{gap:58px}} .timeline-section__media{position:relative;aspect-ratio:712/517;width:100%;border-radius:0.5rem;-o-object-fit:cover;object-fit:cover} .timeline-section__image{position:absolute;inset:0px;height:100%;width:100%;-o-object-fit:cover;object-fit:cover} .timeline-section__date{font-size:14px;line-height:20px;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .timeline-section__date{font-size:16px;line-height:24px}} .timeline-section__date { opacity: 0.8; } .timeline-section__title{font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .timeline-section__title{font-size:38px;line-height:52px}} .timeline-section__description{margin-top:1rem;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .timeline-section__description{font-size:16px;line-height:24px}} @media (min-width: 1536px){ .timeline-section__description{font-size:18px;line-height:28px}} .timeline-section__nav{margin-top:3rem;display:flex;align-items:center;gap:0.75rem} .timeline-section__nav-btn{display:flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .timeline-section__nav-btn:hover{opacity:0.7} .timeline-section__track{position:relative;padding-right:1rem;padding-top:4rem; padding-left: var(--container-safe-left)} @media (min-width: 1024px){ .timeline-section__track{padding-right:80px}} .timeline-section__track{overflow:hidden} .timeline-section__track-items{display:flex} .timeline-section__track-item { width: auto !important; min-width: 80px; /* đủ chứa text ngắn nhất */ max-width: 160px; /* không quá rộng khi ít item */ flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; position: relative; cursor: pointer; } .timeline-section__track-year{position:relative;font-size:24px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .timeline-section__track-year{font-size:28px;line-height:40px}} .timeline-section__track::before { content: ""; position: absolute; top: 64px; left: var(--container-safe-left); height: 1px; background: rgba(255, 255, 255, 0.36); inset-inline-end:3rem; } @media (min-width: 1280px){ .timeline-section__track::before{inset-inline-end:5rem}} .timeline-section__track-items{position:relative;z-index:10;display:flex;padding-top:0.75rem} /* Mobile: chia đều 3 cột */ @media (max-width: 767px) { .timeline-section__track-item { width: calc((100vw - 32px) / 3) !important; min-width: unset; } } /* vertical tick */ .timeline-section__track-item::before { content: ""; position: absolute; top: -12px; left: 0; width: 1px; height: 12px; background: rgba(255, 255, 255, 0.36); } .timeline-section__track-item:not(:first-child)::before { left: 35%; } .timeline-section__track-month{font-size:16px;line-height:24px;text-transform:uppercase;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .timeline-section__track-month{font-size:18px;line-height:28px}} .timeline-section__track-item.swiper-slide-thumb-active .timeline-section__track-year { color: #70fbe6; } /* ─── Section: Sustainability ─────────────────────────── */ .sustainability{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr))} @media (min-width: 1024px){ .sustainability{grid-template-columns:5fr 7fr}} /* ─── Left Panel ──────────────────────────────────────── */ .sustainability__panel-intro{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));padding-top:2.5rem} @media (min-width: 1024px){ .sustainability__panel-intro{padding-top:3rem}} @media (min-width: 1280px){ .sustainability__panel-intro{padding-top:5rem}} .sustainability__panel-intro { padding-left: var(--container-safe-left); padding-right: var(--container-safe-right); } @media (min-width: 1024px){ .sustainability__panel-intro{padding-right:0px}} .sustainability__panel-intro{display:flex;flex-direction:column;justify-content:space-between;gap:3rem} @media (min-width: 1024px){ .sustainability__panel-intro{gap:8rem}} .sustainability__intro{display:flex;flex-direction:column;gap:0.75rem;padding-right:0px} @media (min-width: 1024px){ .sustainability__intro{padding-right:5rem}} .sustainability__heading{font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));font-size:32px;line-height:44px} @media (min-width: 640px){ .sustainability__heading{font-size:36px;line-height:48px}} @media (min-width: 1536px){ .sustainability__heading{font-size:48px;line-height:60px}} .sustainability__description{font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .sustainability__description{font-size:16px;line-height:24px}} /* ─── Tab Nav ─────────────────────────────────────────── */ .sustainability__tab-nav { position: relative; overflow: visible; padding-top:1.5rem; padding-bottom:1.5rem; } @media (min-width: 1024px){ .sustainability__tab-nav{padding-top:2.5rem;padding-bottom:2.5rem}} .sustainability__tab-nav{padding-inline-start:1.5rem} @media (min-width: 640px){ .sustainability__tab-nav{padding-inline-start:2.5rem}} @media (min-width: 1024px){ .sustainability__tab-nav{padding-inline-start:65px}} .sustainability__tab-nav{padding-inline-end:1.5rem} @media (min-width: 1024px){ .sustainability__tab-nav{padding-inline-end:2.5rem}} .sustainability__tab-nav::before { content: ""; position: absolute; inset: 0; clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); --tw-bg-opacity:1; background-color:rgb(15 95 90 / var(--tw-bg-opacity, 1)); z-index: 0; /* Trên desktop giữ clip góc lớn hơn */ } @media (min-width: 1024px){ .sustainability__tab-nav::before{clip-path:polygon(36px 0,100% 0,100% 100%,0 100%,0 36px)}} .sustainability__tab-list { position: relative; z-index: 1; } .sustainability__tab-list > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-color:rgb(255 255 255 / 0.15)} .sustainability__tab-item { position: relative; padding-top:1rem; padding-bottom:1rem; } @media (min-width: 1024px){ .sustainability__tab-item{padding-top:26px;padding-bottom:26px}} .sustainability__tab-item{width:100%} @media (min-width: 1024px){ .sustainability__tab-item{width:494px}} .sustainability__tab-btn{text-align:left;font-weight:700;--tw-text-opacity:1;color:rgb(114 159 155 / var(--tw-text-opacity, 1));font-size:16px;line-height:24px} @media (min-width: 768px){ .sustainability__tab-btn{font-size:20px;line-height:32px}} @media (min-width: 1536px){ .sustainability__tab-btn{font-size:24px;line-height:32px}} .sustainability__tab-btn{width:100%} .sustainability__tab-btn--active{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} /* Arrow indicator — ẩn trên mobile vì nav full-width */ .sustainability__tab-item:has(.sustainability__tab-btn--active)::after { content: ""; position: absolute; right: -75px; top: 50%; transform: translateY(-50%); width: 36px; height: 46px; clip-path: polygon(0 0, 100% 50%, 0 100%); display:none; --tw-bg-opacity:1; background-color:rgb(15 95 90 / var(--tw-bg-opacity, 1)); } @media (min-width: 1024px){ .sustainability__tab-item:has(.sustainability__tab-btn--active)::after{display:block}} /* ─── Right Panel ─────────────────────────────────────── */ .sustainability__panel-content{position:relative;display:flex;align-items:flex-end;min-height:360px} @media (min-width: 640px){ .sustainability__panel-content{min-height:480px}} @media (min-width: 1024px){ .sustainability__panel-content{min-height:0px}} .sustainability__panel-content { /* đảm bảo có chiều cao khi stack */ padding-left:1.5rem; } @media (min-width: 640px){ .sustainability__panel-content{padding-left:3rem}} @media (min-width: 1024px){ .sustainability__panel-content{padding-left:110px}} .sustainability__panel-content{padding-bottom:2.5rem} @media (min-width: 1024px){ .sustainability__panel-content{padding-bottom:5rem}} .sustainability__panel-content{padding-right:1.5rem} @media (min-width: 640px){ .sustainability__panel-content{padding-right:2.5rem}} @media (min-width: 1024px){ .sustainability__panel-content{padding-right:0px}} .sustainability__hero-image{position:absolute;inset:0px;margin:0px;height:100%;width:100%} /* Overlay tối để text dễ đọc trên mobile */ .sustainability__hero-image::after { content: ""; position:absolute; inset:0px; background: linear-gradient( to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100% ); } .sustainability__img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover} .sustainability__tabpanels{position:relative;z-index:10;max-width:100%} @media (min-width: 1024px){ .sustainability__tabpanels{max-width:600px}} .sustainability__tabpanel-heading{margin-bottom:0.75rem;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .sustainability__tabpanel-heading{margin-bottom:1rem}} .sustainability__tabpanel-heading{font-size:24px;line-height:32px} @media (min-width: 768px){ .sustainability__tabpanel-heading{font-size:32px;line-height:44px}} @media (min-width: 1536px){ .sustainability__tabpanel-heading{font-size:36px;line-height:48px}} .sustainability__tabpanel-description{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));font-size:14px;line-height:20px} @media (min-width: 768px){ .sustainability__tabpanel-description{font-size:16px;line-height:24px}} .products{padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .products{padding-top:5rem;padding-bottom:5rem}} .products__inner{display:grid;gap:2rem} @media (min-width: 1024px){ .products__inner{grid-template-columns:240px minmax(0,1fr)}} @media (min-width: 1280px){ .products__inner{gap:1.75rem}} .products__filter{display:flex;width:100%;flex-direction:column;gap:1.5rem} .products__mobile-filter{display:none} .products__mobile-filter-button{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:0.5rem;border-radius:9999px;border-width:1px;border-color:rgb(0 161 148 / 0.2);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:14px;line-height:20px;font-weight:600;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .products__mobile-filter-button:hover{--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .products__mobile-filter-button:focus-visible{outline-style:solid;outline-width:2px;outline-offset:4px;outline-color:#00A194} .products__mobile-filter-button svg{flex-shrink:0} .products__search{display:flex;align-items:center;gap:0.75rem;border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(179 179 179 / var(--tw-border-opacity, 1));padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem} .products__search-input{width:100%;background-color:transparent;font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1));outline:2px solid transparent;outline-offset:2px} .products__search-input::-moz-placeholder{--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} .products__search-input::placeholder{--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} .products__content{min-width:0px} .products__content + .products__content{margin-top:2.5rem} @media (min-width: 1280px){ .products__content + .products__content{margin-top:3.5rem}} .products__info{display:flex;flex-direction:column;gap:2rem} .products__title{font-size:28px;line-height:40px;font-weight:700;--tw-text-opacity:1;color:rgb(45 54 53 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .products__title{font-size:32px;line-height:44px}} .products__list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:1rem} @media (min-width: 768px){ .products__list{grid-template-columns:repeat(3, minmax(0, 1fr))}} @media (min-width: 1024px){ .products__list{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 1280px){ .products__list{grid-template-columns:repeat(4, minmax(0, 1fr));gap:1.5rem}} .products__view-more{display:inline-flex;align-items:center;gap:0.5rem;align-self:center;font-weight:700;color:rgb(0 161 148 / 0.8);transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .products__view-more:hover{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .products__view-more:focus-visible{outline-style:solid;outline-width:2px;outline-offset:4px;outline-color:#00A194} .products__view-more.is-hidden{display:none} .products__view-more svg{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .products__view-more[data-expanded="true"] svg{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .products-item.is-hidden{display:none} .products-item.is-revealing { animation: productFadeDown 0.45s ease forwards; } @keyframes productFadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ Mobile Filter Panel – Applies ONLY below 1024 px (lg breakpoint) – Desktop layout (.products__filter as grid column) untouched ============================================================ */ /* ── Overlay ─────────────────────────────────────────────────────────────── */ .filter-overlay { display: none; position: fixed; inset: 0; z-index: 1199; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.28s ease; } .filter-overlay--visible { display: block; opacity: 1; } /* ── Close button (visible only on mobile) ───────────────────────────────── */ .filter-close-btn { display: none; /* hidden by default; shown when panel is open on mobile */ align-self: flex-end; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: #4b5563; cursor: pointer; flex-shrink: 0; transition: background 0.18s ease, color 0.18s ease; } .filter-close-btn:hover { background: #f3f4f6; color: #111827; } .filter-close-btn:focus-visible { outline: 2px solid #00a194; outline-offset: 2px; } /* ── Mobile panel behaviour ──────────────────────────────────────────────── */ @media (max-width: 1023px) { .products__mobile-filter{margin-bottom:1rem;display:flex} /* The aside becomes a fixed slide-up drawer */ .products__filter { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200; max-width: 100%; max-height: 88dvh; /* cap at 88% of viewport height */ overflow-y: auto; -webkit-overflow-scrolling: touch; background: #ffffff; border-radius: 20px 20px 0 0; padding: 20px 20px 32px; box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.15); /* Start hidden below viewport */ transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); /* Override desktop grid styles */ max-width: none; } /* Show close button inside panel */ .filter-close-btn { display: flex; margin-left: auto; margin-bottom: 4px; margin-top: -8px; } /* Slide into view when open */ .products__filter.filter-panel--open { transform: translateY(0); } } /* ── Desktop: hide close button, show filter normally ────────────────────── */ @media (min-width: 1024px) { .filter-close-btn { display: none !important; } .products__mobile-filter { display: none; } /* Ensure no leftover transform on desktop */ .products__filter { transform: none !important; position: static !important; max-height: none !important; overflow-y: visible !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* Header inside mobile filter panel */ .products__filter-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem} .products__filter-title{display:flex;align-items:center;gap:0.75rem;font-size:16px;line-height:24px;font-weight:600;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))} .products__filter-text{line-height:1} .filter-close-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:0.375rem;padding:0.5rem;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))} .filter-close-btn:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))} .filter-close-btn:focus{outline:2px solid transparent;outline-offset:2px} } .products__filter-header{margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;gap:0.75rem} @media (min-width: 1280px){ .products__filter-header{display:none}} .products__filter-title{display:flex;align-items:center;gap:0.5rem;font-size:18px;line-height:28px;font-weight:700;--tw-text-opacity:1;color:rgb(26 26 26 / var(--tw-text-opacity, 1))} .products__filter-title svg{flex-shrink:0} @media (max-width: 1023px) { .filter-close-btn{margin-top:0px} } .services{padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .services{padding-top:120px;padding-bottom:120px}} .factory__body{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:1.5rem} @media (min-width: 1024px){ .factory__body{grid-template-columns:repeat(2, minmax(0, 1fr))}} .factory__body{padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .factory__body{padding-top:120px;padding-bottom:100px}} .contact-page{padding-top:3.5rem;padding-bottom:3.5rem} @media (min-width: 1024px){ .contact-page{padding-top:6rem;padding-bottom:6rem}} .contact-page__breadcrumb{margin-bottom:2.5rem} .contact-page__grid{display:grid;align-items:flex-start;gap:3rem} @media (min-width: 1280px){ .contact-page__grid{grid-template-columns:minmax(0,1fr) 630px}} .contact-page__title{max-width:886px;font-size:36px;line-height:48px;font-weight:700;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .contact-page__title{font-size:48px;line-height:68px}} .contact-page__desc{margin-top:1rem;margin-bottom:3.5rem;max-width:886px;font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(72 79 87 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .contact-page__desc{font-size:18px;line-height:28px}} .contact-page__company{font-size:24px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))} .contact-page__list{margin-top:1.25rem} .contact-page__list > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))} .contact-page__list{font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .contact-page__list{font-size:18px;line-height:28px}} .contact-page__list li{display:flex;align-items:center;gap:0.75rem} .contact-page__grid > *{min-width:0px} .contact-page__list a, .contact-page__list span, .contact-page__list p{min-width:0px;overflow-wrap:break-word} .contact-page__icon{height:1.5rem;width:1.5rem;flex-shrink:0} .contact-page__socials{margin-top:1.5rem;display:flex;gap:1rem} .contact-page__socials a{display:flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center} .contact-page__map{position:relative;margin-top:2rem;width:100%;max-width:100%;overflow:hidden;border-radius:0.75rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))} .contact-page__map iframe{display:block;height:260px;width:100%;max-width:100%} @media (min-width: 640px){ .contact-page__map iframe{height:350px}} .contact-page__map-link{display:flex;align-items:center;gap:0.75rem;--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));padding-left:1.5rem;padding-right:1.5rem;padding-top:1rem;padding-bottom:1rem;font-size:18px;line-height:28px;font-weight:600;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .contact-page__map-link:hover{--tw-bg-opacity:1;background-color:rgb(15 95 90 / var(--tw-bg-opacity, 1))} .contact-page__form-wrap{border-radius:1rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:2rem} @media (min-width: 1024px){ .contact-page__form-wrap{padding:3.5rem}} .contact-page__form-wrap { box-shadow: -80px 332.244px 100.236px 0 rgba(220, 220, 229, 0), -64px 212.861px 92.353px 0 rgba(220, 220, 229, 0.1), 49.555px -119.38px 77.711px 0 rgba(220, 220, 229, 0.1), 21.399px 52.934px 57.439px 0 rgba(220, 220, 229, 0.1), -10px -10px 31.535px 0 rgba(201, 201, 201, 0.1); } .contact-page__form-wrap .wpcf7{width:100%} .contact-page__form-wrap .wpcf7-form, .contact-form{display:flex;flex-direction:column;gap:2.5rem} .contact-page__form-wrap .wpcf7-form p{margin:0px} .contact-page__form-wrap .wpcf7-form br{display:none} .contact-page__form-wrap .hidden-fields-container{display:none} .contact-form__row{display:grid;gap:2.5rem} @media (min-width: 768px){ .contact-form__row{grid-template-columns:repeat(2, minmax(0, 1fr))}} .contact-form__group{display:flex;flex-direction:column} .contact-form__group > p{margin:0px;display:flex;flex-direction:column;gap:14px} .contact-form__group label{font-weight:700;--tw-text-opacity:1;color:rgb(72 79 87 / var(--tw-text-opacity, 1))} .contact-form__group label span{--tw-text-opacity:1;color:rgb(237 37 37 / var(--tw-text-opacity, 1))} .contact-page__form-wrap .wpcf7-form-control-wrap{display:block;width:100%} .contact-form__group input:not([type="submit"]), .contact-form__group textarea{width:100%;border-width:0px;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(179 179 179 / var(--tw-border-opacity, 1));background-color:transparent;padding-left:0px;padding-right:0px;padding-bottom:0.75rem;font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1));outline:2px solid transparent;outline-offset:2px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .contact-form__group input:not([type="submit"])::-moz-placeholder, .contact-form__group textarea::-moz-placeholder{--tw-text-opacity:1;color:rgb(153 153 153 / var(--tw-text-opacity, 1))} .contact-form__group input:not([type="submit"])::placeholder, .contact-form__group textarea::placeholder{--tw-text-opacity:1;color:rgb(153 153 153 / var(--tw-text-opacity, 1))} .contact-form__group input:not([type="submit"]):focus, .contact-form__group textarea:focus{--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1))} .contact-form__group textarea{min-height:60px;resize:none} .contact-page__form-wrap .wpcf7-submit{width:100%;cursor:pointer;border-width:0px} .contact-page__form-wrap .wpcf7-spinner{margin:0px;margin-left:0.75rem;vertical-align:middle} .contact-page__form-wrap .wpcf7-response-output{margin:0px;margin-top:0.5rem;border-radius:0.25rem;border-width:1px;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;font-size:14px;line-height:20px} .contact-page__form-wrap .wpcf7-not-valid-tip{margin-top:0.5rem;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(237 37 37 / var(--tw-text-opacity, 1))} .contact-specialists{overflow:hidden;--tw-bg-opacity:1;background-color:rgb(242 242 242 / var(--tw-bg-opacity, 1));padding-top:4rem;padding-bottom:4rem} @media (min-width: 1024px){ .contact-specialists{padding-top:6rem;padding-bottom:6rem}} /* ===== Head ===== */ .contact-specialists__head{margin-left:auto;margin-right:auto;margin-bottom:2.5rem;max-width:980px;text-align:center} @media (min-width: 1024px){ .contact-specialists__head{margin-bottom:3.5rem}} .contact-specialists__title{font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(45 54 53 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .contact-specialists__title{font-size:48px;line-height:68px}} .contact-specialists__desc{margin-left:auto;margin-right:auto;margin-top:1.5rem;max-width:920px;font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .contact-specialists__desc{font-size:20px;line-height:32px}} /* ===== Swiper ===== */ .contact-specialists__swiper-wrap{position:relative} .contact__btn--next, .contact__btn--prev{position:absolute;z-index:10;display:flex;height:2.5rem;width:2.5rem;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); top: calc(50% - 24px)} .contact__btn--prev{left:0px;--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .contact__btn--next{right:0px;--tw-translate-x:50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .contact-specialists__swiper{position:relative} .contact-specialists__swiper .swiper-slide{height:auto} /* ===== Card ===== */ .specialist-card{display:flex;height:100%;flex-direction:column;align-items:center;border-radius:0.5rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:2.5rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .specialist-card:hover{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .specialist-card__avatar{margin-bottom:3rem;height:120px;width:120px;overflow:hidden;border-radius:9999px} .specialist-card__avatar img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover} .specialist-card__content{margin-top:auto;text-align:center} .specialist-card__name{font-size:24px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(26 26 26 / var(--tw-text-opacity, 1))} .specialist-card__position{margin-top:0.75rem;font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(77 77 77 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .specialist-card__position{font-size:18px;line-height:28px}} /* ===== Pagination ===== */ .contact-specialists__pagination{margin-top:2.5rem;display:flex;justify-content:center;gap:0.5rem} .contact-specialists__pagination .swiper-pagination-bullet{margin:0px;height:0.75rem;width:0.75rem;--tw-bg-opacity:1;background-color:rgb(179 179 179 / var(--tw-bg-opacity, 1));opacity:1;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .contact-specialists__pagination .swiper-pagination-bullet-active{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1))} /* Minimal page-specific overrides — primary visuals use Tailwind via @apply. This file is expected to be processed by Tailwind so @apply and @layer work. */ /* Utilities */ *, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: } ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: } /* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: Averta, sans-serif; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } @font-face { font-family: "Averta"; src: url("../fonts/Averta/Averta-Regular.woff2") format("woff2"), url("../fonts/Averta/Averta-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Averta"; src: url("../fonts/Averta/Averta-Semibold.woff2") format("woff2"), url("../fonts/Averta/Averta-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Averta"; src: url("../fonts/Averta/Averta-Bold.woff2") format("woff2"), url("../fonts/Averta/Averta-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } body{font-family:Averta, sans-serif} .container{width:100%;margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem} @media (min-width: 640px){ .container{max-width:640px;padding-right:3rem;padding-left:3rem}} @media (min-width: 768px){ .container{max-width:768px}} @media (min-width: 1024px){ .container{max-width:1024px;padding-right:4rem;padding-left:4rem}} @media (min-width: 1280px){ .container{max-width:1280px;padding-right:6rem;padding-left:6rem}} @media (min-width: 1536px){ .container{max-width:1536px;padding-right:8rem;padding-left:8rem}} @media (min-width: 1920px){ .container{max-width:1920px;padding-right:230px;padding-left:230px}} /* ===== Site Header =====*/ .site-header{position:sticky;top:0px;z-index:100;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .site-header__inner{margin-left:auto;margin-right:auto;display:flex;height:88px;align-items:center;justify-content:space-between;gap:0.75rem;padding-left:1rem;padding-right:1rem;padding-top:1rem;padding-bottom:1rem} @media (min-width: 768px){ .site-header__inner{padding-left:2rem;padding-right:2rem}} @media (min-width: 1920px){ .site-header__inner{padding-left:5rem;padding-right:5rem}} .site-header__logo img{height:3.5rem;width:auto;-o-object-fit:contain;object-fit:contain} .site-header__right{display:flex;align-items:center;justify-content:flex-end;gap:1rem} @media (min-width: 1536px){ .site-header__right{gap:5rem}} /* ===== Hamburger Menu Button ===== */ .menu-toggle{display:flex;align-items:center;justify-content:center} @media (min-width: 1024px){ .menu-toggle{display:none}} .menu-toggle{height:2.5rem;width:2.5rem;border-radius:0.375rem;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));cursor:pointer;border-style:none;background-color:transparent;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .menu-toggle:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))} .menu-toggle{order:9999} .menu-toggle svg{height:1.5rem;width:1.5rem} /* ===== Primary Navigation ===== */ .primary-nav{display:none;height:100%} @media (min-width: 1024px){ .primary-nav{display:block}} .primary-nav__list{margin:0px;display:flex;height:100%;list-style-type:none;gap:0.75rem;padding:0px} @media (min-width: 1536px){ .primary-nav__list{gap:2.5rem}} @media (min-width: 1220px) { .primary-nav__list{gap:1.5rem} } @media (min-width: 1350px) { .site-header__inner{justify-content:space-between;gap:1.5rem} .primary-nav__list{gap:2.5rem} } @media (min-width: 1400px) { .site-header__inner{gap:2rem} } .primary-nav__link{display:flex;height:100%;cursor:pointer;align-items:center;gap:0.5rem;border-style:none;background-color:transparent;font-size:16px;line-height:24px;font-weight:600;--tw-text-opacity:1;color:rgb(77 77 77 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .primary-nav__link:hover{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .primary-nav__link{font-size:18px;line-height:28px}} .primary-nav__item{position:relative;display:flex;height:100%} /* level 1 */ .dropdown--level-1{position:absolute;left:0px;min-width:15rem; top: calc(100% + 16px); visibility:hidden; opacity:0; transition-property:all; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration:500ms} .dropdown__item{position:relative;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-top:1.25rem;padding-bottom:1.25rem;padding-left:1.75rem;padding-right:1.5rem;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:all;transition-duration:500ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)} .dropdown__item:hover{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} /* show level 1 */ .primary-nav__item:hover > .dropdown--level-1, .primary-nav__item:focus-within > .dropdown--level-1{visibility:visible;opacity:1} /* menu link */ .dropdown__link{display:flex;align-items:center;justify-content:space-between} /* level 2 */ .dropdown--level-2{position:absolute;top:0px;left:100%;min-width:15rem;visibility:hidden;opacity:0;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms} /* show level 2 */ .dropdown__item:hover > .dropdown--level-2{visibility:visible;opacity:1;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .dropdown--level-1 > :not([hidden]) ~ :not([hidden]), .dropdown--level-2 > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));--tw-divide-opacity:1;border-color:rgb(156 163 175 / var(--tw-divide-opacity, 1))} /* Header Actions */ .header-actions{display:flex;align-items:center;gap:0.75rem} @media (min-width: 1536px){ .header-actions{gap:2rem}} .header-actions__utilities{display:flex;align-items:center;gap:0.5rem} @media (min-width: 1536px){ .header-actions__utilities{gap:1.5rem}} .header-actions__cta{display:flex;align-items:center;gap:0.75rem} @media (min-width: 1536px){ .header-actions__cta{gap:1rem}} .header-actions__cta{display:none} @media (min-width: 1024px){ .header-actions__cta{display:flex}} /* search */ .search-wrap{position:relative;line-height:1;display:none} @media (min-width: 1024px){ .search-wrap{display:block}} /* toggle icon */ .icon-close{display:none} .search-toggle[aria-expanded="true"] .icon-search{display:none} .search-toggle[aria-expanded="true"] .icon-close{display:block} /* search dropdown */ .search-dropdown{position:absolute;right:0px;top:100%;margin-top:0.75rem;width:20rem;pointer-events:none;--tw-translate-y:0.5rem;--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)} .search-dropdown.active{pointer-events:auto;--tw-translate-y:0px;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1} .search-form{display:flex;align-items:center;gap:0.75rem} /* input form */ .search-input-group{display:flex;width:100%;align-items:center;gap:0.5rem;border-radius:0.75rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .search-input-group:focus-within{--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:rgb(0 161 148 / 0.2)} .search-input{width:100%;background-color:transparent;font-size:14px;line-height:20px;outline:2px solid transparent;outline-offset:2px} .search-btn{display:flex;align-items:center;justify-content:center;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .search-btn:hover{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .search-btn{display:flex;align-items:center;justify-content:center;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .search-btn:hover{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} /* ===== Language Switcher ===== */ .language-switcher{position:relative;display:inline-flex;align-items:center} .language-switcher__btn{display:inline-flex;align-items:center;gap:0.25rem;border-radius:0.375rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:14px;line-height:20px;font-weight:500;--tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .language-switcher__btn{gap:0.5rem}} .language-switcher__btn{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .language-switcher__btn:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))} .language-switcher__btn{cursor:pointer;border-style:none;background-color:transparent} .language-switcher__current{--tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))} .language-switcher__flag{height:100%;width:1.5rem;flex-shrink:0} .language-switcher__chevron{margin-inline-start:0.25rem;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .language-switcher__menu{position:absolute;right:0px;top:100%;z-index:50;margin-top:0.5rem;min-width:10rem;overflow:hidden;border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);pointer-events:none;--tw-translate-y:0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:0;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)} .language-switcher__menu.active{pointer-events:auto;--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1} .language-switcher__option{display:flex;align-items:center;gap:0.5rem;padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .language-switcher__option:hover{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .language-switcher__btn[aria-expanded="true"] .language-switcher__chevron{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} /* ===== Mobile Menu ===== */ .mobile-menu{position:fixed;top:0px;left:0px;z-index:40;height:100vh;width:20rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-translate-x:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:transform;transition-duration:300ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);display:flex;flex-direction:column;overflow-y:auto} .mobile-menu.active{--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .mobile-menu__header{display:flex;align-items:center;justify-content:space-between;padding:1rem} .mobile-menu__logo img{height:2.5rem;width:auto;-o-object-fit:contain;object-fit:contain} .mobile-menu__close{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:0.25rem;cursor:pointer;border-style:none;background-color:transparent;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .mobile-menu__close:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))} .mobile-menu__close svg{height:1.25rem;width:1.25rem} .mobile-menu__search{padding:1rem} .mobile-menu__search .search-input-group{display:flex;width:100%;align-items:center;gap:0.5rem;border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .mobile-menu__search .search-input-group:focus-within{--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:rgb(0 161 148 / 0.2)} .mobile-menu__search .search-input{width:100%;background-color:transparent;font-size:14px;line-height:20px;outline:2px solid transparent;outline-offset:2px} .mobile-menu__search .search-btn{display:flex;align-items:center;justify-content:center;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .mobile-menu__search .search-btn:hover{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} /* Mobile Navigation */ .mobile-nav{flex:1 1 0%;overflow-y:auto} .mobile-nav__list{margin:0px;display:flex;list-style-type:none;flex-direction:column;gap:0px} .mobile-nav__list > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));--tw-divide-opacity:1;border-color:rgb(229 231 235 / var(--tw-divide-opacity, 1))} .mobile-nav__list{padding:1rem} .mobile-nav__item{position:relative} .mobile-nav__link{display:block;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;font-weight:500;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .mobile-nav__link:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .mobile-nav__link{border-left-width:4px;border-color:transparent} .mobile-nav__link:hover{--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1))} .mobile-nav__parent{display:flex;align-items:center;justify-content:space-between} .mobile-nav__item--has-children{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))} .mobile-submenu__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:0.75rem;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;text-align:left;font-weight:500;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .mobile-submenu__toggle:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .mobile-submenu__toggle{cursor:pointer;border-style:none;background-color:transparent} .mobile-nav__toggle{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;text-align:left;font-weight:500;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .mobile-nav__toggle:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .mobile-nav__toggle{cursor:pointer;border-style:none;background-color:transparent} .mobile-nav__toggle svg, .mobile-submenu__toggle svg{flex-shrink:0;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .mobile-nav__toggle[aria-expanded="true"] svg{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .mobile-submenu__toggle[aria-expanded="true"] svg{--tw-rotate:-90deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .mobile-submenu{pointer-events:none;max-height:0px;overflow:hidden;padding-left:0.75rem;opacity:0;transition-property:all;transition-duration:300ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)} .mobile-submenu.active{pointer-events:auto;max-height:100vh;opacity:1} .mobile-submenu__list{margin:0px;display:flex;list-style-type:none;flex-direction:column} .mobile-submenu__list > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));--tw-divide-opacity:1;border-color:rgb(229 231 235 / var(--tw-divide-opacity, 1))} .mobile-submenu__list{padding:0px} .mobile-submenu__item{border-left-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))} .mobile-submenu__item--has-children{border-left-width:0px} .mobile-submenu__item--has-children > .mobile-submenu__list{display:none;padding-left:1rem} .mobile-submenu__item--has-children.active > .mobile-submenu__list{display:flex} .mobile-submenu__link{display:block;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .mobile-submenu__link:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .mobile-submenu__item--has-children > .mobile-submenu__toggle{padding-left:1rem;font-size:14px;line-height:20px} .mobile-submenu__item--has-children > .mobile-submenu__list{padding-left:1rem} /* Mobile Menu Footer */ .mobile-menu__footer{padding:1rem} /* Mobile Menu Overlay */ .mobile-menu-overlay{position:fixed;inset:0px;z-index:30;background-color:rgb(0 0 0 / 0.5);pointer-events:none;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .mobile-menu-overlay.active{pointer-events:auto;opacity:1} /* active link */ .primary-nav__link.active{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .mobile-nav__link.active{--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} /* ===== Site Footer ===== */ .site-footer{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));padding-top:4rem;padding-bottom:2rem;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .site-footer{font-size:16px;line-height:24px}} .site-footer { background: linear-gradient(118deg, #004b49 -7.19%, #00b1ac 135.76%), linear-gradient( 94deg, rgba(74, 184, 178, 0.5) 0.42%, rgba(0, 91, 82, 0.5) 89.93% ), #01403a; } .site-footer__inner{display:flex;flex-direction:column;gap:2.5rem} .site-footer__logo{aspect-ratio:138/78;width:138px} .site-footer__content{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:2rem} @media (min-width: 768px){ .site-footer__content{grid-template-columns:5fr 7fr;gap:2.5rem}} @media (min-width: 1280px){ .site-footer__content{grid-template-columns:3fr 6fr 3fr}} @media (min-width: 1536px){ .site-footer__content{gap:2rem}} @media (min-width: 1920px){ .site-footer__content{gap:6rem}} .site-footer__desc{margin-bottom:1rem;font-weight:500} .site-footer__title{font-weight:700} /* Social links */ .site-footer__social{margin:0px;display:flex;list-style-type:none;align-items:center;gap:1rem;padding:0px} .site-footer__social-link{height:2.5rem;width:2.5rem} .site-footer__social-icon{height:100%;width:100%;-o-object-fit:cover;object-fit:cover} /* Contact info */ .site-footer__info{display:flex;flex-direction:column;gap:1rem;font-style:normal} .site-footer__row{display:flex;align-items:center;gap:0.75rem} /* Shared icon sizing — uses currentColor so it inherits text-white */ .site-footer__icon{height:1.5rem;width:1.5rem;flex-shrink:0} .site-footer__email, .site-footer__phone{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .site-footer__email:hover, .site-footer__phone:hover{text-decoration-line:underline;opacity:0.8} /* CTA button */ .btn-link{margin-top:1rem;border-radius:9999px;background-color:rgb(255 255 255 / 0.2);transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .btn-link:hover{opacity:0.8} .site-footer__copyright{margin-top:0.5rem;border-top-width:1px;border-color:rgb(255 255 255 / 0.2);padding-top:20px;text-align:center;font-size:16px;line-height:24px} .factory-link{position:relative;display:inline-block} .dropdown-fac{position:absolute;left:0px;bottom:100%;z-index:50;margin-top:0.75rem;display:none;width:306px;overflow:hidden;border-radius:0.75rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .dropdown-fac a{display:block;padding-left:1.5rem;padding-right:1.5rem;padding-top:1rem;padding-bottom:1rem;font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(40 43 48 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .dropdown-fac a + a{border-top-width:1px;--tw-border-opacity:1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))} .dropdown-fac a:hover{--tw-bg-opacity:1;background-color:rgb(242 242 242 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .factory-link.is-open .dropdown-fac{display:block} /* ===== Breadcrumb ===== */ .breadcrumb{position:relative;z-index:10} .breadcrumb__list{margin:0px;display:flex;list-style-type:none;align-items:center;gap:0.5rem;padding:0px} .breadcrumb__item{display:flex;align-items:center;gap:0.5rem;font-size:16px;line-height:24px} .breadcrumb__item:not(:last-child)::after { content: ""; height:6px; width:6px; border-radius:9999px; } .breadcrumb__link{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .breadcrumb__current{font-weight:700} /* ===== Light Variant ===== */ .breadcrumb--light .breadcrumb__item{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .breadcrumb--light .breadcrumb__item:not(:last-child)::after{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))} .breadcrumb--light .breadcrumb__link { color: rgba(255, 255, 255, 0.82); } .breadcrumb--light .breadcrumb__link:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .breadcrumb--light .breadcrumb__current{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} /* ===== Dark Variant ===== */ .breadcrumb--dark .breadcrumb__item{--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} .breadcrumb--dark .breadcrumb__item:not(:last-child)::after{--tw-bg-opacity:1;background-color:rgb(153 153 153 / var(--tw-bg-opacity, 1))} .breadcrumb--dark .breadcrumb__link{--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} .breadcrumb--dark .breadcrumb__link:hover{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .breadcrumb--dark .breadcrumb__current{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .search-page{--tw-bg-opacity:1;background-color:rgb(246 249 248 / var(--tw-bg-opacity, 1))} .search-page__section{padding-top:3rem;padding-bottom:3rem} @media (min-width: 1024px){ .search-page__section{padding-top:5rem;padding-bottom:5rem}} .search-page__header{margin-bottom:2.5rem} @media (min-width: 1024px){ .search-page__header{margin-bottom:3.5rem}} .search-page__title{font-size:32px;line-height:44px;font-weight:600;--tw-text-opacity:1;color:rgb(26 26 26 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .search-page__title{font-size:40px;line-height:56px}} .search-page__title span{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .search-page__desc{margin-top:1rem;max-width:48rem;font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .search-page__desc{font-size:18px;line-height:28px}} .search-page__form{margin-bottom:3rem;display:flex;flex-direction:column;gap:0.75rem;border-radius:0.5rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:1rem;--tw-shadow:0 8px 24px rgba(0, 0, 0, 0.12);--tw-shadow-colored:0 8px 24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} @media (min-width: 768px){ .search-page__form{flex-direction:row}} .search-page__input{min-height:3rem;flex:1 1 0%;border-radius:0.375rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(240 240 240 / var(--tw-border-opacity, 1));padding-left:1rem;padding-right:1rem;font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(26 26 26 / var(--tw-text-opacity, 1));outline:2px solid transparent;outline-offset:2px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .search-page__input:focus{--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1))} .search-page__submit{min-height:3rem;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));padding-left:1.5rem;padding-right:1.5rem;font-size:16px;line-height:24px;font-weight:600;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .search-page__submit:hover{--tw-bg-opacity:1;background-color:rgb(15 95 90 / var(--tw-bg-opacity, 1))} .search-group{margin-bottom:3.5rem} @media (min-width: 1024px){ .search-group{margin-bottom:5rem}} .search-group:last-child{margin-bottom:0px} .search-group__header{margin-bottom:1.5rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem} .search-group__title{margin-top:0.5rem;font-size:28px;line-height:40px;font-weight:600;--tw-text-opacity:1;color:rgb(26 26 26 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .search-group__title{font-size:36px;line-height:48px}} .search-group .factory__body{padding-top:0px} /* ===== Card ===== */ .our-product-card{position:relative;cursor:pointer;overflow:hidden;border-radius:0.5rem;padding:1.5rem; aspect-ratio: 460 / 407} /* background card */ .our-product-card__bg{pointer-events:none;position:absolute;inset:0px; z-index: 5; background-repeat: no-repeat; background-size: cover; background-position: center} /* images */ .our-product-card__imgs{position:absolute;inset:0px; z-index: 10} .our-product-card__image{position:absolute;inset:0px;height:100%;width:100%;-o-object-fit:cover;object-fit:cover;transition-property:opacity;transition-duration:500ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)} /* image wrapper */ .our-product-card__imgs{position:absolute;inset:0px; z-index: 10} /* default image */ .our-product-card__image--default { opacity: 1; z-index: 10; } /* hover image */ .our-product-card__image--hover { z-index: 20; opacity:0; } .our-product-card:hover .our-product-card__image--default{opacity:0} .our-product-card:hover .our-product-card__image--hover{opacity:1} /* overlay */ .our-product-card__overlay{position:absolute;inset:0px; z-index: 30; background-color:rgb(0 0 0 / 0.1); transition-property:color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration:500ms} .our-product-card:hover .our-product-card__overlay{background-color:rgb(0 0 0 / 0.5)} /* content */ .our-product-card__content{position:relative;z-index:40;display:flex;height:100%;flex-direction:column;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .our-product-card__title{font-size:16px;line-height:24px;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .our-product-card__title{font-size:18px;line-height:28px}} @media (min-width: 1536px){ .our-product-card__title{font-size:20px;line-height:32px}} .our-product-card__title{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms} .our-product-card:hover .our-product-card__title{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} /* ===== Footer ===== */ .our-product-card__footer{margin-top:auto;display:flex;align-items:center;justify-content:flex-end;gap:1rem} .our-product-card__label{flex-shrink:0;font-weight:500;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1));opacity:0;--tw-translate-x:1rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms} .our-product-card:hover .our-product-card__label{--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));opacity:1} /* ===== Button ===== */ .our-product-card__btn{flex-shrink:0;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.5rem;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms} .our-product-card__btn:hover{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .our-product-card__btn svg{height:1.5rem;width:1.5rem} /* ===== card ===== */ .news-card{overflow:hidden;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))} /* ===== image ===== */ .news-card--home .news-card__img{position:absolute;inset:0px;height:100%;width:100%;-o-object-fit:cover;object-fit:cover;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:700ms} .news-card__body{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms} .news-card--home .news-card__body, .news-card--news .news-card__body { gap: 12px; } .news-card:hover .news-card__action{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .news-card--home{position:relative;aspect-ratio:460/495;border-radius:1rem} .news-card--news{position:relative;display:flex;height:100%;flex-direction:column;border-radius:0.5rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1)); box-shadow: 0 2.685px 29.536px 0 rgba(0, 0, 0, 0.07)} .news-card--news:hover .news-card__title{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .news-card--news > a{display:flex;height:100%;flex-direction:column} /* .news-card--news .news-card__thumb { @apply block overflow-hidden aspect-[412/360] md:aspect-[412/480] lg:aspect-[412/360] xl:aspect-[412/480] 2xl:aspect-[412/360]; } */ .news-card--news .news-card__thumb{display:block;aspect-ratio:465/232;width:100%;overflow:hidden} /* ===== body ===== */ .news-card--home .news-card__body{position:absolute;bottom:0.5rem;left:0.5rem;right:0.5rem;z-index:10;border-radius:0.75rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:1.25rem;display:flex;flex-direction:column;gap:0.75rem} .news-card--news .news-card__body{display:flex;flex-direction:column;gap:0.75rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:1.25rem} .news-card--home:hover .news-card__body { gap: 24px; } .news-card--news .news-card__img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover} /* ===== content ===== */ .news-card__title{min-height:3rem;font-size:16px;line-height:24px;font-weight:600;--tw-text-opacity:1;color:rgb(46 46 46 / var(--tw-text-opacity, 1));overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2 /* Giới hạn 2 dòng, tránh overflow */} .news-card--news .news-card__desc{margin-top:6px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:2.5rem;font-size:14px;line-height:20px} @media (min-width: 1536px){ .news-card--news .news-card__desc{min-height:3rem;font-size:16px;line-height:24px}} .news-card--news .news-card__desc { color: rgba(0, 0, 0, 0.62); } .news-card--news .news-card__spacer{flex:1 1 0%} @media (min-width: 1024px){ .news-card--news .news-card__spacer{min-height:0.5rem}} @media (min-width: 1536px){ .news-card--news .news-card__spacer{min-height:18px}} .news-card--news .news-card__footer{border-top-width:1px;--tw-border-opacity:1;border-color:rgb(222 222 222 / var(--tw-border-opacity, 1));padding-top:18px} .news-card__footer{display:flex;align-items:center;justify-content:space-between} .news-card__date{display:flex;align-items:center;gap:0.375rem} .news-card__time{font-size:14px;line-height:20px; color: rgba(46, 46, 46, 0.6)} /* ===== action ===== */ .news-card__action{display:flex;align-items:center;gap:0.5rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;font-size:14px;line-height:20px} @media (min-width: 1536px){ .news-card__action{font-size:16px;line-height:24px}} .news-card__action { /* Default: text cho span, circle stroke, dots fill */ color: rgba(46, 46, 46, 0.75); } /* ─── Transition cho tất cả ─── */ .news-card__action .arrow-circle, .news-card__action .arrow-line, .news-card__action .arrow-dot { transition: fill 0.3s ease, stroke 0.3s ease; } /* ─── Default ─── */ .news-card__action .arrow-circle { stroke: rgb(46 46 46 / 0.75); fill: transparent; } .news-card__action .arrow-line { stroke: rgb(46 46 46 / 0.75); } .news-card__action .arrow-dot { fill: rgb(46 46 46 / 0.75); } /* ─── Hover ─── */ .news-card:hover .news-card__action .arrow-circle { stroke: #00a194; fill: #00a194; } .news-card:hover .news-card__action .arrow-line { stroke: #00a194; } .news-card:hover .news-card__action .arrow-dot { fill: white; } .products-item{position:relative;isolation:isolate;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;border-radius:1rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1); box-shadow: 0.742px 0 51.94px 0 rgba(103, 103, 103, 0.07)} .products-item:hover { background: linear-gradient(0deg, rgba(0, 53, 8, 0.08) 0%, rgba(0, 53, 8, 0.08) 100%), #fff; } .products-item:hover .products-item__name, .products-item:focus-within .products-item__name{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} /* .products-item::after { content: ""; @apply absolute inset-x-0 bottom-0 z-0 h-[45%] bg-primary; @apply transition-transform duration-500 ease-out; transform: translateY(101%); } */ .products-item:hover::after, .products-item:focus-within::after { transform: translateY(0); } .products-item__image-wrap{position:relative;z-index:10;display:flex;width:100%;flex:1 1 0%;align-items:center;justify-content:center;padding:1rem;aspect-ratio:324/260} .products-item__image{height:100%;width:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center} .products-item__info{position:relative;z-index:10;width:100%;padding:1rem;font-weight:700;--tw-text-opacity:1;color:rgb(49 49 49 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .products-item:hover .products-item__info, .products-item:focus-within .products-item__info{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .products-item__name{text-align:center;font-size:16px;line-height:24px;font-weight:700} .products-item__link{position:absolute;right:1.5rem;top:1.5rem;z-index:20;display:none;height:2rem;width:2rem} .products-item__link:focus-visible{outline-style:solid;outline-width:2px;outline-offset:4px;outline-color:#00A194} .products-item:hover .products-item__link, .products-item:focus-within .products-item__link{display:block} .filter{display:flex;flex-direction:column} .filter__header{display:flex;align-items:center;gap:0.75rem;border-radius:0.5rem;padding:0.75rem} .filter__title{font-size:20px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} .filter__list > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse));border-color:rgb(0 0 0 / 0.1)} .filter__list{border-radius:0.75rem} .filter__item{padding-left:0.5rem;padding-right:0.5rem;padding-top:0.75rem;padding-bottom:0.75rem} .filter__label{display:flex;cursor:pointer;align-items:center;gap:0.75rem} .filter__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0} .filter__checkbox{display:flex;height:1.25rem;width:1.25rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:0.125rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(136 137 148 / var(--tw-border-opacity, 1));transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .filter__check-icon{display:none;height:1.25rem;width:1.25rem} .filter__input:checked + .filter__checkbox{border-color:transparent} .filter__input:checked + .filter__checkbox .filter__check-icon{display:block} .filter__input:focus-visible + .filter__checkbox{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:#00A194} .filter__desc{font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} .service-card{overflow:hidden;display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:4rem} @media (min-width: 1024px){ .service-card{grid-template-columns:repeat(2, minmax(0, 1fr))}} .service-card + .service-card{margin-top:2.5rem} @media (min-width: 1024px){ .service-card + .service-card{margin-top:5rem}} @media (min-width: 1280px){ .service-card + .service-card{margin-top:120px}} /* ===== Reverse Layout ===== */ @media (min-width: 1024px){ .service-card--reverse .service-card__media{order:2} .service-card--reverse .service-card__content{order:1}} /* ===== Media ===== */ .service-card__media{position:relative;overflow:hidden;border-radius:0.5rem;aspect-ratio:710/400} @media (min-width: 1024px){ .service-card__media{aspect-ratio:auto;height:100%}} .service-card__img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:700ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)} .service-card:hover .service-card__img{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} /* ===== Content ===== */ .service-card__content{display:flex;flex-direction:column;justify-content:center} .service-card__body{display:flex;flex-direction:column;gap:1rem} .service-card__title{font-size:28px;line-height:40px;font-weight:700;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .service-card__title{font-size:32px;line-height:44px}} .service-card__desc{font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .service-card__desc{font-size:16px;line-height:24px}} .service-card__desc{margin-bottom:2rem} .factory-card{position:relative;overflow:hidden;border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(240 240 240 / var(--tw-border-opacity, 1));display:flex;aspect-ratio:600/580;flex-direction:column;justify-content:flex-end} @media (min-width: 1024px){ .factory-card{aspect-ratio:710/620}} /* overlay linear */ .factory-card::after { content: ""; position:absolute; inset:0px; z-index:20; opacity:0; transition-property:opacity; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration:700ms; transition-timing-function:cubic-bezier(0, 0, 0.2, 1); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #00453e 100%); } .factory-card:hover::after{opacity:1} .factory-card__media{position:absolute;inset:0px;z-index:0;display:block} .factory-card__image{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:700ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)} .factory-card:hover .factory-card__image{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .factory-card__body{position:relative;z-index:30;display:flex;gap:1.5rem;padding:1rem} @media (min-width: 768px){ .factory-card__body{padding:1.25rem}} @media (min-width: 1280px){ .factory-card__body{padding:1.5rem}} .factory-card__body::before { content: ""; position:absolute; inset:0px; z-index:-10; --tw-bg-opacity:1; background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1)); transition-property:transform; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration:700ms; transition-timing-function:cubic-bezier(0, 0, 0.2, 1); } /* trượt nền trắng */ .factory-card:hover .factory-card__body::before{--tw-translate-y:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .factory-card__content{display:flex;flex:1 1 0%;flex-direction:column;gap:0.5rem} @media (min-width: 1280px){ .factory-card__content{gap:0.75rem}} .factory-card__title{font-size:24px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms} @media (min-width: 1536px){ .factory-card__title{font-size:28px;line-height:40px}} .factory-card__desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(77 77 77 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms} @media (min-width: 768px){ .factory-card__desc{font-size:16px;line-height:24px}} .factory-card__desc span{font-weight:700} .factory-card:hover .factory-card__title, .factory-card:hover .factory-card__desc{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .factory-card__link{position:relative;z-index:40;margin-left:auto;display:flex;height:2rem;width:2rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(15 95 90 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 1280px){ .factory-card__link{height:3rem;width:3rem}} .factory-card__link{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .factory-card:hover .factory-card__link{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1))} .factory-card__link svg{height:1.5rem;width:1.5rem} /* Section: Feature */ .feature{position:relative;width:100%;overflow:hidden;padding-top:4rem;padding-bottom:4rem} @media (min-width: 1024px){ .feature{padding-top:7rem;padding-bottom:10rem}} .feature{min-height:600px} @media (min-width: 1024px){ .feature{min-height:720px}} .feature{--tw-bg-opacity:1;background-color:rgb(246 249 248 / var(--tw-bg-opacity, 1))} /* |-------------------------------------------------------------------------- | Background Desktop |-------------------------------------------------------------------------- */ .feature__bg{position:absolute;inset:0px;z-index:0} .feature__img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover} @media (min-width: 1024px){ .feature__img{-o-object-fit:cover;object-fit:cover}} /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ .feature .container{position:relative;z-index:10} .feature__inner{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:2rem} @media (min-width: 1024px){ .feature__inner{grid-template-columns:repeat(2, minmax(0, 1fr))}} /* |-------------------------------------------------------------------------- | Mobile Image |-------------------------------------------------------------------------- */ .feature__media{position:relative;z-index:10;display:block} @media (min-width: 1024px){ .feature__media{display:none}} .feature__media-img{height:auto;width:100%;-o-object-fit:contain;object-fit:contain} /* |-------------------------------------------------------------------------- | Content |-------------------------------------------------------------------------- */ .feature__content{display:flex;flex-direction:column;justify-content:center;gap:2rem} @media (min-width: 1024px){ .feature__content{gap:3rem}} @media (min-width: 1920px){ .feature__content{gap:4rem}} /* Layout Variant */ @media (min-width: 1024px){ .feature--right .feature__content{grid-column-start:2} .feature--left .feature__content{grid-column-start:1}} /* |-------------------------------------------------------------------------- | Header |-------------------------------------------------------------------------- */ .feature__header{display:flex;flex-direction:column;gap:0.5rem} .feature__title{font-size:32px;line-height:44px;font-weight:600;letter-spacing:0.025em;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .feature__title{font-size:48px;line-height:68px}} @media (min-width: 1536px){ .feature__title{font-size:54px;line-height:72px}} .feature__desc{font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(45 54 53 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .feature__desc{font-size:18px;line-height:28px}} @media (min-width: 1536px){ .feature__desc{font-size:20px;line-height:32px}} .feature__desc span{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .choose-us{display:flex;flex-direction:column;gap:3rem;--tw-bg-opacity:1;background-color:rgb(246 249 248 / var(--tw-bg-opacity, 1));padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .choose-us{padding-top:120px;padding-bottom:120px}} .choose-us__inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem} @media (min-width: 1024px){ .choose-us__inner{gap:2.5rem}} @media (min-width: 1280px){ .choose-us__inner{gap:4rem}} .choose-us__title{text-align:center;font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .choose-us__title{font-size:48px;line-height:68px}} @media (min-width: 1536px){ .choose-us__title{font-size:54px;line-height:72px}} .choose-us__list{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:1.5rem} @media (min-width: 768px){ .choose-us__list{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 1280px){ .choose-us__list{grid-template-columns:repeat(3, minmax(0, 1fr));gap:2.5rem}} .choose-us-card{display:flex;flex-direction:column;gap:1.5rem;border-radius:1rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:1.5rem;padding-right:1.5rem;padding-top:2rem;padding-bottom:2rem} .choose-us-card__icon{height:3rem;width:3rem;-o-object-fit:contain;object-fit:contain} .choose-us-card__content{display:flex;flex-direction:column;gap:1rem} .choose-us-card__title{font-size:24px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .choose-us-card__title{font-size:28px;line-height:40px}} .choose-us-card__desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .choose-us-card__desc{font-size:16px;line-height:24px}} /* Section: Certifications */ .certifications{overflow:hidden} .certifications__inner{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));padding-top:132px;padding-bottom:40px} @media (min-width: 1024px){ .certifications__inner{grid-template-columns:repeat(2, minmax(0, 1fr))}} .certifications__left{display:flex;flex-direction:column;gap:1rem; padding-left: var(--container-safe-left); padding-right: var(--container-safe-right)} @media (min-width: 1024px){ .certifications__left{padding-right:0px}} .certifications__right{display:flex;min-width:0px;flex-direction:column;gap:1.5rem} .certifications__title{font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .certifications__title{font-size:48px;line-height:68px}} @media (min-width: 1536px){ .certifications__title{font-size:54px;line-height:72px}} .certifications__desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(45 54 53 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .certifications__desc{font-size:18px;line-height:28px}} @media (min-width: 1536px){ .certifications__desc{font-size:20px;line-height:32px}} .certifications__desc span{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .certifications__action{display:flex;align-items:center;justify-content:flex-end;gap:0.5rem; padding-right: var(--container-safe-right)} .certifications-btn-prev, .certifications-btn-next{--tw-text-opacity:1;color:rgb(179 179 179 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} /* Khi có thể click: xanh */ .certifications-btn-next:not(.swiper-button-disabled){--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .certifications-btn-prev:not(.swiper-button-disabled){--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .certifications__slider{width:100%;overflow:hidden} @media (min-width: 1024px){ .certifications__slider{margin-inline-start:100px}} @media (min-width: 1536px){ .certifications__slider{margin-inline-start:127px}} .certifications__img{display:block;aspect-ratio:171/246;width:100%;border-radius:0.5rem} .banner{position:relative;width:100%;overflow:hidden;aspect-ratio:319/107} .banner__img{position:absolute;inset:0px;height:100%;width:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center} /* Button */ .btn { /* base styles for the button */ border-radius:9999px; font-size:16px; line-height:24px; font-weight:700; transition-property:all; transition-duration:500ms; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); display:flex; align-items:center; justify-content:center; gap:0.5rem; } .btn:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .btn:disabled{cursor:not-allowed;opacity:0.5} .btn-primary { /* base styles for the button */ border-radius:9999px; font-size:16px; line-height:24px; font-weight:700; transition-property:all; transition-duration:500ms; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); display:flex; align-items:center; justify-content:center; gap:0.5rem; } .btn-primary:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .btn-primary:disabled{cursor:not-allowed;opacity:0.5} .btn-primary{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .btn-primary:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1));--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .btn-primary{border-width:1px;border-color:transparent} .btn-primary:hover{--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1))} .btn-outline { /* base styles for the button */ border-radius:9999px; font-size:16px; line-height:24px; font-weight:700; transition-property:all; transition-duration:500ms; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); display:flex; align-items:center; justify-content:center; gap:0.5rem; } .btn-outline:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .btn-outline:disabled{cursor:not-allowed;opacity:0.5} .btn-outline{background-color:transparent;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1));border-width:1px;--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1))} .btn-outline:hover{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .btn-white { /* base styles for the button */ border-radius:9999px; font-size:16px; line-height:24px; font-weight:700; transition-property:all; transition-duration:500ms; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); display:flex; align-items:center; justify-content:center; gap:0.5rem; } .btn-white:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .btn-white:disabled{cursor:not-allowed;opacity:0.5} .btn-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1));border-width:1px;--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))} .btn-white:hover{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .btn-fit{width:-moz-fit-content;width:fit-content} /* Size variants */ .btn-xs{padding-left:0.75rem;padding-right:0.75rem;padding-top:0.75rem;padding-bottom:0.75rem} .btn-sm{padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem} .btn-md{padding-left:2rem;padding-right:2rem;padding-top:1rem;padding-bottom:1rem} /* Hiệu ứng fill từ dưới lên */ .page-banner{position:relative;width:100%;overflow:hidden; aspect-ratio: 1920 / 500} .page-banner__img{position:absolute;inset:0px;z-index:0;height:100%;width:100%;-o-object-fit:cover;object-fit:cover} .page-banner--overlay::after { content: ""; position:absolute; inset:0px; z-index:1; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100% ); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .page-banner__content{position:absolute;inset:0px;z-index:10} .page-banner__container{display:flex;height:100%;flex-direction:column;justify-content:flex-end;gap:0.25rem;padding-bottom:1.5rem} @media (min-width: 768px){ .page-banner__container{padding-bottom:3.5rem}} .page-banner__title{margin-top:0.5rem;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));font-size:40px;line-height:56px} @media (min-width: 1024px){ .page-banner__title{margin-top:1rem}} @media (min-width: 1536px){ .page-banner__title{font-size:48px;line-height:68px}} .tab-section{padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .tab-section{padding-top:120px;padding-bottom:120px}} /* Desktop chỉ hiện từ xl = 1280px */ .tab__nav--desktop{display:none} @media (min-width: 1280px){ .tab__nav--desktop{display:grid;grid-template-columns:5fr 7fr;gap:6rem}} @media (min-width: 1536px){ .tab__nav--desktop{gap:136px}} .tab-section__list{width:16rem;flex-shrink:0} .tab-section__tablist{position:relative;display:flex;flex-direction:column;overflow:visible;border-right-width:1px;border-color:rgb(0 0 0 / 0.1);padding-right:2.5rem} @media (min-width: 1536px){ .tab-section__tablist{width:450px}} .tab-section__divider{margin:0px;height:1px;border-style:none;background-color:rgb(0 0 0 / 0.1); margin-right: -40px} .tab-section__tab{position:relative;width:100%;text-align:left;font-size:20px;line-height:32px;font-weight:600;--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .tab-section__tab{font-size:24px;line-height:32px}} .tab-section__tab{padding-top:1rem;padding-bottom:1rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms} .tab-section__tab[data-state="active"]{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .tab-section__tab[data-state="active"]::after { content: ""; position:absolute; right:-55.278px; top:50%; --tw-translate-y:-50%; --tw-rotate:45deg; transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); height:30.556px; width:30.556px; border-top-width:1px; border-right-width:1px; border-color:rgb(0 0 0 / 0.15); z-index:2; --tw-bg-opacity:1; background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .tab-section__panel{display:none} .tab-section__panel[data-state="active"]{display:block} .tab-section__body{font-size:20px;line-height:32px;font-weight:600;--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .tab-section__body{font-size:32px;line-height:44px}} .tab-section__highlight{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} /* Mobile + Tablet: hiện dưới 1280px */ .tab-accordion{display:flex;flex-direction:column;border-top-width:1px;border-color:rgb(0 0 0 / 0.1)} @media (min-width: 1280px){ .tab-accordion{display:none}} .tab-accordion__item{border-bottom-width:1px;border-color:rgb(0 0 0 / 0.1)} .tab-accordion__title{width:100%;padding-top:1.25rem;padding-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;font-size:16px;line-height:24px;font-weight:600;--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .tab-accordion__title{font-size:24px;line-height:32px}} .tab-accordion__title span{flex:1 1 0%} .tab-accordion__icon{height:1.25rem;width:1.25rem;flex-shrink:0;--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1));transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .tab-accordion__title[aria-expanded="true"]{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .tab-accordion__title[aria-expanded="true"] .tab-accordion__icon{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .tab-accordion__content{padding-bottom:1.5rem} .tab-accordion__content .tab-section__body{font-size:20px;line-height:32px} @media (min-width: 768px){ .tab-accordion__content .tab-section__body{font-size:28px;line-height:40px}} /* ===== Product Detail ===== */ .product-detail{padding-top:3rem} @media (min-width: 1280px){ .product-detail{padding-top:88px}} .product-detail{padding-bottom:3rem} @media (min-width: 1280px){ .product-detail{padding-bottom:120px}} .product-detail__inner{display:grid;gap:2.5rem} @media (min-width: 1280px){ .product-detail__inner{grid-template-columns:5fr 7fr;gap:4rem}} .product-detail__content, .product-gallery{min-width:0px} .product-detail__title{margin-top:1rem;font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} @media (min-width: 1536px){ .product-detail__title{font-size:38px;line-height:52px}} .product-detail__manufacturer{margin-top:2.5rem;font-size:18px;line-height:28px;font-weight:600;--tw-text-opacity:1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .product-detail__manufacturer{font-size:24px;line-height:32px}} .product-detail__meta{margin-top:2.5rem;margin-bottom:2rem;display:flex;flex-direction:column;gap:1rem;font-size:14px;line-height:20px} @media (min-width: 768px){ .product-detail__meta{font-size:16px;line-height:24px}} .product-detail__meta-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:1.5rem} .product-detail__meta dt{font-weight:600;--tw-text-opacity:1;color:rgb(49 49 49 / var(--tw-text-opacity, 1))} .product-detail__meta dt::before { content: "• "; } .product-detail__meta dd{margin:0px;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} /* ===== Product Gallery ===== */ .product-gallery__main{width:100%;border-radius:0.5rem} .product-gallery__main-item{position:relative;display:flex;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:0.5rem; background: rgba(0, 0, 0, 0.05)} .product-gallery__main-item img{height:100%;width:100%;-o-object-fit:contain;object-fit:contain} .product-gallery__play{position:absolute;inset:0px;z-index:10;display:flex;align-items:center;justify-content:center} .product-gallery__play svg{height:4rem;width:4rem} @media (min-width: 768px){ .product-gallery__play svg{height:88px;width:88px}} .product-gallery__thumbs{margin-top:1rem;width:100%} .product-gallery__thumbs .swiper-slide{height:auto} .product-gallery__thumb{display:flex;aspect-ratio:1 / 1;width:100%;align-items:center;justify-content:center;overflow:hidden;border-radius:0.375rem;border-width:1px;border-color:transparent;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms; background: rgba(0, 0, 0, 0.05)} .product-gallery__thumb img{height:100%;width:100%;-o-object-fit:contain;object-fit:contain} .product-gallery__thumbs .swiper-slide-thumb-active .product-gallery__thumb{--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1))} /* ===== Product Description ===== */ .product-desc{margin-top:1.5rem} .product-desc__toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem;text-align:left;font-size:20px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(49 49 49 / var(--tw-text-opacity, 1))} .product-desc__body[hidden]{display:none} .product-desc__table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .product-desc__table{font-size:16px;line-height:24px}} .product-desc__table th, .product-desc__table td{border-width:1px;--tw-border-opacity:1;border-color:rgb(179 179 179 / var(--tw-border-opacity, 1));padding:1rem;vertical-align:top;font-size:18px;line-height:28px} .product-desc__table th{width:180px;font-weight:700;--tw-text-opacity:1;color:rgb(42 42 42 / var(--tw-text-opacity, 1))} .product-desc__table th::before { content: "• "; } .product-desc__table ul, .product-desc__table ol{margin:0px;list-style-type:disc;padding-left:1.25rem} .product-desc__table li + li{margin-top:0.25rem} @media (max-width: 767px) { .product-desc__table, .product-desc__table tbody, .product-desc__table tr, .product-desc__table th, .product-desc__table td{display:block;width:100%} .product-desc__table th{border-bottom-width:0px} .product-desc__table td{border-top-width:0px} } .related-products{margin-top:0.5rem;padding-bottom:3rem} @media (min-width: 1280px){ .related-products{padding-bottom:120px}} .related-products__header{margin-bottom:2rem;display:flex;align-items:center;justify-content:space-between} .related-products__title{font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .related-products__title{font-size:48px;line-height:68px}} @media (min-width: 1536px){ .related-products__title{font-size:54px;line-height:72px}} .related-products__btn{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms} .related-products__nav{display:flex;align-items:center} .related-products__btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;height:2.5rem;width:2.5rem} @media (min-width: 768px){ .related-products__btn{height:3rem;width:3rem}} @media (min-width: 1280px){ .related-products__btn{height:52px;width:52px}} @media (min-width: 1536px){ .related-products__btn{height:61px;width:61px}} .related-products__btn svg{height:100%;width:100%} .related-products__btn.swiper-button-disabled{cursor:not-allowed;opacity:0.4} .related-products__btn:not(.swiper-button-disabled){opacity:1} .related-products__btn + .related-products__btn { margin-left: -8px; } .factory-detail{--tw-bg-opacity:1;background-color:rgb(249 251 250 / var(--tw-bg-opacity, 1));padding-top:4rem;padding-bottom:4rem} @media (min-width: 1024px){ .factory-detail{padding-top:6rem;padding-bottom:6rem}} .factory-detail__inner{display:flex;flex-direction:column;gap:2.5rem} /* ===== Media ===== */ .factory-detail__video{position:relative;display:block;aspect-ratio:1170/540;overflow:hidden;border-radius:0.5rem} .factory-detail__image{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:700ms} .factory-detail__video::after { content: ""; position:absolute; inset:0px; opacity:0; transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); transition-duration:500ms; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 69, 62, 0.45) 100% ); } .factory-detail__video:hover::after{opacity:1} .factory-detail__video:hover .factory-detail__image{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} /* ===== Play Button ===== */ .factory-detail__play{position:absolute;inset:0px;z-index:10;display:flex;align-items:center;justify-content:center} .factory-detail__play svg{height:4rem;width:4rem} @media (min-width: 768px){ .factory-detail__play svg{height:88px;width:88px}} /* ===== Content ===== */ .factory-detail__content{display:grid;gap:2.5rem} @media (min-width: 1024px){ .factory-detail__content{grid-template-columns:320px 1fr} .factory-detail__heading{border-right-width:1px;--tw-border-opacity:1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));padding-right:2.5rem}} .factory-detail__title{font-size:28px;line-height:40px;font-weight:700;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} .factory-detail__desc{font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(77 77 77 / var(--tw-text-opacity, 1))} .factory-detail__desc span{font-weight:700} /* ===== Table ===== */ .factory-detail__table{margin-top:2rem;border-top-width:1px;--tw-border-opacity:1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))} .factory-detail__row{display:grid;gap:1rem;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));padding-top:1.25rem;padding-bottom:1.25rem} @media (min-width: 768px){ .factory-detail__row{grid-template-columns:160px 1fr}} .factory-detail__label{font-weight:600;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} .factory-detail__value{--tw-text-opacity:1;color:rgb(77 77 77 / var(--tw-text-opacity, 1))} .factory-products{padding-top:4rem;padding-bottom:4rem} @media (min-width: 1024px){ .factory-products{padding-top:6rem;padding-bottom:6rem}} /* Override nhẹ cho card trong factory detail */ .factory-products .products-item{min-height:260px;border-radius:0.5rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))} .factory-products .products-item__image-wrap{aspect-ratio:324/260} .factory-products .products-item__image{height:100%;width:100%;-o-object-fit:contain;object-fit:contain} .factory-products .products-item__info{padding-left:1rem;padding-right:1rem;padding-bottom:1.25rem;text-align:center} .factory-products .products-item__name{font-size:16px;line-height:24px;font-weight:700;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))} .highlight-news{padding-top:3rem;padding-bottom:3rem} @media (min-width: 1280px){ .highlight-news{padding-top:120px;padding-bottom:100px}} .highlight-news__swiper{position:relative;overflow:hidden;border-radius:1rem;--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1))} .highlight-news__card{display:grid;overflow:hidden;border-radius:1rem;--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));grid-template-columns:repeat(1, minmax(0, 1fr))} @media (min-width: 1024px){ .highlight-news__card{grid-template-columns:480px 1fr}} @media (min-width: 1280px){ .highlight-news__card{grid-template-columns:560px 1fr}} @media (min-width: 1536px){ .highlight-news__card{grid-template-columns:680px 1fr}} .highlight-news__media{aspect-ratio:680/500;overflow:hidden;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))} @media (min-width: 1024px){ .highlight-news__media{aspect-ratio:auto;height:500px}} .highlight-news__image{height:100%;width:100%;-o-object-fit:cover;object-fit:cover} .highlight-news__content{display:flex;flex-direction:column;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));padding:1.5rem} @media (min-width: 768px){ .highlight-news__content{padding:2.5rem}} @media (min-width: 1024px){ .highlight-news__content{height:500px;padding:3rem;padding-bottom:7rem}} .highlight-news__main{display:flex;flex-direction:column;align-items:flex-start} .highlight-news__label{margin-bottom:6px;font-size:14px;line-height:20px;font-weight:600;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .highlight-news__label{font-size:16px;line-height:24px}} .highlight-news__title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:24px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .highlight-news__title{font-size:32px;line-height:44px}} @media (min-width: 1536px){ .highlight-news__title{font-size:36px;line-height:48px}} .highlight-news__desc{margin-top:1.5rem;margin-bottom:1.5rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(240 240 240 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .highlight-news__desc{font-size:16px;line-height:24px}} @media (min-width: 1536px){ .highlight-news__desc{font-size:18px;line-height:28px}} .highlight-news__controls{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:1.5rem} @media (min-width: 768px){ .highlight-news__controls{padding-left:2.5rem;padding-right:2.5rem;padding-bottom:2.5rem}} @media (min-width: 1024px){ .highlight-news__controls{position:absolute;right:3rem;bottom:3rem;z-index:20;left:528px}} @media (min-width: 1280px){ .highlight-news__controls{left:608px}} @media (min-width: 1536px){ .highlight-news__controls{left:728px}} @media (min-width: 1024px){ .highlight-news__controls{padding-left:0px;padding-right:0px;padding-bottom:0px}} .highlight-news__arrows{display:flex;align-items:center;gap:0.5rem} .highlight-news__prev, .highlight-news__next{display:flex;height:50px;width:50px;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .highlight-news__prev:hover, .highlight-news__next:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .highlight-news__prev svg, .highlight-news__next svg{height:1.5rem;width:1.5rem} .highlight-news__pagination{position:static;display:flex;width:auto;align-items:center;justify-content:flex-end;gap:0.75rem} .highlight-news__pagination .swiper-pagination-bullet{position:relative;margin:0px;border-radius:9999px;opacity:1; width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.5)} .highlight-news__pagination .swiper-pagination-bullet-active{position:relative;display:flex;align-items:center;justify-content:center; width: 24px; height: 24px; background: transparent; border: 1px solid #fff} /* chấm trắng bên trong */ .highlight-news__pagination .swiper-pagination-bullet-active::after { content: ""; position:absolute; border-radius:9999px; --tw-bg-opacity:1; background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1)); width: 14px !important; height: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .news-list{padding-top:4rem;padding-bottom:4rem} @media (min-width: 1024px){ .news-list{padding-top:6rem;padding-bottom:6rem}} /* ===== Top ===== */ .news-list__top{margin-bottom:2rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1.25rem} @media (min-width: 768px){ .news-list__top{margin-bottom:2.5rem}} .news-list__title{font-size:32px;line-height:44px;font-weight:700;--tw-text-opacity:1;color:rgb(9 75 64 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .news-list__title{font-size:36px;line-height:48px}} @media (min-width: 1280px){ .news-list__title{font-size:54px;line-height:72px}} .news-list__select{height:3rem;min-width:180px;border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(179 179 179 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:1rem;padding-right:1rem;font-size:14px;line-height:20px;font-weight:500;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1));outline:2px solid transparent;outline-offset:2px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .news-list__select:focus{--tw-border-opacity:1;border-color:rgb(0 161 148 / var(--tw-border-opacity, 1))} /* ===== Grid ===== */ .news-list__grid{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:2rem} @media (min-width: 768px){ .news-list__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 1280px){ .news-list__grid{grid-template-columns:repeat(3, minmax(0, 1fr))}} /* ===== Select ===== */ .news-list__select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0.75rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(222 222 222 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:3rem;font-size:16px;line-height:24px;--tw-text-opacity:1;color:rgb(46 46 46 / var(--tw-text-opacity, 1));outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 9L12 16L5 9' stroke='%233F3F3F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px} /* ===== Pagination ===== */ .news-pagination{margin-top:3.5rem;display:flex;align-items:center;justify-content:center} .news-pagination__item{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:0.375rem;font-size:14px;line-height:20px;font-weight:700;--tw-text-opacity:1;color:rgb(72 79 87 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .news-pagination__item:hover{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .news-pagination__item.active{--tw-bg-opacity:1;background-color:rgb(0 161 148 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .news-pagination__dots { color: #313131; } .highlight-news__arrows{display:flex;align-items:center;gap:0.75rem} .highlight-news__prev, .highlight-news__next{display:flex;height:50px;width:50px;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:rgb(255 255 255 / 0.7);--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms; backdrop-filter: blur(4px)} .highlight-news__prev:hover, .highlight-news__next:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .highlight-news__pagination{position:static;display:flex;align-items:center;gap:0.75rem} .news-detail{--tw-bg-opacity:1;background-color:rgb(249 251 250 / var(--tw-bg-opacity, 1));padding-top:3.5rem;padding-bottom:3.5rem} @media (min-width: 1024px){ .news-detail{padding-top:5rem;padding-bottom:5rem}} /* ===== Breadcrumb ===== */ /* ===== Layout ===== */ .news-detail__wrapper{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));gap:2.5rem} @media (min-width: 1280px){ .news-detail__wrapper{grid-template-columns:minmax(0,1fr) 400px}} @media (min-width: 1536px){ .news-detail__wrapper{gap:4rem}} /* ===== Content ===== */ .news-detail__title{margin-top:2.5rem;margin-bottom:2.5rem;font-size:32px;line-height:44px;font-weight:700;line-height:1.25;--tw-text-opacity:1;color:rgb(46 46 46 / var(--tw-text-opacity, 1))} @media (min-width: 1024px){ .news-detail__title{font-size:36px;line-height:48px}} .news-detail__editor{--tw-text-opacity:1;color:rgb(72 79 87 / var(--tw-text-opacity, 1))} .news-detail__editor h2{margin-bottom:1rem;font-size:24px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(46 46 46 / var(--tw-text-opacity, 1))} .news-detail__editor p{margin-bottom:1rem;font-size:16px;line-height:24px; color: rgba(46, 46, 46, 0.75)} .news-detail__editor img{margin-top:2.5rem;margin-bottom:2.5rem;width:100%;overflow:hidden;border-radius:0.75rem} .news-detail__editor ul{margin-top:1.5rem;margin-bottom:1.5rem} .news-detail__editor ul > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))} .news-detail__editor ul{padding-left:1.25rem} .news-detail__editor li{list-style-type:disc;font-size:16px;line-height:24px} /* ===== Sidebar ===== */ .news-detail__sidebar > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))} .news-detail__box{border-radius:1rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:1.25rem} .news-detail__meta{display:flex;flex-direction:column;gap:1rem} .news-detail__meta span{font-size:14px;line-height:20px;font-weight:600; color: rgba(46, 46, 46, 0.75)} .news-detail__meta strong{font-size:20px;line-height:32px;font-weight:600;--tw-text-opacity:1;color:rgb(46 46 46 / var(--tw-text-opacity, 1))} /* ===== Share ===== */ .news-detail__share { color: rgba(46, 46, 46, 0.75); margin-top:1rem; } .news-detail__share > span{margin-bottom:0.5rem;display:block;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(102 102 102 / var(--tw-text-opacity, 1))} .news-detail__socials{display:flex;flex-wrap:wrap;gap:10px} .news-detail__socials a{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:0.5rem} .news-detail__socials svg{height:1.25rem;width:1.25rem} .news-detail__copy-status { margin-top: 8px; font-size: 14px; color: #00a194; } /* ===== Related ===== */ .news-detail__related{margin-top:2.5rem} .news-detail__related-title{margin-bottom:1.25rem;font-size:24px;line-height:32px;font-weight:700;--tw-text-opacity:1;color:rgb(46 46 46 / var(--tw-text-opacity, 1))} .news-related > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))} .news-related__item{display:flex;overflow:hidden;border-radius:0.5rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))} .news-related__thumb{aspect-ratio:112/132;width:112px;flex-shrink:0;overflow:hidden} .news-related__thumb img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover} .news-related__content{display:flex;flex:1 1 0%;flex-direction:column;gap:1rem;padding-top:1.25rem;padding-bottom:1.25rem;padding-left:1rem;padding-right:1rem} .news-related__name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:16px;line-height:24px;font-weight:700;--tw-text-opacity:1;color:rgb(46 46 46 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .news-related__item:hover .news-related__name{--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .news-related__meta{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;--tw-text-opacity:1;color:rgb(179 179 179 / var(--tw-text-opacity, 1))} .news-related__meta span:first-child{font-size:16px;line-height:24px;font-weight:600;--tw-text-opacity:1;color:rgb(0 161 148 / var(--tw-text-opacity, 1))} .page-404{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:1.5rem} .page-404__inner{max-width:48rem;text-align:center} .page-404__img{margin-left:auto;margin-right:auto;margin-bottom:1.5rem;display:block;width:16rem;max-width:420px} @media (min-width: 768px){ .page-404__img{width:20rem}} .page-404__title{margin-top:0.5rem;font-size:24px;line-height:32px;--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))} @media (min-width: 768px){ .page-404__title{font-size:28px;line-height:40px}} .page-404__desc{margin-top:0.75rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))} .page-404__btn{margin-top:1.5rem;display:inline-block;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(5 150 105 / var(--tw-bg-opacity, 1));padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1.25rem;padding-right:1.25rem;font-weight:600;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))} .page-404__btn:hover{--tw-bg-opacity:1;background-color:rgb(4 120 87 / var(--tw-bg-opacity, 1))} .page-404__btn:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(167 243 208 / var(--tw-ring-opacity, 1))} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0} .pointer-events-none{pointer-events:none} .visible{visibility:visible} .collapse{visibility:collapse} .static{position:static} .absolute{position:absolute} .sticky{position:sticky} .block{display:block} .inline{display:inline} .flex{display:flex} .table{display:table} .grid{display:grid} .hidden{display:none} .transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .resize{resize:both} .flex-col{flex-direction:column} .gap-4{gap:1rem} .border{border-width:1px} .shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)} .invert{--tw-invert:invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)} .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)} .transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} :root { --container-safe-left: 2rem; --container-safe-right: 2rem; } @media (min-width: 640px) { :root { --container-safe-left: max(3rem, calc((100vw - 640px) / 2 + 3rem)); --container-safe-right: max(3rem, calc((100vw - 640px) / 2 + 3rem)); } } @media (min-width: 768px) { :root { --container-safe-left: max(3rem, calc((100vw - 768px) / 2 + 3rem)); --container-safe-right: max(3rem, calc((100vw - 768px) / 2 + 3rem)); } } @media (min-width: 1024px) { :root { --container-safe-left: max(4rem, calc((100vw - 1024px) / 2 + 4rem)); --container-safe-right: max(4rem, calc((100vw - 1024px) / 2 + 4rem)); } } @media (min-width: 1280px) { :root { --container-safe-left: max(6rem, calc((100vw - 1280px) / 2 + 6rem)); --container-safe-right: max(6rem, calc((100vw - 1280px) / 2 + 6rem)); } } @media (min-width: 1536px) { :root { --container-safe-left: max(8rem, calc((100vw - 1536px) / 2 + 8rem)); --container-safe-right: max(8rem, calc((100vw - 1536px) / 2 + 8rem)); } } @media (min-width: 1920px) { :root { --container-safe-left: max(230px, calc((100vw - 1920px) / 2 + 230px)); --container-safe-right: max(230px, calc((100vw - 1920px) / 2 + 230px)); } } @media (min-width: 768px){ .md\:btn-sm{padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem}} @media (min-width: 1536px){ .\32xl\:btn-md{padding-left:2rem;padding-right:2rem;padding-top:1rem;padding-bottom:1rem}}