@import url('common.css');

:root {
    --color-primary:
}

.btn:active,
.btn.active {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-image: none;
}

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 16px;
    padding-right: 16px;
}


.bg-contactwith-us {
    color: #005BAA;
}

.product-batt-name {
    padding-right: 25px;
}

.btn-drop-gs {
    background-color: #fff;
    border: 1px solid #005BAA;
    padding: 10px;
}

.mr-top-drop {
    margin-top: 10px !important;
}

.pd-l-btn {
    margin-right: 15px;
}

.pd-text {
    padding: 0px 10px;
}

.sp-banner {
    padding-bottom: 17px;
}

.bg-new-product {
    border-radius: 0 0 18.233px 0;
    background: linear-gradient(99deg, #C5C5C5 0%, #F5F5F5 49.11%, #C5C5C5 98.87%);
    backdrop-filter: blur(13.754782676696777px);
    color: #007FC6;
    padding: 8px 16px;
    width: 88px;
    text-align: center;
    position: absolute;
    z-index: 3;
}

.bg-popular-product {
    border-radius: 0 0 16px 0;
    background: linear-gradient(95deg, #8C6224 5.71%, #B58A2F 50.06%, #8C6224 94.92%);
    backdrop-filter: blur(12.070523262023926px);
    color: #FFF;
    padding: 8px 16px;
    text-align: center;
    position: absolute;
    z-index: 3;
}

.mt-12 {
    margin-top: 12px;
}

.mrt-top {
    margin-top: 102px;
}

.img-typebatt {
    height: 35px;
}

.bg-contactwith-us a {
    color: #005BAA;
}

.icon-size-social {
    font-size: 24px;
    padding: 5px;
    color: #005BAA;
}

.p-col-home-l {
    padding-left: 0px;
    padding-right: 5px;
}

.p-col-home-r {
    padding-left: 5px;
    padding-right: 0px;
}

.img-cover-career {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 365px;
    width: 100%;
}

.detail-news {
    margin-top: 20px;
}

/* .box-bg-product:hover .img-product-batt {
    opacity: 0.5;
} */

.img-product-batt[src*="gs_revamp_icon"] {
    width: 50%;
    /* ปรับตามต้องการ เช่น 32% / 120px */
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

/* ไม่ให้ icon ขยายตอน hover */
.box-bg-product:hover .img-product-batt[src*="gs_revamp_icon"] {
    transform: none;
}

/* detail: ให้โลโก้ GS ขนาดเทียบเท่าภาพสินค้า */
.img-product-batt-detail[src*="gs_revamp_icon"] {
    width: 72%;
    max-width: 72%;
    max-height: 85%;
    height: auto;
    object-fit: contain;
}

.box-news-list {
    margin-bottom: 20px;
}

.box-news-list:hover .title-news-2 {
    color: #005BAA;
}

.box-news-list:hover .hover-image-new {
    opacity: 0.25;
    transition: all 0.2s;
}

.box-new-act:hover .hover-image-new {
    opacity: 0.25;
    transition: all 0.2s;
}

.box-new-act:hover .featured-news-card .hover-image-new {
    opacity: 0;
}

.box-new-act:hover .title-news {
    color: #005BAA;
}

.hover-image-new {
    background-color: #000000;
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0;
}

/* Featured news: hover ขอบฟ้า inset + รูปขยายด้านใน */
.featured-news-card .img-box-news {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.featured-news-card .img-box-news::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.25s ease;
    transform: scale(1);
    transform-origin: center center;
    pointer-events: none;
}

.featured-news-card .img-box-news::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
}

a:hover .featured-news-card .img-box-news::before {
    transform: scale(1.05);
}

a:hover .featured-news-card .img-box-news::after {
    opacity: 1;
}

.featured-news-card .hover-image-new {
    display: none;
}

/* Other news: รูป + hover เหมือน featured */
.news-column-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
    align-self: flex-start;
}

.news-column-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
}

.news-column-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.25s ease;
    transform: scale(1);
    transform-origin: center center;
}

a:has(> .news-column-container) {
    display: block;
    text-decoration: none;
    color: inherit;
}

a:has(> .news-column-container):last-child>.news-column-container {
    margin-bottom: 0;
}

a:hover .news-column-image::after,
.news-column-container:hover .news-column-image::after {
    opacity: 1;
}

a:hover .news-column-image img,
.news-column-container:hover .news-column-image img {
    transform: scale(1.05);
}

.title-our-h-text {

    color: #005BAA;
    font-size: 35px;
    font-weight: 500;
}

.sub-our-text {

    color: #646464;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 500;
}

.border-bottom-new {
    width: 68px;
    height: 4px;
    background: #005BAA;
    background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
    background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
    background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
    background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
    background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
}

.main-menu-header-revamp {
    color: #ffffff;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;

    cursor: pointer;
    transition: color 0.25s ease;
}

.navbar-main-background a.nav-item-text-white,
.navbar-main-background a.nav-item-text-white .body1,
.navbar-main-background a.nav-item-text-white .main-menu-header-revamp__label {
    color: #ffffff;
    font-weight: 700;
    transition: color 0.25s ease;
}

.navbar-main-background a.nav-item-text-white:hover,
.navbar-main-background a.nav-item-text-white:focus,
.navbar-main-background .nav-main-sub-wrapper-item--link:hover>a.nav-item-text-white,
.navbar-main-background .nav-main-sub-wrapper__lang>a.nav-item-text-white.dropdown-toggle:hover,
.navbar-main-background .nav-main-sub-wrapper__lang>a.nav-item-text-white.dropdown-toggle:focus,
.navbar-main-background .nav-main-sub-wrapper__lang.open>a.nav-item-text-white.dropdown-toggle,
.navbar-main-background a.nav-item-text-white:hover .body1,
.navbar-main-background a.nav-item-text-white:focus .body1 {
    color: #00B6F1;
}

/* Slide-down reveal: ซ่อนบน desktop จนกว่าจะ scroll เลย hero */
@media (min-width: 1296px) {
    .navbar-sticky-revamp.navbar-fixed-top {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition:
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0.35s;
        will-change: transform, opacity;
        pointer-events: none;
    }

    .navbar-sticky-revamp.navbar-fixed-top.is-past-hero {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition:
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear 0s;
        pointer-events: auto;
    }
}

.product-list-dropdown-main-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 4px;
    position: relative;
}

.product-dropdown-container {
    display: flex;
    max-width: 105px;
    padding: 4px 8px;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    text-align: left;
    white-space: nowrap;
}

.product-dropdown-container.active {
    color: #007FC6;
    background: var(--BG-Light, #EBF8FF);
}

.product-sort-dropdown-trigger {
    justify-content: space-between;
    width: 100%;
    max-width: none;
}

.product-sort-dropdown-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.product-list-dropdown-main-wrapper.is-open .product-sort-dropdown-chevron {
    transform: rotate(180deg);
}

.product-sort-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    min-width: 100%;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.product-sort-dropdown-option {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
}

.navbar-sticky-revamp .main-menu-header-revamp,
.navbar-sticky-revamp .main-menu-header-revamp--with-icon {
    font-weight: 700;
}

.main-menu-header-revamp:hover {
    color: #00B6F1;
}

.main-menu-header-revamp--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: color var(--nav-item-hover-duration, 0.25s) ease;
}

.main-menu-header-revamp--with-icon:hover,
.main-menu-header-revamp--with-icon:focus {
    color: #00B6F1;
}

.nav-main-sub-wrapper-item--link {
    --nav-item-hover-duration: 0.25s;
    padding: 0;
}

.nav-main-sub-wrapper-sub-item-lower--link {
    --nav-item-hover-duration: 0.25s;
    position: relative;
}

.navbar-sticky-revamp .nav-desk-top .nav-main-sub-wrapper-sub-item-lower--link {
    display: block;
}

.nav-main-sub-wrapper-item--link>.main-menu-header-revamp--with-icon {
    align-self: stretch;
}

.nav-main-sub-wrapper-item--link:hover>.main-menu-header-revamp--with-icon,
.nav-main-sub-wrapper-item--link>.main-menu-header-revamp--with-icon:hover,
.nav-main-sub-wrapper-item--link>.main-menu-header-revamp--with-icon:focus,
.nav-main-sub-wrapper-sub-item-lower--link:hover>.main-menu-header-revamp--with-icon,
.nav-main-sub-wrapper-sub-item-lower--link>.main-menu-header-revamp--with-icon:hover,
.nav-main-sub-wrapper-sub-item-lower--link>.main-menu-header-revamp--with-icon:focus {
    color: #00B6F1;
}

.main-menu-header-revamp__label {
    pointer-events: none;
}

.nav-main-sub-wrapper-item-lower {
    font-weight: 700;
}

.main-menu-header {
    color: #005BAA;
    font-size: 16px;

    cursor: pointer;
}

.main-menu-header:hover {
    color: #00B6F1;
}

.header-search-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.header-search-icon {
    width: 20px;
    /* ปรับตามดีไซน์ */
    height: 20px;
    display: block;
}

/* .nav-desk-top .main-menu-header {
    position: relative;
    padding: 8px 0;
    transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in;
    color: #00B6F1;
}

.nav-desk-top .main-menu-header::before {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #00B6F1;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: color 0.1s, transform 0.2s ease-out;
}

.nav-desk-top .main-menu-header:active::before {
    background-color: #fff;
    border-radius: 4px;
}

.nav-desk-top .main-menu-header:hover::before,
.main-menu-header:focus::before {
    transform-origin: left top;
    transform: scale(1, 1);
} */

.ma-gin-l {
    margin-right: 11px;
}

.m-t-20 {
    margin-top: 20px;
}

.line-b-eng {
    width: 2px;
    height: 46px;
    background-color: #005BAA;
    margin: 0 5px;
}

.box-chage-lang {
    display: flex;
}

.m-cen-box {
    margin: auto;
}

.ma-gin-l-en {
    margin-right: 30px;
}

.title-news-2 {
    font-size: 20px;
    height: 80px;
    overflow: hidden;
    margin-top: 15px;
}

.bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px;
}

.bg-img-waranty {
    display: block;
    position: relative;
}

.bg-img-waranty::before {
    height: 384px;
    width: 392px;
    position: absolute;
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    background-color: gray;
    clip-path: polygon(100% 0, 0 1%, 0 98%);
    opacity: 0.2;
}

.bg-img-waranty::after {
    height: 373px;
    width: 389px;
    position: absolute;
    content: "";
    background-size: cover;
    background-repeat: no-repeat;
    right: 0;
    bottom: 0;
    background-color: gray;
    opacity: 0.2;
    clip-path: polygon(100% 45%, 44% 100%, 100% 100%);

}

.bg-mobile-cover {

    background-image: url(../images/Iphone.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 529px;
    width: 264px;
    margin-top: 70px;
    padding: 7px 11px;
    border-radius: 46px;
    -webkit-box-shadow: 34px 47px 122px -47px rgb(0 0 0 / 75%);
    -moz-box-shadow: 34px 47px 122px -47px rgba(0, 0, 0, 0.75);
    box-shadow: 34px 47px 122px -47px rgb(0 0 0 / 75%);

}

.bg-mobile-cover img {
    height: 100%;
    border-radius: 20px;
}


/* line 122, ../sass/main.scss */

a {
    color: #000;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.search-result-card {
    position: relative;
}

.search-result-card--clickable {
    cursor: pointer;
}

.search-result-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.search-result-card-text,
.search-result-card-image,
.search-result-batt-main-wrapper {
    position: relative;
}

.search-result-card-text *,
.search-result-card-image *,
.search-result-batt-main-wrapper * {
    pointer-events: none;
}

.search-result-card-content-rich a,
.search-result-contact-btn,
.search-result-contact-btn-group a {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.f-sub {
    font-size: 16px;
}

.colr1-f {
    color: #005BBA;
}

.colr2-f {
    color: #00B6F1;
}

.f-title {
    font-size: 36px;
}

.f-s-m-solution {
    font-size: 20px;
}

.sty-f {
    font-style: italic;
}

.bold-f {
    font-weight: bold;
}

.vertical-center {
    min-height: 100%;
    /* Fallback for browsers do NOT support vh unit */
    display: flex;
    align-items: center;
}

.box-content-warranty {
    position: relative;
    height: 500px;
    margin-bottom: 80px;
}

.box-in-re {
    position: relative;
}

.box-row-col {
    margin-top: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

.mt-top {
    margin-top: 10px;
}

.pd-icon-arr {
    margin: auto;
}

.item-box-warr {
    display: flex;
    padding: 10px 2px;
}

.f-icon {
    font-size: 16px;
    text-align: center;
    padding: 0 20px;
}

.color-red {
    color: #E50019;
}

.color-gray {
    color: #707070;
}

.item-box-s-icon {
    height: 144px;
    width: 144px;
    display: block;
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: relative;
    overflow: hidden;

}

.box-img {
    display: flex;
    text-align: center;
}

.item-box-s-icon.active {
    border: 3px solid #00B6F1;
    width: 147px;
    height: 147px;
}

.item-box-s-icon.active.f-icon {
    color: #00B6F1;
}

.icon-img {
    height: 90px;
    margin: auto;
    padding: 14px 0;
    width: auto !important;
}

.gm-style-iw-a {
    padding: 0px !important;
}

.box-show-info {
    padding: 10px;
}

.box-title {
    font-size: 24px;
    line-height: 1.5;
    font-weight: bold;
    font-style: italic;
}

.color-bule {
    color: #005BBA;
}

.box-sub {
    font-size: 16px;
    line-height: 1.5;
    font-weight: bold;
    font-style: italic;
}

.box-call-138 {
    position: fixed;
    top: 380px;
    right: 16px;
}

.box-call-icon-138 {
    height: 85px;
    width: 85px;
    border-radius: 50%;
    background-color: #E50019;
    color: #ffffff;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
    text-align: center;
    padding: 9px;
    font-weight: bold;
    cursor: pointer;

}

.box-call-icon-138 i {
    color: #ffffff;

}

.middle-text {
    position: relative;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    text-align: left;
    vertical-align: middle;
}


.box-content-b {
    display: flex;
    height: 400px;

}

.m-t-auto {
    margin: auto 0;
}

.m-auto {
    margin: auto;
}

.w-color {
    color: #ffffff;
}

.f-s-bn-titile {
    font-size: 36px;
}

.f-s-bn-sub {
    font-size: 24px;
}

.btn-main-gradient {
    background-image: linear-gradient(to right, #005BAA, #00B6F1, #00B6F1, #00B6F1);
    border-radius: 4px;
    width: 220px;
    height: 50px;
    border: none;

    font-size: 16px;
    color: #fff;
    margin-top: 10px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size: 300% 100%;
}

.btn-search-gradient {
    display: flex;
    width: 120px;
    height: 48px;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 0 0 16px 0;
    border: 1px solid #00B6F1;
    background: #007FC6;
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    font-size: 16px;
    text-decoration: none;
}

.btn-search-gradient-flexible {
    display: flex;
    width: 100%;
    height: 48px;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 0 0 16px 0;
    border: 1px solid #00B6F1;
    background: #007FC6;
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    font-size: 16px;
    text-decoration: none;
}

.btn-search-gradient::after,
.btn-search-gradient-flexible::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 50% 30% at 50% 100%,
            rgba(0, 182, 241, 0.7) 0%,
            rgba(0, 182, 241, 0.35) 45%,
            rgba(0, 182, 241, 0) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.btn-search-gradient:hover::after,
.btn-search-gradient-flexible:hover::after {
    opacity: 1;
}

.btn-search-gradient>* .btn-search-gradient-flexible>* {
    position: relative;
    z-index: 1;
}

.btn-wrapper {
    display: flex;
    justify-content: center;
}

.btn-search-gradient-2 {
    display: flex;
    width: auto;
    height: 48px;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 0 0 16px 0;
    border: 1px solid #00B6F1;
    background: #007FC6;
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    font-size: 16px;
    text-decoration: none;
}

.btn-search-gradient-2::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 50% 30% at 50% 100%,
            rgba(0, 182, 241, 0.7) 0%,
            rgba(0, 182, 241, 0.35) 45%,
            rgba(0, 182, 241, 0) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.btn-search-gradient-2:hover::after {
    opacity: 1;
}

.btn-search-gradient-2>* {
    position: relative;
    z-index: 1;
}


.img-banner-bg {
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.img-banner-bg-p-lt {
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}

.btn-main-gradient:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    color: #fff;
}

.a-main-gradient {
    background-image: linear-gradient(to right, #005BAA, #00B6F1, #00B6F1, #00B6F1);
    border-radius: 4px;
    width: 220px;
    height: 50px;
    border: none;

    font-size: 16px;
    color: #fff;
    margin-top: 10px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size: 300% 100%;
    display: flex;

}

.mt-10 {
    margin-top: 10px;
}

.mt-30 {
    margin-top: 30px;
}

.in-line-btn {
    display: flex;
    flex-wrap: wrap;
}

.pb-btn {
    padding: 10px;
}

.ptd-top-btn {
    margin-top: 30px;
}

.a-main-line-gradient {

    border-radius: 4px;
    width: 220px;
    height: 50px;
    border: none;

    font-size: 16px;
    color: #fff;
    margin-top: 10px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size: 300% 100%;
    display: flex;
    border: 2px solid #ffffff;
}

.a-main-line-gradient-b {
    background-color: #ffffff;
    border-radius: 4px;
    width: 220px;
    height: 50px;
    border: none;

    font-size: 16px;
    color: #005BAA;
    margin-top: 10px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size: 300% 100%;
    display: flex;
    border: 2px solid #005BAA;
}

.box-tab-location {
    text-align: left;
}

.a-main-gradient:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    color: #fff;
}

.btn-main-gradient:active {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    color: #fff;
}

.btn-tag-car-b {
    background-color: transparent;
    color: #162E46;
    border-radius: 0 0 16px 0;
    border: 1px solid #D2D2D2;
    min-height: 40px;
    height: auto;
    font-size: 16px;
    font-weight: 400;
    max-width: 100%;
    text-align: left;
    white-space: normal;
    outline: none;
}


/* line 127, ../sass/main.scss */

::-moz-selection {
    /* Code for Firefox */
    background: #C2C9EA;
}

::selection {
    background: #C2C9EA;
}


/* line 133, ../sass/main.scss */
.page {
    display: table;
    width: 100%;
    height: 100%;
}


/* line 138, ../sass/main.scss */

.warp {
    display: table-cell;
    vertical-align: middle;
}


/* line 142, ../sass/main.scss */

html {
    height: 100%;
    font-size: 100%;
    scrollbar-gutter: stable;
}


/* line 146, ../sass/main.scss */

html,
body {
    width: 100%;
    font-family: 'Noto Sans Thai', 'Noto Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* line 149, ../sass/main.scss */

body {
    height: 100%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    animation: fadein 3s;
    overflow-x: hidden;

    font-size: 16px;
}

body.product-filter-drawer-open {
    overflow: hidden;
}

.product-filter-drawer,
.product-filter-drawer-overlay {
    display: none;
}

body.search-panel-open {
    overscroll-behavior: none;
    overflow: hidden;
}

.btn-main-gradient-slide {
    background: #005BAA;
    background: -moz-linear-gradient(top, #005BAA 0%, #00B6F1 100%);
    background: -webkit-linear-gradient(top, #005BAA 0%, #00B6F1 100%);
    background: -o-linear-gradient(top, #005BAA 0%, #00B6F1 100%);
    background: -ms-linear-gradient(top, #005BAA 0%, #00B6F1 100%);
    background: linear-gradient(to bottom, #005BAA 0%, #00B6F1 100%);
    outline: none;
}

.btn-main-gradient-slide:hover {
    box-shadow: 0px 3px 6px #00B6F1;
}

.global-btn-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 12px;
    position: fixed;
    top: auto;
    left: auto;
    right: 30px;
    bottom: 20px;
    z-index: 999;
    pointer-events: none;
}

body.product-list-compare-active .global-btn-wrapper {
    bottom: 125px;
}

body.product-list-compare-active .product-grid>a {
    pointer-events: none;
    cursor: default;
}

body.product-list-compare-active .product-grid [data-compare-btn] {
    pointer-events: auto;
    cursor: pointer;
}

body.product-list-compare-active .box-bg-product:hover .img-product-batt {
    transform: none;
}

@media (max-width: 1023px) {
    body.product-list-compare-active:has(.visible-tablet-slide-baner .compare-product-product-selected-item-blue-container) .global-btn-wrapper {
        bottom: 145px;
    }
}

.global-btn-wrapper button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    outline: none;
    color: #fff;
    cursor: pointer;
    border-radius: var(--border-radius-100, 4px);
    background: #007FC6;
    box-shadow: 0 4px 8px 0 rgba(27, 100, 171, 0.30);
    pointer-events: auto;
}

/* ปกติ */
.global-btn-dealer {
    position: relative;
    background: #007FC6;
    transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.global-btn-dealer__icon {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.global-btn-dealer__icon--expanded {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
}

.global-dealer-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    pointer-events: auto;
}

.global-main-btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.35s ease, opacity 0.3s ease, gap 0.35s ease;
}

.global-main-btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    overflow: hidden;
    text-decoration: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.global-main-btn-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.global-dealer-stack.is-expanded .global-main-btn-wrapper,
.global-dealer-stack.is-collapsing .global-main-btn-wrapper {
    max-height: 280px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: -12px;
    margin-bottom: -12px;
    opacity: 1;
    gap: 24px;
}

.global-dealer-stack.is-expanded .global-main-btn-wrapper {
    pointer-events: auto;
}

.global-dealer-stack.is-collapsing .global-main-btn-wrapper {
    pointer-events: none;
}


.global-dealer-stack.is-expanded .global-main-btn-container:nth-child(2) {
    animation: global-main-btn-fade-up 0.4s ease forwards;
    animation-delay: 0.08s;
}

.global-dealer-stack.is-expanded .global-main-btn-container:nth-child(1) {
    animation: global-main-btn-fade-up-overshoot 0.5s ease forwards;
    animation-delay: 0.16s;
}

.global-dealer-stack.is-collapsing .global-main-btn-container:nth-child(1) {
    animation: global-main-btn-fade-down-overshoot 0.4s ease forwards;
}

.global-dealer-stack.is-collapsing .global-main-btn-container:nth-child(2) {
    animation: global-main-btn-fade-down 0.35s ease forwards;
    animation-delay: 0.1s;
}

.global-dealer-stack.is-expanded .global-btn-dealer {
    background: var(--BG-Light, #EBF8FF);
    box-shadow: 0 4px 8px 0 rgba(27, 100, 171, 0.30);
}

.global-dealer-stack.is-expanded .global-btn-dealer .global-btn-dealer__icon--default {
    opacity: 0;
}

.global-dealer-stack.is-expanded .global-btn-dealer .global-btn-dealer__icon--expanded {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.global-btn-dealer.is-closing {
    animation: global-btn-dealer-close-bg 0.4s ease forwards;
    box-shadow: 0 4px 8px 0 rgba(27, 100, 171, 0.30);
}

.global-btn-dealer.is-closing .global-btn-dealer__icon--default {
    opacity: 1;
}

.global-btn-dealer.is-closing .global-btn-dealer__icon--expanded {
    opacity: 0;
}

.global-dealer-stack:not(.is-expanded):not(.is-collapsing) .global-main-btn-container {
    animation: none;
    opacity: 0;
    transform: translateY(16px);
}

@keyframes global-main-btn-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes global-main-btn-fade-up-overshoot {
    0% {
        opacity: 0;
        transform: translateY(calc(90px + 24px + 48px));
    }

    65% {
        opacity: 1;
        transform: translateY(-5%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes global-main-btn-fade-down {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(16px);
    }
}

@keyframes global-main-btn-fade-down-overshoot {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    35% {
        opacity: 1;
        transform: translateY(-5%);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(90px + 24px + 48px));
    }
}

@keyframes global-btn-dealer-close-bg {
    0% {
        background: var(--BG-Light, #EBF8FF);
    }

    25% {
        background: #FFF;
    }

    100% {
        background: #007FC6;
    }
}

@keyframes sidenav-dropdown-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sidenav-dropdown-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.body-grey {
    background-color: #696969;
    color: #ffffff;
}

.body-grey-footer {
    background-color: #BEBEBE;
    color: #ffffff;
}

.body-white {
    background-color: #ffffff;
    color: #000000;
}

a:hover,
a:focus {
    text-decoration: none;
}

.text-about-us {
    font-size: 20px;
    font-family: Arial, sans-serif;
    color: #fff;
}

.body-LightGrey {
    background-color: #D3D3D3;
}

.box-chage-lang a {
    font-size: 16px;
}

.change-lang {
    text-transform: uppercase;
}

.change-lang.active {
    color: #005BAA;
    font-weight: 600;
}

.change-lang:hover {
    color: #00B6F1;
}

/* Lang dropdown: scope สูงกว่า bootstrap + custom.css .dropdown-menu */
.navbar-main-background .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    float: none;
    width: auto;
    min-width: 72px;
    margin: 8px 0 0;
    padding: 0px 0px;
    list-style: none;
    text-align: center;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang {
    position: absolute;
    top: 100%;
    right: 0;
    float: none;
    width: auto;
    min-width: 0;
    margin: 8px 0 0;
    padding: 0px 0px;
    list-style: none;
    text-align: center;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}


.navbar-main-background .nav-main-sub-wrapper__lang.open>.dropdown-menu.dropdown-menu--lang,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang.open>.dropdown-menu.dropdown-menu--lang {
    display: block;
}

.navbar-main-background .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>li>a.change-lang,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>li>a.change-lang {
    padding: 4px 8px;
    display: block;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    text-align: start;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    background-color: transparent;
    cursor: pointer;
}

.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>li>a.change-lang {
    padding: 4px 6px;
}

.navbar-main-background .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>li.active>a.change-lang,
.navbar-main-background .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>li>a.change-lang.active,
.navbar-main-background .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>.active>a.change-lang,
.navbar-main-background .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>.active>a.change-lang:focus,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>li.active>a.change-lang,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>li>a.change-lang.active,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>.active>a.change-lang,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>.active>a.change-lang:focus {
    color: #00B6F1;
    font-weight: 600;
    outline: 0;
}

.navbar-main-background .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>li>a.change-lang:hover,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang>li>a.change-lang:hover {
    color: #00B6F1;
    background: #EDEDED;
    text-decoration: none;
    cursor: pointer;
}

.navbar-main-background .nav-main-sub-wrapper__lang,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang {
    position: relative;
}

.navbar-main-background .nav-main-sub-wrapper__lang>.dropdown-toggle,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang>.dropdown-toggle {
    cursor: pointer !important;
    -webkit-user-select: none;
    user-select: none;
}

.navbar-main-background .nav-main-sub-wrapper__lang>.dropdown-toggle *,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang>.dropdown-toggle * {
    cursor: pointer !important;
    -webkit-user-select: none;
    user-select: none;
}

.navbar-main-background .nav-main-sub-wrapper>.nav-main-sub-wrapper-item>.nav-main-sub-wrapper__lang.dropdown,
.navbar-sticky-revamp .nav-main-sub-wrapper>.nav-main-sub-wrapper-item>.nav-main-sub-wrapper__lang.dropdown {
    display: flex;
    align-items: center;
    align-self: center;
    min-height: 40px;
    padding: 0 16px;
}

.navbar-main-background .dropdown-menu,
.navbar-sticky-revamp .dropdown-menu {
    z-index: 10000;
}

.navbar-sticky-revamp .header-close-toggle-tablet-mobile {
    display: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* เปิด menu: sidenav มี .active หรือ class mobile-nav-is-open บน nav */
.navbar-sticky-revamp:has(#mySidenav.active) .navbar-header__end .navbar-toggle,
.navbar-sticky-revamp.mobile-nav-is-open .navbar-header__end .navbar-toggle {
    display: none !important;
}

.navbar-sticky-revamp:has(#mySidenav.active) .header-close-toggle-tablet-mobile,
.navbar-sticky-revamp.mobile-nav-is-open .header-close-toggle-tablet-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-sticky-revamp:has(#mySidenav.active) .header-close-toggle-tablet-mobile img,
.navbar-sticky-revamp.mobile-nav-is-open .header-close-toggle-tablet-mobile img {
    filter: brightness(0) invert(1);
}

/* เปิด search panel (mobile sticky): ซ่อน hamburger แสดง X แต่คง search toggle ไว้ */
.navbar-sticky-revamp.search-is-open .navbar-header__end .navbar-toggle {
    display: none !important;
}

.navbar-sticky-revamp.search-is-open .header-close-toggle-tablet-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-sticky-revamp.search-is-open .header-close-toggle-tablet-mobile img {
    filter: brightness(0) invert(1);
}

.navbar-sticky-revamp .navbar-header__end .navbar-toggle:hover,
.navbar-sticky-revamp .navbar-header__end .navbar-toggle:focus {
    background-color: transparent !important;
}

.navbar-dropdown-space {
    margin-right: 8px;
}

.navbar-dropdown-space-lang {
    margin-right: 3px;
}

.main-menu-header-revamp--with-icon .navbar-dropdown-space,
.main-menu-header-revamp--with-icon .navbar-dropdown-space-lang {
    display: none;
}

.icon-swap {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    pointer-events: none;
}

.icon-swap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity var(--nav-item-hover-duration, 0.25s) ease;
}

.icon-swap--chevron {
    width: 14px;
    height: 14px;
}

.icon-swap--search {
    width: 16px;
    height: 16px;
}

.icon-swap__hover {
    opacity: 0;
}

.nav-main-sub-wrapper-item--link:hover .icon-swap__default,
.nav-main-sub-wrapper-sub-item-lower--link:hover .icon-swap__default,
.main-menu-header-revamp--with-icon:hover .icon-swap__default {
    opacity: 0;
}

.nav-main-sub-wrapper-item--link:hover .icon-swap__hover,
.nav-main-sub-wrapper-sub-item-lower--link:hover .icon-swap__hover,
.main-menu-header-revamp--with-icon:hover .icon-swap__hover {
    opacity: 1;
}

.dealer-store-sub-input-box-search.filter-select-sub__trigger .filter-select-chevron,
.contact-searchable-trigger .filter-select-chevron {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.dealer-store-sub-input-box-search.filter-select-sub__trigger[aria-expanded="true"] .filter-select-chevron,
.contact-searchable-trigger[aria-expanded="true"] .filter-select-chevron {
    transform: rotate(180deg);
}

/* big destop */

.mar-bottom-60 {
    margin-bottom: 30px;
}

.btn-twitee {
    position: relative;
    height: 20px;
    box-sizing: border-box;
    padding: 1px 8px 1px 6px;
    background-color: #1b95e0;
    color: #fff;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
}

.text-link-footer-main {

    font-size: 14px;
    line-height: 24px;
    color: #007FC6;
    cursor: pointer;
    font-weight: 600;
}

.btn-e-business {
    background-image: linear-gradient(to right, #005BAA, #00B6F1, #00B6F1, #00B6F1);
    color: #fff;
    font-size: 16px;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    border: none;
    font-weight: 200;
    padding: 12px 15px;

    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size: 300% 100%;
}

.btn-e-business:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    color: #fff;
}

.box-history:hover {
    background-color: var(--my-color-var);
    color: #fff !important;
}

.box-history {
    text-align: center;
    padding: 5px;
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
}

.box-title-history {
    font-size: 36px;
    color: #000000;
    font-weight: 600;
    padding: 20px 30px;
    text-align: left;
}

.font-name-hist-gs {
    font-size: 24px;
    color: #005BAA;
}

.font-name-hist-sale {
    font-size: 24px;
    color: #00B6F1;
}

.img-mobile-call {
    width: 14px;
}

.img-line-call {
    width: 18px;
}

.sadow-bt-hist {
    -webkit-box-shadow: 3px 9px 10px -14px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 9px 10px -14px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 9px 10px -14px rgba(0, 0, 0, 0.75);
    width: 100%;
    min-height: 300px;
}

.box-content-history {
    padding: 24px 0px;
}

.text-bold-his {
    font-weight: 600;
}

.box-history.active {
    background-color: var(--my-color-var);
    color: #fff !important;
}

.button-ladding {
    border: 2px solid #fff;
    background-color: transparent;
    margin-top: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.bg-img-gallery {
    background-position: center;
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-search-batt .service-section-decor--hero {
    display: none;
}

.home-news-panel {
    display: none;
}

.home-news-panel.is-active {
    display: block;
}

.news-category-container.active,
.news-category-container.active:hover {
    border: 1px solid var(--Primary, #007FC6);
    background: #D9F2FF;
    color: black;
}

.news-category-container.activity.active,
.news-category-container.activity.active:hover,
.news-category-container.activity:hover {
    border: 1px solid #CDA604;
    background: #FFEFAD;
    color: black;
}

.news-category-container.csr.active,
.news-category-container.csr.active:hover,
.news-category-container.csr:hover {
    border: 1px solid #8EBA00;
    background: #E8F9B0;
    color: black;
}

.news-category-container.knowledge.active,
.news-category-container.knowledge.active:hover,
.news-category-container.knowledge:hover {
    border: 1px solid var(--Secondary, #00B6F1);
    background: #D9F2FF;
    color: black;
}

.search-result-container input {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    outline: none;
    padding: 0;
    margin: 0;
    width: 100%;
    min-width: 0;
}

.product-filter-box.product-default-vehicle-filter-box {
    display: flex;
    /* หรือไม่ใส่ก็ได้ — inherit จาก .product-filter-box */
}

.product-filter-box.product-expanded-vehicle-filter-box {
    display: none;
}

.product-filter-box.product-default-battery-filter-box {
    display: flex;
    /* หรือไม่ใส่ก็ได้ — inherit จาก .product-filter-box */
}

.product-filter-box.product-expanded-battery-filter-box {
    display: none;
}

.product-filter-box-toggle-icon {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.product-filter-box-toggle-icon__bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15.44px;
    height: 2px;
    border-radius: 1px;
    background: #007FC6;
    transform: translate(-50%, -50%);
    transition: transform 0.22s ease, opacity 0.18s ease;
}

.product-filter-box-toggle-icon__bar--vertical {
    transform: translate(-50%, -50%) rotate(90deg);
}

.product-filter-box-toggle-icon.is-expanded .product-filter-box-toggle-icon__bar--vertical {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
    opacity: 0;
}

.product-filter-content.is-vehicle-filter-open .product-default-vehicle-filter-box {
    display: none;
}

.product-filter-content.is-vehicle-filter-open .product-expanded-vehicle-filter-box {
    display: flex;
}

.product-filter-content.is-battery-filter-open .product-default-battery-filter-box {
    display: none;
}

.product-filter-content.is-battery-filter-open .product-expanded-battery-filter-box {
    display: flex;
}

.product-filter-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #282828;
}

.product-filter-search-input::placeholder {
    color: rgba(40, 40, 40, 0.5);
}

.product-filter-search-input--display {
    display: flex;
    align-items: center;
}

.product-filter-search-placeholder {
    color: rgba(40, 40, 40, 0.5);
}

.product-filter-tablet-mobile-category-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1 0 0;
    width: 100%;
}

.product-filter-tablet-mobile-category-container {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    box-sizing: border-box;
    border-radius: none;
    background: rgba(255, 255, 255, 0.30);
    cursor: pointer;
}

.product-filter-tablet-mobile-category-container-label {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 2.5em;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.3;
}

.product-filter-tablet-mobile-category-container-icon {
    display: flex;
    width: 61.148px;
    height: 26.418px;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    aspect-ratio: 61.15/26.42;
}

.product-filter-tablet-mobile-category-container-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.product-filter-tablet-mobile-category-container.is-active {
    background: linear-gradient(180deg, #0090E0 0%, #007FC6 100%);
}

.product-filter-tablet-mobile-category-container.is-active .product-filter-tablet-mobile-category-container-label {
    color: #fff;
}

.product-filter-search-submit {
    display: flex;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.product-car-filter-pane {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition:
        max-height 0.35s ease,
        opacity 0.3s ease,
        padding 0.35s ease;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 12px;
    row-gap: 12px;
}

.product-car-filter-pane.is-open {
    max-height: 1500px;
    opacity: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 12px;
    row-gap: 12px;
}

.product-car-filter-pane.is-open>a {
    max-width: 100%;
}


.product-car-filter-container .product-car-filter-wrapper img {
    transition: transform 0.3s ease;
}

.product-car-filter-container.active .product-car-filter-wrapper img {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {

    .product-car-filter-pane,
    .product-car-filter-container .product-car-filter-wrapper img {
        transition: none;
    }
}

/* .product-filter-content.is-vehicle-filter-open .product-filter-box.product-default-filter-box {
    display: none;
}
.product-filter-content.is-vehicle-filter-open .product-filter-box.product-expanded-filter-box {
    display: flex;
} */

.product-section-decor--desktop-tablet {
    display: block;
}

.product-section-decor--desktop-mobile {
    display: none;
}

.compare-product-related-blog-container {
    display: flex;
    padding: 80px 64px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
    background: #F8F8F8;
}

.news-list-banner {
    position: relative;
    display: flex;
    overflow: visible;
    align-items: center;
    justify-content: center;
}

/* gradient ของ carousel ล้นขึ้นมาทับหัวข้อ — ยก header ขึ้นชั้นบน */
.news-list-page-header {
    position: relative;
    z-index: 1;
}

.news-list-gradient-circle-left {
    width: 793px;
    height: 793px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: 0;
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 793px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}

.news-list-gradient-circle-right {
    width: 873px;
    height: 873px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: 0;
    position: absolute;
    right: -25%;
    top: 0;
    transform: translateY(-50%);
    border-radius: 873px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}

.news-list-banner-image {
    position: relative;
    width: 100%;
    max-width: 545.855px;
    max-height: 545.855px;
    aspect-ratio: 1/1;
    background-color: #000;
    overflow: hidden;
}

.news-list-banner-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
}

.news-list-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
    transform: scale(1);
    transform-origin: center center;
}

.news-list-banner-link:hover .news-list-banner-image::after {
    opacity: 1;
}

.news-list-banner-link:hover .news-list-banner-image img {
    transform: scale(1.05);
}

.news-list-banner-text-container {
    display: flex;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 607px;
    margin-left: -48px;
    height: 381px;
    padding: 32px 48px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    border-radius: 0 0 24px 0;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: none;
    isolation: isolate;
    backdrop-filter: blur(12px);
}

.news-list-banner-carousel .item {
    padding-top: 12px;
    padding-right: 32px;
    box-sizing: border-box;
}


.news-list-banner-text-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
}

.news-list-banner-text-wrapper {
    display: flex;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.news-list-banner-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.news-list-banner-carousel-bleed {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: clip;
    overflow-y: visible;
    isolation: isolate;
    box-sizing: border-box;
}

/* gradient decor อยู่ชั้นหลัง — owl transform ทำให้ z-index:-1 บนวงกลมไม่พอ */
.news-list-banner-carousel-bleed>.service-section-decor,
.news-list-banner-carousel-bleed>.service-section-decor--desktop-tablet,
.news-list-banner-carousel-bleed>.service-section-decor--mobile {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.news-list-banner-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.news-list-banner-carousel .owl-item {
    display: flex;
    flex-shrink: 0;
}

.news-list-banner-carousel-wrapper {
    --banner-pad: max(64px, calc((100% - 1088px) / 2));
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--banner-pad);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.news-list-banner-carousel .news-list-banner {
    width: 100%;
}

.news-list-banner-carousel-wrapper .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    width: 52px;
    height: 52px;
    border-radius: 0 0 16px 0;
    background: var(--White, #FFF);
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    right: calc(var(--banner-pad));
}

.news-list-banner-carousel-wrapper .owl-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    width: 52px;
    height: 52px;
    border-radius: 0 0 0 16px;
    background: var(--White, #FFF);
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    left: calc(var(--banner-pad) - 24px);
}

.news-list-banner-carousel-wrapper .owl-prev:hover,
.news-list-banner-carousel-wrapper .owl-next:hover {
    background: #007FC6;
}

.news-list-banner-carousel-wrapper .owl-prev:hover img,
.news-list-banner-carousel-wrapper .owl-next:hover img {
    filter: brightness(0) invert(1);
}

.news-list-banner-carousel-wrapper .owl-prev.disabled,
.news-list-banner-carousel-wrapper .owl-next.disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.carousel-indicators {
    width: 100%;
    position: static;
    margin: 0 auto;
}

.carousel-indicators li {
    display: inline-block;
    width: 24px;
    height: 8px;
    margin: 0;
    margin-right: 4px;
    text-indent: -999px;
    border: 0px solid transparent;
    border-radius: 0px;
    transform: skewX(-45deg);
    cursor: pointer;
    background-color: #000 \9;
    background-color: rgb(174, 174, 174);
    transition: all 0.3s ease;
}

.carousel-indicators .active {
    margin: 0;
    margin-right: 4px;
    width: 52px;
    height: 8px;
    background-color: #007FC6;
    transition: all 0.4s ease;
}

.news-list-input-box-search-dropdown {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    min-width: 0;
}


.news-list-input-box-search-main-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    align-self: stretch;
}

.news-list-input-box-search-wrapper {
    display: flex;
    height: 48px;
    width: 100%;
    max-width: 256px;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: row;
    gap: 16px;
}

.news-list-input-box-search-main-wrapper .select-search-car,
.news-list-input-box-search-main-wrapper .select-search-model {
    width: 100%;
    min-width: 0;
}

.news-list-input-box-search-main-wrapper .select-search-car select,
.news-list-input-box-search-main-wrapper .select-search-model select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.news-list-input-box-search-main-wrapper.filter-select-news-year-group {
    width: 100%;
    max-width: 256px;
    flex: 0 0 auto;
}

.news-list-input-box-search-main-wrapper.filter-select-sub-group {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}


.news-list-sub-input-box-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 14px 16px;
    border-radius: 0 0 16px 0;
    border: 1px solid #D2D2D2;
    background: #FFF;
    cursor: pointer;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.news-list-sub-input-box-search>span.body1,
.news-list-sub-input-box-search .wd-sub-input-box-search__input {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-list-sub-input-box-search>span.body1[hidden],
.news-list-sub-input-box-search .wd-sub-input-box-search__input[hidden] {
    display: none !important;
}

.news-list-sub-input-box-search>img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    pointer-events: none;
}

.news-list-input-box-search-main-wrapper.filter-select-news-year-group .filter-select-sub-panel:not([hidden]) {
    width: 100%;
    left: 0;
}

.news-list-input-box-search .filter-select-sub-panel[hidden] {
    display: none !important;
}

.news-list-card-container-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
    padding-bottom: 48px;
}

.news-list-card-container {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    background: #FFF;
    border-radius: 8px;
    border: 1px solid #D2D2D2;
    cursor: pointer;
    overflow: hidden;
}

.news-list-card-container:hover {
    background: #EBF8FF;
}

.news-list-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    transform-origin: center center;
}

.news-list-card-container:hover .news-list-card-image img {
    transform: scale(1.12);
}


.related-news-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.related-news-carousel .owl-item {
    display: flex;
    flex-shrink: 0;
    height: auto;
}

.related-news-carousel .item {
    display: flex;
    width: 100%;
    height: 100%;
}

.news-list-card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: stretch;
    overflow: hidden;
}

.news-list-card-text-wrapper {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    gap: 16px;
    align-self: stretch;
}

.news-list-card-container .news-list-card-tag-activities {
    margin-top: auto;
}

.news-list-card-text-wrapper-title {
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: calc(2 * 1.5 * 18px);
}

.related-news-carousel-bleed {
    width: 100%;
    max-width: 1313px;
}

.related-news-carousel-wrapper {
    width: 100%;
    position: relative;
    overflow: visible;
}

.related-news-carousel-wrapper .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    width: 52px;
    height: 52px;
    border-radius: 0 0 16px 0;
    background: var(--White, #FFF);
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    right: -24px;
}

.related-news-carousel-wrapper .owl-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    width: 52px;
    height: 52px;
    border-radius: 0 0 0 16px;
    background: var(--White, #FFF);
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    left: -24px;
}

.related-news-carousel-wrapper .owl-prev:hover,
.related-news-carousel-wrapper .owl-next:hover {
    background: #007FC6;
}

.related-news-carousel-wrapper .owl-prev:hover img,
.related-news-carousel-wrapper .owl-next:hover img {
    filter: brightness(0) invert(1);
}

.related-news-carousel-wrapper .owl-prev.disabled,
.related-news-carousel-wrapper .owl-next.disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.related-news-carousel-bleed {
    margin-left: 0;
    margin-right: 0;
    overflow-x: visible;
    overflow-y: visible;
}

.related-news-carousel-wrapper .owl-stage-outer {
    margin-left: 0;
}

.related-news-carousel-wrapper .owl-item {
    padding: 0;
}

.related-news-carousel .item {
    width: 100%;
}

.related-news-carousel .news-list-card-container {
    text-decoration: none;
    color: inherit;
}

.related-news-carousel .news-list-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-details-header-date-category-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.news-details-header-date-category-seperator {
    width: 1px;
    height: 33px;
    background: #D2D2D2;
}

.news-details-header-social-media-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.news-details-header-social-media-icon-wrapper {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.news-details-header-social-media-icon {
    width: 24px;
    height: 24px;
    aspect-ratio: 1/1;
    display: block;
}

.news-details-header-social-media-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-details-gradient-circle-left {
    width: 793px;
    height: 793px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    left: 8%;
    bottom: 783px;
    transform: translate(-50%, -50%);
    border-radius: 793px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}

.news-details-gradient-circle-right {
    width: 873px;
    height: 873px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    right: -20%;
    top: 0;
    transform: translateY(-50%);
    border-radius: 873px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}

.compare-product-related-blog-container .related-news-indicators {
    position: static;
    margin: 32px auto 0;
    padding-left: 0;
    width: auto;
    list-style: none;
    text-align: center;
}

.compare-product-related-blog-container .related-news-indicators li {
    display: inline-block;
    width: 24px;
    height: 8px;
    margin: 0;
    margin-right: 4px;
    text-indent: -999px;
    border: 0 solid transparent;
    border-radius: 0;
    transform: skewX(-45deg);
    cursor: pointer;
    background-color: rgb(174, 174, 174);
    transition: all 0.3s ease;
}

.compare-product-related-blog-container .related-news-indicators .active {
    width: 52px;
    height: 8px;
    margin: 0 4px 0 0;
    background-color: #007FC6;
}

.compare-product-modal-overlay,
.compare-product-modal-shell {
    display: none;
}

.header-batt-search {
    display: none;
}

.header-batt-search.is-open {
    display: block;
}

/* ช่องค้นหาใน trigger ของ filter (desktop) + ซ่อน item ที่ถูกกรองออก */
.wd-sub-input-box-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #282828;
    font-size: 16px;
    padding: 0;
    font-family: inherit;
}

.wd-sub-input-box-search__input::placeholder {
    color: #A6A6A6;
}

.wd-sub-input-box-search span[hidden],
.wd-sub-input-box-search__input[hidden] {
    display: none !important;
}

/* filter-select-sub__trigger ใน productList รองรับ inline search input เดียวกับ wd-sub-input-box-search */
.filter-select-sub__trigger>span[hidden],
.filter-select-sub__trigger .wd-sub-input-box-search__input[hidden] {
    display: none !important;
}

.filter-select-sub__trigger>span,
.filter-select-sub__trigger .wd-sub-input-box-search__input {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* icon-swap ก็เป็น <span> เหมือนกัน ต้องกันไม่ให้ถูก flex-grow ไปกินพื้นที่ label */
.filter-select-sub__trigger>span.icon-swap {
    flex: 0 0 auto;
    overflow: visible;
    white-space: normal;
}

.filter-select-sub__trigger>span.is-placeholder,
.filter-select-car__trigger>span.is-placeholder {
    color: #A6A6A6;
}

.filter-select-sub__trigger>span:not(.is-placeholder),
.filter-select-car__trigger>span:not(.is-placeholder) {
    color: #282828;
}

/* ข้อความใน trigger: บังคับบรรทัดเดียว + ellipsis เมื่อพื้นที่ไม่พอ */
.wd-input-box-search .wd-sub-input-box-search {
    min-width: 0;
    overflow: hidden;
}

.wd-input-box-search .wd-sub-input-box-search>span.body1,
.wd-input-box-search .wd-sub-input-box-search__input {
    flex: 1 1 auto;
    text-align: start;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wd-input-box-search .wd-sub-input-box-search>img {
    flex-shrink: 0;
}

.filter-select-sub-item.is-filtered-out {
    display: none !important;
}

.filter-select-sub-item.is-rel-hidden {
    display: none !important;
}

.filter-select-car-item-wrapper.is-rel-hidden {
    display: none !important;
}

.filter-select-sub-item.is-brand-dup {
    display: none !important;
}

body.compare-product-modal-open {
    overflow: hidden;
}

@media (min-width: 1024px) {
    .invisible-slide-baner .compare-product-modal-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    .invisible-slide-baner .compare-product-modal-overlay.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.3s ease, visibility 0s linear 0s;
    }

    .invisible-slide-baner #compare-product-modal.compare-product-modal-shell {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(89vw, 1440px);
        z-index: 10001;
        overflow: hidden;
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
        will-change: transform;
    }

    .invisible-slide-baner #compare-product-modal.compare-product-modal-shell.is-open {
        transform: translateX(0);
        visibility: visible;
        /* ไม่รับคลิกที่พื้นที่ว่างของ shell — ให้ตกไปที่ overlay เพื่อปิด modal */
        pointer-events: none;
        transition: transform 0.3s ease, visibility 0s linear 0s;
    }

    .invisible-slide-baner #compare-product-modal.compare-product-modal-shell.is-open .compare-product-search-batt-wrapper {
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .invisible-slide-baner .compare-product-modal-overlay,
    .invisible-slide-baner #compare-product-modal.compare-product-modal-shell {
        transition: none;
    }
}

body.dealer-store-pop-up-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.dealer-store-pop-up-container {
    position: relative;
}

.dealer-store-pop-up-btn-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dealer-store-pop-up-btn-close img {
    width: 24px;
    height: 24px;
    display: block;
}

.dealer-store-pop-up-content-main {
    display: contents;
}

.footer-legal-sep {
    color: #9E9E9E;
}

.nav-gradient {
    background: linear-gradient(180deg, #011020 20%, rgba(1, 16, 32, 0.00) 100%);
}

.space-xxl-s {
    margin-top: 4px;
}

.service-dropdown-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 1;
    min-width: 280px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 0 0 24px 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1.0) 74.52%, rgba(224, 235, 245, 1.0) 100%);
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
}

.service-dropdown-menu.is-open {
    display: inline-flex;
}

.service-dropdown-overlay,
.batt-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 55;
}

.service-dropdown-overlay.is-open,
.batt-search-overlay.is-open {
    display: block;
}

/* เปิด search / batt panel: ให้ overlay มืดพื้นหลัง nav-solid ของ header-main3 */
body.search-panel-open .navbar-main-background>.navbar-fixed.nav-solid::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 0;
}

body.search-panel-open .navbar-main-background>.navbar-fixed.nav-solid>* {
    position: relative;
    z-index: 1;
}

.service-dropdown-menu a {
    display: block;
    width: 100%;
    color: #000;
    font-size: var(--size-M, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    transition: background 0.25s ease;
}

.service-dropdown-menu a.service-dropdown-menu-container {
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: 8px;
    gap: 8px;
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
}

.service-dropdown-menu-container__label {
    flex: 1 1 auto;
    min-width: 0;
}

.service-dropdown-menu-container img,
.service-dropdown-menu-container .chevron-right-icon {
    flex: 0 0 auto;
}

.service-dropdown-menu-container:hover,
.service-dropdown-menu-container:focus {
    background: #E6EFF7;
    color: #000;
}

.service-dropdown-menu-container:hover img,
.service-dropdown-menu-container:focus img {
    filter: brightness(0);
}

.compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a>.compare-tab-icon.icon-swap {
    width: 24px;
    height: 24px;
    display: inline-block;
    flex-shrink: 0;
}

.compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a>.compare-tab-icon .icon-swap__default {
    filter: brightness(0);
}

.compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a>.compare-tab-icon .icon-swap__hover {
    filter: none;
    opacity: 0;
}

.compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a>.compare-tab-icon .icon-swap__default {
    opacity: 0;
}

.compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a>.compare-tab-icon .icon-swap__hover {
    opacity: 1;
}

.nav-main-sub-wrapper-sub-item-lower--link.is-open>.main-menu-header-revamp--with-icon {
    color: #00B6F1;
}

.nav-main-sub-wrapper-sub-item-lower--link.is-open .icon-swap__default {
    opacity: 0;
}

.nav-main-sub-wrapper-sub-item-lower--link.is-open .icon-swap__hover {
    opacity: 1;
}

.navbar-main-background .header-batt-search-toggle[aria-expanded="true"],
.navbar-sticky-revamp .header-batt-search-toggle[aria-expanded="true"] {
    color: #00B6F1;
}

.navbar-main-background .header-batt-search-toggle[aria-expanded="true"] .icon-swap__default,
.navbar-sticky-revamp .header-batt-search-toggle[aria-expanded="true"] .icon-swap__default {
    opacity: 0;
}

.navbar-main-background .header-batt-search-toggle[aria-expanded="true"] .icon-swap__hover,
.navbar-sticky-revamp .header-batt-search-toggle[aria-expanded="true"] .icon-swap__hover {
    opacity: 1;
}

.navbar-main-background .nav-main-sub-wrapper__lang>.dropdown-toggle.body1:hover,
.navbar-main-background .nav-main-sub-wrapper__lang>.dropdown-toggle.body1:focus,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang>.dropdown-toggle.body1:hover,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang>.dropdown-toggle.body1:focus,
.navbar-main-background .nav-main-sub-wrapper__lang.open>.dropdown-toggle.body1,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang.open>.dropdown-toggle.body1 {
    color: #00B6F1;
}

.navbar-main-background .nav-main-sub-wrapper__lang.open>.dropdown-toggle.main-menu-header-revamp--with-icon,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang.open>.dropdown-toggle.main-menu-header-revamp--with-icon {
    color: #00B6F1;
}

.navbar-main-background .nav-main-sub-wrapper__lang.open .icon-swap__default,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang.open .icon-swap__default {
    opacity: 0;
}

.navbar-main-background .nav-main-sub-wrapper__lang.open .icon-swap__hover,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang.open .icon-swap__hover {
    opacity: 1;
}



.navbar-main-background .nav-main-sub-wrapper__lang.open .icon-swap--chevron,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang.open .icon-swap--chevron,
.navbar-main-background .nav-main-sub-wrapper__lang .dropdown-toggle[aria-expanded="true"] .icon-swap--chevron,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-toggle[aria-expanded="true"] .icon-swap--chevron,
.navbar-main-background .nav-main-sub-wrapper__lang .dropdown-toggle.main-menu-header-revamp--with-icon:focus .icon-swap--chevron,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-toggle.main-menu-header-revamp--with-icon:focus .icon-swap--chevron,
.navbar-main-background .nav-main-sub-wrapper__lang .dropdown-toggle.main-menu-header-revamp--with-icon:active .icon-swap--chevron,
.navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-toggle.main-menu-header-revamp--with-icon:active .icon-swap--chevron,
.nav-main-sub-wrapper-sub-item-lower--link.is-open .icon-swap--chevron,
.nav-main-sub-wrapper-sub-item-lower--link .service-dropdown-toggle[aria-expanded="true"] .icon-swap--chevron,
.nav-main-sub-wrapper-sub-item-lower--link .service-dropdown-toggle.main-menu-header-revamp--with-icon:focus .icon-swap--chevron,
.nav-main-sub-wrapper-sub-item-lower--link .service-dropdown-toggle.main-menu-header-revamp--with-icon:active .icon-swap--chevron,
.navbar-main-background .header-batt-search-toggle[aria-expanded="true"] .icon-swap--chevron,
.navbar-sticky-revamp .header-batt-search-toggle[aria-expanded="true"] .icon-swap--chevron,
.navbar-main-background .header-batt-search-toggle.main-menu-header-revamp--with-icon:focus .icon-swap--chevron,
.navbar-sticky-revamp .header-batt-search-toggle.main-menu-header-revamp--with-icon:focus .icon-swap--chevron,
.navbar-main-background .header-batt-search-toggle.main-menu-header-revamp--with-icon:active .icon-swap--chevron,
.navbar-sticky-revamp .header-batt-search-toggle.main-menu-header-revamp--with-icon:active .icon-swap--chevron {
    transform: rotate(180deg);
}

/* Sticky search panel: multi-line placeholder (native input placeholder cannot wrap) */
.header-search-panel-sticky .search-box-field {
    align-items: flex-start;
}

.header-search-panel-sticky .search-box-field>.header-search-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.header-search-panel-sticky .search-box-field-input-wrap {
    display: grid;
    flex: 1;
    min-width: 0;
}

.header-search-panel-sticky .search-box-field-input-wrap>* {
    grid-area: 1 / 1;
}

.header-search-panel-sticky .search-box-field-placeholder {
    white-space: normal;
    word-break: break-word;
    color: #A6A6A6;
    line-height: 1.4;
    pointer-events: none;
}

.header-search-panel-sticky .search-box-field-input {
    width: 100%;
    min-width: 0;
    line-height: 1.4;
}

.header-search-panel-sticky .search-box-field-input-wrap:focus-within .search-box-field-placeholder,
.header-search-panel-sticky .search-box-field-input-wrap.has-value .search-box-field-placeholder {
    visibility: hidden;
}

.search-box-field-clear {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.search-box-field-clear[hidden] {
    display: none;
}

.search-box-field-clear-icon {
    display: block;
    width: 24px;
    height: 24px;
}

.header-search-panel-sticky .search-box-field-clear {
    margin-top: 2px;
}

.header-search-panel .search-word-wrapper[hidden],
.header-search-panel-sticky .search-word-wrapper[hidden] {
    display: none;
}

.bg-search-batt .home-hero-tab-fade-in {
    animation: home-hero-tab-fade-in 0.3s ease-in-out forwards;
}

/* Product card spec: icon | label | : | value — labels stretch ให้ colon ตรงกันทุกแถว */
.batt-spec-wrapper.batt-spec-wrapper--columns {
    display: grid;
    grid-template-columns: max-content max-content max-content auto;
    column-gap: 8px;
    row-gap: 8px;
    align-items: stretch;
    align-self: stretch;
}

.batt-spec-wrapper.batt-spec-wrapper--columns .batt-spec-container {
    display: contents;
}

.batt-spec-wrapper.batt-spec-wrapper--columns .batt-spec-label,
.batt-spec-wrapper.batt-spec-wrapper--columns .batt-spec-colon,
.batt-spec-wrapper.batt-spec-wrapper--columns .batt-spec-value {
    display: flex;
    align-items: center;
    align-self: stretch;
}

.batt-spec-wrapper.batt-spec-wrapper--columns .batt-spec-label,
.batt-spec-wrapper.batt-spec-wrapper--columns .batt-spec-colon {
    justify-content: flex-start;
}

.batt-spec-wrapper.batt-spec-wrapper--columns .batt-spec-label {
    min-width: 0;
}

.batt-spec-wrapper.batt-spec-wrapper--columns .filter-select-car-item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
}

.batt-spec-wrapper.batt-spec-wrapper--columns .filter-select-car-item-image img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.batt-spec-wrapper.batt-spec-wrapper--columns .batt-spec-value {
    font-weight: 700;
    color: #6D6D6D;
}

.batt-spec-wrapper.batt-spec-wrapper--columns .batt-spec-label,
.batt-spec-wrapper.batt-spec-wrapper--columns .batt-spec-colon {
    color: #6D6D6D;
}

.home-hero-tab-fade-overlay {
    position: fixed;
    pointer-events: none;
    z-index: 5;
}

.home-hero-tab-fade-overlay .tabbable-panel,
.home-hero-tab-fade-overlay .wd-input-box-search {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    animation: home-hero-tab-fade-out 0.3s ease-in-out forwards;
}

@keyframes home-hero-tab-fade-in {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

@keyframes home-hero-tab-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

.home-page-wrap .service-items-row[data-aos="service-item-rise-group"] .service-item-main-container {
    opacity: 0;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 600ms;
}

.home-page-wrap .service-items-row[data-aos="service-item-rise-group"] .service-item-main-container:nth-child(1) {
    transform: translateY(42px);
    transition-delay: 0ms;
}

.home-page-wrap .service-items-row[data-aos="service-item-rise-group"] .service-item-main-container:nth-child(2) {
    transform: translateY(32px);
    transition-delay: 200ms;
}

.home-page-wrap .service-items-row[data-aos="service-item-rise-group"] .service-item-main-container:nth-child(3) {
    transform: translateY(52px);
    transition-delay: 400ms;
}

.home-page-wrap .service-items-row[data-aos="service-item-rise-group"].aos-animate .service-item-main-container {
    opacity: 1;
    transform: none;
}

/* tablet/mobile: เรียงแนวตั้ง — trigger ทีเดียวที่แถว, ลด stagger ไม่ให้รายการล่างดูช้า */
@media (max-width: 1023px) {
    .home-page-wrap .service-items-row[data-aos="service-item-rise-group"] .service-item-main-container:nth-child(2) {
        transition-delay: 100ms;
    }

    .home-page-wrap .service-items-row[data-aos="service-item-rise-group"] .service-item-main-container:nth-child(3) {
        transition-delay: 200ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page-wrap .service-items-row[data-aos="service-item-rise-group"] .service-item-main-container {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.interesting-banner-wrapper .banner-slide-media,
.banner-wrapper .banner-slide-media {
    display: block;
    aspect-ratio: 2 / 0.925;
    overflow: hidden;
    width: 100%;
}

.banner-wrapper .h-w-imag-ban-slide {
    height: 100%;
    display: block;
    object-fit: cover;
}

.header-batt-search-category-container .car-type-img-search {
    display: block;
    position: absolute;
    right: -80px;
    top: -40px;
    width: 259px;
    height: auto;
}

.header-batt-search-category-container .car-type-img-search img {
    width: auto;
    height: auto;
}

.sidenav-header-batt-search-category-container .car-type-img-search {
    display: block;
    position: absolute;
    right: -20px;
    top: -37px;
    width: 244px;
    height: auto;
}

.sidenav-header-batt-search-category-container .car-type-img-search img {
    width: auto;
    height: auto;
}

.header-batt-search-category-container,
.sidenav-header-batt-search-category-container {
    transition: background 0.25s ease, color 0.25s ease;
}

.header-batt-search-category-container::after,
.sidenav-header-batt-search-category-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 50% 30% at 50% 100%,
            rgba(0, 182, 241, 0.7) 0%,
            rgba(0, 182, 241, 0.35) 45%,
            rgba(0, 182, 241, 0) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.header-batt-search-category-container:hover::after,
.sidenav-header-batt-search-category-container:hover::after {
    opacity: 1;
}

.header-batt-search-category-container .header-barr-search-category-text,
.sidenav-header-batt-search-category-container .sidenav-header-barr-search-category-text {
    position: relative;
    z-index: 1;
}

.header-batt-search-category-container img,
.header-batt-search-category-container .car-type-img-search,
.header-batt-search-category-container .batt-type-img,
.sidenav-header-batt-search-category-container img,
.sidenav-header-batt-search-category-container .car-type-img-search,
.sidenav-header-batt-search-category-container .sidenav-batt-type-img {
    z-index: 1;
}

.readall-new a {
    display: flex;
    flex-direction: row;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.service-item-share-icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 55px;
    height: 39px;
    background: var(--BG-Light, #EBF8FF);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.service-item-share-icon img {
    width: 18px;
    height: 18px;
    display: block;
    transform: skewX(18deg);
}

.product-list-icon-wrapper-batt {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-height: 26px;
    width: auto;
    aspect-ratio: 61.15/26.42;
}

.product-list-icon-wrapper-batt img,
.product-list-icon-wrapper-batt svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-filter-box {
    cursor: pointer;
}

.product-filter-search-not-found-container {
    display: flex;
    width: 476px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.product-filter-search-not-found-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.dealer-store-empty-state-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    max-width: 1440px;
    margin: 0 auto;
}

.dealer-store-empty-state-text .body1 {
    color: #6D6D6D;
}

.search-result-query-filter-wrapper-item {
    margin-left: auto;
    gap: 8px;
}

.product-list-container .product-filter-search-not-found-container {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding: 24px 16px;
}

.product-list-container .product-filter-search-not-found-text-wrapper .body1 {
    color: #6d6d6d;
}

.product-list-container .product-filter-search-not-found-container>.btn-view-more {
    bottom: 0;
    color: #fff;
    text-decoration: none;
}

.product-list-container .product-filter-search-not-found-container>.btn-view-more .body1-bold,
.product-list-container .product-filter-search-not-found-container>.btn-view-more img {
    position: relative;
    z-index: 1;
}

.news-list-display-desktop-tablet {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.news-list-display-mobile {
    display: none;
}

.warranty-invisible-mobile {
    display: none;
}

.warranty-visible-mobile {
    display: none;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.h1-bold {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

.mobile-h1-header {
    font-size: 32px;
    font-weight: 700;
    color: #FFF;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.h2-bold {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

.desktop-h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.mobile-h2 {
    color: #007FC6;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.mobile-h2-black-light {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.mobile-h2-black {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.mobile-h2-bold {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}


.body1-white-light {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
}

.body {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}


.body1-white {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

.body1-bold {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.body1-blue-strong {
    color: #007FC6;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

.desktop-body3 {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.h3-bold {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.mobile-h3 {
    font-size: 20px;
    font-style: normal;
    line-height: 150%;
}

.mobile-h3 {
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
}

.h5-bold {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
}

.mobile-card1-bold {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}


.mobile-h3-bold {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.mobile-card3 {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.mobile-card3-bold {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.desktop-h4-light {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.desktop-h4-bold {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.h4-bold {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.mobile-h4 {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}


.mobile-h4-bold {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.desktop-h5 {
    overflow: hidden;
    color: #000;
    text-overflow: ellipsis;
    font-size: var(--size-L, 20px);
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
}

.body2-bold {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.margin-top-nav {
    margin-top: 28px;
}

.space-120 {
    margin-top: 120px;
}

.space-80 {
    margin-top: 80px;
}

.space-52 {
    margin-top: 52px;
}

.space-48 {
    margin-top: 48px;
}

.space-40 {
    margin-top: 40px;
}

.space-36 {
    margin-top: 36px;
}

.space-32 {
    margin-top: 32px;
}

.space-24 {
    margin-top: 24px;
}

.space-minus-24 {
    margin-top: -24px;
}

.space-16 {
    margin-top: 16px;
}

.space-8 {
    margin-top: 8px;
}

.editor-device-label {
    display: none;
}

#home-services {
    scroll-margin-top: 80px;
}

.btn-tag-activities-other-news {
    background: #fff;
    padding: 0px 8px;
    border-radius: 0px;
    border: 1px solid #007FC6;
    color: #007FC6;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.btn-tag-activities {
    background: #fff;
    padding: 8px;
    border-radius: 0px;
    border: 1px solid #007FC6;
    color: #007FC6;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.news-list-card-tag-activities {
    padding: 2px 8px;
    border-radius: 2px;
    border: 1px solid #007FC6;
    background: rgba(166, 166, 166, 0.10);
    color: #007FC6;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.news-list-card-tag-activities.activity {
    color: var(--Dark-Yellow-700, #CDA604);
    border-radius: 2px;
    border: 1px solid var(--Dark-Yellow-700, #CDA604);
    background: var(--Light-Yellow-50, #FEF7D9);
}

.news-list-card-tag-activities.knowledge {
    color: var(--Knowledge-Blue, #00B6F1);
    border-radius: 2px;
    border: 1px solid var(--Knowledge-Blue, #00B6F1);
    background: var(--Light-Blue-50, #E9F7FF);
}

.news-list-card-tag-activities.csr {
    color: var(--Green, #8EBA00);
    border-radius: 2px;
    border: 1px solid var(--Green, #8EBA00);
    background: var(--Light-Green-50, #F4FDD8);
}

.featured-news-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
    font-style: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}


.compare-product--icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.compare-modal-products-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.dealer-store-icon-wrapper {
    width: 24px;
    height: 24px;
}

.dealer-store-icon-wrapper img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.gs-1380-sub-banner-container {
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.gs-1380-sub-banner-bg {
    width: 100%;
    height: auto;
    max-height: 900px;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

.gs-1380-sub-banner-wrapper {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 65px;
    right: 0;
    margin-top: 43px;
    z-index: 1;
    width: 47.05%;
}

.gs-1380-sub-banner-sub-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.gs-1380-sub-banner-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.gs-1380-sub-banner-text-wrapper img {
    width: 100%;
    height: auto;
    max-width: 352px;
    max-height: 101px;
    aspect-ratio: 352/101;
    object-fit: contain;
}

.gs-1380-sub-banner-header {
    color: var(--Primary, #007FC6);

    font-size: 52px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 78px */
}

.gs-1380-sub-banner-item-container-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: fit-content;
}

.gs-1380-sub-banner-item-container {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: flex-start;
    gap: 8px;
}

.gs-1380-sub-banner-item-container img {
    max-width: 64px;
    max-height: 64px;
    aspect-ratio: 1 / 1;
}

.gs-1380-sub-banner-item-container-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.gs-1380-sub-banner-btn-wrapper {
    display: grid;
    grid-template-columns: 325fr 272fr;
    gap: 24px;
    width: fit-content;
}

.gs-1380-sub-banner-btn {
    display: flex;
    width: 100%;
    height: auto;
    padding: 16px 24px;
    align-items: center;
    gap: 16px;
    border-radius: 16.153px;
    border: 1px solid transparent;
    background:
        var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
        linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
    box-shadow: 0 8.077px 20.192px 0 rgba(0, 182, 241, 0.15);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

.gs-1380-sub-banner-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 50% 30% at 50% 100%,
            rgba(0, 182, 241, 0.7) 0%,
            rgba(0, 182, 241, 0.35) 45%,
            rgba(0, 182, 241, 0) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.gs-1380-sub-banner-btn:hover::after {
    opacity: 1;
}

.gs-1380-sub-banner-btn h4 {
    position: relative;
    z-index: 1;
}

.gs-1380-sub-banner-btn-2 {
    display: flex;
    width: 100%;
    height: auto;
    padding: 16px 24px;
    align-items: center;
    gap: 16px;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 8.077px 20.192px 0 rgba(0, 182, 241, 0.15);
}


.gs-1380-sub-banner-btn img {
    width: 87.851px;
    height: 64px;
    flex-shrink: 0;
    aspect-ratio: 87.85/64.00;
    position: relative;
    z-index: 1;
}

.warranty-sub-banner {
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    display: flex;
    align-items: center;
}

.warranty-sub-banner>img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.warranty-sub-banner-text-wrapper {
    position: absolute;
    inset: 0;
    padding-left: 55px;
    padding-top: 123px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}

.warranty-sub-banner-header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.warranty-sub-banner-header {
    position: relative;
    align-self: stretch;
    display: inline-block;
    font-size: 80px;
    font-style: normal;
    font-weight: 900;
    line-height: 140%;
    filter: drop-shadow(0 3px 40px rgba(79, 222, 255, 0.60));
}

.warranty-sub-banner-header-stroke,
.warranty-sub-banner-header-fill {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.warranty-sub-banner-header-stroke {
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    -webkit-text-stroke-width: 6px;
    -webkit-text-stroke-color: #007FC6;
    z-index: 1;
}

.warranty-sub-banner-header-fill {
    position: relative;
    background: linear-gradient(180deg, #AAA 0%, #FFF 46.12%, #AAA 92.86%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 2;
}

.warranty-sub-banner-sub-header {
    align-self: stretch;
    color: var(--Accent, #B4EB00);
}

.warranty-sub-banner-benefits-header {
    align-self: stretch;
    color: #FFF;
}

.warranty-sub-banner-benefits-item-wrapper-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.warranty-sub-banner-benefits-item-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.warranty-sub-banner-benefits-item-wrapper img {
    width: 48px;
    height: 48px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.warranty-layout {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
}

.warranty-vector {
    position: absolute;
    left: 45%;
    bottom: -25%;
    transform: translate(-50%, -50%);
    width: 140%;
    max-width: none;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
}

.warranty-vector-bleed {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.warranty-vector img {
    width: 80%;
    height: auto;
    display: block;
}

.warranty-gradient-circle-left {
    width: 765px;
    height: 765px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: -1;
    /* อยู่ข้างหลังรูปและ text */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* center กลางรูป illustration */
    border-radius: 765px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 182, 241, 0.60) 0%, rgba(181, 234, 252, 0.00) 87.5%);
}

.warranty-gradient-circle-right {
    width: 1291px;
    height: 1291px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    right: -428px;
    top: -675px;
    border-radius: 1291px;
    background: radial-gradient(circle,
            #E6F8FEFF 0%,
            #B5EAFC00 88%);
}

.warranty-register-step-wrapper {
    width: 100%;
    height: auto;
    max-height: none;
    padding: 80px 64px;
    box-sizing: border-box;
}

.warranty-scroll-track {
    --warranty-lock-height: min(820px, 100vh);
    position: relative;
    z-index: 0;
    height: auto;
}

.footer {
    position: relative;
    z-index: 1;
}

.warranty-scroll-track>.warranty-register-step-wrapper {
    position: sticky;
    top: max(0px, calc((100vh - var(--warranty-lock-height)) / 2));
    height: var(--warranty-lock-height);
    max-height: var(--warranty-lock-height);
    display: flex;
    align-items: center;
    overflow: visible;
    box-sizing: border-box;
}

.warranty-register-step-inner {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    box-sizing: border-box;
    overflow: visible;
}

.warranty-register-step-indicators {
    position: absolute;
    left: 0;
    top: 35%;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
}

.warranty-register-step-indicators li {
    display: inline-block;
    width: 8px;
    height: 24px;
    margin: 0;
    margin-right: 4px;
    text-indent: -999px;
    border: 0 solid transparent;
    border-radius: 0;
    transform: skewY(45deg);
    cursor: pointer;
    background-color: rgb(174, 174, 174);
    transition: all 0.3s ease;
}

.warranty-register-vector {
    position: absolute;
    left: -60px;
    top: 40px;
    width: 765px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 765px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 182, 241, 0.60) 0%, rgba(181, 234, 252, 0.00) 87.5%);
}

.warranty-register-step-indicators .active {
    width: 8px;
    height: 52px;
    margin: 0 4px 0 0;
    background-color: #007FC6;
}

.warranty-register-step-illustration-content {
    position: relative;
    aspect-ratio: 507 / 699;
    /* อัตราส่วนรูปจริง */
    max-height: 699px;
    width: 507px;
    flex-shrink: 0;
    overflow: visible;
    /* ปล่อยให้ glow ล้นออกได้ — ตัวที่ crop รูปคือ viewport */
}

.warranty-register-step-illustration-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    /* ตัวนี้เป็นคน crop รูป */
}

.warranty-register-step-illustration-track {
    position: absolute;
    left: -26px;
    top: -26px;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease;
    /* ทำให้เลื่อนนุ่ม */
}

.warranty-register-step-illustration-image {
    position: static;
    /* เปลี่ยนจาก absolute → เรียงในแนวตั้ง */
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    max-width: 507px;
    max-height: 699px;
}

.warranty-register-step-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 48px;
    flex: 1 0 0;
}

.warranty-register-step-text-header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    align-self: stretch;
}

.warranty-register-step-item-wrapper {
    display: flex;
    width: 100%;
    padding-right: 37px;
    align-items: flex-start;
    gap: 48px;
    height: 455px;
    /* ความสูงหน้าต่างที่มองเห็น (ล้อกับ progress 455px) */
    overflow: hidden;
    mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 50%,
            transparent 89%);
}

.warranty-register-step-item-wrapper-text-wrapper-main {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px;
}

.warranty-register-step-item-wrapper-text-wrapper-main {
    transition: transform 0.4s ease;
}

.warranty-register-step-illustration-image {
    transition: opacity 0.3s ease;
}

.warranty-register-step-item-wrapper-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.warranty-register-step-item-wrapper-text-wrapper li,
.warranty-register-step-item-wrapper-text-image-wrapper li {
    list-style-position: inside;
    padding-left: 1.4em;
    text-indent: -1.1em;
}

.warranty-register-step-item-wrapper-text-wrapper li::marker,
.warranty-register-step-item-wrapper-text-image-wrapper li::marker {
    color: #007FC6;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.warranty-register-step-items-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
}

.warranty-step-progress {
    position: relative;
    width: 12px;
    height: 455px;
    flex-shrink: 0;
    overflow: visible;
}

.warranty-step-progress-track {
    position: relative;
    width: 100%;
    transition: transform 0.4s ease;
}

.warranty-step-progress-track::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(to bottom,
            #E5E5E5 0 8px,
            transparent 8px 14px);
}

.warranty-step-progress-fill {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 3px;
    height: 0;
    transform: translateX(-50%);
    background: #B4EB00;
    z-index: 1;
    transition: height 0.4s ease, top 0.4s ease;
}

.warranty-register-step-point-item {
    position: absolute;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #E5E5E5;
    z-index: 2;
}

.warranty-register-step-point-item:first-of-type {
    top: 0;
}

/* ตำแหน่ง top ของ point item ถูกกำหนดด้วย JS ให้ตรงกับ top ของ badge */

.warranty-register-step-point-item.active {
    background: #B4EB00;
}

.warranty-register-step-badge {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 0 0 8px 0;
    background: #9E9E9E;
    color: #FFF;
    transition: all 0.3s ease;
}

.warranty-register-step-badge.is-active {
    background: #007FC6;
}

.warranty-register-step-item-wrapper-text-wrapper img {
    max-width: 103px;
    max-height: 103px;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.warranty-register-step-final-btn-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.warranty-register-step-final-btn {
    position: relative;
    display: flex;
    min-height: 48px;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    border-radius: 0 0 16px 0;
    border: 1px solid #00B6F1;
    background: #007FC6;
    color: #FFF;
    box-shadow: inset 0 0 12px rgba(0, 182, 241, .4);
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
}

/*ใส่ after เป็น radial gradient */
.warranty-register-step-final-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 30% at 50% 100%,
            rgba(0, 182, 241, 0.7) 0%,
            rgba(0, 182, 241, 0.35) 45%,
            rgba(0, 182, 241, 0) 100%);

}

.warranty-register-step-final-btn--sm {
    max-width: 228px;
}

.warranty-register-step-final-btn--lg {
    max-width: 307px;
}

.warranty-register-step-final-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    /* กันโดนบีบด้วย (ปุ่ม --sm แคบ) */
    width: 16px;
    height: 16px;
    aspect-ratio: 1/1;
    line-height: 0;
}

.warranty-register-step-final-btn-icon img {
    display: block;
    /* จุดสำคัญ: กัน baseline gap ของ inline img */
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.warranty-register-step-items-text-content.cms-content {
    color: #6D6D6D;
}

.warranty-register-step-items-text-content.cms-content p {
    margin: 8px 0 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.warranty-register-step-items-text-content.cms-content ul,
.warranty-register-step-items-text-content.cms-content ol {
    margin-top: 8px;
    padding-left: 0px;
}

.warranty-register-step-items-text-content.cms-content li {
    margin-top: 8px;
}

.warranty-register-step-items-text-content.cms-content li:first-child {
    margin-top: 0;
}

.warranty-register-step-items-text-content.cms-content span {
    color: inherit;
}

.warranty-register-step-items-text-content.cms-content p img {
    margin-top: 16px;
}

.news-banner-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.news-banner-nav-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    max-width: 100%;
    min-width: 0;
}

.news-banner-nav-detail>a,
.news-banner-nav-detail>span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.news-banner-nav-detail>img {
    flex-shrink: 0;
}

.news-detail-url-copy-pop-up {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    width: max-content;
    min-width: 87px;
    height: 26px;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #007FC6;
    color: #FFF;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
    box-sizing: border-box;
}

.news-detail-url-copy-pop-up.is-visible {
    display: flex;
}

.news-details-header-social-media-icon--copy {
    position: relative;
    cursor: pointer;
}

.contact-us-layout {
    position: relative;
    padding: 80px 0;
    overflow-x: clip;
    overflow-y: visible;
}

.contact-us-header-spacing {
    padding: 0 173px;
}

.contact-us-box-wrapper {
    width: 100%;
}

.contact-us-box-inside-wrapper {
    width: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 80px 64px;
    align-items: stretch;
    flex-direction: row;
    gap: 24px;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0 0 0 0;
    background: #EBF8FF;
}

.landing-form-box-inside-wrapper {
    width: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 80px 64px;
    align-items: stretch;
    flex-direction: column;
    gap: 24px;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0 0 0 0;
    background: #EBF8FF;
}

.contact-us-box-inside-wrapper-2 {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    gap: 24px;
    box-sizing: border-box;
}

/* decor เป็น flex child ทำให้ gap 24 โผล่ก่อน map/form — ดึงออกจาก flow */
.contact-us-box-inside-wrapper-2>.service-section-decor--desktop-tablet,
.contact-us-box-inside-wrapper-2>.service-section-decor--mobile {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.contact-us-box-inside-wrapper-2>.contact-us-box-map-title-wrapper,
.contact-us-box-inside-wrapper-2>form {
    position: relative;
    z-index: 1;
}

.landing-page-contact-us-box-inside-wrapper {
    width: 100%;
    max-width: 644px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    gap: 24px;
    box-sizing: border-box;
}

.contact-us-box-inside-wrapper>.invisible-slide-baner,
.contact-us-box-inside-wrapper>form,
.contact-us-box-inside-wrapper-2>.invisible-slide-baner,
.contact-us-box-inside-wrapper-2>form,
.landing-page-contact-us-box-inside-wrapper>.invisible-slide-baner,
.landing-page-contact-us-box-inside-wrapper>form {
    flex: 1;
    min-width: 0;
}

.contact-us-box-inside-wrapper .input-form-box {
    flex: 1;
}

.contact-us-box-wrapper .tabbable-panel {
    display: flex;
    width: 100%;
    margin-left: auto;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    position: relative;
    margin-bottom: -1px;
    z-index: 2;
}

.contact-us-box-wrapper .tabbable-panel>.nav-tabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 16px;
    padding: 0;
    border: 0;
    list-style: none;
}

.contact-us-box-wrapper .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
    float: none;
    margin-bottom: 0;
}

.contact-us-box-wrapper .nav-tabs-container-item {
    display: flex;
    max-width: 355px;
    width: 100%;
    min-height: 48px;
    height: auto;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    align-self: stretch;
    gap: 0;
    flex: 1 0 0;
    border-top: 0.5px solid rgba(255, 255, 255, 0.70);
    border-left: 0.5px solid rgba(255, 255, 255, 0.70);
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
}

.contact-us-box-wrapper .nav-tabs-container-item:last-child {
    border-right: 0.5px solid rgba(255, 255, 255, 0.70);
}


.contact-us-box-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 8px 24px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(166, 166, 166, 0.10);
    backdrop-filter: blur(12px);
    box-shadow: none;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
}

.contact-us-box-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
.contact-us-box-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
.contact-us-box-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
    color: #007FC6 !important;
    border-bottom: 0;
    background: #EBF8FF;
    backdrop-filter: blur(12px);
}

.input-form-box {
    display: flex;
    padding: 32px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
    border-radius: 0 0 48px 0;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
}

.input-form-box-multi-input-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    flex-shrink: 0;
}

.input-multi-input-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.input-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
}

.lable-box {
    position: relative;
    display: block;
}

.text-lable {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #282828;
}


.box-input select {

    font-size: 16px;
    line-height: 125%;
    width: 100%;
    height: 50px;
    border-radius: 4px;
    border: none;
    padding: 14px 16px;
    color: #282828;
    border-radius: 0 0 16px 0;
    background: var(--White, #FFF);
}

.box-input-text input {

    font-size: 16px;
    line-height: 125%;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 0 0 16px 0;
    background: var(--White, #FFF);
    padding-left: 16px;
    color: #000;
}

.box-input-text input.is-error,
.box-input-textarea textarea.is-error {
    border: 1px solid #FF0000;
}

.contact-searchable-filter .contact-searchable-trigger.is-error,
.compare-product-modal-sub-input-box-search.contact-searchable-trigger.is-error {
    border: 1px solid #FF0000;
}

.career-box-input-text input.is-error,
.career-box-input-textarea textarea.is-error,
.career-box-input-file.is-error,
.career-searchable-filter .career-searchable-trigger.is-error {
    border: 1px solid #FF0000;
}

.is-error-text {
    color: #FF0000;
    display: block;
    margin-top: 6px;
}

.box-input-text input::placeholder,
.box-input-textarea textarea::placeholder {
    color: #282828;
    opacity: 0.5;
}


.box-input-textarea textarea {
    display: flex;
    height: 85px;
    padding: 14px 16px;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border: none;
    border-radius: 0 0 16px 0;
    background: var(--White, #FFF);
    color: #282828;
}


.contact-searchable-filter {
    position: relative;
    width: 100%;
}

.contact-searchable-filter .contact-searchable-native-select {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.contact-searchable-filter .contact-searchable-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    border: none;
    border-radius: 0 0 16px 0;
    background: #FFF;
    padding: 14px 16px;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.contact-searchable-filter .contact-searchable-trigger span.body1 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #282828;
    opacity: 0.5;
}

.contact-searchable-filter .contact-searchable-trigger span.body1:not(.is-placeholder) {
    opacity: 1;
}

.contact-searchable-filter .contact-searchable-trigger .wd-sub-input-box-search__input {
    flex: 1 1 auto;
    min-width: 0;
}

.contact-searchable-filter .contact-searchable-trigger img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.contact-searchable-filter .contact-searchable-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    border-radius: 0 0 16px 0;
    background: #FFF;
    box-shadow: 0 8px 30px rgba(0, 91, 170, 0.16);
    padding: 12px;
}

.contact-searchable-filter .filter-select-sub-panel__list {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.contact-searchable-filter .contact-searchable-item {
    width: 100%;
    border-radius: 0 0 10px 0;
}

.contact-searchable-filter .contact-searchable-item .body1 {
    color: #282828;
}

.contact-searchable-filter .contact-searchable-item.is-active {
    background: #EBF8FF;
}

.contact-searchable-filter .contact-searchable-item.is-filtered-out {
    display: none;
}

.contact-us-box-map-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
    align-self: stretch;
}

.mapouter {
    height: 314px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.gmap_canvas {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: none !important;
    height: 314px;
    max-width: 558px;
    width: 100%;
    border-radius: 0 0 48px 0;
}

.contact-us-address-sale.text-editor h4,
.contact-us-address-batt.text-editor h4 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.contact-us-address-sale.text-editor p,
.contact-us-address-batt.text-editor p {
    margin-bottom: 24px;
}

.contact-us-address-sale.text-editor p:has(a),
.contact-us-address-batt.text-editor p:has(a) {
    position: relative;
    padding-left: 0;
}

.contact-us-address-sale.text-editor h4+p {
    margin-bottom: 16px;
}

.contact-us-address-batt.text-editor p:has(a) a,
.contact-us-address-sale.text-editor p:has(a) a,
.contact-us-address-batt.text-editor .phone-group,
.contact-us-address-sale.text-editor .phone-group {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.contact-us-address-batt.text-editor p:has(a) img,
.contact-us-address-sale.text-editor p:has(a) img {
    position: static;
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

.contact-us-address-sale.text-editor p+p {
    margin-bottom: 16px;
}

.contact-us-address-sale.text-editor a:hover,
.contact-us-address-batt.text-editor a:hover {
    color: #007FC6;
    opacity: 1;
}

.phone-group {
    margin-right: 16px;
}

.btn-view-more.contact {
    z-index: 2;
    bottom: 0;
    display: inline-flex;
    height: 48px;
    align-self: flex-start;
    /* หรือ center */
    width: auto;
    padding: 0 24px;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    border-radius: 0 0 16px 0;
    border: 1px solid #00B6F1;
    background: #007FC6;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.contact-us-call-center-btn {
    display: inline-flex;
    width: fit-content;
    height: auto;
    padding: 8px 16px;
    align-items: center;
    gap: 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background:
        var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
        linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
    box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

.contact-us-call-center-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 50% 30% at 50% 100%,
            rgba(0, 182, 241, 0.7) 0%,
            rgba(0, 182, 241, 0.35) 45%,
            rgba(0, 182, 241, 0) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.contact-us-call-center-btn:hover::after {
    opacity: 1;
}

.contact-us-vector {
    position: absolute;
    left: 21%;
    bottom: -30%;
    transform: translate(-70%, -50%);
    width: 45%;
    max-width: none;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
}

.company-bleed {
    position: relative;
    width: 100%;
    overflow: visible;
}

.contact-us-decor {
    position: relative;
    overflow: visible;
}

.about-us-layout {
    position: relative;
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
}

.about-us-decor {
    position: absolute;
    inset: 0;
    width: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.about-us-layout>*:not(.about-us-decor) {
    position: relative;
    z-index: 1;
}

.company-gradient-circle-right {
    width: 742px;
    height: 742px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    right: -22%;
    top: 0;
    transform: translateY(-50%);
    border-radius: 742px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}

.company-gradient-circle-right-2 {
    width: 815px;
    height: 815px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    right: -22%;
    top: 140px;
    transform: translateY(-50%);
    border-radius: 815px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}

.company-gradient-circle-right-3 {
    width: 815px;
    height: 815px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    right: -22%;
    top: 1950px;
    transform: translateY(-50%);
    border-radius: 815px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}


.company-gradient-circle-left {
    width: 742px;
    height: 742px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    left: -22%;
    top: 26px;
    transform: translateY(-50%);
    border-radius: 742px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}


.company-gradient-circle-left-2 {
    width: 693px;
    height: 693px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    left: -24%;
    top: 456px;
    transform: translateY(-50%);
    border-radius: 693px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}

.company-gradient-circle-left-3 {
    width: 815px;
    height: 815px;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    left: -25%;
    top: 2440px;
    transform: translateY(-50%);
    border-radius: 815px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}


.contact-us-vector img {
    width: 100%;
    height: auto;
    display: block;
}

.contact-us-flash-alert {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: min(560px, calc(100% - 32px));
    margin: 0;
    padding: 16px 48px 16px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    animation: contact-us-flash-in 0.3s ease-out;
}

.contact-us-flash-alert .close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    opacity: 0.7;
}

.career-position-text-wrapper {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.career-company-box-wrapper {
    display: flex;
    width: 100%;
    padding: 0 64px;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
}

.career-company-box-wrapper-item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: 531px;
    width: 100%;
    padding: 32px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    border-radius: 0 0 48px 0;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
}

.career-company-box-wrapper-item-text-editor-container {
    width: 100%;
}

.career-company-box-wrapper-item-text-editor-container h3 {
    margin-bottom: 8px;
}

.career-company-box-wrapper-item-img-container {
    width: 100%;
    aspect-ratio: 279 / 157;
    overflow: hidden;
    border-radius: 0 0 48px 0;
    background: #EBF8FF;
    min-height: 0;
    flex-shrink: 0;
}

.career-company-box-wrapper-item-img-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.career-box-inside-wrapper {
    width: 100%;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 80px 64px;
    align-items: stretch;
    flex-direction: column;
    gap: 24px;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-bottom: 1px solid var(--line, #D2D2D2);
    background: #EBF8FF;
}

.career-job-heading-row {
    display: flex;
    justify-content: flex-start;
    gap: 4px;
    align-items: center;
    align-self: stretch;
}

.card-body {
    padding: 0 24px 24px;
}

.career-pop-up-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.career-pop-up-overlay.is-open {
    display: flex;
}

body.career-pop-up-open {
    overflow: hidden;
}

.career-pop-up-shell {
    width: min(779px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 12px;
    background: #FFF;
    -webkit-overflow-scrolling: touch;
}

.career-pop-up-form {
    display: flex;
    padding: 40px;
    border-radius: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    position: relative;
    width: 100%;
}

.career-pop-up-form-title {
    text-align: center;
    color: #282828;
    margin: 0;
}

.career-pop-up-form-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    line-height: 0;
}

.career-pop-up-form-close-btn:hover,
.career-pop-up-form-close-btn:focus {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.career-pop-up-form-close-btn:focus-visible {
    outline: 2px solid #007FC6;
    outline-offset: 2px;
    border-radius: 4px;
}

.career-pop-up-form-close-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.career-box-input-text input {
    font-size: 16px;
    line-height: 125%;
    width: 100%;
    height: 40px;
    border-radius: 0 0 16px 0;
    border: 1px solid #D2D2D2;
    background: var(--White, #FFF);
    padding: 14px 16px;
    color: #000;
}

.career-box-input-text input::placeholder {
    color: #282828;
    opacity: 0.5;
}

.career-box-input-textarea textarea {
    display: flex;
    height: 85px;
    padding: 14px 16px;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border: 1px solid #D2D2D2;
    border-radius: 0 0 16px 0;
    background: var(--White, #FFF);
    color: #282828;
}

.career-box-input-textarea textarea::placeholder {
    color: #282828;
    opacity: 0.5;
}

.career-box-input-file {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 14px 16px;
    border: 1px solid #D2D2D2;
    border-radius: 0 0 16px 0;
    background: var(--White, #FFF);
    cursor: pointer;
    margin: 0;
}

.career-box-input-file img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.career-box-input-file-hint {
    color: #282828;
    opacity: 0.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.career-box-input-file-hint.has-file {
    opacity: 1;
}

.career-box-input-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.career-searchable-filter {
    position: relative;
    width: 100%;
}

.career-searchable-filter .career-searchable-native-select {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.career-searchable-filter .career-searchable-trigger .body1 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #282828;
    opacity: 0.5;
}

.career-searchable-filter .career-searchable-trigger .body1:not(.is-placeholder) {
    opacity: 1;
}

.career-searchable-filter .career-searchable-trigger img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.career-searchable-filter .career-searchable-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    border-radius: 0 0 16px 0;
    background: #FFF;
    box-shadow: 0 8px 30px rgba(0, 91, 170, 0.16);
    padding: 12px;
}

.career-searchable-filter .career-searchable-item {
    width: 100%;
    border-radius: 0 0 10px 0;
}

.career-searchable-filter .career-searchable-item.is-active {
    background: #EBF8FF;
}

.career-searchable-filter .career-searchable-item.is-filtered-out {
    display: none;
}

.career-pop-up-form .input-form-box-multi-input-wrapper {
    gap: 24px;
}

.career-searchable-filter .career-searchable-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    border-radius: 0 0 16px 0;
    border: 1px solid #D2D2D2;
    background: var(--White, #FFF);
    padding: 14px 16px;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.career-position-sheet-overlay,
.career-position-sheet {
    display: none;
}

.career-position-sheet-overlay[hidden],
.career-position-sheet[hidden] {
    display: none !important;
}

.img-box-about-us-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
    transform: translateX(clamp(-36px, -2.78vw, 0px));
}

.img-box-about-us-row-2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 64px;
    box-sizing: border-box;
}

/* แถวที่ 1: รูปซ้าย max 641px + กล่องข้อความขวา */
.img-box-about-us-row>div:first-child {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    width: 100%;
    max-width: 641px;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.img-box-about-us-row>div:last-child {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* แถวที่ 2: กล่องข้อความซ้าย ~51% + รูปขวา ~49% */
.img-box-about-us-row-2>div:first-child {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.img-box-about-us-row-2>div:last-child {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    width: 100%;
    max-width: 641px;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
}

.img-box-about-us-container {
    height: 487px;
    width: 86.61%;
    position: relative;
    overflow: hidden;
    transform: skewX(-10deg);
    border-radius: 0 0 48px 0;
    background-color: #f1f1f1;
}

.img-box-about-us-container-right {
    height: 487px;
    width: 86.61%;
    margin-left: 32px;
    position: relative;
    overflow: hidden;
    transform: skewX(-10deg);
    border-radius: 0 0 48px 0;
    background-color: #f1f1f1;
}

.img-box-about-us {
    position: absolute;
    top: 0;
    left: -12%;
    width: 120%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.about-us-column-description-container-right {
    position: relative;
    overflow: visible;
    display: flex;
    width: 111.93%;
    margin-left: -42px;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 0 0 24px 0;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
    backdrop-filter: blur(12px);
}

.about-us-column-description-container-left {
    position: relative;
    z-index: 1;
    display: flex;
    width: 111.93%;
    margin-right: -42px;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 0 0 24px 0;
    background: rgba(255, 255, 255, 0.60);
    box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
    backdrop-filter: blur(12px);
}

.img-box-about-us-row .column-description-align,
.img-box-about-us-row-2 .column-description-align {
    width: 100%;
}

/* แถวที่ 2: กล่องข้อความซ้ายต้องอยู่เหนือรูปขวา — ทุก breakpoint */
.img-box-about-us-row-2>div:first-child .column-description-align,
.img-box-about-us-row-2>div:first-child .about-us-column-description-container-left {
    position: relative;
    z-index: 3;
}

.img-box-about-us-row-2>div:last-child,
.img-box-about-us-row-2>div:last-child .img-box-about-us-container-right {
    position: relative;
    z-index: 1;
}

.about-us-blue-container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    background: var(--BG-Light, #EBF8FF);
    padding: 80px 64px;
    box-sizing: border-box;
    overflow-x: clip;
}

.about-us-seperator {
    width: 1px;
    height: 97px;
    background: #D2D2D2;
}

.about-us-text-content-wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.about-us-text-content-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

.privacy-policy-main-item-wrapper {
    display: flex;
    padding: 16px;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid var(--Primary, #007FC6);
}

.privacy-policy-main-item-wrapper.bullet {
    padding-left: 20px;
    border-bottom: 1px solid var(--line, #D2D2D2);
}

.privacy-policy-main-item-leading {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.privacy-policy-bullet {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #000;
    flex-shrink: 0;
    margin-top: 0.75em;
}

.privacy-policy-link-wrapper {
    display: flex;
    height: 100%;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.privact-policy-link-text {
    color: #007FC6;
}

.privacy-policy-link-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.privacy-policy-link-icon img {
    width: 16px;
    height: 16px;
    display: block;
}

@keyframes about-us-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.about-us-fade-in {
    opacity: 0;
    animation: about-us-fade-in 1.1s ease 0.2s forwards;
}

@keyframes about-us-fade-in-shift {
    from {
        opacity: 0;
        transform: translate(12px, 8px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.about-us-fade-in-shift {
    opacity: 0;
    animation: about-us-fade-in-shift 1.1s ease 0.45s forwards;
}

.about-us-feature-company-info-wrapper {
    display: flex;
    align-items: stretch;
    gap: 24px;
    align-self: stretch;
    flex-wrap: nowrap;
    margin: 0 auto;
    max-width: 1440px;
    width: 100%;
    min-width: 0;
}

.about-us-feature-company-info-item {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    align-self: stretch;
    border-radius: 0 0 24px 0;
    background: rgba(255, 255, 255, 0.60);
    box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
    backdrop-filter: blur(12px);
    box-sizing: border-box;
}

.about-us-feature-company-info-item .h4-bold {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.about-us-feature-company-info-item-value-with-img {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.about-us-feature-company-info-item-img {
    width: 84px;
    height: 84px;
    aspect-ratio: 1/1;
    flex-shrink: 0;
}

.about-us-feature-company-info-item-value-with-img .h4-bold {
    flex: 1 1 0;
    min-width: 0;
}

.about-us-feature-company-info-item-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-us-other-company-info-wrapper {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    gap: 40px;
    margin: 0 auto;
    max-width: 1440px;
}

.about-us-other-company-info-image-wrapper {
    width: 100%;
    max-width: 535px;
    flex: 0 1 535px;
    min-width: 0;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 0 0 48px 0;
    overflow: hidden;
}

.about-us-other-company-info-image-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-us-other-company-info-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 0;
    min-width: 0;
}

.about-us-other-company-info-text-item-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.about-us-other-company-info-text-item-title {
    flex: 0 1 196px;
    min-width: 0;
    max-width: 100%;
}

.about-us-other-company-info-text-item-wrapper>.about-us-other-company-info-content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-us-other-company-info-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.about-us-other-company-info-bullet {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #007FC6;
    flex-shrink: 0;
    margin-top: 0.5em;
}

.about-us-text-item-separator {
    width: 100%;
    height: 1px;
    background: #D2D2D2;
}

.about-us-milestone-section {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 80px 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1440px;
}

.about-us-milestone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 64px;
}

.about-us-milestone-headline {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.about-us-milestone-title {
    margin: 0;
    color: #282828;
    font-size: 32px;
    font-weight: 700;
    line-height: 150%;
}

.about-us-milestone-subtitle {
    margin: 0;
    color: #007FC6;
    font-size: 32px;
    font-weight: 700;
    line-height: 150%;
}

.about-us-milestone-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.about-us-timeline-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    background: #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background 0.25s ease, opacity 0.25s ease;
}

.about-us-timeline-nav-btn--prev {
    border-radius: 0 0 0 16px;
}

.about-us-timeline-nav-btn--next {
    border-radius: 0 0 16px 0;
}

.about-us-timeline-nav-btn:hover:not(:disabled):not(.is-disabled) {
    background: #007FC6;
}

.about-us-timeline-nav-btn:hover:not(:disabled):not(.is-disabled) img {
    filter: brightness(0) invert(1);
}

.about-us-timeline-nav-btn:disabled,
.about-us-timeline-nav-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.about-us-timeline-viewport {
    width: 100%;
    overflow: hidden;
}

.about-us-timeline-track {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-right: 64px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.about-us-timeline-track::-webkit-scrollbar {
    display: none;
}

.about-us-timeline-slide {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex: 0 0 auto;
}

.about-us-timeline-slide:first-child {
    padding-left: 64px;
}

.about-us-timeline-item-container {
    display: flex;
    width: 312px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex-shrink: 0;
}

.about-us-timeline-item-title {
    color: #007FC6;
    font-size: 32px;
    font-weight: 700;
    line-height: 150%;
    white-space: nowrap;
}

.about-us-timeline-item-image {
    width: 100%;
    height: 176px;
    background: #D2D2D2;
    border-radius: 0 0 48px 0;
    overflow: hidden;
}

.about-us-timeline-item-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center bottom;
}

.about-us-timeline-item-content-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.about-us-timeline-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.about-us-timeline-badge {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 4px;
    background: #EBF8FF;
}

.about-us-timeline-badge--sales {
    color: #007FC6;
}

.about-us-timeline-badge--battery {
    color: #00B6F1;
}

.about-us-timeline-item-content {
    color: #6D6D6D;
    word-break: break-word;
}

.about-us-timeline-separator {
    width: 1.5px;
    height: 535px;
    background: #D2D2D2;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .about-us-milestone-section {
        padding: 48px 0;
        gap: 32px;
    }

    .about-us-milestone-header {
        padding: 0 32px;
        align-items: flex-start;
    }

    .about-us-milestone-title,
    .about-us-milestone-subtitle {
        font-size: 24px;
    }

    .about-us-timeline-track {
        padding-right: 32px;
    }

    .about-us-timeline-slide:first-child {
        padding-left: 32px;
    }

    .about-us-timeline-item-title {
        font-size: 24px;
    }
}

@media (max-width: 599px) {
    .about-us-milestone-header {
        padding: 0 20px;
    }

    .about-us-timeline-track {
        padding-right: 20px;
    }

    .about-us-timeline-slide:first-child {
        padding-left: 0px;
    }

    .about-us-timeline-item-container {
        width: min(312px, calc(100vw - 40px));
    }
}


@media (max-width: 1023px) {
    .career-searchable-filter .career-searchable-panel {
        display: none !important;
    }

    .career-searchable-filter .career-searchable-search-input {
        display: none !important;
    }

    .contact-searchable-filter .contact-searchable-panel {
        display: none !important;
    }

    .contact-searchable-filter .contact-searchable-search-input {
        display: none !important;
    }

    .career-position-sheet-overlay:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.25s ease;
        z-index: 10060;
    }

    .career-position-sheet-overlay.is-open {
        opacity: 1;
    }

    .career-position-sheet:not([hidden]) {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: min(512px, 80vh);
        max-height: min(512px, 80dvh);
        background: #fff;
        border-radius: 4px 4px 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
        overflow: hidden;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        z-index: 10061;
    }

    .career-position-sheet.is-open {
        transform: translateY(0);
    }

    .career-position-sheet-head {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 20px;
        background: #EBF8FF;
        border-radius: 4px 4px 0 0;
    }

    .career-position-sheet-title {
        color: #282828;
    }

    .career-position-sheet-close {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        line-height: 0;
    }

    .career-position-sheet-close img {
        width: 24px;
        height: 24px;
    }

    .career-position-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #007FC6 #F5F5F5;
        padding: 16px 15px;
    }

    .career-position-sheet-body::-webkit-scrollbar {
        width: 8px;
    }

    .career-position-sheet-body::-webkit-scrollbar-track {
        background: #F5F5F5;
        border-radius: 999px;
    }

    .career-position-sheet-body::-webkit-scrollbar-thumb {
        background: #007FC6;
        border-radius: 999px;
    }

    .career-position-sheet-item {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 14px 16px;
        border: none;
        background: transparent;
        text-align: left;
        cursor: pointer;
        color: #282828;
    }

    .career-position-sheet-item .body1 {
        color: #282828;
    }

    .career-position-sheet-item:hover {
        background: #F1F1F1;
    }

    .career-position-sheet-item.is-active {
        background: #F1F1F1;
    }

    body.career-position-sheet-open {
        overflow: hidden;
    }
}

/* Start Landing Page */

.landing-page-layout {
    position: relative;
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
}

.landing-page-layout>*:not(.landing-page-decor) {
    position: relative;
    z-index: 1;
}

.landing-page-decor {
    position: absolute;
    inset: 0;
    width: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.landing-page-hero {
    position: relative;
    z-index: 16;
    margin-top: -124px;
    isolation: isolate;
    width: 100%;
    height: 720px;
}

.landing-page-hero-banner {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
}

.landing-page-hero-banner .owl-stage-outer,
.landing-page-hero-banner .owl-stage,
.landing-page-hero-banner .owl-item {
    height: 100%;
}

/* Force slide transition (disable Owl fade animate classes) */
.landing-page-hero-banner .owl-item.animated,
.landing-page-hero-banner .owl-item.fadeOut,
.landing-page-hero-banner .owl-item.fadeIn,
.landing-page-hero-banner .owl-item.owl-animated-out,
.landing-page-hero-banner .owl-item.owl-animated-in {
    -webkit-animation: none !important;
    animation: none !important;
}

.landing-page-hero-banner .owl-item {
    opacity: 1 !important;
}

.landing-page-hero-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.landing-page-hero-slide>.service-section-decor--desktop-tablet,
.landing-page-hero-slide>.service-section-decor--mobile {
    position: absolute;
    inset: 0;
}

.landing-page-hero-slide>.service-section-decor--mobile {
    display: none;
}

.landing-page-hero-slide>.service-section-decor--desktop-tablet>img,
.landing-page-hero-slide>.service-section-decor--mobile>img,
.landing-page-hero-slide>.service-section-decor--desktop-tablet>video,
.landing-page-hero-slide>.service-section-decor--mobile>video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.landing-page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: none;
    pointer-events: none;
}

.landing-page-hero-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 300px;
    background: linear-gradient(to top, #003A5B 0%, rgba(0, 127, 198, 0) 100%);
    pointer-events: none;
}

.landing-page-hero-gradient-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    height: 300px;
    background: linear-gradient(180deg, #003A5B 0%, rgba(0, 127, 198, 0.00) 100%);
    pointer-events: none;
}

.landing-page-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}

.landing-page-hero-dots .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease;
}

.landing-page-hero-dots .owl-dot.active span {
    background: #fff;
}

.landing-page-hero-btn-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.landing-page-hero-btn {
    display: inline-flex;
    height: 48px;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 0 0 16px 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    font-size: 14.2px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.25s ease, color 0.25s ease;
}

.landing-page-hero-btn-primary {
    background: #007FC6;
    border: 1px solid #00B6F1;
    color: #fff;
    width: 145px;
}

.landing-page-hero-btn-outline:hover {
    background: #007FC6;
    color: #fff !important;
}

.landing-page-hero-btn-outline:hover img {
    filter: brightness(0) invert(1);
}

.landing-page-hero-btn-outline {
    background: #fff;
    border: 1px solid #007FC6;
    color: #007FC6;
    width: 135px;
}

.landing-page-hero-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 50% 30% at 50% 100%,
            rgba(0, 182, 241, 0.7) 0%,
            rgba(0, 182, 241, 0.35) 45%,
            rgba(0, 182, 241, 0) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.landing-page-hero-btn-primary:hover::after {
    opacity: 1;
}

.landing-page-hero-btn>* {
    position: relative;
    z-index: 1;
}

.landing-page-hero-content-bottom {
    position: absolute;
    left: 0;
    bottom: 77px;
    display: flex;
    width: 100%;
    padding: 0 64px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs, 14px);
    flex-shrink: 0;
    z-index: 3;
    color: #fff;
    box-sizing: border-box;
}

.landing-page-hero-content-top {
    position: absolute;
    left: 0;
    top: 130px;
    display: flex;
    width: 100%;
    padding: 0 64px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs, 14px);
    flex-shrink: 0;
    z-index: 3;
    color: #fff;
    box-sizing: border-box;
}

.landing-page-hero-content-bottom h1,
.landing-page-hero-content-top h1 {
    margin: 0;
    color: #fff;
}

.landing-page-sections {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* section ปกติ: จำกัดความกว้าง จัดกลาง */
.landing-section {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 16px;
    box-sizing: border-box;
}

/* section เต็มจอ: ทะลุออกไปชนขอบจอ แต่ยังเป็น sibling เหมือนเดิม */
.landing-section--bleed {
    max-width: none;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-inline: 0;
}

.landing-page-wrapper {
    display: flex;
    width: 100%;
    padding-top: 80px;
    flex-direction: column;
    gap: 36px;
}

.landing-vector {
    position: absolute;
    right: 0;
    bottom: -9%;
    transform: translateY(-50%) rotate(1.131deg);
    max-width: 544.682px;
    height: auto;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
}

.landing-vector img {
    width: 100%;
    height: auto;
    display: block;
}

.landing-page-heading {
    width: 100%;
    margin: 0;
    text-align: center;
}

.landing-page-widgets {
    width: 100%;
}

.landing-page-widgets .landing-page-text-list-wrapper {
    padding-top: 0;
    padding-bottom: 80px;
}

.landing-page-widgets .landing-page-video-section-wrapper,
.landing-page-widgets .landing-page-url-video-section-wrapper {
    padding-top: 0;
    padding-bottom: 80px;
}

.landing-page-widgets>.img-box-landing-page-row:first-child,
.landing-page-widgets>.img-box-landing-page-row-2:first-child {
    padding-top: 0;
}

.img-box-landing-page-row,
.img-box-landing-page-row-2 {
    padding-bottom: 56.4px;
    padding-top: 0px;
}

.img-box-landing-page-row {
    position: relative;
    display: flex;
    align-items: stretch;
    transform: translateX(20px);
}

.img-box-landing-page-row-2 {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* แถวที่ 2: รูปขวา skew ทับกล่องข้อความซ้าย — ยก z-index คอลัมน์ข้อความ */
.img-box-landing-page-row:has(.img-box-landing-page-container-right) {
    position: relative;
    z-index: 2;
}

.img-box-landing-page-row:has(.img-box-landing-page-container-right) {
    position: relative;
    z-index: 1;
}

.img-box-landing-page-container {
    height: 431px;
    width: 43.78%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    left: 5%;
    transform: skewX(-10deg);
    border-radius: 0 0 30px 0;
    background-color: #f1f1f1;
}

.img-box-landing-page-container-right {
    height: 431px;
    width: 43.78%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    right: 4%;
    transform: skewX(-10deg);
    border-radius: 0 0 30px 0;
    background-color: #f1f1f1;
}

.img-box-landing-page {
    position: absolute;
    top: 0;
    left: -7%;
    width: 115%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.column-description-container-landing-page-right {
    position: relative;
    overflow: visible;
    display: flex;
    right: -2%;
    margin-top: 63px;
    margin-right: 48px;
    margin-bottom: 54px;
    width: 100%;
    max-width: 625px;
    flex-shrink: 1;
    padding: 40px 40px 56px 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 0 0 24px 0;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
    backdrop-filter: blur(12px);
}

.column-description-container-landing-page-left {
    position: relative;
    z-index: 1;
    display: flex;
    margin-top: 63px;
    margin-left: 48px;
    margin-bottom: 54px;
    width: 625px;
    flex-shrink: 1;
    padding: 40px 40px 56px 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 0 0 24px 0;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
    backdrop-filter: blur(12px);
}

.btn-view-more-landing-page {
    z-index: 2;
    bottom: 80px;
    display: inline-flex;
    height: 48px;
    padding: 0 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 0 0 16px 0;
    border: 1px solid #00B6F1;
    background: #007FC6;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn-view-more-landing-page-left {
    left: 450px;
}

.btn-view-more-landing-page-right {
    left: 90px;
}

.btn-view-more-landing-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 50% 30% at 50% 100%,
            rgba(0, 182, 241, 0.7) 0%,
            rgba(0, 182, 241, 0.35) 45%,
            rgba(0, 182, 241, 0) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.btn-view-more-landing-page:hover::after {
    opacity: 1;
}

.landing-page-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 28px;
    width: 100%;
    border-radius: 8px;
}

.landing-page-feature-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.landing-page-feature-list-item-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

.landing-page-feature-list-item-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: #000;
    margin: 0;
}

.landing-page-text-header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    align-self: stretch;
    min-width: 0;
}

.landing-page-text-header-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.landing-page-text-header-columns>.landing-page-text-header-wrapper:only-child {
    grid-column: 1 / -1;
}

.landing-page-text-list-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    align-self: stretch;
    padding: 80px 55px;
}

.landing-page-video-section-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}


.landing-page-video-section {
    position: relative;
    display: flex;
    width: 100%;
    height: 608px;
    max-width: 1080px;
    max-height: 608px;
    justify-content: center;
    align-items: center;
    gap: 5.833px;
    align-self: stretch;
    aspect-ratio: 135/76;
    background-color: #646464;
    overflow: hidden;
}

.landing-page-video-section video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    cursor: pointer;
}

.landing-page-video-section>.service-section-decor--desktop-tablet,
.landing-page-video-section>.service-section-decor--mobile {
    position: absolute;
    inset: 0;
}

.landing-page-video-section>.service-section-decor--mobile {
    display: none;
}

.landing-page-video-section img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.landing-page-media-image-section {
    cursor: default;
}

.landing-page-video-section.is-pause::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.landing-page-video-section.is-play::after {
    display: none;
}

.landing-page-video-section.is-play .landing-page-video-section-play-icon {
    display: none;
}

.landing-page-video-section-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 55.98px;
    height: 55.98px;
    padding: 0;
    border: 0;
    background: transparent;
    flex-shrink: 0;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.landing-page-video-section-play-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.landing-page-url-video-section-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0px;
}

.landing-page-url-video-section {
    position: relative;
    display: flex;
    width: 100%;
    height: 608px;
    max-width: 1080px;
    max-height: 608px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    aspect-ratio: 135/76;
    background-color: #646464;
    overflow: hidden;
}

.landing-page-url-video-section iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.landing-page-gallery-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--space-m, 28px);
    align-self: stretch;
    padding-bottom: 80px;
}

.landing-page-gallery-wrapper-2 {
    display: flex;
    align-items: flex-start;
    gap: var(--space-m, 24px);
    align-self: stretch;
    padding-bottom: 80px;
}

.landing-page-gallery-column-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 0 0;
    min-width: 0;
    align-content: center;
    gap: var(--space-m, 28px);
}

.landing-page-gallery-main-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 642px;
    height: auto;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 0 0 24px 0;
    aspect-ratio: 642/488.5;
    overflow: hidden;
}

.landing-page-gallery-sub-image {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    aspect-ratio: 4 / 3;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 24px 0;
    overflow: hidden;
}

.landing-page-gallery-main-image img,
.landing-page-gallery-sub-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.landing-page-gradient-main-background-wrapper {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.landing-page-gradient-sub-background-wrapper {
    position: absolute;
    inset: 0;
    min-height: 3157px;
    z-index: 0;
    pointer-events: none;
}

.landing-page-gradient-circle-1,
.landing-page-gradient-circle-2 {
    position: absolute;
    width: 1107px;
    height: 1107px;
    border-radius: 1107px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}

.landing-page-gradient-circle-3 {
    position: absolute;
    width: 625px;
    height: 625px;
    border-radius: 625px;
    background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
}

.landing-page-gradient-circle-1 {
    top: -250px;
    left: -540px;

}

.landing-page-gradient-circle-2 {
    top: 1600px;
    right: -465px;
}

.landing-page-gradient-circle-3 {
    top: 2700px;
    left: -350px;
}

@media (max-width: 767px) {
    .landing-page-hero-slide>.service-section-decor--desktop-tablet {
        display: none;
    }

    .landing-page-hero-slide>.service-section-decor--mobile {
        display: block;
    }

    .landing-page-hero {
        height: 736px;
    }

    .landing-page-hero-banner {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        margin-top: 0;
    }

    .landing-page-hero-gradient {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        height: 303px;
        background: linear-gradient(to top, #003A5B 0%, rgba(0, 127, 198, 0) 100%);
        pointer-events: none;
    }

    .landing-page-hero-gradient-top {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 2;
        height: 303px;
        background: linear-gradient(180deg, #003A5B 0%, rgba(0, 127, 198, 0.00) 100%);
        pointer-events: none;
    }

    .landing-page-wrapper {
        display: flex;
        width: 100%;
        padding-top: 48px;
        flex-direction: column;
        gap: 32px;
    }

    .landing-page-gallery-wrapper,
    .landing-page-gallery-wrapper-2 {
        flex-direction: column;
    }

    .landing-page-gallery-wrapper:has(> .landing-page-gallery-column-list:first-child) {
        flex-direction: column-reverse;
    }

    .landing-page-gallery-wrapper {
        display: flex;
        align-items: flex-start;
        gap: var(--space-m, 16px);
        align-self: stretch;
        padding-bottom: 48px;
    }

    .landing-page-gallery-wrapper-2 {
        display: flex;
        align-items: flex-start;
        gap: var(--space-m, 16px);
        align-self: stretch;
        padding-bottom: 48px;
    }

    .landing-page-widgets .landing-page-video-section-wrapper,
    .landing-page-widgets .landing-page-url-video-section-wrapper,
    .landing-page-widgets .landing-page-text-list-wrapper {
        padding-bottom: 48px;
    }

    .landing-page-gallery-column-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex: 1 0 0;
        min-width: 0;
        align-content: center;
        gap: var(--space-m, 16px);
    }


    .landing-page-gallery-main-image {
        flex: none;
        width: 100%;
        aspect-ratio: 4 / 3;
        max-width: 100%;
    }
}




@keyframes contact-us-flash-in {
    from {
        opacity: 0;
        transform: translate(-50%, -12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 768px) {
    .contact-us-flash-alert {
        top: 16px;
        width: calc(100% - 24px);
    }

    .career-pop-up-overlay {
        padding: 16px;
    }

    .career-pop-up-shell {
        border-radius: 8px;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
    }

    .career-pop-up-form {
        border-radius: 8px;
        padding: 24px;
        padding-top: 47.5px;
    }

    .career-pop-up-form .input-multi-input-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (min-width: 2100px) {
    .warranty-scroll-track {
        --warranty-lock-height: min(820px, 100vh);
    }

    .warranty-scroll-track>.warranty-register-step-wrapper {
        position: sticky;
        top: max(0px, calc((100vh - var(--warranty-lock-height)) / 2));
        height: var(--warranty-lock-height);
        max-height: var(--warranty-lock-height);
        display: flex;
        align-items: center;
        overflow: visible;
    }

    /* decor หลุดจาก max-width:1440 ของ wrapper-2 — ให้ vector อิงความกว้าง viewport */
    .contact-us-box-inside-wrapper-2>.service-section-decor--desktop-tablet,
    .contact-us-box-inside-wrapper-2>.service-section-decor--mobile {
        left: 50%;
        right: auto;
        width: 100vw;
        max-width: none;
        margin-left: -50vw;
        inset: unset;
        top: 0;
        bottom: 0;
    }

    .contact-us-vector {
        position: absolute;
        left: 21%;
        bottom: -30%;
        transform: none !important;
        width: 35%;
        max-width: none;
        z-index: -1;
        pointer-events: none;
        opacity: 0.05;
    }

    /* bleed หลุดจาก width 507px ของ illustration-content — อิง viewport แทน */
    .warranty-vector-bleed {
        left: 50%;
        right: auto;
        width: 100vw;
        max-width: none;
        margin-left: -50vw;
        inset: unset;
        top: 0;
        bottom: 0;
        overflow: visible;
    }

    .warranty-vector {
        position: absolute;
        left: 45% !important;
        bottom: -59% !important;
        transform: translate(-50%, -50%);
        width: 48% !important;
        max-width: none;
        z-index: -1;
        pointer-events: none;
        opacity: 0.05;
    }
}


@media (min-width: 1607px) {
    .box-chage-lang {
        margin-right: -12px !important;
    }

    .a-text-size {
        margin-left: 50px;
    }
}

@media (min-width: 1800px) {

    .warranty-scroll-track {
        --warranty-lock-height: min(820px, 100vh);
    }

    .warranty-scroll-track>.warranty-register-step-wrapper {
        position: sticky;
        top: max(0px, calc((100vh - var(--warranty-lock-height)) / 2));
        height: var(--warranty-lock-height);
        max-height: var(--warranty-lock-height);
        display: flex;
        align-items: center;
        overflow: visible;
    }

    .contact-us-vector {
        position: absolute;
        left: 21%;
        bottom: -30%;
        transform: translate(-90%, -50%);
        width: 45%;
        max-width: none;
        z-index: -1;
        pointer-events: none;
        opacity: 0.05;
    }
}

@media (min-width: 1586px) {
    h1 {
        font-size: 48px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
    }

    h2 {

        font-size: 32px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h3 {
        font-size: 24px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h4 {
        font-size: 20px;
        font-style: normal;
        line-height: 1.0;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h5 {
        font-size: 18px;
        font-style: normal;
        line-height: 1.0;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h6 {
        font-size: 12px;
        font-style: normal;
        line-height: 1.0;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    p {
        font-size: 16px;
        font-style: normal;
        line-height: 1.5;
        font-weight: 400;
        margin-top: 0px;
        margin-bottom: 0px;
    }


    .blue-h1 {
        font-size: 48px;

        line-height: 36px;
        font-weight: 800;
        color: #007FC6;
    }

    .mobile-h1 {
        font-size: 32px;
        font-weight: 700;
    }

    .mobile-h2 {
        font-size: 24px;
        line-height: 1.4;
        font-weight: 700;
    }

    .body1 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .body2 {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.25;
    }

    .content-space {
        min-height: 108px;
        flex: 1 0 0;
        align-self: stretch;

    }

    .space-extra-large {
        margin-top: 91px
    }

    .space-large {
        margin-top: 81px;
    }

    .space-semi-large {
        margin-top: 75px;
    }

    .space-medium {
        margin-top: 64px;
    }

    .space-semi-medium {
        height: 52px;
        margin-top: 0;
    }

    .space-extra-small {
        height: 44px;
        margin-top: 0;
    }

    .space-small {
        margin-top: 40px
    }

    .space-small-2 {
        margin-top: 32px;
    }

    .space-small {
        margin-top: 40px
    }

    .space-s-small {
        margin-top: 24px;
    }


    .space-xs {
        margin-top: 16px;
    }

    .space-xxs {
        height: 8px;
        margin-top: 0;
    }

    .search-result-content-margin {
        margin-top: -25px;
    }

    .blue-small-banner-header-margin {
        margin-left: 57px;
    }

    .horizontial-space {
        padding-left: 94px;
        padding-right: 94px;
    }

    .bottom-space-s {
        margin-bottom: 20px
    }

    .home-page-wrap {
        position: relative;
    }

    .service-section-decor {
        position: relative;
        overflow-x: clip;
        overflow-y: visible;
    }

    .tough-vector {
        width: 100%;
        height: auto;
        max-width: 1440px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -15px;
        top: 700px;
        opacity: 0.04;
    }

    .tough-vector-2 {
        width: 50%;
        height: auto;
        max-width: 720px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: 1150px;
        opacity: 0.04;
    }

    .tough-vector-3 {
        width: 42%;
        max-width: 1440px;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: 0;
        bottom: -430px;
        opacity: 0.10;
    }


    .gradient-circle-left {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -490px;
        top: 1300px;
        border-radius: 1100px;
        background: radial-gradient(
            50% 50% at 50% 50%,
            rgba(181, 234, 252, 1) 0%,
            rgba(181, 234, 252, 0) 87.5%
        );
    }

    .gradient-circle-right {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -579px;
        top: 2000px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .service-section-decor--mobile {
        display: none;
    }

    .blue-small-banner {
        width: 100%;
        background: #007FC6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        min-height: 178px;
        z-index: 1;
    }

    .blue-small-banner__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex: 0 1 auto;
        z-index: 2;
    }

    .blue-small-banner-nav {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .blue-small-banner img {
        width: 790px;
        height: 178px;
        opacity: 0.2;
        object-fit: cover;
        object-position: center bottom;
    }

    .search-close-button-container {
        display: flex;
        min-height: 24px;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 24px;
    }

    .search-close-button {
        background: transparent;
        border: transparent;
    }

    .search-close-button img {
        min-width: 24px;
        min-height: 24px;
    }

    .search-box-container {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        padding: 16px 40px;
        min-height: 420px;
        max-width: 1311px;
        margin-left: auto;
        margin-right: auto;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%);
        backdrop-filter: blur(12px);
    }

    .search-box-container__vector {
        position: absolute;
        right: 5px;
        bottom: 0;
        width: 100%;
        /* ปรับตามดีไซน์ — SVG กว้าง 739px */
        max-width: 735px;
        height: auto;
        margin: 0;
        opacity: 0.15;
        /* หรือ 0.2 ให้ใกล้ banner */
        object-fit: contain;
        object-position: right bottom;
        z-index: 0;
        pointer-events: none;
    }

    /* ให้เนื้อหาอยู่เหนืารูป */
    .search-close-button-container,
    .search-box-field,
    .search-word-wrapper {
        position: relative;
        z-index: 1;
    }

    .search-box-field {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 0 0 16px 0;
        border: 1px solid #E2E2E2;
        background: #FFF;
    }

    .search-box-field:focus-within {
        border-color: #007FC6;
        /* แทน .search-box-input:focus */
    }

    .search-box-field-input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: transparent;
        outline: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .search-word-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 48px;
    }

    .search-word-recommend {
        display: flex;
        flex-direction: column;
        align-items: start;
        align-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .search-result-content {
        margin-left: auto;
        margin-right: auto;
        height: 100%;
        position: relative;
        z-index: 2;
    }

    .search-result-container {
        display: flex;
        padding: 12px 16px;
        align-items: center;
        gap: 10px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: 4px;
        border: 1px solid #007FC6;
        background: #FFF;
    }

    .search-result-container__query {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .search-result-query-filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .search-result-query-filter-wrapper-item {
        display: flex;
        align-items: center;
    }

    .search-result-filter-container {
        display: flex;
        padding: 8px 8px 8px 16px;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
    }

    .search-result-card {
        display: flex;
        padding: 24px;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
        border-radius: 0 0 40px 0;
        border: 1px solid #D8D8D8;
        background: #FFF;
    }

    .search-result-card-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
    }

    .search-result-card-image {
        position: relative;
        flex-shrink: 0;
    }

    .search-result-card-image .search-result-card-image-img {
        aspect-ratio: 1/1;
        width: 250px;
        height: 250px;
        object-fit: cover;
        border-radius: 0 0 32px 0;
    }

    .search-result-batt-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        flex: 1 0 0;
    }

    .search-result-battery-wrapper {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16px;
        align-self: stretch;
    }

    .search-result-contact-btn-group {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .search-batt-category-btn {
        background-color: #fff;
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 0;
        color: #80A700;
        border: 1px solid #80A700;
    }

    .search-result-batt-spec-wrapper {
        display: flex;
        align-items: flex-start;
    }

    .search-result-batt-spec-wrapper-item {
        display: flex;
        min-width: 80px;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid #D8D8D8;
        padding: 0 8px;
        gap: 8px;
    }

    .search-result-batt-spec-wrapper-item:first-child {
        padding-left: 0;
    }

    .search-result-batt-spec-wrapper-item:last-child {
        border-right: none;
    }

    .search-result-card-badge {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 128px;
        min-height: 128px;
        pointer-events: none;
        z-index: 2;
    }


    .search-result-contact-btn {
        background-color: #fff;
        display: flex;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }

    .search-btn-tag-activities {
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        background-color: white;
        border: 1px solid #007FC6;
        color: #007FC6;
        font-size: 14px;
    }

    .header-search-panel {
        display: none;
        position: fixed;
        top: 96px;
        left: 0;
        right: 0;
        z-index: 9999;
        padding: 0 24px;
    }

    .header-search-panel-sticky {
        display: none;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        z-index: 9999;
        padding: 0 24px;
    }

    .header-search-panel.is-open {
        display: block;
    }

    .header-search-panel-sticky.is-open {
        display: block;
    }

    .header-search-panel::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 0;
    }

    .header-search-panel-sticky::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 0;
    }

    .header-batt-search {
        display: none;
        position: fixed;
        top: 96px;
        left: 0;
        right: 0;
        z-index: 60;
        padding: 0 24px;
    }

    .header-batt-search-panel {
        position: relative;
        z-index: 9999;
        width: 100%;
        max-width: 1257px;
        min-height: 241px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 0 0 24px 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(12px);
    }

    .text-batt-search-title {
        color: #A6A6A6;
        font-weight: 700;
        margin-left: 16px;
        margin-top: 16px;
    }

    .header-batt-search-panel-sub-item-wrapper {
        display: flex;
        padding: 24px 16px;
        align-items: stretch;
        gap: 24px;
        align-self: stretch;
    }

    .header-batt-search-selector-wrapper {
        display: flex;
        width: 245px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-batt-search-selector-container {
        display: flex;
        width: 245px;
        padding: 8px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border-radius: 8px;
        cursor: pointer;
    }

    .header-batt-search-selector-container.is-active {
        background: #007FC6;
        color: #FFF;
    }

    .header-batt-search-selector-container:hover {
        background: #E6EFF7;
        transition: opacity 0.25s ease;
    }

    .header-batt-search-selector-container:hover img {
        filter: brightness(0);
    }

    .header-batt-search-selector-container.is-active:hover {
        background: #007FC6;
        color: #FFF;
    }

    .header-batt-search-selector-container.is-active:hover img {
        filter: none;
    }


    .header-batt-search-panel-sub-item-seperator {
        width: 1px;
        align-self: stretch;
        /* ยืดเต็มความสูงแถว */
        background: #C5C5C5;
        flex-shrink: 0;
    }

    .header-batt-search-category-container {
        width: 300px;
        height: 138px;
        border-radius: 8px;
        background: #E6EFF7;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
    }

    .header-batt-search-category-container img {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: auto;
        max-width: none;
        object-fit: cover;
        object-position: right center;
    }

    .batt-type-img {
        max-width: 206px;
        height: 89px;
        flex-shrink: 0;
        aspect-ratio: 206/89;
        display: block;
        position: absolute;
        right: 16px;
        top: 36px;
        object-fit: cover;
        object-position: right center;
    }

    .header-batt-search-category-container:hover {
        color: #FFF;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transition: opacity 0.25s ease;
    }

    .header-barr-search-category-text {
        margin-top: 16px;
        margin-left: 16px;
        width: 35%;
        min-width: 0;
    }

    .header-batt-search-category-content {
        flex: 1;
        min-width: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .header-batt-search-category-content[hidden] {
        display: none !important;
    }

    .product-pass-hero {
        position: relative;
        z-index: 16;
        margin-top: -124px;
        isolation: isolate;
    }

    .product-pass-hero img {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        z-index: 0;
    }

    .product-header-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 1440px;
        box-sizing: border-box;
        padding-left: 64px;
        padding-right: 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        z-index: 2;
    }

    .product-banner-nav {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .product-banner-header-margin {
        margin-top: 80px;
        margin-left: 0;
    }

    .product-banner-text-h1 {
        font-size: 52px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .product-list-layout {
        display: flex;
        width: 100%;
        align-items: stretch;
        background: #fff;
        justify-content: center;
    }

    .product-filter-column {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        height: 100%;
        width: 400px;
        padding-top: 66px;
        flex-shrink: 0;
        background: #EBF8FF;
        position: relative;
    }

    /* ยืดพื้นฟ้าออกไปขอบซ้ายสุดของ viewport */
    .product-filter-column::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 100%;
        width: 100vw;
        background: #EBF8FF;
        pointer-events: none;
        z-index: 0;
    }

    .product-filter-column>* {
        position: relative;
        z-index: 1;
    }

    .product-filter-header-text {
        display: flex;
        align-self: flex-start;
    }

    .product-filter-content {
        display: flex;
        flex-direction: column;
        padding: 16px 28px 16px 0;
        align-items: stretch;
        gap: 16px;
    }

    .product-filter-search {
        display: flex;
        height: auto;
        width: 100%;
        padding: 16px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 310px;
        border-radius: 0 0 16px 0;
        color: rgba(40, 40, 40, 0.5);
        background: #FFF;
    }

    .product-filter-box {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.30);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
    }

    .product-filter-box-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        width: 100%;
        min-width: 0;
    }

    .product-list-container {
        display: flex;
        width: 100%;
        max-width: 1041px;
        padding: 80px 64px 80px 24px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 48px;
    }

    .product-filter-box-selector {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 16px;
    }

    .product-filter-box-text {
        display: flex;
        min-width: 154px;
        color: #a6a6a6;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }


    .product-expanded-vehicle-filter-box .product-filter-box-body,
    .product-expanded-battery-filter-box .product-filter-box-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .product-filter-sub-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .product-filter-batt-type {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .product-filter-batt-type-container {
        display: flex;
        padding: 13px 8px;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        background-color: white;
        border-radius: 0 0 16px 0;
        width: 100%;
        height: auto;
    }

    .product-filter-batt-name {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 8px;
    }

    .product-batt-genre-wrapper {
        display: flex;
        align-items: center;
        align-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        flex-wrap: wrap;
    }

    .product-batt-genre-container {
        display: flex;
        max-width: 100%;
        min-width: 0;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        border-radius: 0 0 16px 0;
        background: #FFF;
        gap: 8px;
    }

    .product-batt-genre-container .body1 {
        min-width: 0;
        word-break: break-word;
    }

    .product-filter-batt-type-container,
    .product-batt-genre-container {
        cursor: pointer;
    }

    .product-filter-batt-type-container.is-active {
        background: var(--Primary, #007FC6);
        color: white;
    }

    .product-batt-genre-container.is-active {
        background: var(--Primary, #007FC6);
        color: white;
    }

    .product-filter-select {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.08);
    }

    .product-filter-select select {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;

        font-size: 16px;
        line-height: 24px;
        color: #282828;
        cursor: pointer;
        padding-right: 8px;
    }

    .product-filter-select img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        pointer-events: none;
    }

    .product-filter-select--stacked {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filter-select-car__trigger {
        display: flex;
        flex: 1;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .filter-select-car {
        position: static;
        width: 100%;
        /* ชิดใต้กล่องขาว */
        left: 0;
        right: 0;
        z-index: 20;
        margin-top: 4px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        border-radius: 4px;
        background: #FFF;
        box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.14);

    }

    .filter-select-car-item-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 24px;
        align-self: stretch;
    }

    .filter-select-car-item-image {
        display: flex;
        width: 24px;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: contain;
    }

    .filter-select-car-item-image img {
        display: flex;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .filter-select-car-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .filter-select-car {
        margin-top: 8px;
        /* หรือ 0 ถ้าอยากติดกับกล่องบน */
    }

    .filter-select-sub__trigger,
    .filter-select-brand__trigger {
        display: flex;
        flex: 1;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .filter-select-sub-group,
    .filter-select-brand-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .filter-select-sub-panel,
    .filter-select-brand-panel {
        width: 100%;
        margin-top: 8px;
        border-radius: 0 0 4px 4px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
        display: flex;
        flex-direction: column;
        max-height: 320px;
    }

    .filter-select-sub-panel__header,
    .filter-select-sub-panel__footer,
    .filter-select-brand-panel__header,
    .filter-select-brand-panel__footer {
        flex-shrink: 0;
        padding: 8px 16px;
        background: #F8F8F8;
        color: var(--Primary, #007FC6);
    }

    .filter-select-sub-panel__list,
    .filter-select-brand-panel__list {
        flex: 1;
        min-height: 0;
        max-height: 230px;
        border-radius: 0 0 4px 4px;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: #00B6F1 #F5F5F5;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar,
    .filter-select-brand-panel__list::-webkit-scrollbar {
        width: 8px;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar-track,
    .filter-select-brand-panel__list::-webkit-scrollbar-track {
        background: #F5F5F5;
        border-radius: 999px;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar-thumb,
    .filter-select-brand-panel__list::-webkit-scrollbar-thumb {
        background: #007FC6;
        border-radius: 999px;
    }

    .filter-select-sub-item,
    .filter-select-brand-item {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 14px 16px;
        cursor: pointer;
    }

    .filter-select-sub-item:hover,
    .filter-select-sub-item.is-active,
    .filter-select-brand-item:hover,
    .filter-select-brand-item.is-active {
        background: #F1F1F1;
    }

    .product-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* 3 คอลัมน์ */
        gap: 24px;
    }

    .product-grid-item {
        display: block;
    }

    .product-filter-2-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .product-filter-2-sub-wrapper {
        display: flex;
        align-items: center;
        gap: 0px;
        align-self: stretch;
    }

    .product-filter-2-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .pagination-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    .pagination-prev-button {
        display: flex;
        width: 52px;
        height: 52px;
        padding: 24px 16px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        aspect-ratio: 1/1;
        border-radius: 0 0 0 16px;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-next-button {
        display: flex;
        width: 52px;
        height: 52px;
        padding: 24px 16px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        aspect-ratio: 1/1;
        border-radius: 0 0 16px 0;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-number-button-wrapper {
        display: flex;
        align-items: center;
        gap: 0px;
    }

    .pagination-number-button {
        width: 52px;
        height: 52px;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #9E9E9E;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-number-button-wrapper .pagination-number-button:not(:last-child) {
        margin-right: 8px;
    }

    .pagination-number-button.is-active {
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--Primary, #007FC6);
        color: #fff;
    }

    .compare-product-main-wrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0px;
    }

    .compare-product-header-wrapper {
        display: flex;
        width: 28%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0px;

    }

    .compare-product-box-wrapper {
        padding: 27px 30px;
        width: 27.5%;
        position: relative;
        overflow: hidden;
        background: #F8F8F8;
        z-index: 0;
    }

    .compare-product-btn-close {
        width: 24px;
        height: 24px;
        aspect-ratio: 1 / 1;
    }


    .compare-product-box-content .compare-product-btn-close {
        position: absolute;
        top: 27px;
        right: 30px;
        z-index: 3;
        cursor: pointer;
    }


    .compare-product-gradient-background {
        position: absolute;
        width: 814px;
        height: 814px;
        aspect-ratio: 1/1;
        border-radius: 814px;
        background: radial-gradient(46.98% 46.98% at 51.68% 53.05%, rgba(230, 248, 254, 0.50) 0%, rgba(181, 234, 252, 0.00) 87.5%);
        top: 80%;
        transform: translate(-50%, -50%);
        z-index: -1;
        pointer-events: none;
    }

    .compare-product-img-container {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        background: #E9E9E9;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        overflow: hidden;
    }

    .compare-product-img-container-have-img>img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        /* ถ้าอยากเต็มกรอบแบบ crop ใช้ cover */
        display: block;
    }

    .compare-product-add-image-text {
        color: var(--Primary, #007FC6);
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .compare-product-table-header {
        width: 100%;
        height: 81px;
        padding: 0px 26px;
        display: flex;
        align-items: center;
        background: var(--BG-Light, #EBF8FF)
    }

    .compare-product-table-body {
        border-bottom: 1px solid #DEE2E6;
    }

    .compare-product-two-col {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
    }

    .compare-product-two-col-left {
        display: flex;
        align-items: center;
        flex-direction: row;
        align-self: stretch;
        gap: 0px;
        width: 25%;
        min-width: 0;
        padding: 8px;
    }

    .compare-product-two-col-right-prodcut-spec {
        width: 25%;
        display: flex;
        align-items: center;
        align-self: stretch;
        border-left: 1px solid #DEE2E6;
        flex: 1;
        min-width: 0;
        padding: 8px;
    }

    .compare-product-two-col-left-text {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .compare-product-two-col:nth-child(even) {
        background-color: #F9FAFB;
    }

    /* หรือเฉพาะซ้าย */
    .compare-product-two-col:nth-child(even) .product-detail-two-col__left {
        background-color: #F9FAFB;
    }

    .compare-product-modal-overlay.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }

    /* panel ขวา — ไม่ใช่ flex center */
    .compare-product-modal-shell.is-open {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 89vw;
        z-index: 10001;
        overflow: hidden;
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        transform: translateX(0);
        transition: transform 0.3s ease;
    }

    .compare-product-search-batt-wrapper {
        display: flex;
        width: 89vw;
        max-width: 1440px;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 24px 60px;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .compare-product-search-box-wrapper {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }

    /* Homepage hero search tabs */
    .compare-product-search-batt-wrapper .tabbable-panel {
        display: flex;
        width: 100%;
        margin-left: auto;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
    }

    .compare-product-search-batt-wrapper .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .compare-product-search-batt-wrapper .nav-tabs-container-item:last-child {
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
    }


    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        gap: 8px;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(166, 166, 166, 0.10);
        backdrop-filter: blur(12px);
        box-shadow: none;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        cursor: pointer;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        color: #007FC6 !important;
        border-bottom: 0;
        background: #EBF8FF;
        backdrop-filter: blur(12px);
    }

    .compare-product-search-batt-wrapper .btn-wrapper-search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }


    .compare-product-modal-input-box-search {
        height: 188px;
        width: 100%;
        padding: 25px 15px;
        border-radius: 0 0 24px 0;
        border-top: 1px solid #007FC6;
        background: transparent;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        isolation: isolate;
    }

    .compare-product-modal-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .compare-product-modal-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 0 0 24px 0;
        background: #EBF8FF;
        pointer-events: none;
        z-index: 0;
    }

    .compare-product-modal-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .compare-product-modal-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .compare-product-modal-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .compare-product-modal-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 24px;
        width: 100%;
        min-width: 0;
    }

    .compare-product-modal-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        box-sizing: border-box;
        cursor: pointer;
        flex: none;
        align-self: stretch;
        overflow: hidden;
    }

    .compare-product-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }


    #compare-product-modal .compare-product-modal-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    #compare-product-modal .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    #compare-product-modal .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    .compare-product-btn-main {
        display: inline-flex;
        min-width: 180px;
        width: auto;
        padding: 8px 16px;
        margin-right: 16px;
        align-items: center;
        gap: 16px;
        border-radius: 8px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
        cursor: pointer;
    }

    .compare-product-btn-main-icon {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 0.6px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
    }


    .compare-product-product-selected-banner {
        display: none;
        width: 100%;
        height: auto;
        min-height: 100px;
        padding: 16px 103.5px 16px 72.5px;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        background: linear-gradient(270deg, #00B6F1 0%, #005BAA 100%);
    }

    .compare-product-product-selected-banner.is-visible {
        display: flex;
    }

    .compare-product-product-selected-banner:not(.has-items) .compare-product-product-selected-item-wrapper.is-open {
        display: none;
    }

    .compare-product-product-selected-banner.has-items .compare-product-product-selected-item-wrapper.is-empty {
        display: none;
    }

    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper {
        width: 100%;
    }

    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper.is-open,
    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: none;
    }

    /* มีรายการปกติ */
    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-open {
        display: flex;
    }

    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-empty,
    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: none;
    }

    /* no-mapping */
    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
    }

    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-empty,
    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-open {
        display: none;
    }

    .compare-product-product-selected-open-title.is-open {
        margin-right: auto;
        flex-shrink: 0;
        min-width: 152px;
    }

    body.product-list-compare-active .compare-product-btn-2.is-not-selected {
        display: flex;
    }

    body.product-list-compare-active {
        padding-bottom: 100px;
    }

    .compare-product-product-selected-item-wrapper.is-open {
        display: flex;
        width: 100%;
        min-width: 0;
        height: 68px;
        padding-bottom: 8px;
        justify-content: flex-end;
        align-items: center;
        gap: 24px;
        flex-shrink: 1;
    }

    .compare-product-product-selected-item-wrapper.is-empty {
        display: flex;
        width: 100%;
        height: 68px;
        align-items: center;
        justify-content: space-between;
    }

    .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
        width: 100%;
        height: 68px;
        align-items: center;
        justify-content: space-between;
    }


    .compare-product-product-selected-item-sub-wrapper.is-no-mapping {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .compare-no-related-title {
        color: #fff;
        font-weight: 700;
        line-height: 1.3;
    }

    .compare-no-related-desc {
        color: #fff;
        opacity: 0.95;
        line-height: 1.4;
    }

    .compare-product-product-selected-item-blue-container-wrapper {
        display: flex;
        align-items: center;
        gap: 24px;
        flex: 1 1 0;
        min-width: 0;
    }

    .compare-product-product-selected-item-blue-container {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        max-width: 241px;
        height: 43px;
        padding: 8px 16px;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        box-sizing: border-box;
        border-radius: 0 0 24px 0;
        background: #00B6F1;
    }

    .compare-product-product-selected-item-blue-container>span {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .compare-product-product-selected-item-close-btn {
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper.is-empty,
    .compare-product-product-selected-btn-wrapper.is-no-mapping {
        margin-left: 0;
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper.is-empty {
        margin-left: 0;
        flex-shrink: 0;
    }

    .compare-selected-empty {
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper {
        margin-left: 25px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .compare-product-product-selected-btn-wrapper>.btn-view-more-2 {
        min-width: 176px;

    }

    .compare-product-product-selected-item-close-btn img {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
    }


    .dealer-store-layout {
        position: relative;
        margin-left: 64px;
        margin-right: 64px;
        /* สูงกว่า .product-pass-hero (16) */
    }

    .dealer-store-text-align {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .dealer-store-subtitle-text {
        color: #6D6D6D;
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .dealer-store-search-container {
        display: flex;
        width: 100%;
        max-width: 1440px;
        position: relative;
        z-index: 20;
        margin: -24px auto 0;
        padding: 48px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
        border-radius: 0 0 48px 0;
        background: var(--BG-Light, #EBF8FF);
        box-shadow: 0 0 30px 0 rgba(56, 56, 56, 0.12);
    }

    .dealer-store-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-dropdown>.dealer-store-input-box-search-main-wrapper {
        flex: 1;
        /* กล่องทั่วไป */
        min-width: 0;
    }

    .dealer-store-input-box-search-dropdown>.dealer-store-input-box-search-main-wrapper:first-child {
        flex: 1.4091;
        /* กล่องแรกยาวกว่า (2 เท่า) */
    }

    .dealer-store-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .dealer-store-input-box-search-main-wrapper .select-search-car,
    .dealer-store-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-main-wrapper .select-search-car select,
    .dealer-store-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    .dealer-store-input-box-search .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    .dealer-store-input-box-search .wd-input-box-search-wrapper {
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    .dealer-store-input-box-search .btn-wrapper-search {
        position: relative;
        z-index: 1;
    }

    .dealer-store-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        cursor: pointer;
        box-sizing: border-box;
    }

    .dealer-store-input-box-search .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    /* อันแรก — ยืดกินพื้นที่ที่เหลือ */
    .dealer-store-text-sort-wrapper>h2 {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    /* อันสอง — กว้างตาม content */
    .dealer-store-sort-sub-wrapper {
        display: flex;
        align-items: center;
        align-self: stretch;
        width: fit-content;
        /* override align-self: stretch จาก rule ทั่วไป */
    }

    .dealer-store-sort-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .dealer-store-text-sort-wrapper {
        display: flex;
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        padding-bottom: 24px;
        justify-content: start;
        align-items: stretch;
        gap: 35px;
    }

    .dealer-store-card-wrapper {
        max-width: 1440px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 24px;
    }

    .dealer-store-card-container {
        display: flex;
        width: 100%;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
        border-radius: 0 0 48px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        cursor: pointer;
    }

    .dealer-store-card-header-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }

    .dealer-store-card-header-wrapper img {
        width: 100%;
        height: auto;
        max-width: 87px;
        max-height: 87px;
        aspect-ratio: 1/1;
    }

    .dealer-store-card-header-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        flex: 1 0 0;
    }

    .dealer-store-card-header-province-container {
        display: flex;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid rgba(210, 210, 210, 0.87);
        background: var(--BG-Light, #EBF8FF)
    }

    .dealer-store-card-header-province-container img {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }

    .dealer-store-card-content-seperator {
        width: 100%;
        height: 1px;
        opacity: 0.5;
        background: #9E9E9E;
    }

    .dealer-store-card-contact-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .dealer-store-card-contact-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-card-contact-container img {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .dealer-store-search-container .btn-wrapper-search {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
    }

    .dealer-store-search-form {
        cursor: default;
        gap: 8px;
    }

    .dealer-store-search-input {
        flex: 1;
        min-width: 0;
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: #282828;
    }

    .dealer-store-search-input::placeholder {
        color: #A6A6A6;
    }

    .dealer-store-search-submit {
        display: flex;
        flex-shrink: 0;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    .dealer-store-pop-up-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .dealer-store-pop-up-overlay.is-hidden,
    .dealer-store-pop-up-container.is-hidden {
        display: none;
    }

    .dealer-store-pop-up-container {
        display: flex;
        flex-direction: row;
        padding: 40px;
        align-items: center;
        gap: 24px;
        border-radius: 12px;
        background: #FFF;
        max-width: 100%;
        width: 885px;
    }

    .dealer-store-pop-up-image {
        width: 100%;
        max-width: 362px;
        max-height: 362px;
        aspect-ratio: 1/1;
        border-radius: 0 0 48px 0;
        overflow: hidden;
        flex-shrink: 0;
    }

    .dealer-store-pop-up-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 48px 0;
    }

    .dealer-store-pop-up-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .dealer-store-pop-up-text-detail-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .dealer-store-text-detail-contact-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-sub-input-box-search.filter-select-sub__trigger {
        max-height: 40px;
    }

    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 100%;
        z-index: 10050;
    }

    .wrapper-404 {
        width: 100%;
        max-width: 100%;
        display: flex;
        height: 610px;
        align-items: center;
        gap: 80px;
        justify-content: center;
    }

    .wrapper-404-end {
        margin-right: auto;
    }

    .wrapper-404-image img {
        aspect-ratio: 1/1;
        width: 545px;
        height: 545px;
        object-fit: cover;
    }

    .wrapper-404-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
    }



    .bg-mobile-cover img {
        height: 100%;
        border-radius: 50px;
    }

    .bg-mobile-cover {
        height: 714px !important;
        width: 354px !important;
        margin-top: 70px !important;
        padding: 7px 11px;
        border-radius: 65px;
        -webkit-box-shadow: 34px 47px 122px -47px rgb(0 0 0 / 75%);
        -moz-box-shadow: 34px 47px 122px -47px rgba(0, 0, 0, 0.75);
        box-shadow: 34px 47px 122px -47px rgb(0 0 0 / 75%);
    }

    .box-content-warranty {
        position: relative;
        height: 933px;
        margin-bottom: 70px;
    }

    .image-gsbattery {
        margin-top: 30px;
        max-width: 100%;
        max-height: 843px;
    }

    .career-bg {
        height: 480px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 20px;
    }

    .box-radis-des-sales::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #005BAA;
        position: absolute;
        margin-top: 7px;
    }

    .box-radis-des-sales {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #00B6F1;
        position: absolute;
        margin-top: 7px;
    }

    .ma-bottom-20 {
        margin-bottom: 20px;
    }

    .box-radis-sale {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-sale::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #005BAA;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .box-radis-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-batt::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #00B6F1;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .display-destop {
        display: block;
    }

    .display-mobile {
        display: none;
    }

    .box-chage-lang {
        margin-top: -31px;
        margin-right: 20px;
    }

    .line-abt-verticle {
        background-color: #005BAA;
        width: 83%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .line-abt-verticle2 {
        background-color: #005BAA;
        width: 67%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .margin-abt-timeline {
        margin-top: 30px;
    }

    .padding-bottom-btn {
        padding-bottom: 20px;
    }

    .batt-long-time {
        margin: 20px 0px;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin-top: 0px;
        margin-bottom: 24px;
    }

    .select-search-model select {
        display: flex;
        appearance: none;
        max-width: 249px;
        width: 249px;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
    }

    .select-search-car select {
        display: flex;
        appearance: none;
        max-width: 249px;
        width: 249px;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
    }


    .img-box-home-row {
        position: relative;
        display: flex;
        align-items: stretch;
    }

    .img-box-home-row-2 {
        position: relative;
        display: flex;
        align-items: stretch;
    }

    /* แถวที่ 2: รูปขวา skew ทับกล่องข้อความซ้าย — ยก z-index คอลัมน์ข้อความ */
    .img-box-home-row:has(.img-box-home-container-right)>.pdd-left {
        position: relative;
        z-index: 2;
    }

    .img-box-home-row:has(.img-box-home-container-right)>.pdd-right {
        position: relative;
        z-index: 1;
    }

    .img-box-home-tough {
        position: absolute;
        bottom: 0;
        left: 4%;
        width: clamp(250px, 18vw, 300px);
        /* ปรับตามดีไซน์ */
        height: auto;
        pointer-events: none;
        z-index: 2;
        object-fit: contain;
        object-position: left bottom;
    }

    .img-box-home-container {
        height: 431px;
        width: 89.065%;
        position: relative;
        overflow: hidden;
        left: 12%;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
    }

    .img-box-home-container-right {
        height: 431px;
        width: 89%;
        position: relative;
        overflow: hidden;
        right: 5%;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
    }

    .img-box-home {
        position: absolute;
        top: 0;
        left: -12%;
        width: 150%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .column-description-container-right {
        position: relative;
        overflow: visible;
        display: flex;
        right: 8%;
        margin-top: 63px;
        width: 625px;
        padding: 40px 40px 56px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .column-description-container-left {
        position: relative;
        z-index: 1;
        display: flex;
        left: 6%;
        margin-top: 63px;
        width: 625px;
        padding: 40px 40px 56px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .btn-view-more {
        z-index: 2;
        bottom: 24px;
        display: inline-flex;
        height: 48px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #00B6F1;
        background: #007FC6;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .btn-view-more-left {
        left: 380px;
    }

    .btn-view-more-right {
        left: 70px;
    }

    .btn-view-more::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .btn-view-more:hover::after {
        opacity: 1;
    }

    .btn-view-more-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        padding: 0 24px;
        gap: 8px;
        z-index: 3;
        border-radius: 0 0 16px 0;
        border: 1px solid var(--Primary, #007FC6);
        background: #FFF;
        color: #007FC6;
        text-decoration: none;
        transition: background 0.25s ease, color 0.25s ease;
    }

    .btn-view-more-2:hover {
        background: #007FC6;
        color: #fff !important;
    }

    .btn-view-more-2:hover img {
        filter: brightness(0) invert(1);
    }

    .sub-banner-container {
        display: grid;
        position: relative;
        overflow: hidden;
        margin-top: 80px;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        height: auto;
    }

    .sub-banner-container>img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: bottom;
        z-index: 0;
    }

    .sub-banner-content {
        position: relative;
        justify-self: center;
        align-self: start;
        display: flex;
        width: 100%;
        max-width: 1440px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding-top: 95px;
        padding-bottom: 106px;
        z-index: 1;
    }

    .sub-banner-grid-2x3 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 16px;
    }

    .sub-banner-box {
        display: flex;
        width: 398px;
        height: auto;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        border: 0.5px solid rgba(255, 255, 255, 0.70);
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .tabbable-line>.nav-tabs>li {
        margin: 0 137px;
    }

    .padding-row-left {}

    .bg-color-footer {
        height: 20px;
        background-color: #005BAA;
    }

    .text-colo-link {
        color: #005BAA;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 89px;
    }

    .img-box-fing-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 556px;
    }

    /*  start Contact page  */
    .text-contact-header {

        color: #000000;
        font-size: 30px;
        line-height: 45px;
        font-weight: 500;
    }

    .text-contact-h-main {

        color: #005BAA;
        font-size: 35px;
        line-height: 40px;
        font-weight: 500;
    }

    .request-select {
        color: #F00 !important;
    }

    .margin-top-input {
        margin-top: 50px;
        padding-top: 30px;
    }

    /* End Contact page  */
    /* find batt type page  */
    .nav-padding {
        margin-left: 270px;
        margin-right: 50px;
    }

    .position-type {
        position: absolute;
        top: 151px;
        left: 50px;
    }

    .text-batt-name {

        font-size: 30px;
        line-height: 55px;
        color: #00B6F1;
        font-style: italic;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .batt-type {

        font-size: 72px;
        line-height: 55px;
        color: #005BAA;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .detail-title {

        font-size: 73px;
        line-height: 50px;
        color: #fff;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .sub-batt-type {

        font-size: 30px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        margin-bottom: 20px;
    }

    /* end find batt type page  */
    /* career page  */
    .box-name-position {
        background-color: #005BAA;
        height: 70px;
    }

    /* end career page  */
    /* about us page  */
    .abt-img {
        width: 100%;
        height: 500px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .text-abt {

        color: #646464;
        font-size: 24px;
        line-height: 55px;
        font-weight: 500;
    }

    .box-content-abt {
        padding-left: 50px;
    }

    .text-name-building {

        color: #000;
        font-size: 40px;
        line-height: 46px;
        font-weight: 500;
    }

    .line-abt {
        background-color: #005BAA;
        width: 4px;
        height: 507px;
        position: absolute;
        left: 12px;
    }

    .line-abt-2 {
        background-color: #005BAA;
        width: 4px;
        height: 507px;
        position: absolute;
        left: 12px;
    }

    .text-year-abt {

        color: #005BAA;
        font-size: 30px;
        line-height: 45px;
        font-weight: 500;
    }

    .text-h-abt {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
    }

    .text-h-abt-detail {

        color: #000000;
        font-size: 14px;
        line-height: 24px;
    }

    .mar-top-box-history {
        margin-top: 50px;
    }

    .text-job-position {
        color: #FFFFFF;
        font-size: 23px;
        line-height: 30px;

    }

    .short-full {
        color: #fff;
        font-size: 14px;
        margin-top: 9px;
    }

    .data-abt-h-text {

        color: #005BAA;
        font-size: 40px;
        line-height: 55px;
    }

    .padding-top-abt {
        margin-top: 50px;
    }

    .sub-data-abt-h-text {

        color: #646464;
        font-size: 24px;
        line-height: 1.5;
    }

    .margin-top-abt {
        margin-top: 60px;
    }

    .text-detail-abt-h {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
        text-align: justify;
        width: 584px;
    }

    .text-h-abt-gs {

        color: #000000;
        font-size: 30px;
        line-height: 55px;
        margin-bottom: 20px;
    }

    /* end about us page  */
    .margin-space-banner {
        margin-top: 10px;
    }

    .img-bg-footer {
        position: absolute;
        margin-top: 20px;
        right: 0;
        bottom: 0;
    }


    .padding-top-footer-right {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .footer-main-wrapper {
        display: flex;
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding-right: 64px;
        align-items: flex-start;
        justify-content: space-between;
        gap: 120px;
        box-sizing: border-box;
    }

    .contact-footer-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
    }

    .contact-footer-container {
        display: flex;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        border: 1px solid #00B6F1;
        width: fit-content;
    }

    .contact-footer-icon-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    .contact-footer-icon {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .link-footer-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .link-footer-sub-wrapper-upper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 74px;
        align-self: stretch;
    }

    .link-footer-sub-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 74px;
        align-self: stretch;
    }

    .link-footer-sub-wrapper-item {
        display: flex;
        flex-direction: column;
        width: 202px;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .link-footer-shop-container {
        display: flex;
        padding: 8px 16px;
        width: 261px;
        gap: 24px;
        align-self: stretch;
        align-items: center;
        flex-direction: row;
        border-radius: 8px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
    }

    .link-footer-shop-container .text-link-footer {
        white-space: nowrap;
    }

    .bottom-footer-wrapper {
        display: flex;
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding: 24px 64px;
        box-sizing: border-box;
        align-items: center;
        flex-direction: row;
        gap: 40px;
        background: #FFF;
    }

    .text-link-footer {

        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #231F20;
    }

    .text-detail-reserved {

        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #231F20;
        text-align: start;
    }

    .pad-left {
        padding-left: 20px;
    }

    .bg-footer {
        background-color: #EBF8FF;
        width: 100%;
        height: auto;
    }

    .img-footer-logo {
        height: 66px;
    }

    .contact-text-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
    }

    .text-detail-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 8px;
        margin-bottom: 8px;
    }

    .text-address-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .padding-top-footer {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .navbar-main-background {
        position: relative;
        z-index: 60;
    }

    .navbar-fixed {
        width: 100%;
        max-width: 100%;
        padding: 16px 0;
        box-sizing: border-box;
        position: relative;
    }

    .navbar-fixed-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 64px;
        box-sizing: border-box;
        gap: 16px;
    }

    .nav-solid {
        background-color: #007FC6;
    }

    .nav-main-sub-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        min-width: 648px;
        width: auto;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-main-sub-wrapper>.nav-main-sub-wrapper-item {
        display: flex;
        padding: 0 16px;
        min-height: 40px;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    .nav-main-sub-wrapper>.nav-main-sub-wrapper-item>.nav-main-sub-wrapper-item {
        display: flex;
        padding: 0 16px;
        justify-content: center;
        align-items: center;
        align-self: center;
        min-height: 40px;
    }

    .nav-main-sub-wrapper-item-lower {
        display: flex;
        height: 40px;
        padding: 0 16px 0 8px;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        background: rgba(255, 255, 255, 0.20);
        backdrop-filter: blur(12px);
    }

    .nav-main-sub-wrapper-sub-item-lower {
        padding: 8px 16px;
        gap: 8px;
    }

    .navbar-sticky-revamp.navbar-fixed-top {
        z-index: 60;
    }

    .navbar-sticky-revamp.navbar-default {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
        width: 40%;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 32px;
        border: none;
        border-radius: 0 0 15px 0;
        background: linear-gradient(180deg, rgba(0, 144, 224, 0.95) 0%, rgba(0, 127, 198, 0.95) 100%);
        box-shadow: 0 8px 32px 0 rgba(27, 100, 171, 0.30);
        backdrop-filter: blur(12px);
    }

    .navbar-sticky-revamp.navbar-sticky-revamp--en.navbar-default {
        width: 42%;
    }

    .navbar-sticky-revamp.navbar-default .nav-desk-top {
        display: flex;
        align-items: center;
        gap: 40px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navbar-default .navbar-brand {
        position: static;
        float: none;
        height: auto;
        padding: 0;
        margin: 0;
    }

    .nav-desk-top__brand {
        display: inline-block;
        vertical-align: middle;
    }

    .nav-desk-top__brand-link {
        display: inline-block;
        padding: 0;
        line-height: 0;
    }

    .nav-desk-top__brand .h-img-logo {
        height: 64px;
        width: auto;
        margin-top: 0;
        display: block;
    }

    .navbar-default {
        height: 80px;
    }

    /* heder main  */
    .select-box select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #005BAA;
        padding: 4px 10px;
        width: 96px;
    }

    .select-box select:active,
    select:hover {
        outline: none;
    }

    .box-top-green {
        background-color: #C7EB02;
        width: 128px;
        height: 14px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 7px;
    }

    .position-btn-typ-batt {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: 0;
    }

    .text-logo {
        font-size: 73px;
        line-height: 50px;
    }

    .text-detail-type-battery {

        font-size: 16px;
        line-height: 25px;
        color: #fff;
        padding-top: 10px;
        padding-left: 40px;
        padding-right: 40px;
    }

    .box-top-orang {
        background-color: #FF9300;
        width: 128px;
        height: 14px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 7px;
    }

    .box-top-blue {
        background-color: #00AAE8;
        width: 128px;
        height: 14px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 7px;
    }

    .title-news {

        font-size: 30px;
        line-height: 38px;
        margin-top: 20px;
        font-weight: 600;
        height: 72px;
        overflow: hidden;
    }

    .box-text-activities {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .border-bottom-new-act {
        width: 155px;
        height: 4px;
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
    }

    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .box-news-activities {
        margin: 10px 0;
    }

    .sub-new-des {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .box-new-act {
        padding: 10px;
    }

    .border-bottom-new {
        width: 68px;
        height: 4px;
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
    }

    .tag-news-type {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .btn-tag-tip {
        background-color: #00B6F1;
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }


    .btn-tag {
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }


    .select-box {
        margin-top: -25px;
        margin-right: 30px;
    }

    .dropdown-menu {
        text-align: left;
        margin-top: 29px;
        border-top: none;
        border-radius: 0px;
    }

    .dropdown-menu>li>a {
        padding: 7px 20px;
    }

    .navbar-main-background .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang,
    .navbar-sticky-revamp .nav-main-sub-wrapper__lang .dropdown-menu.dropdown-menu--lang {
        margin-top: 8px;
    }

    .navbar-default .navbar-brand {
        position: absolute;
    }

    .h-img-logo {
        height: 42px;
        margin-top: 4px;
    }

    .invisible-mobile {
        display: block;
    }

    .visible-tablet-slide-baner {
        display: none;
    }

    .visible-mobile {
        display: none;
    }

    .invisible-slide-baner {
        display: block;
    }

    .visible-slide-baner {
        display: none;
    }

    .visible-component-desktop {
        display: block;
    }

    .visible-component-mobile {
        display: none;
    }


    .search-result-card-excerpt--full {
        display: block;
    }

    .search-result-card-excerpt--short {
        display: none;
    }

    .service-section-decor--mobile {
        display: none;
    }

    .nav-desk-top {
        list-style-type: none;
        margin: 0px;
        padding: 0;
    }

    .nav-list-icon {
        list-style-type: none;
        margin-left: -40px;
    }

    .lnline-list {
        display: inline;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 183px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;

    }

    .dropdown-content a:hover {
        background-color: #f1f1f1
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }

    /* endheader main */
    /* homepage */
    .img-icon-type {
        height: 80px;
    }

    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-style: italic;
        font-weight: 600;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .banner-wrapper {
        position: relative;
        width: 100%;
        max-width: 1740px;
        margin: 0 auto;
        --owl-items: 1.303;
    }

    .interesting-banner-wrapper {
        position: relative;
        width: 100%;
        max-width: 1740px;
        margin: 0 auto;
        --owl-items: 1.303;
    }

    /* 
    #carousel-general-banner {
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    #carousel-general-banner .banner-wrapper {
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    #carousel-general-banner .banner-wrapper .owl-stage-outer {
        overflow: hidden;
    }

    #interesting-carousel {
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    #interesting-carousel .interesting-banner-wrapper {
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    #interesting-carousel .interesting-banner-wrapper .owl-stage-outer {
        overflow: hidden;
    } */

    .banner-wrapper .btn-view-more-2,
    .interesting-banner-wrapper .btn-view-more-2 {
        display: none;
    }

    .banner-wrapper .owl-stage-outer,
    .interesting-banner-wrapper .owl-stage-outer {
        overflow: visible;
    }

    .banner-wrapper .owl-item .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item .h-w-imag-ban-slide {
        border-radius: 0 0 48px 0;
    }

    .banner-wrapper .owl-item:not(.center),
    .banner-wrapper .owl-item:not(.active),
    .interesting-banner-wrapper .owl-item:not(.center),
    .interesting-banner-wrapper .owl-item:not(.active),
    .h-w-imag-ban-slide {
        opacity: 1;
        transform-origin: center center;
        transform: scale(0.92);
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .banner-wrapper .owl-item.center .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item.center .h-w-imag-ban-slide {
        opacity: 1;
        transform: scale(1);
        transform-origin: center center;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .banner-wrapper .banner-slide-card,
    .interesting-banner-wrapper .banner-slide-card {
        position: relative;
    }

    .banner-wrapper .owl-item.center .banner-slide-media,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media {
        display: block;
        position: relative;
        border-radius: 0 0 48px 0;
        overflow: hidden;
    }

    .banner-wrapper .owl-item.center .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after {
        opacity: 1;
    }

    .banner-wrapper .owl-item:not(.center) .banner-slide-btn,
    .interesting-banner-wrapper .owl-item:not(.center) .banner-slide-btn {
        display: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-btn {
        position: absolute;
        left: 50%;
        top: auto;
        bottom: 64px;
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(12px);
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
        white-space: nowrap;
        text-decoration: none;
        pointer-events: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    }

    .banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 0 0 0 16px;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    }


    .banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-prev {
        left: max(16px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-next {
        right: max(16px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .banner-wrapper .owl-prev:hover,
    .banner-wrapper .owl-next:hover,
    .interesting-banner-wrapper .owl-prev:hover,
    .interesting-banner-wrapper .owl-next:hover {
        background: #007FC6;
    }

    .banner-wrapper .owl-prev:hover img,
    .banner-wrapper .owl-next:hover img,
    .interesting-banner-wrapper .owl-prev:hover img,
    .interesting-banner-wrapper .owl-next:hover img {
        filter: brightness(0) invert(1);
    }

    .banner-wrapper .owl-prev.disabled,
    .banner-wrapper .owl-next.disabled,
    .interesting-banner-wrapper .owl-prev.disabled,
    .interesting-banner-wrapper .owl-next.disabled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* การ์ดทางขวาของ center */

    .service-items-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        margin-right: 32px;
        gap: 24px;
    }

    .service-item-main-container {
        height: 200px;
        width: 330px;
        display: flex;
        align-items: flex-end;
    }

    .service-item-container {
        height: 140px;
        width: 304.55px;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 32px 0px;
        cursor: pointer;
    }

    .service-item-container::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -8;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .service-item-container:hover::after {
        opacity: 1;
    }

    .service-item-inner {
        transform: skewX(18deg);
    }

    .service-item-inner:has(.service-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 112px;
        width: 112px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .service-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .service-item-container:hover .service-item-icon img {
        transform: translateY(-10%);
    }

    .service-item-title {
        margin-top: 48px;
        text-align: center;
        color: #fff;
    }

    .title-news {

        font-size: 20px;
        line-height: 1.25;
        font-weight: 600;
    }

    .tag-news-type {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .date-news {
        color: #999;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
    }

    .featured-news-card {
        display: flex;
        align-items: stretch;
        gap: 24px;
    }

    .featured-news-text {
        flex: 1;
        padding-left: 0;
    }

    .other-news-text-align {
        flex: 1;
        padding: 0;
    }

    .other-news-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        font-size: 20px;
        line-height: 1.25;
        font-weight: 700;
        font-style: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .img-box-news {
        aspect-ratio: 1 / 1;
        width: 431px;
        height: 431px;
        flex: 0 0 431px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .img-box-news-main {
        width: 100%;
        height: 423px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .news-section-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .news-category-list {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .news-category-container {
        display: inline-flex;
        height: 40px;
        padding: 8px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        border: transparent;
        background: rgba(166, 166, 166, 0.10);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        white-space: nowrap;
        transition: none;
    }

    .news-category-container:hover {
        border: 1px solid var(--Primary, #007FC6);
        background: #D9F2FF;
    }

    .description-news {
        font-size: 16px;
        font-style: normal;
        line-height: 1.25;
        font-weight: 400;
        color: #464646;
        margin-top: 16px;
    }

    .news-column-container {
        display: flex;
        height: 129px;
        align-items: flex-start;
        gap: var(--border-radius-none, 0);
        flex-shrink: 0;
        align-self: stretch;
        border-radius: var(--border-radius-200, 8px);
        border: 1px solid #D8D8D8;
        background: #FFF;
        margin-bottom: 24px;
        cursor: pointer;
        overflow: hidden;
    }

    .news-column-content {
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: auto;
    }

    .news-column-image {
        width: 129px;
        height: 129px;
        flex: 0 0 129px;
        aspect-ratio: 1 / 1;
        align-self: flex-start;
        border-radius: var(--border-radius-200, 8px) 0 0 var(--border-radius-200, 8px);
    }

    .new-column-text-align {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 16px;
    }

    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
    }

    .bg-search-batt {
        position: relative;
        overflow: hidden;
        z-index: 20;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 790px;
        margin-top: -128px;
        padding-top: 128px;
        box-sizing: border-box;
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 50px),
                0 100%);
    }

    .bg-search-batt__vector {
        position: absolute;
        right: 0;
        bottom: 0;
        width: clamp(200px, 45vw, 840px);
        /* ปรับตาม design */
        height: auto;
        max-height: 85%;
        object-fit: contain;
        object-position: right bottom;
        /* เทียบ blue-small-banner */
        z-index: 4;
        /* เหนือ video, ใต้/เท่า filter */
        pointer-events: none;
    }

    .bg-search-batt__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 4;
        pointer-events: none;
        display: block;
    }

    .bg-search-batt__filter {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(0, 136, 170);
        mix-blend-mode: hue;
    }

    .bg-search-batt__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 1313px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    .bg-search-batt__content .box-search h1,
    .bg-search-batt__content .sub-title-search {
        position: relative;
        z-index: 2;
    }

    .sub-title-search {

        font-size: 24px;
        line-height: 1.25;
        color: #fff;
        text-align: center;
        margin-bottom: 49px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        max-width: 378px;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 1313px;
    }

    .wd-input-box-search-img {
        position: absolute;
        top: -65px;
        left: -45px;
        max-width: 19.3%;
    }

    .wd-input-box-search-img img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .wd-input-box-search-img-2 {
        position: absolute;
        left: -80px;
        bottom: -87px;
        width: 22%;
    }

    .wd-input-box-search-img-2 img {
        display: block;
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* Dealer hero: ขยาย overflow ซ้าย/บน แต่ crop ขอบขวาและล่าง */
    .wd-input-box-search--dealer .wd-input-box-search-img-2 {
        clip-path: inset(-160px 0 0 -140px);
    }

    .wd-input-box-search {
        width: 100%;
        max-width: 1313px;
        height: 188px;
        padding: 25px 15px;
        border-radius: 40px 0 32px 0;
        border: none;
        background: transparent;
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 1;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        isolation: isolate;
    }

    .wd-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(90deg, #00B6F1 0%, #0B3149 100%);
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 40px 0 32px 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(11, 49, 73, 0.80) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .wd-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 81.5%;
        min-width: 0;
    }


    .wd-input-box-search-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .wd-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
    }

    .wd-input-box-search-main-wrapper .select-search-car,
    .wd-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper .select-search-car select,
    .wd-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .wd-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    .wd-input-box-search .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    .wd-input-box-search .wd-input-box-search-wrapper {
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    .wd-input-box-search .btn-wrapper-search {
        position: relative;
        z-index: 1;
    }

    .wd-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        cursor: pointer;
        box-sizing: border-box;
    }

    .wd-input-box-search .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    .select-search select:active,
    select:hover {
        outline: none;
    }

    .select-search select:after,
    select:hover {
        outline: none;
    }

    .text-title-app {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-content-app {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-sub-blue {
        color: #00B6F1 !important;
    }

    .app-box {
        margin-top: 25%;
    }

    .img-box-type-battery {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 638px;
        max-width: 100%;
    }

    .box-search-batt {
        margin-top: 139px;
        padding-left: 131px;
    }

    .title-search-batt {

        font-size: 48px;
        line-height: 55px;
        color: #005BAA;
    }

    .text-content-batt {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
    }

    .img-box-news {
        aspect-ratio: 1 / 1;
        width: 431px;
        height: 431px;
        flex: 0 0 431px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .img-box-news-main {
        width: 100%;
        height: 423px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }


    .text-name-hero {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: bolder;
    }

    .text-sub-hero {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: 600;
    }

    .box-position-baner-hero {
        position: absolute;
        top: 10%;
        left: 15%;
    }

    #custom-indicators {
        position: static;
        margin: 0 auto;
    }

    #custom-indicators .active {
        margin: 0;
        margin-right: 4px;
        width: 52px;
        height: 8px;
        background-color: #007FC6;
        transition: all 0.4s ease;
    }

    #custom-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators {
        position: static;
        margin: 24px auto 0;
        padding-left: 0;
        width: auto;
        list-style: none;
        text-align: center;
    }

    #interesting-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators .active {
        width: 52px;
        height: 8px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .text-slo-grand {

        font-size: 25px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: 500;
    }

    /* end homepage */
    /* 
prduct detailpage */
    .text-breadcrumb {
        color: #282828;
    }

    .bg-pro-detail {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        box-sizing: border-box;
    }


    .product-detail-hero .col-md-7:has(.product-items-row) {
        min-width: 0;
    }

    .product-items-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        gap: clamp(8px, 1.2vw, 24px);
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        box-sizing: border-box;
        padding-inline: 8px;
    }

    .product-item-main-container {
        flex: 0 0 auto;
        width: 160px;
        min-width: 0;
        min-height: 84px;
        display: flex;
        flex-direction: column;
    }

    .product-item-inner {
        transform: skewX(18deg);
    }

    .product-item-inner:has(.product-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    .product-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 53.537px;
        height: 53.537px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -85%);
        z-index: 2;
    }

    .product-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }


    .product-item-container {
        flex: 1;
        min-height: 85px;
        height: 100%;
        width: 100%;
        max-width: 160px;
        margin-inline: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 16px 12px 12px;
        box-sizing: border-box;
        background: var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 15px 0px;
        cursor: pointer;
    }

    .product-item-title {
        margin-top: 16px;
        text-align: center;
        color: #fff;
        width: 100%;
    }

    .product-item-title .body2 {
        white-space: normal;
        line-height: 1.3;
    }


    .img-product-batt-detail {
        width: auto;
        height: auto;
        max-width: 72%;
        /* ปรับได้ เช่น 65%–80% */
        max-height: 85%;
        /* ไม่ล้นความสูงกล่อง */
        object-fit: contain;
        display: block;
    }

    .btn-border-w {
        background-color: #FFFFFF;
        border: 1px solid #D3D3D3;
        border-radius: 25px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 209px;
        height: 50px;
        font-weight: 600px;
        font-size: 17px;

    }

    .box-view-big-img {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .text-type-pro-detail {

        font-size: 18px;
        line-height: 1.4;
        font-weight: 700;
        color: #00B6F1;
    }

    .text-name-pro-detail {

        font-size: 56px;
        line-height: normal;
        font-weight: 700;
        color: #00B6F1;
    }

    .compare-product-btn {
        background-color: #fff;
        display: inline-flex;
        height: 40px;
        padding: 0 24px;
        align-items: center;
        gap: 8px;
        color: #007FC6;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }

    .compare-product-btn-2 {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 8px 6px 7px 6px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 4px;
        background: var(--White, #FFF);
    }

    .compare-product-btn-2.is-not-selected {
        display: none;
    }

    .compare-product-btn-2 img {
        display: none;
    }

    .compare-product-btn-2.is-check img {
        display: block;
    }

    .compare-product-btn-2.is-check {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 8px 6px 7px 6px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 4px;
        border: 1px solid var(--Primary, #007FC6);
        background: var(--Primary, #007FC6);
    }

    .product-grid-item .compare-product-btn-2 {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
    }

    .product-detail-two-col {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
    }

    .product-detail-two-col__left {
        display: flex;
        align-items: center;
        flex-direction: row;
        align-self: stretch;
        gap: 0px;
        width: 100%;
        max-width: 241px;
        min-width: 0;
    }

    .product-detail-two-col__right {
        display: flex;
        align-items: center;
        align-self: stretch;
        border-left: 1px solid #F9FAFB;
        flex: 1;
        min-width: 0;
        padding-left: 24px;
    }

    .product-detail-two-col__left-text {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;

    }

    .product-detail-two-col:nth-child(even) {
        background-color: #F9FAFB;
    }

    /* หรือเฉพาะซ้าย */
    .product-detail-two-col:nth-child(even) .product-detail-two-col__left {
        background-color: #F9FAFB;
    }

    .product-info-seperator {
        height: 1px;
        background: #D2D2D2;
    }

    .product-detail-hero {
        position: relative;
    }

    .product-detail-main {
        padding-bottom: 24px;
    }

    .product-car-filter-layout {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .product-car-filter-container {
        cursor: pointer;
    }

    .product-car-filter-container {
        display: flex;
        height: 48px;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        background: var(--BG-Light, #EBF8FF);
        backdrop-filter: blur(12px);
    }

    .product-car-filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .related-product-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }


    .box-data-pro-detail {
        padding-left: 32px;
    }

    .text-sub-pro-detail {

        font-size: 19px;
        line-height: 25px;
        font-weight: 500;
        color: #000000;
    }

    .text-slogrand-pro-detail {

        font-size: 27px;
        line-height: 55px;
        font-weight: 500;
        color: #000000;
    }

    .btn-circle-product {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        width: 41px;
        height: 41px;
    }

    .text-icon-pro-detail {

        font-size: 18px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .margin-bottom-img {
        margin-bottom: 5px;
    }

    .text-data-contant {

        font-size: 21px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .text-sub-detail {

        font-size: 16px;
        font-style: italic;
        line-height: 23px;
        padding-left: 50px;
    }

    .text-h-pro {

        font-size: 15px;
        font-style: italic;
        line-height: 23px;
        font-weight: 600;
        color: #000000;
    }

    .text--sub-h-pro {

        font-size: 35px;
        font-style: italic;
        line-height: 17px;
        font-weight: 600;
        color: #000000;
        margin-top: 10px;
    }

    .green-box {
        background-color: #C7EB02;
        height: 54px;
        width: 2px;
        position: absolute;
        margin-top: 5px;
        left: 9px;
    }

    .padd-bottom-btn {
        padding-bottom: 20px;
    }

    .new-box-tip {
        padding-top: 29%;
    }

    .title-news-tip {
        font-size: 43px;

        font-weight: 500;
        line-height: 55px;
        color: #000;
    }

    .sub-new-detail {
        font-size: 23px;

        font-weight: 500;
        line-height: 32px;
        color: #005BAA;
        padding-right: 35%;
    }

    .img-icon-prodetail {
        width: 60px;
        height: 60px;
    }

    .img-icon-prodetail-list {
        width: 43px;
        height: 43px;
    }

    /* end productdetail page */
    .btn-main-border {
        background-color: #fff;
        border-radius: 4px;
        width: 220px;
        height: 50px;
        border: 2px solid #005BAA;

        font-size: 16px;
        color: #005BAA;
        margin-top: 10px;
    }

    .btn-main-border:hover {
        box-shadow: 0px 3px 6px #00B6F1;
        color: #005BAA;
    }

    .btn-main-wt {
        background-color: #fff;
        border-radius: 32px;
        width: 220px;
        height: 50px;
        border: none;

        font-size: 16px;
        color: #005BAA;
        border-radius: 32px;
        margin-top: 10px;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        background-color: #ffffff;
        color: #000000;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .sidenav2 {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 9999;
        top: 0;
        right: 0;
        background-color: #ffffff;
        color: #000;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .sidenav2 span {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 18px;
        color: #000 !important;
    }

    .sidenav span {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 18px;
    }

    .footer {
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    .sidenav .closebtn {

        position: absolute;
        top: 0;
        left: -64px;
        font-size: 36px;
        margin-left: 50px;
    }

    /* product page */
    .img-product-pass-batt {
        background-position: center;
        background-repeat: no-repeat;
        height: 600px;
        width: 100%;
        background-size: cover;
    }

    .text-batt-type-one {

        font-style: italic;
        color: #C7EB02;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 29px;
        line-height: 32px;
    }

    .text-batt-type-two {

        font-style: italic;
        color: #FF9300;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 29px;
        line-height: 32px;
    }

    .text-batt-type-three {

        font-style: italic;
        color: #00B6F1;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 29px;
        line-height: 32px;
    }

    .position-type-product {
        position: absolute;
        top: 130px;
    }

    .position-type-product-right {
        position: absolute;
        top: 130px;
        right: 50px;
    }

    .box-bg-product {
        background-color: #fff;
        height: auto;
        border-radius: 0 0 24px 0;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        overflow: hidden;
    }

    .img-product-batt-wrap {
        width: 100%;
        aspect-ratio: 3 / 2;
        min-height: 201px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E9E9E9;
        overflow: hidden;
        position: relative;
    }

    .img-product-batt {
        width: 72%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform .3s ease;
        transform-origin: center center;
    }

    .box-bg-product:hover .img-product-batt {
        transform: scale(1.12);
    }

    .product-batt-name {

        color: #000000;
        text-align: left;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 700;
    }

    .type-batt-name {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
    }

    .batt-info-seperator {
        height: 1px;
        opacity: 0.5;
        background: #D2D2DD;
    }

    .batt-spec-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-spec-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-terminal-container {
        display: inline-flex;
        width: auto;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid #D2D2D2;
        background: #EBF8FF;
        margin-bottom: 8px;
    }

    .tag-batt-name {

        color: #005BAA;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        height: 124px;
        overflow: hidden;
    }

    .text-barnd {
        cursor: pointer;
    }

    .padding-box-pro-batt {
        padding: 24px 24px 24px 24px;
    }

    .btn-circle {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        position: absolute;
        bottom: 239px;
        right: 29px;
    }

    .banner-box-pro-car-type {
        margin-top: 10px;
        height: 469px;
    }

    .img-product-batt-banner {
        width: 100%;
        height: 100%;
    }

    .MultiCarousel {
        float: left;
        overflow: hidden;
        padding: 15px;
        width: 100%;
        position: relative;
    }

    .MultiCarousel .MultiCarousel-inner {
        transition: 1s ease all;
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: center;
        padding: 10px;
        margin: 10px;
        background: #fff;
        color: #000;
    }

    .activeBrand {
        border-bottom: 4px solid #005BAA;
    }

    .MultiCarousel .leftLst,
    .MultiCarousel .rightLst {
        position: absolute;
        border-radius: 50%;
        top: calc(50% - 16px);
    }

    .MultiCarousel .leftLst {
        left: 0;
    }

    .MultiCarousel .rightLst {
        right: 0;
    }

    .MultiCarousel .leftLst.over,
    .MultiCarousel .rightLst.over {
        pointer-events: none;
        background: #ccc;
    }

    .paddding-left-news {
        padding-left: 20%;
    }

    /*End product page */
    .img-banner-bg {
        height: 600px;
    }

    .img-banner-bg-p-lt {
        height: 600px;
    }

    .box-content-b {
        height: 600px;
    }

    /* Homepage hero search tabs */
    .bg-search-batt__content .tabbable-panel {
        display: flex;
        max-width: 1313px;
        width: 81%;
        margin-left: auto;
        align-items: stretch;
        flex-direction: row;
        justify-content: flex-end;
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
        width: 100%;
        flex: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
        align-self: stretch;
    }

    .bg-search-batt__content .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .nav-tabs-container-item:last-child {
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
    }

    .bg-search-batt__content .nav-tabs-container-item.active {
        border-top: 1px solid #005BAA;
        border-left: 1px solid #005BAA;
        border-bottom: 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(28, 53, 74, 0.80) 100%);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .nav-tabs-container-item.active:last-child {
        border-right: 1px solid #005BAA;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:focus,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
    }

    .bg-search-batt__content .btn-wrapper-search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }

    .warranty-sub-banner-text-wrapper {
        position: absolute;
        inset: 0;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 55px;
        padding-top: 123px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        align-self: stretch;
    }


    .warranty-vector {
        position: absolute;
        left: 0;
        bottom: -35%;
        transform: translate(-50%, -50%);
        width: 160%;
        max-width: none;
        z-index: -1;
        pointer-events: none;
        opacity: 0.05;
    }

    .news-list-gradient-circle-right {
        width: 873px;
        height: 873px;
        aspect-ratio: 1 / 1;
        pointer-events: none;
        z-index: 0;
        position: absolute;
        right: -10%;
        top: 0;
        transform: translateY(-50%);
        border-radius: 873px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }


    .img-box-about-us-row,
    .img-box-about-us-row-2 {
        padding: 0;
    }

    .about-us-milestone-header {
        padding: 0;
    }

    .about-us-timeline-slide:first-child {
        padding-left: 0px;
    }
}

@media (max-width:1585px) and (min-width:1300px) {
    h1 {
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h2 {
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h3 {
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h4 {
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h5 {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h6 {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .blue-h1 {
        font-size: 48px;

        line-height: 36px;
        font-weight: 800;
        color: #007FC6;
    }

    .mobile-h1 {
        font-size: 32px;
        font-weight: 700;
    }

    .mobile-h2 {
        font-size: 24px;
        line-height: 1.4;
    }

    .body1 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .body2 {
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        line-height: 1.25;
    }

    .content-space {
        min-height: 108px;
        flex: 1 0 0;
        align-self: stretch;

    }

    .space-extra-large {
        height: 92px;
        margin-top: 0;
    }

    .space-large {
        height: 81px;
        margin-top: 0;
    }

    .space-medium {
        height: 64px;
        margin-top: 0;
    }

    .space-medium-2 {
        height: 60px;
        margin-top: 0;
    }

    .space-semi-medium {
        height: 52px;
        margin-top: 0;
    }

    .space-extra-small {
        height: 44px;
        margin-top: 0;
    }

    .space-small {
        margin-top: 40px
    }

    .space-small-med {
        margin-top: 48px
    }

    .space-small-2 {
        margin-top: 32px;
    }

    .space-s-small {
        margin-top: 24px;
    }

    .space-xs {
        margin-top: 16px;
    }

    .space-xxs {
        height: 8px;
        margin-top: 0;
    }

    .space-xls {
        margin-top: 6px
    }

    .search-result-content-margin {
        margin-top: -25px;
    }

    .blue-small-banner-header-margin {
        margin-left: 57px;
    }

    .horizontial-space {
        padding-left: 94px;
        padding-right: 94px;
    }

    .bottom-space-s {
        margin-bottom: 20px
    }



    .service-section-decor {
        position: relative;
        overflow-x: clip;
        /* กันขวา ไม่สร้าง scroll แนวนอน */
        overflow-y: visible;
    }

    .tough-vector {
        width: 90%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: 720px;
        opacity: 0.04;
    }

    .tough-vector-2 {
        width: 50%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: 1130px;
        opacity: 0.04;
    }

    .tough-vector-3 {
        width: 42%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: 0;
        bottom: -330px;
        opacity: 0.10;
    }

    .gradient-circle-left {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -490px;
        top: 1300px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .gradient-circle-right {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -579px;
        top: 1808px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .blue-small-banner {
        width: 100%;
        background: #007FC6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        min-height: 178px;
        z-index: 1;
    }

    .blue-small-banner__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex: 0 1 auto;
        z-index: 2;
    }

    .blue-small-banner-nav {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .blue-small-banner img {
        width: 590px;
        height: 178px;
        opacity: 0.2;
        object-fit: cover;
        object-position: center bottom;
    }

    .search-close-button-container {
        display: flex;
        min-height: 24px;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 24px;
    }

    .search-close-button {
        background: transparent;
        border: transparent;
    }

    .search-close-button img {
        min-width: 24px;
        min-height: 24px;
    }

    .search-box-container {
        position: relative;
        z-index: 9999;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        padding: 16px 40px;
        min-height: 420px;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%);
        backdrop-filter: blur(12px);
    }

    .search-box-container__vector {
        position: absolute;
        right: 5px;
        bottom: 0;
        width: 100%;
        /* ปรับตามดีไซน์ — SVG กว้าง 739px */
        max-width: 735px;
        height: auto;
        margin: 0;
        opacity: 0.15;
        /* หรือ 0.2 ให้ใกล้ banner */
        object-fit: contain;
        object-position: right bottom;
        z-index: 0;
        pointer-events: none;
    }

    /* ให้เนื้อหาอยู่เหนืารูป */
    .search-close-button-container,
    .search-box-field,
    .search-word-wrapper {
        position: relative;
        z-index: 1;
    }

    .search-box-field {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 0 0 16px 0;
        border: 1px solid #E2E2E2;
        background: #FFF;
    }

    .search-box-field:focus-within {
        border-color: #007FC6;
        /* แทน .search-box-input:focus */
    }

    .search-box-field-input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: transparent;
        outline: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .search-word-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 48px;
    }

    .search-word-recommend {
        display: flex;
        flex-direction: column;
        align-items: start;
        align-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .search-result-content {
        margin-left: auto;
        margin-right: auto;
        height: 100%;
        position: relative;
        z-index: 2;
    }

    .search-result-container {
        display: flex;
        padding: 12px 16px;
        align-items: center;
        gap: 10px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: 4px;
        border: 1px solid #007FC6;
        background: #FFF;
    }

    .search-result-container__query {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-result-query-filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .search-result-query-filter-wrapper-item {
        display: flex;
        align-items: center;
    }

    .search-result-filter-container {
        display: flex;
        padding: 8px 8px 8px 16px;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
    }

    .search-result-card {
        display: flex;
        padding: 24px;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
        border-radius: 0 0 40px 0;
        border: 1px solid #D8D8D8;
        background: #FFF;
    }

    .search-result-card-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
    }

    .search-result-card-image {
        position: relative;
        flex-shrink: 0;
    }

    .search-result-card-image .search-result-card-image-img {
        aspect-ratio: 1/1;
        width: 250px;
        height: 250px;
        object-fit: cover;
        border-radius: 0 0 32px 0;
    }

    .search-result-batt-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        flex: 1 0 0;
    }

    .search-result-battery-wrapper {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16px;
        align-self: stretch;
    }

    .search-result-contact-btn-group {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .search-batt-category-btn {
        background-color: #fff;
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 0;
        color: #80A700;
        border: 1px solid #80A700;
    }

    .search-result-batt-spec-wrapper {
        display: flex;
        align-items: flex-start;
    }

    .search-result-batt-spec-wrapper-item {
        display: flex;
        min-width: 80px;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid #D8D8D8;
        padding: 0 8px;
        gap: 8px;
    }

    .search-result-batt-spec-wrapper-item:first-child {
        padding-left: 0;
    }

    .search-result-batt-spec-wrapper-item:last-child {
        border-right: none;
    }

    .search-result-card-badge {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 128px;
        /* ปรับตามดีไซน์ — SVG ต้นฉบับ 128px */
        min-height: 128px;
        pointer-events: none;
        z-index: 2;
    }


    .search-result-contact-btn {
        background-color: #fff;
        display: flex;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }


    .search-btn-tag-activities {
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        background-color: white;
        border: 1px solid #007FC6;
        color: #007FC6;
        font-size: 14px;
    }


    .header-search-panel {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 9999;
        padding: 0 64px;
    }

    .header-search-panel-sticky {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 9999;
        padding: 0 64px;
    }

    .header-search-panel.is-open {
        display: block;
    }

    .header-search-panel-sticky.is-open {
        display: block;
    }

    .header-search-panel::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 0;
    }

    .header-search-panel-sticky::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 0;
    }

    .header-batt-search {
        display: none;
        position: fixed;
        top: 110px;
        left: 0;
        right: 0;
        z-index: 60;
    }

    .header-batt-search-panel {
        position: relative;
        z-index: 9999;
        width: min(1257px, calc(100% - 120px));
        min-height: 241px;
        margin-left: auto;
        margin-right: min(64px, calc(100% - 64px));
        ;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 0 0 24px 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(12px);
    }

    .text-batt-search-title {
        color: #A6A6A6;
        font-weight: 700;
        margin-left: 16px;
        margin-top: 16px;
    }

    .header-batt-search-panel-sub-item-wrapper {
        display: flex;
        padding: 24px 16px;
        align-items: stretch;
        gap: 24px;
        align-self: stretch;
    }

    .header-batt-search-selector-wrapper {
        display: flex;
        width: 245px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-batt-search-selector-container {
        display: flex;
        width: 245px;
        padding: 8px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border-radius: 8px;
        cursor: pointer;
    }

    .header-batt-search-selector-container.is-active {
        background: #007FC6;
        color: #FFF;
    }

    .header-batt-search-selector-container:hover {
        background: #E6EFF7;
        transition: opacity 0.25s ease;
    }

    .header-batt-search-selector-container:hover img {
        filter: brightness(0);
    }

    .header-batt-search-selector-container.is-active:hover {
        background: #007FC6;
        color: #FFF;
    }

    .header-batt-search-selector-container.is-active:hover img {
        filter: none;
    }


    .header-batt-search-panel-sub-item-seperator {
        width: 1px;
        align-self: stretch;
        /* ยืดเต็มความสูงแถว */
        background: #C5C5C5;
        flex-shrink: 0;
    }

    .header-batt-search-category-container {
        width: 100%;
        /* เต็ม cell (cell ไม่เกิน 300 อยู่แล้ว) */
        min-width: 0;
        max-width: 300px;
        box-sizing: border-box;
        height: 138px;
        border-radius: 8px;
        background: #E6EFF7;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
    }

    .header-batt-search-category-container img {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: auto;
        max-width: none;
        object-fit: cover;
        object-position: right center;
    }

    .batt-type-img {
        max-width: 206px;
        height: 89px;
        flex-shrink: 0;
        aspect-ratio: 206/89;
        display: block;
        position: absolute;
        right: 16px;
        top: 36px;
        object-fit: cover;
        object-position: right center;
    }

    .header-batt-search-category-container:hover {
        color: #FFF;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transition: opacity 0.25s ease;
    }

    .header-barr-search-category-text {
        margin-top: 16px;
        margin-left: 16px;
        width: 35%;
        min-width: 0;
    }

    .header-batt-search-category-content {
        flex: 1;
        min-width: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(min(180px, 100%), 300px));
        gap: 16px;
        justify-content: start;
        gap: 16px;
    }

    .header-batt-search-category-content[hidden] {
        display: none !important;
    }

    .product-pass-hero {
        position: relative;
        z-index: 16;
        margin-top: -124px;
        isolation: isolate;
    }

    .product-pass-hero img {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        z-index: 0;
    }

    .product-header-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 1440px;
        box-sizing: border-box;
        padding-left: 64px;
        padding-right: 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        z-index: 2;
    }

    .product-banner-nav {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .product-banner-header-margin {
        margin-top: 75px;
        margin-left: 0;
    }

    .product-banner-text-h1 {
        font-size: 48px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .product-list-layout {
        display: flex;
        width: 100%;
        align-items: stretch;
        background: #fff;
    }

    .product-filter-column {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        height: 100%;
        width: 398px;
        padding-top: 66px;
        flex-shrink: 0;
        background: #EBF8FF;
    }

    .product-filter-header-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: flex-start;
    }

    .product-filter-content {
        display: flex;
        flex-direction: column;
        padding: 16px 28px;
        align-items: stretch;
        gap: 16px;
    }

    .product-filter-search {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        height: 40px;
        padding: 16px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-radius: 0 0 16px 0;
        color: rgba(40, 40, 40, 0.5);
        background: #FFF;
    }

    .product-filter-box {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.30);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
    }

    .product-filter-box-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        width: 100%;
        min-width: 0;
    }

    .product-filter-select select {
        color: #282828;
    }

    /* รายการใน dropdown — ค่าจริงเป็นดำ */
    /* .product-filter-select select option {
        color: #282828;
        background-color: #fff;
    }

    /* แถว placeholder ใน list — ขาว (เหมือนเดิม / กลมกลืนพื้นขาว) */
    /* .product-filter-select select option[value=""] {
        color: #fff;
    } */

    .product-list-container {
        display: flex;
        width: 100%;
        padding: 80px 64px 80px 24px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 24px;
    }

    .product-filter-box-selector {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 16px;
        width: 100%;
        min-width: 0;
        align-self: stretch;
        box-sizing: border-box;
    }

    .product-filter-box-selector .product-filter-box-text {
        min-width: 0;
        width: 100%;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .product-filter-box-selector .btn-search-gradient-2 {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .product-filter-box-text {
        display: flex;
        min-width: 154px;
        color: #a6a6a6;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .product-expanded-vehicle-filter-box .product-filter-box-body,
    .product-expanded-battery-filter-box .product-filter-box-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .product-filter-sub-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .product-filter-batt-type {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .product-filter-batt-type-container {
        display: flex;
        padding: 13px 8px;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        background-color: white;
        border-radius: 0 0 16px 0;
        width: 100%;
        height: auto;
    }

    .product-filter-batt-name {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 8px;
    }

    .product-batt-genre-wrapper {
        display: flex;
        align-items: center;
        align-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        flex-wrap: wrap;
    }

    .product-batt-genre-container {
        display: flex;
        max-width: 100%;
        min-width: 0;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        border-radius: 0 0 16px 0;
        background: #FFF;
        gap: 8px;
    }

    .product-batt-genre-container .body1 {
        min-width: 0;
        word-break: break-word;
    }

    .product-filter-batt-type-container,
    .product-batt-genre-container {
        cursor: pointer;
    }

    .product-filter-batt-type-container.is-active {
        background: var(--Primary, #007FC6);
        color: white;
    }

    .product-batt-genre-container.is-active {
        background: var(--Primary, #007FC6);
        color: white;
    }

    .product-filter-select {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.08);
    }

    .product-filter-select select {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;

        font-size: 16px;
        line-height: 24px;
        color: #282828;
        cursor: pointer;
        padding-right: 8px;
    }

    .product-filter-select img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        pointer-events: none;
    }

    .product-filter-select--stacked {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filter-select-car__trigger {
        display: flex;
        flex: 1;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .filter-select-car {
        position: static;
        width: 100%;
        /* ชิดใต้กล่องขาว */
        left: 0;
        right: 0;
        z-index: 20;
        margin-top: 4px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        border-radius: 4px;
        background: #FFF;
        box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.14);

    }

    .filter-select-car-item-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 24px;
        align-self: stretch;
    }

    .filter-select-car-item-image {
        display: flex;
        width: 24px;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: contain;
    }

    .filter-select-car-item-image img {
        display: flex;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .filter-select-car-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .filter-select-car {
        margin-top: 8px;
        /* หรือ 0 ถ้าอยากติดกับกล่องบน */
    }

    .filter-select-sub__trigger,
    .filter-select-brand__trigger {
        display: flex;
        flex: 1;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .filter-select-sub-group,
    .filter-select-brand-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .filter-select-sub-panel,
    .filter-select-brand-panel {
        width: 100%;
        margin-top: 8px;
        border-radius: 0 0 4px 4px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
        display: flex;
        flex-direction: column;
        max-height: 320px;
        position: relative;
        z-index: 10050;
    }

    .filter-select-sub-panel__header,
    .filter-select-sub-panel__footer,
    .filter-select-brand-panel__header,
    .filter-select-brand-panel__footer {
        flex-shrink: 0;
        padding: 8px 16px;
        background: #F8F8F8;
        color: var(--Primary, #007FC6);
    }

    .filter-select-sub-panel__list,
    .filter-select-brand-panel__list {
        flex: 1;
        min-height: 0;
        max-height: 230px;
        border-radius: 0 0 4px 4px;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: #00B6F1 #F5F5F5;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar,
    .filter-select-brand-panel__list::-webkit-scrollbar {
        width: 8px;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar-track,
    .filter-select-brand-panel__list::-webkit-scrollbar-track {
        background: #F5F5F5;
        border-radius: 999px;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar-thumb,
    .filter-select-brand-panel__list::-webkit-scrollbar-thumb {
        background: #007FC6;
        border-radius: 999px;
    }

    .filter-select-sub-item,
    .filter-select-brand-item {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 14px 16px;
        cursor: pointer;
    }

    .filter-select-sub-item:hover,
    .filter-select-sub-item.is-active,
    .filter-select-brand-item:hover,
    .filter-select-brand-item.is-active {
        background: #F1F1F1;
    }

    .product-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* 3 คอลัมน์ */
        gap: 24px;
    }

    .product-grid-item {
        display: block;
    }

    .product-filter-2-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .product-filter-2-sub-wrapper {
        display: flex;
        align-items: center;
        gap: 0px;
        align-self: stretch;
    }

    .product-filter-2-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .pagination-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    .pagination-prev-button {
        display: flex;
        width: 52px;
        height: 52px;
        padding: 24px 16px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        aspect-ratio: 1/1;
        border-radius: 0 0 0 16px;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-next-button {
        display: flex;
        width: 52px;
        height: 52px;
        padding: 24px 16px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        aspect-ratio: 1/1;
        border-radius: 0 0 16px 0;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-number-button-wrapper {
        display: flex;
        align-items: center;
        gap: 0px;
    }

    .pagination-number-button {
        width: 52px;
        height: 52px;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #9E9E9E;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-number-button-wrapper .pagination-number-button:not(:last-child) {
        margin-right: 8px;
    }

    .pagination-number-button.is-active {
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--Primary, #007FC6);
        color: #fff;
    }

    .compare-product-main-wrapper {
        display: flex;
        flex-direction: row;
        gap: 0px;
    }

    .compare-product-header-wrapper {
        display: flex;
        width: 28%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0px;

    }

    .compare-product-box-wrapper {
        padding: 27px 30px;
        width: 27.5%;
        position: relative;
        overflow: hidden;
        background: #F8F8F8;
        z-index: 0;
    }

    .compare-product-btn-close {
        width: 24px;
        height: 24px;
        aspect-ratio: 1 / 1;
    }


    .compare-product-box-content .compare-product-btn-close {
        position: absolute;
        top: 27px;
        right: 30px;
        z-index: 3;
        cursor: pointer;
    }


    .compare-product-gradient-background {
        position: absolute;
        width: 614px;
        height: 614px;
        aspect-ratio: 1/1;
        border-radius: 614px;
        background: radial-gradient(46.98% 46.98% at 51.68% 53.05%, rgba(230, 248, 254, 0.50) 0%, rgba(181, 234, 252, 0.00) 87.5%);
        top: 80%;
        transform: translate(-50%, -50%);
        z-index: -1;
        pointer-events: none;
    }

    .compare-product-img-container {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        background: #E9E9E9;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        overflow: hidden;
    }

    .compare-product-img-container-have-img>img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        /* ถ้าอยากเต็มกรอบแบบ crop ใช้ cover */
        display: block;
    }

    .compare-product-add-image-text {
        color: var(--Primary, #007FC6);
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .compare-product-table-header {
        width: 100%;
        height: 81px;
        padding: 0px 26px;
        display: flex;
        align-items: center;
        background: var(--BG-Light, #EBF8FF)
    }

    .compare-product-table-body {
        border-bottom: 1px solid #DEE2E6;
    }

    .compare-product-two-col {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
    }

    .compare-product-two-col-left {
        display: flex;
        align-items: center;
        flex-direction: row;
        align-self: stretch;
        gap: 0px;
        width: 25%;
        min-width: 0;
        padding: 8px;
    }

    .compare-product-two-col-right-prodcut-spec {
        display: flex;
        align-items: center;
        align-self: stretch;
        border-left: 1px solid #DEE2E6;
        flex: 1;
        min-width: 0;
        padding: 8px;
    }

    .compare-product-two-col-left-text {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .compare-product-two-col:nth-child(even) {
        background-color: #F9FAFB;
    }

    /* หรือเฉพาะซ้าย */
    .compare-product-two-col:nth-child(even) .product-detail-two-col__left {
        background-color: #F9FAFB;
    }

    .compare-product-modal-overlay.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }

    /* panel ขวา — ไม่ใช่ flex center */
    .compare-product-modal-shell.is-open {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 89vw;
        z-index: 10001;
        overflow: hidden;
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        transform: translateX(0);
        transition: transform 0.3s ease;
    }

    .compare-product-search-batt-wrapper {
        display: flex;
        width: 89vw;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 24px 60px;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .compare-product-search-box-wrapper {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }

    /* Homepage hero search tabs */
    .compare-product-search-batt-wrapper .tabbable-panel {
        display: flex;
        max-width: 1313px;
        width: 100%;
        margin-left: auto;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
    }

    .compare-product-search-batt-wrapper .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .compare-product-search-batt-wrapper .nav-tabs-container-item:last-child {
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
    }


    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        gap: 8px;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(166, 166, 166, 0.10);
        backdrop-filter: blur(12px);
        box-shadow: none;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        cursor: pointer;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        color: #007FC6 !important;
        border-bottom: 0;
        background: #EBF8FF;
        backdrop-filter: blur(12px);
    }

    .compare-product-search-batt-wrapper .btn-wrapper-search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }


    .compare-product-modal-input-box-search {
        height: 188px;
        width: 100%;
        padding: 25px 15px;
        border-radius: 0 0 24px 0;
        border-top: 1px solid #007FC6;
        background: transparent;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        isolation: isolate;
    }

    .compare-product-modal-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .compare-product-modal-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 0 0 24px 0;
        background: #EBF8FF;
        pointer-events: none;
        z-index: 0;
    }

    .compare-product-modal-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .compare-product-modal-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .compare-product-modal-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .compare-product-modal-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 24px;
        width: 100%;
        min-width: 0;
    }

    .compare-product-modal-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        box-sizing: border-box;
        cursor: pointer;
        flex: none;
        align-self: stretch;
        overflow: hidden;
    }

    .compare-product-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }


    #compare-product-modal .compare-product-modal-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    #compare-product-modal .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    #compare-product-modal .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    .compare-product-btn-main {
        display: inline-flex;
        min-width: 180px;
        width: auto;
        padding: 8px 16px;
        margin-right: 16px;
        align-items: center;
        gap: 16px;
        border-radius: 8px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
        cursor: pointer;
    }

    .compare-product-btn-main-icon {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 0.6px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
    }


    .compare-product-product-selected-banner {
        display: none;
        width: 100%;
        height: 100px;
        padding: 16px 103.5px 16px 72.5px;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        background: linear-gradient(270deg, #00B6F1 0%, #005BAA 100%);
    }

    .compare-product-product-selected-banner.is-visible {
        display: flex;
    }

    .compare-product-product-selected-banner:not(.has-items) .compare-product-product-selected-item-wrapper.is-open {
        display: none;
    }

    .compare-product-product-selected-banner.has-items .compare-product-product-selected-item-wrapper.is-empty {
        display: none;
    }

    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper {
        width: 100%;
    }

    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper.is-open,
    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: none;
    }

    /* มีรายการปกติ */
    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-open {
        display: flex;
    }

    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-empty,
    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: none;
    }

    /* no-mapping */
    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
    }

    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-empty,
    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-open {
        display: none;
    }

    .compare-product-product-selected-open-title.is-open {
        margin-right: auto;
        flex-shrink: 0;
        min-width: 152px;
    }

    body.product-list-compare-active .compare-product-btn-2.is-not-selected {
        display: flex;
    }

    body.product-list-compare-active {
        padding-bottom: 100px;
    }

    .compare-product-product-selected-item-wrapper.is-open {
        display: flex;
        width: 100%;
        min-width: 0;
        height: 68px;
        padding-bottom: 8px;
        justify-content: flex-end;
        align-items: center;
        gap: 24px;
        flex-shrink: 1;
    }

    .compare-product-product-selected-item-wrapper.is-empty {
        display: flex;
        width: 100%;
        height: 68px;
        align-items: center;
        justify-content: space-between;
    }

    .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
        width: 100%;
        height: 68px;
        align-items: center;
        justify-content: space-between;
    }


    .compare-product-product-selected-item-sub-wrapper.is-no-mapping {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .compare-no-related-title {
        color: #fff;
        font-weight: 700;
        line-height: 1.3;
    }

    .compare-no-related-desc {
        color: #fff;
        opacity: 0.95;
        line-height: 1.4;
    }

    .compare-product-product-selected-item-blue-container-wrapper {
        display: flex;
        align-items: center;
        gap: 24px;
        flex: 1 1 0;
        min-width: 0;
    }

    .compare-product-product-selected-item-blue-container {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        max-width: 241px;
        height: 43px;
        padding: 8px 16px;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        box-sizing: border-box;
        border-radius: 0 0 24px 0;
        background: #00B6F1;
    }

    .compare-product-product-selected-item-blue-container>span {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .compare-product-product-selected-item-close-btn {
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper.is-empty,
    .compare-product-product-selected-btn-wrapper.is-no-mapping {
        margin-left: 0;
        flex-shrink: 0;
    }

    .compare-selected-empty {
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper {
        margin-left: 25px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .compare-product-product-selected-btn-wrapper>.btn-view-more-2 {
        min-width: 176px;

    }

    .compare-product-product-selected-item-close-btn img {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
    }


    .dealer-store-layout {
        position: relative;
        margin-left: 64px;
        margin-right: 64px;
        /* สูงกว่า .product-pass-hero (16) */
    }

    .dealer-store-text-align {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .dealer-store-subtitle-text {
        color: #6D6D6D;
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .dealer-store-search-container {
        display: flex;
        width: 100%;
        position: relative;
        z-index: 20;
        margin-top: -72px;
        padding: 48px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
        border-radius: 0 0 48px 0;
        background: var(--BG-Light, #EBF8FF);
        box-shadow: 0 0 30px 0 rgba(56, 56, 56, 0.12);
    }

    .dealer-store-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-dropdown>.dealer-store-input-box-search-main-wrapper {
        flex: 1;
        /* กล่องทั่วไป */
        min-width: 0;
    }

    .dealer-store-input-box-search-dropdown>.dealer-store-input-box-search-main-wrapper:first-child {
        flex: 1.4091;
        /* กล่องแรกยาวกว่า (2 เท่า) */
    }

    .dealer-store-input-box-search-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .dealer-store-input-box-search-main-wrapper .select-search-car,
    .dealer-store-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-main-wrapper .select-search-car select,
    .dealer-store-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    .dealer-store-input-box-search .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    .dealer-store-input-box-search .wd-input-box-search-wrapper {
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    .dealer-store-input-box-search .btn-wrapper-search {
        position: relative;
        z-index: 1;
    }

    .dealer-store-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        cursor: pointer;
        box-sizing: border-box;
    }

    .dealer-store-input-box-search .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    /* อันแรก — ยืดกินพื้นที่ที่เหลือ */
    .dealer-store-text-sort-wrapper>h2 {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    /* อันสอง — กว้างตาม content */
    .dealer-store-sort-sub-wrapper {
        display: flex;
        align-items: center;
        align-self: stretch;
        width: fit-content;
        /* override align-self: stretch จาก rule ทั่วไป */
    }

    .dealer-store-sort-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .dealer-store-text-sort-wrapper {
        display: flex;
        width: 100%;
        padding-bottom: 24px;
        justify-content: start;
        align-items: stretch;
        gap: 35px;
    }

    .dealer-store-card-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 24px;
    }

    .dealer-store-card-container {
        display: flex;
        width: 100%;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
        border-radius: 0 0 48px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        cursor: pointer;
    }

    .dealer-store-card-container:hover {
        background: var(--BG-Light, #EBF8FF);
    }

    .dealer-store-card-header-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }

    .dealer-store-card-header-wrapper img {
        width: 100%;
        height: auto;
        max-width: 87px;
        max-height: 87px;
        aspect-ratio: 1/1;
    }

    .dealer-store-card-header-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        flex: 1 0 0;
    }

    .dealer-store-card-header-province-container {
        display: flex;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid rgba(210, 210, 210, 0.87);
        background: var(--BG-Light, #EBF8FF)
    }

    .dealer-store-card-header-province-container img {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }

    .dealer-store-card-content-seperator {
        width: 100%;
        height: 1px;
        opacity: 0.5;
        background: #9E9E9E;
    }

    .dealer-store-card-contact-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .dealer-store-card-contact-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-card-contact-container img {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .dealer-store-search-container .btn-wrapper-search {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
    }

    .dealer-store-search-form {
        cursor: default;
        gap: 8px;
    }

    .dealer-store-search-input {
        flex: 1;
        min-width: 0;
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: #282828;
    }

    .dealer-store-search-input::placeholder {
        color: #A6A6A6;
    }

    .dealer-store-search-submit {
        display: flex;
        flex-shrink: 0;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    .dealer-store-pop-up-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .dealer-store-pop-up-overlay.is-hidden,
    .dealer-store-pop-up-container.is-hidden {
        display: none;
    }

    .dealer-store-pop-up-container {
        display: flex;
        flex-direction: row;
        padding: 40px;
        align-items: center;
        gap: 24px;
        border-radius: 12px;
        background: #FFF;
        max-width: 100%;
        width: 885px;
    }

    .dealer-store-pop-up-image {
        width: 100%;
        max-width: 362px;
        max-height: 362px;
        aspect-ratio: 1/1;
        border-radius: 0 0 48px 0;
        overflow: hidden;
        flex-shrink: 0;
    }

    .dealer-store-pop-up-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 48px 0;
    }

    .dealer-store-pop-up-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .dealer-store-pop-up-text-detail-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .dealer-store-text-detail-contact-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-sub-input-box-search.filter-select-sub__trigger {
        max-height: 40px;
    }

    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 100%;
        z-index: 10050;
    }

    .wrapper-404 {
        width: 100%;
        max-width: 100%;
        display: flex;
        height: 610px;
        align-items: center;
        gap: 80px;
        justify-content: center;
    }

    .wrapper-404-end {
        margin-right: auto;
    }

    .wrapper-404-image img {
        aspect-ratio: 1/1;
        width: 545px;
        height: 545px;
        object-fit: cover;
    }

    .wrapper-404-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
    }

    .a-text-size {
        margin-left: 50px;
    }

    .box-call-138 {
        position: fixed;
        top: 386px;
        right: 16px;
    }

    .image-gsbattery {
        margin-top: 30px;
        max-width: 100%;
        max-height: 535px;
    }

    .tabbable-line>.nav-tabs>li {
        margin: 0 122px;
    }

    .career-bg {
        height: 480px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 20px;
    }

    .box-radis-des-sales::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #005BAA;
        position: absolute;
        margin-top: 7px;
    }

    .box-radis-des-sales {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #00B6F1;
        position: absolute;
        margin-top: 7px;
    }

    .ma-bottom-20 {
        margin-bottom: 20px;
    }

    .box-radis-sale {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-sale::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #005BAA;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .box-radis-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-batt::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #00B6F1;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .display-destop {
        display: block;
    }

    .display-mobile {
        display: none;
    }

    .box-chage-lang {
        margin-top: -35px;
        margin-right: -17px;
    }

    .line-abt-verticle {
        background-color: #005BAA;
        width: 83%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .line-abt-verticle2 {
        background-color: #005BAA;
        width: 67%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .margin-abt-timeline {
        margin-top: 30px;
    }

    .bg-color-footer {
        height: 20px;
        background-color: #005BAA;
    }

    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .pad-left {
        padding-left: 20px;
    }

    .bg-footer {
        background-color: #EBF8FF;
        width: 100%;
        height: auto;
    }

    .box-text-activities {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .border-bottom-new-act {
        width: 155px;
        height: 4px;
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
    }

    .sub-new-des {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin-top: 0px;
        margin-bottom: 24px;
    }

    .select-search-model select {
        display: flex;
        appearance: none;
        width: 100%;
        max-width: 249px;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
        box-sizing: border-box;
    }

    .select-search-car select {
        display: flex;
        appearance: none;
        width: 100%;
        max-width: 249px;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
        box-sizing: border-box;
    }

    .img-box-home-row {
        position: relative;
        display: flex;
        /* ← เพิ่ม */
        align-items: stretch;
    }

    .img-box-home-row-2 {
        position: relative;
        display: flex;
        /* ← เพิ่ม */
        align-items: stretch;
    }

    /* แถวที่ 2: รูปขวา skew ทับกล่องข้อความซ้าย — ยก z-index คอลัมน์ข้อความ */
    .img-box-home-row:has(.img-box-home-container-right)>.pdd-left {
        position: relative;
        z-index: 2;
    }

    .img-box-home-row:has(.img-box-home-container-right)>.pdd-right {
        position: relative;
        z-index: 1;
    }

    .img-box-home-tough {
        position: absolute;
        bottom: 0;
        left: 4%;
        width: clamp(300px, 18vw, 350px);
        /* ปรับตามดีไซน์ */
        height: auto;
        pointer-events: none;
        z-index: 2;
        object-fit: contain;
        object-position: left bottom;
    }

    .img-box-home-container {
        height: 431px;
        width: 89.065%;
        position: relative;
        overflow: hidden;
        left: 12%;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
    }

    .img-box-home-container-right {
        height: 431px;
        width: 89%;
        position: relative;
        overflow: hidden;
        right: 5%;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
    }

    .img-box-home {
        position: absolute;
        top: 0;
        left: -12%;
        width: 150%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .column-description-container-right {
        position: relative;
        overflow: visible;
        display: flex;
        right: 8%;
        margin-top: 63px;
        width: 625px;
        padding: 40px 40px 56px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .column-description-container-left {
        position: relative;
        /* ต้องมี position ถึงจะใช้ z-index ได้ */
        z-index: 1;
        display: flex;
        left: 6%;
        margin-top: 63px;
        width: 625px;
        padding: 40px 40px 56px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .btn-view-more {
        z-index: 2;
        bottom: 24px;
        display: inline-flex;
        height: 48px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #00B6F1;
        background: #007FC6;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .btn-view-more-left {
        left: 380px;
    }

    .btn-view-more-right {
        left: 70px;
    }

    .btn-view-more::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .btn-view-more:hover::after {
        opacity: 1;
    }

    .btn-view-more-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        padding: 0 24px;
        gap: 8px;
        z-index: 3;
        border-radius: 0 0 16px 0;
        border: 1px solid var(--Primary, #007FC6);
        background: #FFF;
        color: #007FC6;
        text-decoration: none;
        transition: background 0.25s ease, color 0.25s ease;
    }

    .btn-view-more-2:hover {
        background: #007FC6;
        color: #fff !important;
    }

    .btn-view-more-2:hover img {
        filter: brightness(0) invert(1);
    }

    .sub-banner-container {
        display: grid;
        position: relative;
        overflow: hidden;
        margin-top: 80px;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        height: auto;
    }

    .sub-banner-container>img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: bottom;
        z-index: 0;
    }

    .sub-banner-content {
        position: relative;
        justify-self: center;
        align-self: start;
        display: flex;
        width: 100%;
        max-width: 1440px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding-left: 64px;
        padding-right: 64px;
        padding-top: 95px;
        padding-bottom: 106px;
        z-index: 1;
    }

    .sub-banner-grid-2x3 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 16px;
    }

    .sub-banner-box {
        display: flex;
        width: 398px;
        height: auto;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        border: 0.5px solid rgba(255, 255, 255, 0.70);
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .batt-long-time {
        margin: 20px 0px;
    }

    .text-colo-link {
        color: #005BAA;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 168px;
    }

    .img-box-fing-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 556px;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
    }

    .select-box select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #005BAA;
        padding: 4px 10px;
        width: 96px;
    }

    .select-box select:active,
    select:hover {
        outline: none;
    }

    /*  start Contact page  */
    .text-contact-header {

        color: #000000;
        font-size: 30px;
        line-height: 45px;
        font-weight: 500;
    }

    .text-contact-h-main {

        color: #005BAA;
        font-size: 35px;
        line-height: 40px;
        font-weight: 500;
    }

    .request-select {
        color: #F00 !important;
    }

    .margin-top-input {
        margin-top: 50px;
        padding-top: 30px;
    }

    /* End Contact page  */
    /* find batt type page  */
    .nav-padding {
        margin-left: 222px;
        margin-right: 50px;
    }

    .position-type {
        position: absolute;
        top: 151px;
        left: 50px;
    }

    .text-batt-name {

        font-size: 30px;
        line-height: 55px;
        color: #00B6F1;
        font-style: italic;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .batt-type {

        font-size: 72px;
        line-height: 55px;
        color: #005BAA;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .detail-title {

        font-size: 73px;
        line-height: 50px;
        color: #fff;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .sub-batt-type {

        font-size: 30px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        margin-bottom: 20px;
    }

    /* end find batt type page  */
    /* career page  */
    .box-name-position {
        background-color: #005BAA;
        height: 70px;
    }

    /* end career page  */
    /* about us page  */
    .abt-img {
        width: 100%;
        height: 359px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .text-abt {

        color: #646464;
        font-size: 24px;
        line-height: 55px;
        font-weight: 500;
    }

    .box-content-abt {
        padding-left: 50px;
    }

    .text-name-building {

        color: #000;
        font-size: 40px;
        line-height: 46px;
        font-weight: 500;
    }

    .line-abt {
        background-color: #005BAA;
        width: 4px;
        height: 520px;
        position: absolute;
        top: 8px;
        left: 13px;
    }

    .line-abt-2 {
        background-color: #005BAA;
        width: 4px;
        height: 507px;
        position: absolute;
        left: 12px;
    }

    .text-year-abt {

        color: #005BAA;
        font-size: 30px;
        line-height: 45px;
        font-weight: 500;
    }

    .text-h-abt {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
    }

    .text-h-abt-detail {

        color: #000000;
        font-size: 14px;
        line-height: 24px;
    }

    .mar-top-box-history {
        margin-top: 50px;
    }

    .padding-top-abt {
        margin-top: 45px;
    }

    .text-job-position {
        color: #FFFFFF;
        font-size: 20px;
        line-height: 30px;

    }

    .short-full {
        color: #fff;
        font-size: 14px;
    }

    .data-abt-h-text {

        color: #005BAA;
        font-size: 36px;
        line-height: 55px;
    }

    .sub-data-abt-h-text {

        color: #646464;
        font-size: 24px;
        line-height: 1.5;
    }

    .margin-top-abt {
        margin-top: 60px;
    }

    .text-detail-abt-h {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
        padding-right: 50px;
    }

    .text-h-abt-gs {

        color: #000000;
        font-size: 30px;
        line-height: 55px;
        margin-bottom: 20px;
    }

    /* end about us page  */
    .margin-space-banner {
        margin-top: 10px;
    }

    .img-bg-footer {
        position: absolute;
        margin-top: 20px;
        right: 0;
        bottom: 0;
    }

    .padding-top-footer-right {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .footer-main-wrapper {
        display: flex;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
        gap: 120px;
        box-sizing: border-box;
    }

    .contact-footer-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
    }

    .contact-footer-container {
        display: flex;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        border: 1px solid #00B6F1;
        width: fit-content;
    }

    .contact-footer-icon-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    .contact-footer-icon {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .link-footer-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 813px;
        gap: 24px;
    }

    .link-footer-sub-wrapper-upper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 74px;
        align-self: stretch;
    }

    .link-footer-sub-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 74px;
        align-self: stretch;
    }

    .link-footer-sub-wrapper-item {
        display: flex;
        flex-direction: column;
        width: 202px;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .link-footer-shop-container {
        display: flex;
        padding: 8px 16px;
        width: 261px;
        gap: 24px;
        align-self: stretch;
        align-items: center;
        flex-direction: row;
        border-radius: 8px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
    }

    .link-footer-shop-container .text-link-footer {
        white-space: nowrap;
    }

    .bottom-footer-wrapper {
        display: flex;
        padding: 24px 64px;
        align-items: center;
        flex-direction: row;
        gap: 40px;
        background: #FFF;
    }

    .text-link-footer {

        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #231F20;
    }

    .text-detail-reserved {

        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #231F20;
        text-align: start;
    }

    .img-footer-logo {
        height: 66px;
    }

    .contact-text-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
    }

    .text-detail-footer {

        font-size: 14px;
        line-height: 1.5;
        color: #231F20;
        padding-top: 8px;
        margin-bottom: 8px;
    }

    .text-address-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .padding-top-footer {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .navbar-main-background {
        position: relative;
        z-index: 60;
    }

    .navbar-fixed {
        width: 100%;
        max-width: 100%;
        padding: 16px 0;
        box-sizing: border-box;
        position: relative;
    }

    .navbar-fixed-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 64px;
        box-sizing: border-box;
        gap: 16px;
    }

    .nav-solid {
        background-color: #007FC6;
    }

    .nav-main-sub-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: auto;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-main-sub-wrapper>.nav-main-sub-wrapper-item {
        display: flex;
        padding: 0 8px 0 24px;
        min-height: 40px;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    .nav-main-sub-wrapper>.nav-main-sub-wrapper-item>.nav-main-sub-wrapper-item {
        display: flex;
        padding: 0 16px;
        justify-content: center;
        align-items: center;
        align-self: center;
        min-height: 40px;
    }

    .nav-main-sub-wrapper-item-lower {
        display: flex;
        height: 40px;
        padding: 0 16px 0 8px;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        background: rgba(255, 255, 255, 0.20);
        backdrop-filter: blur(12px);
    }

    .nav-main-sub-wrapper-sub-item-lower {
        padding: 8px 16px;
        gap: 8px;
    }


    .navbar-sticky-revamp.navbar-fixed-top {
        z-index: 60;
    }

    .navbar-sticky-revamp.navbar-default {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
        width: 50%;
        min-width: 760px;
        margin: 0 auto;
        padding: 0 32px;
        border: none;
        border-radius: 0 0 15px 0;
        background: linear-gradient(180deg, rgba(0, 144, 224, 0.95) 0%, rgba(0, 127, 198, 0.95) 100%);
        box-shadow: 0 8px 32px 0 rgba(27, 100, 171, 0.30);
        backdrop-filter: blur(12px);
    }

    .navbar-sticky-revamp.navbar-sticky-revamp--en.navbar-default {
        width: 55%;
    }

    .navbar-sticky-revamp.navbar-default .nav-desk-top {
        display: flex;
        align-items: center;
        gap: 40px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* heder main  */
    .box-top-green {
        background-color: #C7EB02;
        width: 128px;
        height: 14px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 7px;
    }

    .position-btn-typ-batt {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: 0;
    }

    .text-logo {
        font-size: 73px;
        line-height: 50px;
    }

    .text-detail-type-battery {

        font-size: 16px;
        line-height: 25px;
        color: #fff;
        padding-top: 10px;
        padding-left: 40px;
        padding-right: 40px;
    }

    .box-top-orang {
        background-color: #FF9300;
        width: 128px;
        height: 14px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 7px;
    }

    .box-top-blue {
        background-color: #00AAE8;
        width: 128px;
        height: 14px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 7px;
    }

    .title-news {

        font-size: 20px;
        line-height: 1.25;
        font-weight: 600;
    }

    .tag-news-type {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .btn-tag-tip {
        background-color: #00B6F1;
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }




    .btn-tag {
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }

    .btn-page-banner {
        background-color: white;
    }

    .date-news {
        color: #999;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.25;
    }

    .select-box {
        margin-top: -31px;
        margin-right: 57px;
        ;
    }

    .margin-top-nav {
        margin-top: 28px;
    }

    .dropdown-menu {
        text-align: left;
        margin-top: 29px;
        border-top: none;
        border-radius: 0px;
    }

    .dropdown-menu>li>a {
        padding: 7px 20px;
    }

    .navbar-default .navbar-brand {
        position: absolute;
    }

    .nav-desk-top__brand {
        display: inline-block;
        vertical-align: middle;
    }

    .nav-desk-top__brand-link {
        display: inline-block;
        padding: 0;
        line-height: 0;
    }

    .nav-desk-top__brand .h-img-logo {
        height: 64px;
        width: auto;
        margin-top: 0;
        /* ปรับให้ตรงแนวกับข้อความเมนู */
        display: block;
    }


    /* .nav-desk-top .main-menu-header {
        position: relative;
        padding: 8px 0;
        margin: 0 30px;
        transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
        color: #005BAA;
    }
    .nav-desk-top .main-menu-header::before {
        content: '';
        position: absolute;
        bottom: 3px;
        left: 0;
        height: 3px;
        width: 100%;
        background-color: #005BAA;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: color 0.1s,transform 0.2s ease-out;
    
    }
    .nav-desk-top .main-menu-header:active::before {
        background-color: #fff;
        border-radius: 4px;
    }
    .nav-desk-top .main-menu-header:hover::before, .main-menu-header:focus::before {
        transform-origin: left top;
        transform: scale(1, 1);
    } */
    .h-img-logo {
        height: 42px;
        margin-top: 4px;
    }

    .invisible-mobile {
        display: block;
    }

    .visible-tablet-slide-baner {
        display: none;
    }

    .visible-mobile {
        display: none;
    }

    .invisible-slide-baner {
        display: block;
    }

    .visible-slide-baner {
        display: none;
    }

    .visible-component-desktop {
        display: block;
    }

    .visible-component-mobile {
        display: none;
    }

    .search-result-card-excerpt--full {
        display: block;
    }

    .search-result-card-excerpt--short {
        display: none;
    }


    .service-section-decor--mobile {
        display: none;
    }

    .nav-desk-top {
        list-style-type: none;
        margin: 0px;
        padding: 0;
    }

    .nav-list-icon {
        list-style-type: none;
        margin-left: -40px;
    }

    .lnline-list {
        display: inline;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 183px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;

    }

    .dropdown-content a:hover {
        background-color: #f1f1f1
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }

    /* endheader main */
    /* homepage */
    .img-icon-type {
        height: 80px;
    }

    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-weight: 600;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .banner-wrapper {
        position: relative;
        margin: 0 auto;
        --owl-items: 1.303;
    }

    .interesting-banner-wrapper {
        position: relative;
        margin: 0 auto;
        --owl-items: 1.303;
    }


    .banner-wrapper .owl-stage-outer,
    .interesting-banner-wrapper .owl-stage-outer {
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .banner-wrapper .owl-item .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item .h-w-imag-ban-slide {
        border-radius: 0 0 48px 0;
    }

    .banner-wrapper .banner-slide-card,
    .interesting-banner-wrapper .banner-slide-card {
        position: relative;
    }

    .banner-wrapper .owl-item.center .banner-slide-media,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media {
        display: block;
        position: relative;
        border-radius: 0 0 48px 0;
        overflow: hidden;
        webkit-backface-visibility: hidden;
        transform: translateZ(0);
    }

    .banner-wrapper .owl-item.center .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after {
        opacity: 1;
    }

    .banner-wrapper .owl-item:not(.center) .banner-slide-btn,
    .interesting-banner-wrapper .owl-item:not(.center) .banner-slide-btn {
        display: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-btn {
        position: absolute;
        left: 50%;
        top: auto;
        bottom: 20px;
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(0);
        white-space: nowrap;
        flex-shrink: 0;
        width: auto;
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
        text-decoration: none;
        pointer-events: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-12px);
        pointer-events: auto;
    }

    /* .banner-wrapper .owl-item.active:not(.center) .item {
        margin-top: 48px;
    }
    .banner-wrapper .owl-item:not(.active) .item {
        margin-top: 48px;
    } */

    /* slide ที่ไม่ใช่ center → ย่อ 80% */
    .banner-wrapper .owl-item:not(.center),
    .banner-wrapper .owl-item:not(.active),
    .interesting-banner-wrapper .owl-item:not(.center),
    .interesting-banner-wrapper .owl-item:not(.active),
    .h-w-imag-ban-slide {
        opacity: 1;
        transform-origin: center center;
        transform: scale(0.92);
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    /* slide center → ขนาดเต็ม */
    .banner-wrapper .owl-item.center .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item.center .h-w-imag-ban-slide {
        opacity: 1;
        transform: scale(1);
        transform-origin: center center;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    }

    .banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 0 0 0 16px;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    }

    .banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-prev {
        left: max(16px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-next {
        right: max(16px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .banner-wrapper .owl-prev:hover,
    .banner-wrapper .owl-next:hover,
    .interesting-banner-wrapper .owl-prev:hover,
    .interesting-banner-wrapper .owl-next:hover {
        background: #007FC6;
    }

    .banner-wrapper .owl-prev:hover img,
    .banner-wrapper .owl-next:hover img,
    .interesting-banner-wrapper .owl-prev:hover img,
    .interesting-banner-wrapper .owl-next:hover img {
        filter: brightness(0) invert(1);
    }

    .banner-wrapper .owl-prev.disabled,
    .banner-wrapper .owl-next.disabled,
    .interesting-banner-wrapper .owl-prev.disabled,
    .interesting-banner-wrapper .owl-next.disabled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .service-items-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        gap: 24px;
    }

    .service-item-main-container {
        height: 200px;
        width: 330px;
        display: flex;
        align-items: flex-end;
    }


    .service-item-container {
        height: 140px;
        width: 304.55px;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 32px 0px;
        cursor: pointer;
    }

    .service-item-container::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -8;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .service-item-container:hover::after {
        opacity: 1;
    }

    .service-item-inner {
        transform: skewX(18deg);
    }

    .service-item-inner:has(.service-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 112px;
        width: 112px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .service-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .service-item-container:hover .service-item-icon img {
        transform: translateY(-10%);
    }

    .service-item-title {
        margin-top: 48px;
        text-align: center;
        color: #fff;
    }

    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
    }

    .bg-search-batt {
        position: relative;
        overflow: hidden;
        z-index: 20;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 790px;
        margin-top: -128px;
        padding-top: 128px;
        box-sizing: border-box;
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 50px),
                0 100%);
    }

    .bg-search-batt__vector {
        position: absolute;
        right: 0;
        bottom: 0;
        width: clamp(200px, 45vw, 840px);
        height: auto;
        max-height: 85%;
        object-fit: contain;
        object-position: right bottom;
        z-index: 4;
        pointer-events: none;
    }

    .bg-search-batt__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 4;
        pointer-events: none;
        display: block;
    }

    .bg-search-batt__filter {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(0, 136, 170);
        /* ปรับความเข้ม */
        mix-blend-mode: hue;
    }

    .bg-search-batt__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 1377px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 32px;
        padding-right: 32px;
        box-sizing: border-box;
    }

    .bg-search-batt__content .box-search h1,
    .bg-search-batt__content .sub-title-search {
        position: relative;
        z-index: 2;
    }

    .sub-title-search {
        color: #FFF;
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%;
        margin-bottom: 49px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        max-width: 378px;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        margin-top: 55px;
        margin-inline: auto;
        width: 100%;
        max-width: 1313px;
    }

    .wd-input-box-search-img {
        position: absolute;
        top: -65px;
        left: -45px;
        max-width: 19.3%;
    }

    .wd-input-box-search-img img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .wd-input-box-search-img-2 {
        position: absolute;
        left: -66px;
        bottom: -87px;
        width: 22%;
    }

    .wd-input-box-search-img-2 img {
        display: block;
        width: 100%;
        height: auto;
        display: block;

        object-fit: contain;
    }

    /* Dealer hero: ขยาย overflow ซ้าย/บน แต่ crop ขอบขวาและล่าง */
    .wd-input-box-search--dealer .wd-input-box-search-img-2 {
        clip-path: inset(-160px 0 0 -140px);
    }

    .wd-input-box-search {
        height: 188px;
        width: 100%;
        padding: 25px 15px;
        border-radius: 40px 0 32px 0;
        border: none;
        background: transparent;
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        isolation: isolate;
    }

    .wd-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(90deg, #00B6F1 0%, #0B3149 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 40px 0 32px 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(11, 49, 73, 0.80) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .wd-input-box-search-dropdown {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 81.5%;
        min-width: 0;
    }

    .wd-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .wd-input-box-search-main-wrapper .select-search-car,
    .wd-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper .select-search-car select,
    .wd-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .wd-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    .wd-input-box-search .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    .wd-input-box-search .wd-input-box-search-wrapper {
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    .wd-input-box-search .btn-wrapper-search {
        position: relative;
        z-index: 1;
    }

    .wd-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        cursor: pointer;
        box-sizing: border-box;
    }

    .wd-input-box-search .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    .select-search select:active,
    select:hover {
        outline: none;
    }

    .select-search select:after,
    select:hover {
        outline: none;
    }

    .text-title-app {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-content-app {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-sub-blue {
        color: #00B6F1 !important;
    }

    .app-box {
        margin-top: 25%;
    }

    .img-box-type-battery {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 638px;
        max-width: 100%;
    }

    .box-search-batt {
        margin-top: 139px;
        padding-left: 131px;
    }

    .title-search-batt {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
    }

    .text-content-batt {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
    }

    .featured-news-card {
        display: flex;
        align-items: stretch;
        gap: 24px;
    }

    .featured-news-text-align {
        flex: 1;
        padding-left: 0;
    }

    .other-news-text-align {
        flex: 1;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .other-news-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        font-size: 20px;
        line-height: 1.25;
        font-weight: 700;
        font-style: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .img-box-news {
        aspect-ratio: 1 / 1;
        width: 431px;
        height: 431px;
        flex: 0 0 431px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .img-box-news-main {
        width: 100%;
        height: 423px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .news-section-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .news-category-list {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .news-category-container {
        display: inline-flex;
        height: 40px;
        padding: 8px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: rgba(166, 166, 166, 0.10);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        white-space: nowrap;
        transition: none;
    }

    .news-category-container:hover {
        border: 1px solid var(--Primary, #007FC6);
        background: #D9F2FF;
    }

    .description-news {
        font-size: 16px;
        font-style: normal;
        line-height: 1.25;
        font-weight: 400;
        color: #464646;
        margin-top: 16px;
    }

    .news-column-container {
        display: flex;
        height: 129px;
        align-items: flex-start;
        gap: var(--border-radius-none, 0);
        flex-shrink: 0;
        align-self: stretch;
        border-radius: var(--border-radius-200, 8px);
        border: 1px solid #D8D8D8;
        background: #FFF;
        margin-bottom: 24px;
        cursor: pointer;
        overflow: hidden;
    }

    .news-column-content {
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: auto;
    }

    .news-column-image {
        width: 129px;
        height: 129px;
        flex: 0 0 129px;
        aspect-ratio: 1 / 1;
        align-self: flex-start;
        border-radius: var(--border-radius-200, 8px) 0 0 var(--border-radius-200, 8px);
    }

    .new-column-text-align {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 16px;
    }

    .text-name-hero {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: bolder;
    }

    .text-sub-hero {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: 600;
    }

    .box-position-baner-hero {
        position: absolute;
        top: 10%;
        left: 15%;
    }

    #custom-indicators {
        position: static;
        margin: 0 auto;
    }

    #custom-indicators .active {
        margin: 0;
        margin-right: 4px;
        width: 52px;
        height: 8px;
        background-color: #007FC6;
        transition: all 0.4s ease;
    }

    #custom-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators {
        position: static;
        margin: 24px auto 0;
        padding-left: 0;
        width: auto;
        list-style: none;
        text-align: center;
    }

    #interesting-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators .active {
        width: 52px;
        height: 8px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .text-slo-grand {

        font-size: 25px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: 500;
    }

    /* end homepage */
    /* 
prduct detailpage */
    .text-breadcrumb {
        color: #282828;
    }

    .bg-pro-detail {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        box-sizing: border-box;
    }

    .product-detail-hero .col-md-7:has(.product-items-row) {
        min-width: 0;
    }

    .product-items-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        gap: clamp(8px, 1.2vw, 24px);
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        box-sizing: border-box;
        padding-inline: 8px;
    }

    .product-item-main-container {
        flex: 0 0 auto;
        width: 160px;
        min-width: 0;
        min-height: 84px;
        display: flex;
        flex-direction: column;
    }

    .product-item-inner {
        transform: skewX(18deg);
    }

    .product-item-inner:has(.product-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    .product-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 53.537px;
        height: 53.537px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -85%);
        z-index: 2;
    }

    .product-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }


    .product-item-container {
        flex: 1;
        min-height: 85px;
        height: 100%;
        width: 100%;
        max-width: 160px;
        margin-inline: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 16px 12px 12px;
        box-sizing: border-box;
        background: var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 15px 0px;
        cursor: pointer;
    }

    .product-item-title {
        margin-top: 16px;
        text-align: center;
        color: #fff;
        width: 100%;
    }

    .product-item-title .body2 {
        white-space: normal;
        line-height: 1.3;
    }



    .img-product-batt-detail {
        width: auto;
        height: auto;
        max-width: 72%;
        /* ปรับได้ เช่น 65%–80% */
        max-height: 85%;
        /* ไม่ล้นความสูงกล่อง */
        object-fit: contain;
        display: block;
    }

    .btn-border-w {
        background-color: #FFFFFF;
        border: 1px solid #D3D3D3;
        border-radius: 25px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 209px;
        height: 50px;
        font-weight: 600px;
        font-size: 17px;

    }

    .box-view-big-img {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .text-type-pro-detail {

        font-size: 18px;
        line-height: 1.4;
        font-weight: 700;
        color: #00B6F1;
    }

    .text-name-pro-detail {

        font-size: 56px;
        line-height: normal;
        font-weight: 700;
        color: #00B6F1;
    }

    .compare-product-btn {
        background-color: #fff;
        display: inline-flex;
        height: 40px;
        padding: 0 24px;
        align-items: center;
        gap: 8px;
        color: #007FC6;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }

    .compare-product-btn-2 {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 8px 6px 7px 6px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 4px;
        background: var(--White, #FFF);
    }

    .compare-product-btn-2.is-not-selected {
        display: none;
    }

    .compare-product-btn-2 img {
        display: none;
    }

    .compare-product-btn-2.is-check img {
        display: block;
    }

    .compare-product-btn-2.is-check {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 8px 6px 7px 6px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 4px;
        border: 1px solid var(--Primary, #007FC6);
        background: var(--Primary, #007FC6);
    }

    .product-grid-item .compare-product-btn-2 {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
        cursor: pointer;
    }

    .product-detail-two-col {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
    }

    .product-detail-two-col__left {
        display: flex;
        align-items: center;
        flex-direction: row;
        align-self: stretch;
        gap: 0px;
        width: 100%;
        max-width: 241px;
        min-width: 0;
    }

    .product-detail-two-col__right {
        display: flex;
        align-items: center;
        align-self: stretch;
        border-left: 1px solid #F9FAFB;
        flex: 1;
        min-width: 0;
        padding-left: 24px;
    }

    .product-detail-two-col__left-text {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;

    }

    .product-detail-two-col:nth-child(even) {
        background-color: #F9FAFB;
    }

    /* หรือเฉพาะซ้าย */
    .product-detail-two-col:nth-child(even) .product-detail-two-col__left {
        background-color: #F9FAFB;
    }

    .product-info-seperator {
        height: 1px;
        background: #D2D2DD;
    }

    .product-detail-hero {
        position: relative;
    }

    .product-detail-main {
        padding-bottom: 24px;
    }

    .product-car-filter-layout {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .product-car-filter-container {
        cursor: pointer;
    }

    .product-car-filter-container {
        display: flex;
        height: 48px;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        background: var(--BG-Light, #EBF8FF);
        backdrop-filter: blur(12px);
    }

    .product-car-filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .related-product-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .box-data-pro-detail {
        padding-left: 32px;
    }

    .text-sub-pro-detail {

        font-size: 19px;
        line-height: 25px;
        font-weight: 500;
        color: #000000;
    }

    .text-slogrand-pro-detail {

        font-size: 27px;
        line-height: 55px;
        font-weight: 500;
        color: #000000;
    }

    .btn-circle-product {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        width: 41px;
        height: 41px;
    }

    .text-icon-pro-detail {

        font-size: 18px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .margin-bottom-img {
        margin-bottom: 5px;
    }

    .text-data-contant {

        font-size: 27px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .text-sub-detail {

        font-size: 16px;
        font-style: italic;
        line-height: 23px;
        padding-left: 50px;
    }

    .text-h-pro {

        font-size: 15px;
        font-style: italic;
        line-height: 23px;
        font-weight: 600;
        color: #000000;
    }

    .text--sub-h-pro {

        font-size: 32px;
        font-style: italic;
        line-height: 17px;
        font-weight: 600;
        color: #000000;
        margin-top: 10px;
    }

    .green-box {
        background-color: #C7EB02;
        height: 54px;
        width: 2px;
        position: absolute;
        margin-top: 5px;
        left: 9px;
    }

    .padd-bottom-btn {
        padding-bottom: 20px;
    }

    .new-box-tip {
        padding-top: 29%;
    }

    .title-news-tip {
        font-size: 43px;

        font-weight: 500;
        line-height: 55px;
        color: #000;
    }

    .sub-new-detail {
        font-size: 23px;

        font-weight: 500;
        line-height: 32px;
        color: #005BAA;
        padding-right: 35%;
    }

    .img-icon-prodetail {
        width: 60px;
        height: 60px;
    }

    .img-icon-prodetail-list {
        width: 43px;
        height: 43px;
    }

    /* end productdetail page */
    .btn-main-border {
        background-color: #fff;
        border-radius: 4px;
        width: 220px;
        height: 50px;
        border: 2px solid #005BAA;

        font-size: 16px;
        color: #005BAA;
        margin-top: 10px;
    }

    .btn-main-border:hover {
        box-shadow: 0px 3px 6px #00B6F1;
        color: #005BAA;
    }

    .btn-main-wt {
        background-color: #fff;
        border-radius: 32px;
        width: 220px;
        height: 50px;
        border: none;

        font-size: 16px;
        color: #005BAA;
        border-radius: 32px;
        margin-top: 10px;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        background-color: #ffffff;
        color: #000000;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .sidenav2 {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 9999;
        top: 0;
        right: 0;
        background-color: #ffffff;
        color: #000;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .sidenav2 span {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 18px;
        color: #000 !important;
    }

    .sidenav span {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 18px;
    }

    .footer {
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    .sidenav .closebtn {

        position: absolute;
        top: 0;
        left: -64px;
        font-size: 36px;
        margin-left: 50px;
    }

    /* product page */
    .img-product-pass-batt {
        background-position: center;
        background-repeat: no-repeat;
        height: 511px;
        width: 100%;
        background-size: cover;
    }

    .text-batt-type-one {

        font-style: italic;
        color: #C7EB02;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 29px;
        line-height: 32px;
    }

    .text-batt-type-two {

        font-style: italic;
        color: #FF9300;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 29px;
        line-height: 32px;
    }

    .text-batt-type-three {

        font-style: italic;
        color: #00B6F1;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 29px;
        line-height: 32px;
    }

    .position-type-product {
        position: absolute;
        top: 130px;
    }

    .position-type-product-right {
        position: absolute;
        top: 130px;
        right: 50px;
    }

    .box-bg-product {
        background-color: #fff;
        height: auto;
        border-radius: 0 0 24px 0;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        overflow: hidden;
    }

    .img-product-batt-wrap {
        width: 100%;
        aspect-ratio: 3 / 2;
        min-height: 201px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E9E9E9;
        overflow: hidden;
        position: relative;
    }

    .img-product-batt {
        width: 80%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform .3s ease;
        transform-origin: center center;
    }

    .box-bg-product:hover .img-product-batt {
        transform: scale(1.12);
    }

    .product-batt-name {

        color: #000000;
        text-align: left;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 700;
    }

    .type-batt-name {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
    }

    .batt-info-seperator {
        height: 1px;
        opacity: 0.5;
        background: #D2D2DD;
    }

    .batt-spec-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-spec-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-terminal-container {
        display: inline-flex;
        width: auto;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid #D2D2D2;
        background: #EBF8FF;
        margin-bottom: 8px;
    }


    .tag-batt-name {

        color: #005BAA;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        height: 124px;
        overflow: hidden;
    }

    .text-barnd {
        cursor: pointer;
    }

    .padding-box-pro-batt {
        padding: 24px 24px 24px 24px;
    }

    .btn-circle {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        position: absolute;
        bottom: 239px;
        right: 29px;
    }

    .banner-box-pro-car-type {
        margin-top: 10px;
        height: 469px;
    }

    .img-product-batt-banner {
        width: 100%;
        height: 100%;
    }

    .MultiCarousel {
        float: left;
        overflow: hidden;
        padding: 15px;
        width: 100%;
        position: relative;
    }

    .MultiCarousel .MultiCarousel-inner {
        transition: 1s ease all;
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: center;
        padding: 10px;
        margin: 10px;
        background: #fff;
        color: #000;
    }

    .activeBrand {
        border-bottom: 4px solid #005BAA;
    }

    .MultiCarousel .leftLst,
    .MultiCarousel .rightLst {
        position: absolute;
        border-radius: 50%;
        top: calc(50% - 16px);
    }

    .MultiCarousel .leftLst {
        left: 0;
    }

    .MultiCarousel .rightLst {
        right: 0;
    }

    .MultiCarousel .leftLst.over,
    .MultiCarousel .rightLst.over {
        pointer-events: none;
        background: #ccc;
    }

    .paddding-left-news {
        padding-left: 15%;
    }


    /* Homepage hero search tabs */
    .bg-search-batt__content .tabbable-panel {
        display: flex;
        max-width: 1313px;
        width: 81%;
        margin-left: auto;
        align-items: stretch;
        flex-direction: row;
        justify-content: flex-end;
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
        width: 100%;
        flex: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
        align-self: stretch;
    }

    .bg-search-batt__content .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .nav-tabs-container-item:last-child {
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
    }

    .bg-search-batt__content .nav-tabs-container-item.active {
        border-top: 1px solid #005BAA;
        border-left: 1px solid #005BAA;
        border-bottom: 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(28, 53, 74, 0.80) 100%);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .nav-tabs-container-item.active:last-child {
        border-right: 1px solid #005BAA;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:focus,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
    }

    .bg-search-batt__content .btn-wrapper-search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }

    .warranty-scroll-track {
        --warranty-lock-height: 900px;
    }

    /*End product page */
}


/* notebook */
@media (max-width:1438px) {
    .main-menu-header {
        font-size: 14px;
    }

    .box-chage-lang {
        margin-top: -35px;
        margin-right: -35px;
        color: #005BAA;
        font-size: 14px;
    }
}

@media (max-width:1320px) and (min-width:1300px) {
    .gs-1380-sub-banner-wrapper {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 32px;
        right: 0;
        margin-top: 32px;
        z-index: 1;
        width: 60.05%;
    }
}

@media (max-width:1299px) and (min-width:1296px) {
    h1 {
        font-size: 48px;
        font-style: normal;
        line-height: 140%;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h2 {
        font-size: 32px;
        font-style: normal;
        line-height: 140%;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h3 {
        font-size: 24px;
        font-style: normal;
        line-height: 140%;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h4 {
        font-size: 20px;
        font-style: normal;
        line-height: 100%;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h5 {
        font-size: 18px;
        font-style: normal;
        line-height: 100%;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h6 {
        font-size: 12px;
        font-style: normal;
        line-height: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    p {
        font-size: 16px;
        font-style: normal;
        line-height: 150%;
    }


    .blue-h1 {
        font-size: 48px;

        line-height: 36px;
        font-weight: 800;
        color: #007FC6;
    }

    .mobile-h1 {
        font-size: 32px;
        font-weight: 700;
    }

    .mobile-h2 {
        font-size: 24px;
        line-height: 1.4;
    }

    .body1 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .body1-bold {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .body2 {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.25;
    }

    .body3 {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.25;
    }

    .content-space {
        min-height: 108px;
        flex: 1 0 0;
        align-self: stretch;

    }

    .space-extra-large {
        height: 92px;
        margin-top: 0;
    }


    .space-large {
        margin-top: 81px;
    }

    .space-medium {
        margin-top: 64px;
    }

    .space-semi-medium {
        height: 52px;
        margin-top: 0;
    }

    .space-extra-small {
        height: 44px;
        margin-top: 0;
    }

    .space-small-med {
        margin-top: 48px
    }

    .space-small {
        margin-top: 40px
    }

    .space-small-2 {
        margin-top: 32px;
    }

    .space-small {
        margin-top: 40px
    }

    .space-s-small {
        margin-top: 24px;
    }

    .space-xs {
        margin-top: 16px;
    }

    .space-xxs {
        height: 8px;
        margin-top: 0;
    }


    .search-result-content-margin {
        margin-top: 25px;
    }

    .blue-small-banner-header-margin {
        margin-left: 57px;
    }

    .horizontial-space {
        padding-left: 94px;
        padding-right: 94px;
    }

    .bottom-space-s {
        margin-bottom: 20px
    }


    .service-section-decor {
        position: relative;
        overflow-x: clip;
        /* กันขวา ไม่สร้าง scroll แนวนอน */
        overflow-y: visible;
    }

    .tough-vector {
        width: 90%;
        height: auto;
        max-width: 1299px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: 700px;
        opacity: 0.04;
    }

    .tough-vector-2 {
        width: 45%;
        height: auto;
        max-width: 650px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: 1100px;
        opacity: 0.04;
    }

    .tough-vector-3 {
        width: 42%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: 0;
        bottom: -280px;
        opacity: 0.10;
    }

    .gradient-circle-left {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -490px;
        top: 1100px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .gradient-circle-right {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -579px;
        top: 1800px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }


    .blue-small-banner {
        width: 100%;
        background: #007FC6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        min-height: 178px;
        z-index: 1;
    }

    .blue-small-banner__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex: 0 1 auto;
        z-index: 2;
    }

    .blue-small-banner-nav {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .blue-small-banner img {
        width: 590px;
        height: 178px;
        opacity: 0.2;
        object-fit: cover;
        object-position: center bottom;
    }

    .search-close-button-container {
        display: flex;
        min-height: 24px;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 24px;
    }

    .search-close-button {
        background: transparent;
        border: transparent;
    }

    .search-close-button img {
        min-width: 24px;
        min-height: 24px;
    }

    .search-box-container {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
        padding: 16px 40px;
        min-height: 420px;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%);
        backdrop-filter: blur(12px);
    }

    .search-box-container__vector {
        position: absolute;
        right: 5px;
        bottom: 0;
        width: 100%;
        max-width: 735px;
        height: auto;
        margin: 0;
        opacity: 0.15;
        object-fit: contain;
        object-position: right bottom;
        z-index: 0;
        pointer-events: none;
    }

    /* ให้เนื้อหาอยู่เหนืารูป */
    .search-close-button-container,
    .search-box-field,
    .search-word-wrapper {
        position: relative;
        z-index: 1;
    }

    .search-box-field {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 0 0 16px 0;
        border: 1px solid #E2E2E2;
        background: #FFF;
    }

    .search-box-field:focus-within {
        border-color: #007FC6;
        /* แทน .search-box-input:focus */
    }

    .search-box-field-input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: transparent;
        outline: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .search-word-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 48px;
    }

    .search-word-recommend {
        display: flex;
        flex-direction: column;
        align-items: start;
        align-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .search-result-content {
        margin-left: auto;
        margin-right: auto;
        height: 100%;
        position: relative;
        z-index: 2;
    }

    .search-result-container {
        display: flex;
        padding: 12px 16px;
        align-items: center;
        gap: 10px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: 4px;
        border: 1px solid #007FC6;
        background: #FFF;
    }

    .search-result-container__query {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-result-query-filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .search-result-query-filter-wrapper-item {
        display: flex;
        align-items: center;
    }

    .search-result-filter-container {
        display: flex;
        padding: 8px 8px 8px 16px;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
    }

    .search-result-card {
        display: flex;
        padding: 24px;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
        border-radius: 0 0 40px 0;
        border: 1px solid #D8D8D8;
        background: #FFF;
    }

    .search-result-card-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
    }

    .search-result-card-image {
        position: relative;
        flex-shrink: 0;
    }

    .search-result-card-image .search-result-card-image-img {
        aspect-ratio: 1/1;
        width: 250px;
        height: 250px;
        object-fit: cover;
        border-radius: 0 0 32px 0;
    }

    .search-result-batt-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        flex: 1 0 0;
    }

    .search-result-battery-wrapper {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16px;
        align-self: stretch;
    }

    .search-result-contact-btn-group {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .search-batt-category-btn {
        background-color: #fff;
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 0;
        color: #80A700;
        border: 1px solid #80A700;
    }

    .search-result-batt-spec-wrapper {
        display: flex;
        align-items: flex-start;
    }

    .search-result-batt-spec-wrapper-item {
        display: flex;
        min-width: 80px;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid #D8D8D8;
        padding: 0 8px;
        gap: 8px;
    }

    .search-result-batt-spec-wrapper-item:first-child {
        padding-left: 0;
    }

    .search-result-batt-spec-wrapper-item:last-child {
        border-right: none;
    }

    .search-result-card-badge {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 128px;
        /* ปรับตามดีไซน์ — SVG ต้นฉบับ 128px */
        min-height: 128px;
        pointer-events: none;
        z-index: 2;
    }


    .search-result-contact-btn {
        background-color: #fff;
        display: flex;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }


    .search-btn-tag-activities {
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        background-color: white;
        border: 1px solid #007FC6;
        color: #007FC6;
        font-size: 14px;
    }



    .header-search-panel {
        display: none;
        position: fixed;
        top: 96px;
        left: 0;
        right: 0;
        z-index: 9999;
        padding: 0 64px;
    }

    .header-search-panel-sticky {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        padding: 0 64px;
    }

    .header-search-panel.is-open {
        display: block;
    }

    .header-search-panel-sticky.is-open {
        display: block;
    }

    .header-search-panel::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 0;
    }

    .header-search-panel-sticky::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 0;
    }

    .header-batt-search {
        display: none;
        position: fixed;
        top: 110px;
        left: 0;
        right: 0;
        z-index: 60;
    }

    .header-batt-search-panel {
        position: relative;
        z-index: 9999;
        width: min(1057px, calc(100% - 120px));
        min-height: 241px;
        margin-left: auto;
        margin-right: 64px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 0 0 24px 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(12px);
    }

    .text-batt-search-title {
        color: #A6A6A6;
        font-weight: 700;
        margin-left: 16px;
        margin-top: 16px;
    }

    .header-batt-search-panel-sub-item-wrapper {
        display: flex;
        padding: 24px 16px;
        align-items: stretch;
        gap: 24px;
        align-self: stretch;
    }

    .header-batt-search-selector-wrapper {
        display: flex;
        width: 245px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .header-batt-search-selector-container {
        display: flex;
        width: 245px;
        padding: 8px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border-radius: 8px;
        cursor: pointer;
    }

    .header-batt-search-selector-container.is-active {
        background: #007FC6;
        color: #FFF;
    }

    .header-batt-search-selector-container:hover {
        background: #E6EFF7;
        transition: opacity 0.25s ease;
    }

    .header-batt-search-selector-container:hover img {
        filter: brightness(0);
    }

    .header-batt-search-selector-container.is-active:hover {
        background: #007FC6;
        color: #FFF;
    }

    .header-batt-search-selector-container.is-active:hover img {
        filter: none;
    }


    .header-batt-search-panel-sub-item-seperator {
        width: 1px;
        align-self: stretch;
        /* ยืดเต็มความสูงแถว */
        background: #C5C5C5;
        flex-shrink: 0;
    }

    .header-batt-search-category-container {
        width: 100%;
        max-width: 300px;
        min-width: 0;
        height: 138px;
        border-radius: 8px;
        background: #E6EFF7;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
    }

    .header-batt-search-category-container img {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: auto;
        max-width: none;
        object-fit: cover;
        object-position: right center;
    }

    .batt-type-img {
        max-width: 206px;
        height: 89px;
        flex-shrink: 0;
        aspect-ratio: 206/89;
        display: block;
        position: absolute;
        right: 16px;
        top: 36px;
        object-fit: cover;
        object-position: right center;
    }

    .header-batt-search-category-container:hover {
        color: #FFF;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transition: opacity 0.25s ease;
    }

    .header-barr-search-category-text {
        margin-top: 16px;
        margin-left: 16px;
        width: 35%;
        min-width: 0;
    }

    .header-batt-search-category-content {
        flex: 1;
        min-width: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(min(180px, 100%), 300px));
        justify-content: start;
        gap: 16px;
    }

    .header-batt-search-category-content[hidden] {
        display: none !important;
    }

    .header-batt-search-category-container .car-type-img-search {
        display: block;
        position: absolute;
        right: -80px;
        top: -40px;
        width: 229px;
        height: auto;
    }

    .header-batt-search-category-container .car-type-img-search img {
        width: auto;
        height: auto;
    }

    .product-pass-hero {
        position: relative;
        z-index: 16;
        margin-top: -124px;
        isolation: isolate;
    }

    .product-pass-hero img {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        z-index: 0;
    }

    .product-header-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        z-index: 2;
    }

    .product-banner-nav {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .product-banner-header-margin {
        margin-top: 75px;
        margin-left: 64px;
    }


    .product-list-layout {
        display: flex;
        width: 100%;
        align-items: stretch;
        background: #fff;
    }

    .product-filter-column {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        min-height: 100%;
        width: 398px;
        padding-top: 66px;
        flex-shrink: 0;
        background: #EBF8FF;
    }

    .product-filter-header-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: flex-start;
    }

    .product-filter-content {
        display: flex;
        flex-direction: column;
        padding: 16px 28px;
        align-items: stretch;
        gap: 16px;
    }

    .product-filter-search {
        display: flex;
        height: 40px;
        padding: 16px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 310px;
        border-radius: 0 0 16px 0;
        color: rgba(40, 40, 40, 0.5);
        background: #FFF;
    }

    .product-filter-box {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 310px;
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.30);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
    }

    .product-filter-box-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .product-list-container {
        display: flex;
        width: 100%;
        padding: 80px 64px 80px 24px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 48px;
    }

    .product-filter-box-selector {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16px;
    }

    .product-filter-box-text {
        display: flex;
        min-width: 154px;
        color: #a6a6a6;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .product-expanded-vehicle-filter-box .product-filter-box-body,
    .product-expanded-battery-filter-box .product-filter-box-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .product-filter-sub-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .product-filter-batt-type {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .product-filter-batt-type-container {
        display: flex;
        padding: 13px 8px;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        background-color: white;
        border-radius: 0 0 16px 0;
        width: 100%;
        height: auto;
    }

    .product-filter-batt-name {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 8px;
    }

    .product-batt-genre-wrapper {
        display: flex;
        align-items: center;
        align-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        flex-wrap: wrap;
    }

    .product-batt-genre-container {
        display: flex;
        max-width: 100%;
        min-width: 0;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        border-radius: 0 0 16px 0;
        background: #FFF;
        gap: 8px;
    }

    .product-batt-genre-container .body1 {
        min-width: 0;
        word-break: break-word;
    }

    .product-filter-batt-type-container,
    .product-batt-genre-container {
        cursor: pointer;
    }

    .product-filter-batt-type-container.is-active {
        background: var(--Primary, #007FC6);
        color: white;
    }

    .product-batt-genre-container.is-active {
        background: var(--Primary, #007FC6);
        color: white;
    }

    .product-filter-select {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.08);
    }

    .product-filter-select select {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;

        font-size: 16px;
        line-height: 24px;
        color: #282828;
        cursor: pointer;
        padding-right: 8px;
    }

    .product-filter-select img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        pointer-events: none;
    }

    .product-filter-select--stacked {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filter-select-car__trigger {
        display: flex;
        flex: 1;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .filter-select-car {
        position: static;
        width: 100%;
        /* ชิดใต้กล่องขาว */
        left: 0;
        right: 0;
        z-index: 20;
        margin-top: 4px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        border-radius: 4px;
        background: #FFF;
        box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.14);

    }

    .filter-select-car-item-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 24px;
        align-self: stretch;
    }

    .filter-select-car-item-image img {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 1px 0 5px 0;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
    }

    .filter-select-car-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .filter-select-car {
        margin-top: 8px;
        /* หรือ 0 ถ้าอยากติดกับกล่องบน */
    }

    .filter-select-sub__trigger,
    .filter-select-brand__trigger {
        display: flex;
        flex: 1;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .filter-select-sub-group,
    .filter-select-brand-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .filter-select-sub-panel,
    .filter-select-brand-panel {
        width: 100%;
        margin-top: 8px;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
        display: flex;
        flex-direction: column;
        max-height: 320px;
        position: relative;
        z-index: 10050;
    }

    .filter-select-sub-panel__header,
    .filter-select-sub-panel__footer,
    .filter-select-brand-panel__header,
    .filter-select-brand-panel__footer {
        flex-shrink: 0;
        padding: 8px 16px;
        background: #F8F8F8;
        color: var(--Primary, #007FC6);
    }

    .filter-select-sub-panel__list,
    .filter-select-brand-panel__list {
        flex: 1;
        min-height: 0;
        max-height: 230px;
        border-radius: 0 0 4px 4px;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: #00B6F1 #F5F5F5;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar,
    .filter-select-brand-panel__list::-webkit-scrollbar {
        width: 8px;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar-track,
    .filter-select-brand-panel__list::-webkit-scrollbar-track {
        background: #F5F5F5;
        border-radius: 999px;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar-thumb,
    .filter-select-brand-panel__list::-webkit-scrollbar-thumb {
        background: #007FC6;
        border-radius: 999px;
    }

    .filter-select-sub-item,
    .filter-select-brand-item {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 14px 16px;
        cursor: pointer;
    }

    .filter-select-sub-item:hover,
    .filter-select-sub-item.is-active,
    .filter-select-brand-item:hover,
    .filter-select-brand-item.is-active {
        background: #F1F1F1;
    }

    .product-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* 3 คอลัมน์ */
        gap: 24px;
    }

    .product-grid-item {
        display: block;
    }

    .product-filter-2-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .product-filter-2-sub-wrapper {
        display: flex;
        align-items: center;
        gap: 0px;
        align-self: stretch;
    }

    .product-filter-2-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .pagination-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    .pagination-prev-button {
        display: flex;
        width: 52px;
        height: 52px;
        padding: 24px 16px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        aspect-ratio: 1/1;
        border-radius: 0 0 0 16px;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-next-button {
        display: flex;
        width: 52px;
        height: 52px;
        padding: 24px 16px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        aspect-ratio: 1/1;
        border-radius: 0 0 16px 0;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-number-button-wrapper {
        display: flex;
        align-items: center;
        gap: 0px;
    }

    .pagination-number-button {
        width: 52px;
        height: 52px;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #9E9E9E;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-number-button-wrapper .pagination-number-button:not(:last-child) {
        margin-right: 8px;
    }

    .pagination-number-button.is-active {
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--Primary, #007FC6);
        color: #fff;
    }

    .compare-product-main-wrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0px;
    }

    .compare-product-header-wrapper {
        display: flex;
        width: 28%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0px;

    }

    .compare-product-box-wrapper {
        padding: 27px 30px;
        width: 25%;
        position: relative;
        overflow: hidden;
        background: #F8F8F8;
        z-index: 0;
    }

    .compare-product-btn-close {
        width: 24px;
        height: 24px;
        aspect-ratio: 1 / 1;
    }


    .compare-product-box-content .compare-product-btn-close {
        position: absolute;
        top: 27px;
        right: 30px;
        z-index: 3;
        cursor: pointer;
    }


    .compare-product-gradient-background {
        position: absolute;
        width: 814px;
        height: 814px;
        aspect-ratio: 1/1;
        border-radius: 814px;
        background: radial-gradient(46.98% 46.98% at 51.68% 53.05%, rgba(230, 248, 254, 0.50) 0%, rgba(181, 234, 252, 0.00) 87.5%);
        top: 80%;
        transform: translate(-50%, -50%);
        z-index: -1;
        pointer-events: none;
    }

    .compare-product-img-container {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        background: #E9E9E9;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        overflow: hidden;
    }

    .compare-product-img-container-have-img>img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        /* ถ้าอยากเต็มกรอบแบบ crop ใช้ cover */
        display: block;
    }

    .compare-product-add-image-text {
        color: var(--Primary, #007FC6);
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .compare-product-table-header {
        width: 100%;
        height: 81px;
        padding: 0px 26px;
        display: flex;
        align-items: center;
        background: var(--BG-Light, #EBF8FF)
    }

    .compare-product-table-body {
        border-bottom: 1px solid #DEE2E6;
    }

    .compare-product-two-col {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
    }

    .compare-product-two-col-left {
        display: flex;
        align-items: center;
        flex-direction: row;
        align-self: stretch;
        gap: 0px;
        width: 25%;
        min-width: 0;
        padding: 8px;
    }

    .compare-product-two-col-right-prodcut-spec {
        width: 25%;
        display: flex;
        align-items: center;
        align-self: stretch;
        border-left: 1px solid #DEE2E6;
        flex: 1;
        min-width: 0;
        padding: 8px;
    }

    .compare-product-two-col-left-text {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .compare-product-two-col:nth-child(even) {
        background-color: #F9FAFB;
    }

    /* หรือเฉพาะซ้าย */
    .compare-product-two-col:nth-child(even) .product-detail-two-col__left {
        background-color: #F9FAFB;
    }

    .compare-product-modal-overlay.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }

    /* panel ขวา — ไม่ใช่ flex center */
    .compare-product-modal-shell.is-open {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 89vw;
        z-index: 10001;
        overflow: hidden;
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        transform: translateX(0);
        transition: transform 0.3s ease;
    }

    .compare-product-search-batt-wrapper {
        display: flex;
        width: 89vw;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 24px 60px;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .compare-product-search-box-wrapper {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }

    /* Homepage hero search tabs */
    .compare-product-search-batt-wrapper .tabbable-panel {
        display: flex;
        width: 100%;
        margin-left: auto;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
    }

    .compare-product-search-batt-wrapper .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .compare-product-search-batt-wrapper .nav-tabs-container-item:last-child {
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
    }


    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        gap: 8px;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(166, 166, 166, 0.10);
        backdrop-filter: blur(12px);
        box-shadow: none;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        cursor: pointer;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        color: #007FC6 !important;
        border-bottom: 0;
        background: #EBF8FF;
        backdrop-filter: blur(12px);
    }

    .compare-product-search-batt-wrapper .btn-wrapper-search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }


    .compare-product-modal-input-box-search {
        height: 188px;
        width: 100%;
        padding: 25px 15px;
        border-radius: 0 0 24px 0;
        border-top: 1px solid #007FC6;
        background: transparent;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        isolation: isolate;
    }

    .compare-product-modal-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .compare-product-modal-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 0 0 24px 0;
        background: #EBF8FF;
        pointer-events: none;
        z-index: 0;
    }

    .compare-product-modal-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .compare-product-modal-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .compare-product-modal-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .compare-product-modal-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 24px;
        width: 100%;
        min-width: 0;
    }

    .compare-product-modal-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        box-sizing: border-box;
        cursor: pointer;
        flex: none;
        align-self: stretch;
        overflow: hidden;
    }

    .compare-product-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }


    #compare-product-modal .compare-product-modal-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    #compare-product-modal .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    #compare-product-modal .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    .compare-product-btn-main {
        display: inline-flex;
        min-width: 180px;
        width: auto;
        padding: 8px 16px;
        margin-right: 16px;
        align-items: center;
        gap: 16px;
        border-radius: 8px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
        cursor: pointer;
    }

    .compare-product-btn-main-icon {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 0.6px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
    }


    .compare-product-product-selected-banner {
        display: none;
        width: 100%;
        height: 100px;
        padding: 16px 103.5px 16px 72.5px;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        background: linear-gradient(270deg, #00B6F1 0%, #005BAA 100%);
    }

    .compare-product-product-selected-banner.is-visible {
        display: flex;
    }

    .compare-product-product-selected-banner:not(.has-items) .compare-product-product-selected-item-wrapper.is-open {
        display: none;
    }

    .compare-product-product-selected-banner.has-items .compare-product-product-selected-item-wrapper.is-empty {
        display: none;
    }

    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper {
        width: 100%;
    }

    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper.is-open,
    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: none;
    }

    /* มีรายการปกติ */
    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-open {
        display: flex;
    }

    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-empty,
    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: none;
    }

    /* no-mapping */
    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
    }

    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-empty,
    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-open {
        display: none;
    }

    .compare-product-product-selected-open-title.is-open {
        margin-right: auto;
        flex-shrink: 0;
        min-width: 152px;
    }

    body.product-list-compare-active .compare-product-btn-2.is-not-selected {
        display: flex;
    }

    body.product-list-compare-active {
        padding-bottom: 100px;
    }

    .compare-product-product-selected-item-wrapper.is-open {
        display: flex;
        width: 100%;
        min-width: 0;
        height: 68px;
        padding-bottom: 8px;
        justify-content: flex-end;
        align-items: center;
        gap: 24px;
        flex-shrink: 1;
    }

    .compare-product-product-selected-item-wrapper.is-empty {
        display: flex;
        width: 100%;
        height: 68px;
        align-items: center;
        justify-content: space-between;
    }

    .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
        width: 100%;
        height: 68px;
        align-items: center;
        justify-content: space-between;
    }


    .compare-product-product-selected-item-sub-wrapper.is-no-mapping {
        display: flex;
        width: 100%;
        min-width: 824px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .compare-no-related-title {
        color: #fff;
        font-weight: 700;
        line-height: 1.3;
    }

    .compare-no-related-desc {
        color: #fff;
        opacity: 0.95;
        line-height: 1.4;
    }

    .compare-product-product-selected-item-blue-container-wrapper {
        display: flex;
        align-items: center;
        gap: 24px;
        flex: 1 1 0;
        min-width: 0;
    }

    .compare-product-product-selected-item-blue-container {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        max-width: 241px;
        height: 43px;
        padding: 8px 16px;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        box-sizing: border-box;
        border-radius: 0 0 24px 0;
        background: #00B6F1;
    }

    .compare-product-product-selected-item-blue-container>span {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .compare-product-product-selected-item-close-btn {
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper.is-empty,
    .compare-product-product-selected-btn-wrapper.is-no-mapping {
        margin-left: 0;
        flex-shrink: 0;
    }

    .compare-selected-empty {
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper {
        margin-left: 25px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .compare-product-product-selected-item-close-btn img {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
    }


    .dealer-store-layout {
        position: relative;
        margin-left: 64px;
        margin-right: 64px;
        /* สูงกว่า .product-pass-hero (16) */
    }

    .dealer-store-text-align {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .dealer-store-subtitle-text {
        color: #6D6D6D;
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .dealer-store-search-container {
        display: flex;
        width: 100%;
        position: relative;
        z-index: 20;
        margin-top: -72px;
        padding: 48px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
        border-radius: 0 0 48px 0;
        background: var(--BG-Light, #EBF8FF);
        box-shadow: 0 0 30px 0 rgba(56, 56, 56, 0.12);
    }

    .dealer-store-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-dropdown>.dealer-store-input-box-search-main-wrapper {
        flex: 1;
        /* กล่องทั่วไป */
        min-width: 0;
    }

    .dealer-store-input-box-search-dropdown>.dealer-store-input-box-search-main-wrapper:first-child {
        flex: 1.4091;
        /* กล่องแรกยาวกว่า (2 เท่า) */
    }

    .dealer-store-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .dealer-store-input-box-search-main-wrapper .select-search-car,
    .dealer-store-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-main-wrapper .select-search-car select,
    .dealer-store-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    .dealer-store-input-box-search .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    .dealer-store-input-box-search .wd-input-box-search-wrapper {
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    .dealer-store-input-box-search .btn-wrapper-search {
        position: relative;
        z-index: 1;
    }

    .dealer-store-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        cursor: pointer;
        box-sizing: border-box;
    }

    .dealer-store-input-box-search .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    /* อันแรก — ยืดกินพื้นที่ที่เหลือ */
    .dealer-store-text-sort-wrapper>h2 {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    /* อันสอง — กว้างตาม content */
    .dealer-store-sort-sub-wrapper {
        display: flex;
        align-items: center;
        align-self: stretch;
        width: fit-content;
        /* override align-self: stretch จาก rule ทั่วไป */
    }

    .dealer-store-sort-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .dealer-store-text-sort-wrapper {
        display: flex;
        width: 100%;
        padding-bottom: 24px;
        justify-content: start;
        align-items: stretch;
        gap: 35px;
    }

    .dealer-store-card-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 24px;
    }

    .dealer-store-card-container {
        display: flex;
        width: 100%;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
        border-radius: 0 0 48px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        cursor: pointer;
    }

    .dealer-store-card-header-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }

    .dealer-store-card-header-wrapper img {
        width: 100%;
        height: auto;
        max-width: 87px;
        max-height: 87px;
        aspect-ratio: 1/1;
    }

    .dealer-store-card-header-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        flex: 1 0 0;
    }

    .dealer-store-card-header-province-container {
        display: flex;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid rgba(210, 210, 210, 0.87);
        background: var(--BG-Light, #EBF8FF)
    }

    .dealer-store-card-header-province-container img {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }

    .dealer-store-card-content-seperator {
        width: 100%;
        height: 1px;
        opacity: 0.5;
        background: #9E9E9E;
    }

    .dealer-store-card-contact-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .dealer-store-card-contact-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-card-contact-container img {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .dealer-store-search-container .btn-wrapper-search {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
    }

    .dealer-store-search-form {
        cursor: default;
        gap: 8px;
    }

    .dealer-store-search-input {
        flex: 1;
        min-width: 0;
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: #282828;
    }

    .dealer-store-search-input::placeholder {
        color: #A6A6A6;
    }

    .dealer-store-search-submit {
        display: flex;
        flex-shrink: 0;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    .dealer-store-pop-up-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .dealer-store-pop-up-overlay.is-hidden,
    .dealer-store-pop-up-container.is-hidden {
        display: none;
    }

    .dealer-store-pop-up-container {
        display: flex;
        flex-direction: row;
        padding: 40px;
        align-items: center;
        gap: 24px;
        border-radius: 12px;
        background: #FFF;
        max-width: 100%;
        width: 885px;
    }

    .dealer-store-pop-up-image {
        width: 100%;
        max-width: 362px;
        max-height: 362px;
        aspect-ratio: 1/1;
        border-radius: 0 0 48px 0;
        overflow: hidden;
        flex-shrink: 0;
    }

    .dealer-store-pop-up-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 48px 0;
    }

    .dealer-store-pop-up-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .dealer-store-pop-up-text-detail-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .dealer-store-text-detail-contact-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-sub-input-box-search.filter-select-sub__trigger {
        max-height: 40px;
    }

    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 100%;
        z-index: 10050;
    }

    .gs-1380-sub-banner-wrapper {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 32px;
        right: 0;
        margin-top: 32px;
        z-index: 1;
        width: 60.05%;
    }

    .gs-1380-sub-banner-item-container-wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        width: 650px;
    }

    .wrapper-404 {
        width: 100%;
        max-width: 100%;
        display: flex;
        height: 610px;
        align-items: center;
        gap: 80px;
        justify-content: center;
    }

    .wrapper-404-end {
        margin-right: auto;
    }

    .wrapper-404-image img {
        aspect-ratio: 1/1;
        width: 545px;
        height: 545px;
        object-fit: cover;
    }

    .wrapper-404-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
    }


    /* Homepage: banner carousel + hero bg-search (sync 1300–1585) */
    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-weight: 600;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .banner-wrapper,
    .interesting-banner-wrapper {
        margin: 0 auto;
        position: relative;
        --owl-items: 1.303;
    }

    .banner-wrapper .owl-stage-outer {
        overflow: hidden;
    }

    .interesting-banner-wrapper .owl-stage-outer {
        overflow: visible;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .banner-wrapper .owl-item .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item .h-w-imag-ban-slide {
        border-radius: 0 0 48px 0;
    }

    .banner-wrapper .banner-slide-card,
    .interesting-banner-wrapper .banner-slide-card {
        position: relative;
    }

    .banner-wrapper .owl-item.center .banner-slide-media,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media {
        display: block;
        position: relative;
        border-radius: 0 0 48px 0;
        overflow: hidden;
    }

    .banner-wrapper .owl-item.center .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after {
        opacity: 1;
    }

    .banner-wrapper .owl-item:not(.center) .banner-slide-btn,
    .interesting-banner-wrapper .owl-item:not(.center) .banner-slide-btn {
        display: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-btn {
        position: absolute;
        left: 50%;
        top: auto;
        bottom: 20px;
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(0);
        white-space: nowrap;
        flex-shrink: 0;
        width: max-content;
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
        text-decoration: none;
        pointer-events: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-12px);
        pointer-events: auto;
    }

    .banner-wrapper .owl-item:not(.center),
    .banner-wrapper .owl-item:not(.active),
    .interesting-banner-wrapper .owl-item:not(.center),
    .interesting-banner-wrapper .owl-item:not(.active),
    .h-w-imag-ban-slide {
        opacity: 1;
        transform-origin: center center;
        transform: scale(0.92);
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .banner-wrapper .owl-item.center .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item.center .h-w-imag-ban-slide {
        opacity: 1;
        transform: scale(1);
        transform-origin: center center;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    }

    .banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 0 0 0 16px;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    }


    .banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-prev {
        left: max(16px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-next {
        right: max(16px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .banner-wrapper .owl-prev:hover,
    .banner-wrapper .owl-next:hover,
    .interesting-banner-wrapper .owl-prev:hover,
    .interesting-banner-wrapper .owl-next:hover {
        background: #007FC6;
    }

    .banner-wrapper .owl-prev:hover img,
    .banner-wrapper .owl-next:hover img,
    .interesting-banner-wrapper .owl-prev:hover img,
    .interesting-banner-wrapper .owl-next:hover img {
        filter: brightness(0) invert(1);
    }

    .banner-wrapper .owl-prev.disabled,
    .banner-wrapper .owl-next.disabled,
    .interesting-banner-wrapper .owl-prev.disabled,
    .interesting-banner-wrapper .owl-next.disabled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .box-position-baner-hero {
        position: absolute;
        top: 10%;
        left: 15%;
    }

    #custom-indicators {
        position: static;
        margin: 0 auto;
    }

    #custom-indicators .active {
        margin: 0;
        margin-right: 4px;
        width: 52px;
        height: 8px;
        background-color: #007FC6;
        transition: all 0.4s ease;
    }

    #custom-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators {
        position: static;
        margin: 24px auto 0;
        padding-left: 0;
        width: auto;
        list-style: none;
        text-align: center;
    }

    #interesting-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators .active {
        width: 52px;
        height: 8px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .btn-view-more {
        z-index: 2;
        bottom: 24px;
        display: inline-flex;
        height: 48px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #00B6F1;
        background: #007FC6;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .btn-view-more-left {
        left: 380px;
    }

    .btn-view-more-right {
        left: 70px;
    }

    .btn-view-more::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .btn-view-more:hover::after {
        opacity: 1;
    }

    .btn-view-more-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        padding: 0 24px;
        gap: 8px;
        z-index: 3;
        border-radius: 0 0 16px 0;
        border: 1px solid var(--Primary, #007FC6);
        background: #FFF;
        color: #007FC6;
        text-decoration: none;
        transition: background 0.25s ease, color 0.25s ease;
    }

    .btn-view-more-2:hover {
        background: #007FC6;
        color: #fff !important;
    }

    .btn-view-more-2:hover img {
        filter: brightness(0) invert(1);
    }

    .service-items-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        gap: 24px;
    }

    .service-item-main-container {
        height: 200px;
        width: 330px;
        display: flex;
        align-items: flex-end;
    }

    .service-item-container {
        height: 160px;
        width: 304.55px;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 32px 0px;
        cursor: pointer;
    }

    .service-item-container::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -8;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .service-item-container:hover::after {
        opacity: 1;
    }

    .service-item-inner {
        transform: skewX(18deg);
    }

    .service-item-inner:has(.service-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 112px;
        width: 112px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .service-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .service-item-container:hover .service-item-icon img {
        transform: translateY(-10%);
    }

    .service-item-title {
        margin-top: 48px;
        text-align: center;
        color: #fff;
    }

    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
    }

    .bg-search-batt {
        position: relative;
        overflow: hidden;
        z-index: 20;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 780px;
        margin-top: -128px;
        padding-top: 128px;
        box-sizing: border-box;
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 30px),
                0 100%);
    }

    .bg-search-batt__vector {
        position: absolute;
        right: 0;
        bottom: 0;
        width: clamp(200px, 45vw, 840px);
        /* ปรับตาม design */
        height: auto;
        max-height: 85%;
        object-fit: contain;
        object-position: right bottom;
        /* เทียบ blue-small-banner */
        z-index: 4;
        /* เหนือ video, ใต้/เท่า filter */
        pointer-events: none;
    }

    .bg-search-batt__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 4;
        pointer-events: none;
        display: block;
    }

    .bg-search-batt__filter {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(0, 136, 170);
        /* ปรับความเข้ม */
        mix-blend-mode: hue;
    }

    .bg-search-batt__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 1313px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .bg-search-batt__content .box-search h1,
    .bg-search-batt__content .sub-title-search {
        position: relative;
        z-index: 2;
    }

    .sub-title-search {

        font-size: 24px;
        line-height: 1.25;
        color: #fff;
        text-align: center;
        margin-bottom: 49px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        max-width: 378px;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        margin-top: 64px;
        margin-inline: auto;
        width: 100%;
        max-width: min(1150px, calc(100% - 64px));
    }

    .wd-input-box-search-img {
        position: absolute;
        top: -80px;
        left: -45px;
        max-width: 21.4%;
    }

    .wd-input-box-search-img img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .wd-input-box-search-img-2 {
        position: absolute;
        left: -80px;
        bottom: -87px;
        width: 22%;
    }

    .wd-input-box-search-img-2 img {
        display: block;
        width: 100%;
        height: auto;
        display: block;

        object-fit: contain;
    }

    /* Dealer hero: ขยาย overflow ซ้าย/บน แต่ crop ขอบขวาและล่าง */
    .wd-input-box-search--dealer .wd-input-box-search-img-2 {
        clip-path: inset(-160px 0 0 -140px);
    }


    .wd-input-box-search {
        height: 188px;
        width: 100%;
        padding: 25px 15px;
        border-radius: 40px 0 32px 0;
        border: none;
        background: transparent;
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        isolation: isolate;
    }

    .wd-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(90deg, #00B6F1 0%, #0B3149 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 40px 0 32px 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(11, 49, 73, 0.80) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .wd-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 80%;
        min-width: 0;
    }

    .wd-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .wd-input-box-search-main-wrapper .select-search-car,
    .wd-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper .select-search-car select,
    .wd-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .wd-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    .wd-input-box-search .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    .wd-input-box-search .wd-input-box-search-wrapper {
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    .wd-input-box-search .btn-wrapper-search {
        position: relative;
        z-index: 1;
    }

    .wd-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        cursor: pointer;
        box-sizing: border-box;
    }

    .wd-input-box-search .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    .select-search select:active,
    select:hover {
        outline: none;
    }

    .select-search select:after,
    select:hover {
        outline: none;
    }

    .a-text-size {
        margin-left: 30px;
    }

    .image-gsbattery {
        margin-top: 30px;
        max-width: 100%;
        max-height: 535px;
    }

    .career-bg {
        height: 460px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 20px;
    }

    .box-radis-des-sales::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #005BAA;
        position: absolute;
        margin-top: 7px;
    }

    .box-radis-des-sales {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #00B6F1;
        position: absolute;
        margin-top: 7px;
    }

    .ma-bottom-20 {
        margin-bottom: 20px;
    }

    .box-radis-sale {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-sale::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #005BAA;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .box-radis-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-batt::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #00B6F1;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .display-destop {
        display: block;
    }

    .display-mobile {
        display: none;
    }

    .box-chage-lang {
        margin-top: -36px;
        margin-right: -5px;
    }

    .line-abt-verticle {
        background-color: #005BAA;
        width: 83%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .line-abt-verticle2 {
        background-color: #005BAA;
        width: 67%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .margin-abt-timeline {
        margin-top: 30px;
    }

    .bg-color-footer {
        height: 20px;
        background-color: #005BAA;
    }

    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .pad-left {
        padding-left: 20px;
    }

    .bg-footer {
        background-color: #EBF8FF;
        width: 100%;
        height: auto;
    }


    .box-text-activities {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .border-bottom-new-act {
        width: 155px;
        height: 4px;
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
    }

    .sub-new-des {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin: 10px 0px;
    }

    /* Hero search: select ย่อตามคอลัมน์ (หลัง rule ทั่วไป — เหมือน 1024–1295) */
    .wd-input-box-search-main-wrapper .select-search-car,
    .wd-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper .select-search-car select,
    .wd-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .select-search-model select {
        display: flex;
        appearance: none;
        width: 100%;
        max-width: 249px;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
        box-sizing: border-box;
    }

    .select-search-car select {
        display: flex;
        appearance: none;
        width: 100%;
        max-width: 249px;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
        box-sizing: border-box;
    }

    .img-box-home-row {
        position: relative;
        display: flex;
        /* ← เพิ่ม */
        align-items: stretch;
    }

    .img-box-home-row-2 {
        position: relative;
        display: flex;
        /* ← เพิ่ม */
        align-items: stretch;
    }

    /* แถวที่ 2: รูปขวา skew ทับกล่องข้อความซ้าย — ยก z-index คอลัมน์ข้อความ */
    .img-box-home-row:has(.img-box-home-container-right)>.pdd-left {
        position: relative;
        z-index: 2;
    }

    .img-box-home-row:has(.img-box-home-container-right)>.pdd-right {
        position: relative;
        z-index: 1;
    }

    .img-box-home-tough {
        position: absolute;
        bottom: 0;
        left: 4%;
        width: clamp(250px, 18vw, 300px);
        /* ปรับตามดีไซน์ */
        height: auto;
        pointer-events: none;
        z-index: 2;
        object-fit: contain;
        object-position: left bottom;
    }

    .img-box-home-container {
        height: 431px;
        width: 89.065%;
        position: relative;
        overflow: hidden;
        left: 12%;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
    }

    .img-box-home-container-right {
        height: 431px;
        width: 89%;
        position: relative;
        overflow: hidden;
        right: 7%;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
    }

    .img-box-home {
        position: absolute;
        top: 0;
        left: -12%;
        width: 150%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .column-description-container-right {
        position: relative;
        overflow: visible;
        display: flex;
        right: 8%;
        margin-top: 63px;
        width: 625px;
        padding: 40px 40px 56px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .column-description-container-left {
        position: relative;
        /* ต้องมี position ถึงจะใช้ z-index ได้ */
        z-index: 1;
        display: flex;
        left: 6%;
        margin-top: 63px;
        width: 625px;
        padding: 40px 40px 56px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .sub-banner-container {
        display: grid;
        position: relative;
        overflow: hidden;
        margin-top: 80px;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        height: auto;
    }

    .sub-banner-container>img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: bottom;
        z-index: 0;
    }

    .sub-banner-content {
        position: relative;
        justify-self: center;
        align-self: start;
        display: flex;
        width: 100%;
        max-width: 1440px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding-left: 64px;
        padding-right: 64px;
        padding-top: 64px;
        padding-bottom: 64px;
        z-index: 1;
    }

    .sub-banner-grid-2x3 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 16px;
    }

    .sub-banner-box {
        display: flex;
        width: 458px;
        height: auto;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        border: 0.5px solid rgba(255, 255, 255, 0.70);
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .batt-long-time {
        margin: 20px 0px;
    }

    .tabbable-line>.nav-tabs>li {
        margin: 0 110px;
    }

    .text-colo-link {
        color: #005BAA;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 168px;
    }

    .img-box-fing-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 556px;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
    }

    .select-box select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #005BAA;
        padding: 4px 10px;
        width: 96px;
    }

    .select-box select:active,
    select:hover {
        outline: none;
    }

    /*  start Contact page  */
    .text-contact-header {

        color: #000000;
        font-size: 30px;
        line-height: 45px;
        font-weight: 500;
    }

    .text-contact-h-main {

        color: #005BAA;
        font-size: 35px;
        line-height: 40px;
        font-weight: 500;
    }

    .request-select {
        color: #F00 !important;
    }

    .margin-top-input {
        margin-top: 50px;
        padding-top: 30px;
    }

    /* End Contact page  */
    /* find batt type page  */
    .nav-padding {
        margin-left: 222px;
        margin-right: 50px;
    }

    .position-type {
        position: absolute;
        top: 151px;
        left: 50px;
    }

    .text-batt-name {

        font-size: 30px;
        line-height: 55px;
        color: #00B6F1;
        font-style: italic;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .batt-type {

        font-size: 72px;
        line-height: 55px;
        color: #005BAA;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .detail-title {

        font-size: 73px;
        line-height: 50px;
        color: #fff;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .sub-batt-type {

        font-size: 30px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        margin-bottom: 20px;
    }

    /* end find batt type page  */
    /* career page  */
    .box-name-position {
        background-color: #005BAA;
        height: 70px;
    }

    /* end career page  */
    /* about us page  */
    .abt-img {
        width: 100%;
        height: 359px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .text-abt {

        color: #646464;
        font-size: 24px;
        line-height: 55px;
        font-weight: 500;
    }

    .box-content-abt {
        padding-left: 50px;
    }

    .text-name-building {

        color: #000;
        font-size: 40px;
        line-height: 46px;
        font-weight: 500;
    }

    .line-abt {
        background-color: #005BAA;
        width: 4px;
        height: 507px;
        position: absolute;
        top: 185px;
        left: 167px;
    }

    .line-abt-2 {
        background-color: #005BAA;
        width: 4px;
        height: 507px;
        position: absolute;
        left: 12px;
    }

    .text-year-abt {

        color: #005BAA;
        font-size: 30px;
        line-height: 45px;
        font-weight: 500;
    }

    .text-h-abt {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
    }

    .text-h-abt-detail {

        color: #000000;
        font-size: 14px;
        line-height: 24px;
    }

    .mar-top-box-history {
        margin-top: 50px;
    }

    .padding-top-abt {
        margin-top: 45px;
    }

    .text-job-position {
        color: #FFFFFF;
        font-size: 23px;
        line-height: 30px;

    }

    .short-full {
        color: #fff;
        font-size: 14px;
    }

    .data-abt-h-text {

        color: #005BAA;
        font-size: 36px;
        line-height: 55px;
    }

    .sub-data-abt-h-text {

        color: #646464;
        font-size: 24px;
        line-height: 1.5;
    }

    .margin-top-abt {
        margin-top: 60px;
    }

    .text-detail-abt-h {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
    }

    .text-h-abt-gs {

        color: #000000;
        font-size: 30px;
        line-height: 55px;
        margin-bottom: 20px;
    }

    /* end about us page  */
    .margin-space-banner {
        margin-top: 10px;
    }

    .img-bg-footer {
        position: absolute;
        margin-top: 20px;
        right: 0;
        bottom: 0;
    }

    .padding-top-footer-right {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .footer-main-wrapper {
        display: flex;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
        gap: 120px;
        box-sizing: border-box;
    }

    .contact-footer-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
    }

    .contact-footer-container {
        display: flex;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        border: 1px solid #00B6F1;
        width: fit-content;
    }

    .contact-footer-icon-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    .contact-footer-icon {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .link-footer-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 803px;
        gap: 24px;
    }

    .link-footer-sub-wrapper-upper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 74px;
        align-self: stretch;
    }

    .link-footer-sub-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 74px;
        align-self: stretch;
    }

    .link-footer-sub-wrapper-item {
        display: flex;
        flex-direction: column;
        width: 202px;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .link-footer-shop-container {
        display: flex;
        padding: 8px 16px;
        width: 251px;
        gap: 24px;
        align-self: stretch;
        align-items: center;
        flex-direction: row;
        border-radius: 8px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
    }

    .link-footer-shop-container .text-link-footer {
        white-space: nowrap;
    }

    .bottom-footer-wrapper {
        display: flex;
        padding: 24px 64px;
        align-items: center;
        flex-direction: row;
        gap: 40px;
        background: #FFF;
    }

    .text-link-footer {

        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #231F20;
    }

    .text-detail-reserved {

        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #231F20;
        text-align: start;
    }


    .img-footer-logo {
        height: 66px;
    }

    .contact-text-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
    }

    .text-detail-footer {

        font-size: 14px;
        line-height: 1.5;
        color: #231F20;
        padding-top: 8px;
        margin-bottom: 8px;
    }

    .text-address-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .padding-top-footer {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .navbar-main-background {
        position: relative;
        z-index: 60;
    }

    .navbar-fixed {
        width: 100%;
        max-width: 100%;
        padding: 16px 0;
        box-sizing: border-box;
        position: relative;
    }

    .navbar-fixed-inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 64px;
        box-sizing: border-box;
        gap: 16px;
    }

    .nav-solid {
        background-color: #007FC6;
    }

    .nav-main-sub-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: auto;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-main-sub-wrapper>.nav-main-sub-wrapper-item {
        display: flex;
        padding: 0 8px 0 24px;
        min-height: 40px;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    .nav-main-sub-wrapper>.nav-main-sub-wrapper-item>.nav-main-sub-wrapper-item {
        display: flex;
        padding: 0 16px;
        justify-content: center;
        align-items: center;
        align-self: center;
        min-height: 40px;
    }

    .nav-main-sub-wrapper-item-lower {
        display: flex;
        height: 40px;
        padding: 0 16px 0 8px;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        background: rgba(255, 255, 255, 0.20);
        backdrop-filter: blur(12px);
    }

    .nav-main-sub-wrapper-sub-item-lower {
        padding: 8px 16px;
        gap: 8px;
    }


    .navbar-sticky-revamp.navbar-fixed-top {
        z-index: 60;
    }

    .navbar-sticky-revamp.navbar-default {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
        width: 50%;
        min-width: 760px;
        margin: 0 auto;
        padding: 0 32px;
        border: none;
        border-radius: 0 0 15px 0;
        background: linear-gradient(180deg, rgba(0, 144, 224, 0.95) 0%, rgba(0, 127, 198, 0.95) 100%);
        box-shadow: 0 8px 32px 0 rgba(27, 100, 171, 0.30);
        backdrop-filter: blur(12px);
    }

    .navbar-sticky-revamp.navbar-sticky-revamp--en.navbar-default {
        width: 55%;
    }

    .navbar-sticky-revamp.navbar-default .nav-desk-top {
        display: flex;
        align-items: center;
        gap: 40px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navbar-default {
        height: 80px;
    }

    /* heder main  */
    .box-top-green {
        background-color: #C7EB02;
        width: 128px;
        height: 14px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 7px;
    }

    .position-btn-typ-batt {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: 0;
    }

    .text-logo {
        font-size: 73px;
        line-height: 50px;
    }

    .text-detail-type-battery {

        font-size: 16px;
        line-height: 25px;
        color: #fff;
        padding-top: 10px;
        padding-left: 40px;
        padding-right: 40px;
    }

    .box-top-orang {
        background-color: #FF9300;
        width: 128px;
        height: 14px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 7px;
    }

    .box-top-blue {
        background-color: #00AAE8;
        width: 128px;
        height: 14px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 7px;
    }

    .title-news {

        font-size: 30px;
        line-height: 38px;
        margin-top: 20px;
        font-weight: 600;
        height: 72px;
        overflow: hidden;
    }

    .tag-news-type {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .btn-tag-tip {
        background-color: #00B6F1;
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }

    .btn-tag-activities {
        background: rgba(166, 166, 166, 0.10);
        padding: 8px;
        border-radius: 0px;
        color: #fff;
        font-size: 14px;
    }

    .btn-tag {
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }

    .date-news {
        color: #999;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
    }

    .select-box {
        margin-top: -25px;
        margin-right: 30px;
    }

    .margin-top-nav {
        margin-top: 28px;
    }

    .dropdown-menu {
        text-align: left;
        margin-top: 29px;
        border-top: none;
        border-radius: 0px;
    }

    .dropdown-menu>li>a {
        padding: 7px 20px;
    }

    .navbar-default .navbar-brand {
        position: absolute;
    }

    .nav-desk-top__brand {
        display: inline-block;
        vertical-align: middle;
    }

    .nav-desk-top__brand-link {
        display: inline-block;
        padding: 0;
        line-height: 0;
    }

    .nav-desk-top__brand .h-img-logo {
        height: 64px;
        width: auto;
        margin-top: 0;
        /* ปรับให้ตรงแนวกับข้อความเมนู */
        display: block;
    }

    /* .nav-desk-top .main-menu-header {
        position: relative;
        padding: 8px 0;
        margin: 0 30px;
        transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
        color: #005BAA;
    }
    .nav-desk-top .main-menu-header::before {
        content: '';
        position: absolute;
        bottom: 3px;
        left: 0;
        height: 3px;
        width: 100%;
        background-color: #005BAA;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: color 0.1s,transform 0.2s ease-out;
    
    }
    .nav-desk-top .main-menu-header:active::before {
        background-color: #fff;
        border-radius: 4px;
    }
    .nav-desk-top .main-menu-header:hover::before, .main-menu-header:focus::before {
        transform-origin: left top;
        transform: scale(1, 1);
    } */
    .h-img-logo {
        height: 42px;
        margin-top: 4px;
    }

    .invisible-mobile {
        display: block;
    }

    .visible-tablet-slide-baner {
        display: none;
    }

    .visible-mobile {
        display: none;
    }

    .invisible-slide-baner {
        display: block;
    }

    .visible-slide-baner {
        display: none;
    }

    .visible-component-desktop {
        display: block;
    }

    .visible-component-mobile {
        display: none;
    }

    .search-result-card-excerpt--full {
        display: block;
    }

    .search-result-card-excerpt--short {
        display: none;
    }


    .service-section-decor--mobile {
        display: none;
    }

    .nav-desk-top {
        list-style-type: none;
        margin: 0px;
        padding: 0;
    }

    .nav-list-icon {
        list-style-type: none;
        margin-left: -40px;
    }

    .lnline-list {
        display: inline;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 183px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;

    }

    .dropdown-content a:hover {
        background-color: #f1f1f1
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }

    /* endheader main */
    /* homepage */
    .img-icon-type {
        height: 80px;
    }

    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-weight: 600;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .title-search {

        font-size: 30px;
        line-height: 35px;
        color: #005BAA;
    }

    .bg-search-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .sub-title-search {

        font-size: 24px;
        line-height: 1.25;
        color: #fff;
        text-align: center;
        margin-bottom: 49px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }


    .select-search select:active,
    select:hover {
        outline: none;
    }

    .select-search select:after,
    select:hover {
        outline: none;
    }

    .text-title-app {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-content-app {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-sub-blue {
        color: #00B6F1 !important;
    }

    .app-box {
        margin-top: 25%;
    }

    .img-box-type-battery {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 638px;
        max-width: 100%;
    }

    .box-search-batt {
        margin-top: 139px;
        padding-left: 131px;
    }

    .title-search-batt {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
    }

    .text-content-batt {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
    }

    .featured-news-card {
        display: flex;
        align-items: stretch;
        gap: 24px;
    }

    .featured-news-text-align {
        flex: 1;
        padding-left: 0;
    }

    .other-news-text-align {
        flex: 1;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .other-news-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        font-size: 20px;
        line-height: 1.25;
        font-weight: 700;
        font-style: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .img-box-news {
        aspect-ratio: 1 / 1;
        width: 431px;
        height: 431px;
        flex: 0 0 431px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .img-box-news-main {
        width: 100%;
        height: 423px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .news-section-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .news-category-list {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .news-category-container {
        display: inline-flex;
        height: 40px;
        padding: 8px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: rgba(166, 166, 166, 0.10);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        white-space: nowrap;
        transition: none;
    }

    .news-category-container:hover {
        border: 1px solid var(--Primary, #007FC6);
        background: #D9F2FF;
    }

    .description-news {
        font-size: 16px;
        font-style: normal;
        line-height: 1.25;
        font-weight: 400;
        color: #464646;
        margin-top: 16px;
    }

    .news-column-container {
        display: flex;
        min-height: 129px;
        height: auto;
        align-items: flex-start;
        gap: var(--border-radius-none, 0);
        flex-shrink: 0;
        align-self: stretch;
        border-radius: var(--border-radius-200, 8px);
        border: 1px solid #D8D8D8;
        background: #FFF;
        margin-bottom: 24px;
        cursor: pointer;
        overflow: hidden;
    }

    .news-column-content {
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: auto;
    }

    .news-column-image {
        width: 129px;
        height: 129px;
        flex: 0 0 129px;
        aspect-ratio: 1 / 1;
        align-self: flex-start;
        border-radius: var(--border-radius-200, 8px) 0 0 var(--border-radius-200, 8px);
    }

    .new-column-text-align {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 16px;
    }


    .text-name-hero {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: bolder;
    }

    .text-sub-hero {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: 600;
    }

    .box-position-baner-hero {
        position: absolute;
        top: 10%;
        left: 15%;
    }

    .text-slo-grand {

        font-size: 25px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: 500;
    }

    /* end homepage */
    /* 
prduct detailpage */
    .text-breadcrumb {
        color: #282828;
    }


    .bg-pro-detail {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        /* หรือ 32px — ระยะขอบใน */
        box-sizing: border-box;
    }


    .product-detail-hero .col-md-7:has(.product-items-row) {
        min-width: 0;
    }

    .product-items-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        gap: clamp(8px, 1.2vw, 24px);
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        box-sizing: border-box;
        padding-inline: 8px;
    }

    .product-item-main-container {
        flex: 0 0 auto;
        width: 160px;
        min-width: 0;
        min-height: 84px;
        display: flex;
        flex-direction: column;
    }

    .product-item-inner {
        transform: skewX(18deg);
    }

    .product-item-inner:has(.product-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    .product-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 53.537px;
        height: 53.537px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -80%);
        z-index: 2;
    }

    .product-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }


    .product-item-container {
        flex: 1;
        min-height: 85px;
        height: 100%;
        width: 100%;
        max-width: 160px;
        margin-inline: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 16px 12px 12px;
        box-sizing: border-box;
        background: var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 15px 0px;
        cursor: pointer;
    }

    .product-item-title {
        margin-top: 16px;
        text-align: center;
        color: #fff;
        width: 100%;
    }

    .product-item-title .body2 {
        white-space: normal;
        line-height: 1.3;
    }

    .img-product-batt-detail {
        width: auto;
        height: auto;
        max-width: 72%;
        /* ปรับได้ เช่น 65%–80% */
        max-height: 85%;
        /* ไม่ล้นความสูงกล่อง */
        object-fit: contain;
        display: block;
    }

    .btn-border-w {
        background-color: #FFFFFF;
        border: 1px solid #D3D3D3;
        border-radius: 25px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 209px;
        height: 50px;
        font-weight: 600px;
        font-size: 17px;

    }

    .box-view-big-img {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .text-type-pro-detail {

        font-size: 18px;
        line-height: 1.4;
        font-weight: 700;
        color: #00B6F1;
    }

    .text-name-pro-detail {

        font-size: 56px;
        line-height: normal;
        font-weight: 700;
        color: #00B6F1;
    }

    .compare-product-btn {
        background-color: #fff;
        display: inline-flex;
        height: 40px;
        padding: 0 24px;
        align-items: center;
        gap: 8px;
        color: #007FC6;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }

    .compare-product-btn-2 {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 8px 6px 7px 6px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 4px;
        background: var(--White, #FFF);
    }

    .compare-product-btn-2.is-not-selected {
        display: none;
    }

    .compare-product-btn-2 img {
        display: none;
    }

    .compare-product-btn-2.is-check img {
        display: block;
    }

    .compare-product-btn-2.is-check {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 8px 6px 7px 6px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 4px;
        border: 1px solid var(--Primary, #007FC6);
        background: var(--Primary, #007FC6);
    }

    .product-grid-item .compare-product-btn-2 {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
    }

    .product-detail-two-col {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
    }

    .product-detail-two-col__left {
        display: flex;
        align-items: center;
        flex-direction: row;
        align-self: stretch;
        gap: 0px;
        width: 100%;
        max-width: 241px;
        min-width: 0;
    }

    .product-detail-two-col__right {
        display: flex;
        align-items: center;
        align-self: stretch;
        border-left: 1px solid #F9FAFB;
        flex: 1;
        min-width: 0;
        padding-left: 24px;
    }

    .product-detail-two-col__left-text {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;

    }

    .product-detail-two-col:nth-child(even) {
        background-color: #F9FAFB;
    }

    /* หรือเฉพาะซ้าย */
    .product-detail-two-col:nth-child(even) .product-detail-two-col__left {
        background-color: #F9FAFB;
    }

    .product-info-seperator {
        height: 1px;
        background: #D2D2DD;
    }

    .product-detail-hero {
        position: relative;
    }

    .product-detail-main {
        padding-bottom: 24px;
    }

    .product-car-filter-layout {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .product-car-filter-container {
        cursor: pointer;
    }

    .product-car-filter-container {
        display: flex;
        height: 48px;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        background: var(--BG-Light, #EBF8FF);
        backdrop-filter: blur(12px);
    }

    .product-car-filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .related-product-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .box-data-pro-detail {
        padding-left: 32px;
    }

    .text-sub-pro-detail {

        font-size: 19px;
        line-height: 25px;
        font-weight: 500;
        color: #000000;
    }

    .text-slogrand-pro-detail {

        font-size: 27px;
        line-height: 55px;
        font-weight: 500;
        color: #000000;
    }

    .btn-circle-product {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        width: 41px;
        height: 41px;
    }

    .text-icon-pro-detail {

        font-size: 18px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .margin-bottom-img {
        margin-bottom: 5px;
    }

    .text-data-contant {

        font-size: 27px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .text-sub-detail {

        font-size: 16px;
        font-style: italic;
        line-height: 23px;
        padding-left: 50px;
    }

    .text-h-pro {

        font-size: 15px;
        font-style: italic;
        line-height: 23px;
        font-weight: 600;
        color: #000000;
    }

    .text--sub-h-pro {

        font-size: 35px;
        font-style: italic;
        line-height: 17px;
        font-weight: 600;
        color: #000000;
        margin-top: 10px;
    }

    .green-box {
        background-color: #C7EB02;
        height: 54px;
        width: 2px;
        position: absolute;
        margin-top: 5px;
        left: 9px;
    }

    .padd-bottom-btn {
        padding-bottom: 20px;
    }

    .new-box-tip {
        padding-top: 29%;
    }

    .title-news-tip {
        font-size: 43px;

        font-weight: 500;
        line-height: 55px;
        color: #000;
    }

    .sub-new-detail {
        font-size: 23px;

        font-weight: 500;
        line-height: 32px;
        color: #005BAA;
        padding-right: 35%;
    }

    .img-icon-prodetail {
        width: 60px;
        height: 60px;
    }

    .img-icon-prodetail-list {
        width: 43px;
        height: 43px;
    }

    /* end productdetail page */
    .btn-main-gradient:active {
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
        border-radius: 4px;
        width: 220px;
        height: 50px;
        border: none;

        font-size: 16px;
        color: #fff;
        margin-top: 10px;
        box-shadow: 0px 3px 6px #00B6F1;
    }

    .btn-main-border {
        background-color: #fff;
        border-radius: 4px;
        width: 220px;
        height: 50px;
        border: 2px solid #005BAA;

        font-size: 16px;
        color: #005BAA;
        margin-top: 10px;
    }

    .btn-main-border:hover {
        box-shadow: 0px 3px 6px #00B6F1;
        color: #005BAA;
    }

    .btn-main-wt {
        background-color: #fff;
        border-radius: 32px;
        width: 220px;
        height: 50px;
        border: none;

        font-size: 16px;
        color: #005BAA;
        border-radius: 32px;
        margin-top: 10px;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        background-color: #ffffff;
        color: #000000;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .sidenav2 {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 9999;
        top: 0;
        right: 0;
        background-color: #ffffff;
        color: #000;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .sidenav2 span {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 18px;
        color: #000 !important;
    }

    .sidenav span {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 18px;
    }

    .footer {
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    .sidenav .closebtn {

        position: absolute;
        top: 0;
        left: -64px;
        font-size: 36px;
        margin-left: 50px;
    }

    /* product page */
    .img-product-pass-batt {
        background-position: center;
        background-repeat: no-repeat;
        height: 600px;
        width: 100%;
        background-size: cover;
    }

    .text-batt-type-one {

        font-style: italic;
        color: #C7EB02;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 29px;
        line-height: 32px;
    }

    .text-batt-type-two {

        font-style: italic;
        color: #FF9300;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 29px;
        line-height: 32px;
    }

    .text-batt-type-three {

        font-style: italic;
        color: #00B6F1;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 29px;
        line-height: 32px;
    }

    .position-type-product {
        position: absolute;
        top: 130px;
    }

    .position-type-product-right {
        position: absolute;
        top: 130px;
        right: 50px;
    }

    .box-bg-product {
        background-color: #fff;
        height: 451px;
        border-radius: 0 0 24px 0;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        overflow: hidden;
    }

    .img-product-batt-wrap {
        width: 100%;
        aspect-ratio: 3 / 2;
        min-height: 201px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E9E9E9;
        overflow: hidden;
        position: relative;
    }

    .img-product-batt {
        width: 80%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform .3s ease;
        transform-origin: center center;
    }

    .box-bg-product:hover .img-product-batt {
        transform: scale(1.12);
    }

    .product-batt-name {

        color: #000000;
        text-align: left;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 700;
    }

    .type-batt-name {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
    }

    .batt-info-seperator {
        height: 1px;
        opacity: 0.5;
        background: #D2D2DD;
    }

    .batt-spec-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-spec-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-terminal-container {
        display: inline-flex;
        width: auto;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid #D2D2D2;
        background: #EBF8FF;
        margin-bottom: 8px;
    }

    .tag-batt-name {
        color: #005BAA;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        height: 124px;
        overflow: hidden;
    }

    .text-barnd {
        cursor: pointer;
    }

    .padding-box-pro-batt {
        padding: 24px 24px 24px 24px;
    }

    .btn-circle {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        position: absolute;
        bottom: 239px;
        right: 29px;
    }

    .banner-box-pro-car-type {
        margin-top: 10px;
        height: 469px;
    }

    .img-product-batt-banner {
        width: 100%;
        height: 100%;
    }

    .MultiCarousel {
        float: left;
        overflow: hidden;
        padding: 15px;
        width: 100%;
        position: relative;
    }

    .MultiCarousel .MultiCarousel-inner {
        transition: 1s ease all;
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: center;
        padding: 10px;
        margin: 10px;
        background: #fff;
        color: #000;
    }

    .activeBrand {
        border-bottom: 4px solid #005BAA;
    }

    .MultiCarousel .leftLst,
    .MultiCarousel .rightLst {
        position: absolute;
        border-radius: 50%;
        top: calc(50% - 16px);
    }

    .MultiCarousel .leftLst {
        left: 0;
    }

    .MultiCarousel .rightLst {
        right: 0;
    }

    .MultiCarousel .leftLst.over,
    .MultiCarousel .rightLst.over {
        pointer-events: none;
        background: #ccc;
    }

    .paddding-left-news {
        padding-left: 15%;
    }


    /* Homepage hero search tabs */
    .bg-search-batt__content .tabbable-panel {
        display: flex;
        max-width: 1313px;
        width: 80%;
        margin-left: auto;
        align-items: stretch;
        flex-direction: row;
        justify-content: flex-end;
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
        width: 100%;
        flex: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
        align-self: stretch;
    }

    .bg-search-batt__content .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .nav-tabs-container-item:last-child {
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
    }

    .bg-search-batt__content .nav-tabs-container-item.active {
        border-top: 1px solid #005BAA;
        border-left: 1px solid #005BAA;
        border-bottom: 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(28, 53, 74, 0.80) 100%);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .nav-tabs-container-item.active:last-child {
        border-right: 1px solid #005BAA;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:focus,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
    }

    .bg-search-batt__content .btn-wrapper-search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }

    /*End product page */
}

@media(max-width:1574px) {
    .box-content-warranty {
        position: relative;
        height: 928px;
        margin-bottom: 80px;
    }

}

@media (max-width: 1200px) {
    .box-content-warranty {
        position: relative;
        height: 595px;
        margin-bottom: 80px;
    }

}

@media (max-width: 1150px) {
    .landing-vector {
        position: absolute;
        right: 0;
        bottom: -9%;
        transform: translateY(-50%) rotate(1.131deg);
        max-width: 400px;
        height: auto;
        z-index: -1;
        pointer-events: none;
        opacity: 1;
    }

    .landing-vector img {
        width: 100%;
        height: auto;
        display: block;
    }


}

@media (max-width: 1199px) and (min-width: 993px) {
    .column-description-container-right {
        margin-top: 23px !important;
    }

    .column-description-container-left {
        margin-top: 23px !important;
    }

    .btn-view-more-left {
        left: 200px !important;
    }

    .btn-view-more-right {
        left: 270px !important;
    }

    .btn-view-more-landing-page-left {
        left: 200px !important;
    }

    .btn-view-more-landing-page-right {
        left: 50px !important;
    }

}

@media (max-width: 475px) {
    .img-new-m-img-box:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        padding-bottom: 162.94% !important;
    }
}

@media (max-width: 1295px) {
    body {
        padding-top: 80px;
        /* = .navbar-sticky-revamp .navbar-header height */
    }


    /* ซ่อน sticky บน mobile — เก็บเหมือนเดิม */
    .navbar-sticky-revamp.navbar-fixed-top {
        display: block !important;
    }

    .navbar-sticky-revamp.navbar-fixed-top {
        position: fixed !important;
        /* ชนะ relative */
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 60;
    }

    /* .navbar-main-background .navbar-fixed {
        padding: 0;    
    }

    /* แถบ mobile ใน header-main2 (ไม่ sticky) */
    .navbar-sticky-revamp .navbar-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 80px;
        padding: 12px 16px;
        background: #007FC6;
        gap: 0;
    }

    .navbar-sticky-revamp .navbar-header__brand {
        display: flex;
        align-items: center;
        padding: 0;
        flex-shrink: 0;
    }

    .navbar-sticky-revamp .navbar-header__brand .img-logo {
        position: static;
        transform: none;
        margin: 0;
        height: 56px;
        width: auto;
    }

    .navbar-sticky-revamp .navbar-header__end {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: auto;
        flex-shrink: 0;
    }



    /* ซ่อนเมนู desktop แนวนอนใน main2 บน mobile */
    .navbar-main-background .navbar-fixed>.row {
        display: none !important;
    }

    .navbar-main-background .navbar-fixed-inner {
        display: none !important;
    }

    .navbar-main-background .navbar-header {
        display: none !important;
    }

    .navbar-main-background .navbar-header .nav-desk-top {
        display: none !important;
    }

    .navbar-main-background .navbar-toggle .icon-bar {
        background-color: #fff;
    }

    .navbar-sticky-revamp .navbar-main,
    .navbar-sticky-revamp .nav-desk-top {
        display: none !important;
    }

    .navbar {
        margin-bottom: 0px;
    }

    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 0px;
    }

    .header-search-panel,
    .header-search-panel.is-open,
    .header-batt-search,
    .header-batt-search.is-open {
        display: none !important;
    }

    .header-search-toggle-tablet-mobile {
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
    }

    .navbar-sticky-revamp .navbar-header__end.visible-mobile {
        display: flex !important;
    }

    .navbar-sticky-revamp .navbar-header__end .navbar-toggle {
        float: none;
    }

    .tabmobile.collapsing,
    .tabmobile.in {
        background-color: #EBF8FF;
        padding: 16px;
    }

    .sidenav .tabmobile.collapse.in {
        opacity: 1;
    }

    .sidenav .tabmobile.collapse:not(.in):not(.is-sidenav-fade-expanding) {
        opacity: 0;
    }

    .sidenav .tabmobile.is-sidenav-fade-expanding {
        animation: sidenav-dropdown-fade-in 0.35s ease forwards;
    }

    .sidenav .tabmobile.is-sidenav-fade-collapsing {
        animation: sidenav-dropdown-fade-out 0.35s ease forwards;
    }

    .sidenav .tabmobile a {
        padding: 12px 0px;
    }

    .sidenav-header-batt-search-category-container-wrapper {
        display: flex;
        padding: 0 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }

    .sidenav-header-batt-search-category-container {
        width: 100%;
        max-width: 100%;
        height: 138px;
        border-radius: 8px;
        background: #E6EFF7;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
    }

    .sidenav-header-batt-search-category-container img {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: auto;
        max-width: none;
        object-fit: cover;
        object-position: right center;
    }

    .sidenav-batt-type-img {
        max-width: 206px;
        height: 89px;
        flex-shrink: 0;
        aspect-ratio: 206/89;
        display: block;
        position: absolute;
        right: 16px;
        top: 36px;
        object-fit: cover;
        object-position: right center;
    }

    .sidenav-header-batt-search-category-container:hover {
        color: #FFF;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transition: opacity 0.25s ease;
    }

    .sidenav-header-barr-search-category-text {
        margin-top: 16px;
        margin-left: 16px;
    }

    .sidenav-batt-subpanel[hidden],
    .sidenav-main-panel[hidden],
    .sidenav-batt-subpanel-content[hidden] {
        display: none !important;
    }

    .sidenav-subpanel-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        margin-bottom: 16px;
    }

    .sidenav-subpanel-back {
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        line-height: 0;
    }

    .sidenav-subpanel-title {
        margin: 0;

        font-size: 16px;
        font-weight: 700;
        color: #333;
    }

    .sidenav .sidenav-header-batt-search-category-container {
        padding: 0;
        display: block;
        justify-content: initial;
    }

    .sidenav .sidenav-header-batt-search-category-container h5 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        color: inherit;
    }

    .sidenav-header-batt-search-category-container:hover h5 {
        color: #FFF;
    }

    .sidenav-batt-trigger {
        cursor: pointer;
    }

    .footer-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 16px;
        margin-right: 16px;
        padding-top: 24px;
        padding-bottom: 24px;
        width: auto;
        box-sizing: border-box;
    }

    .footer-row .img-footer-logo {
        align-self: flex-start;
        margin-left: 0;
    }

    .footer-row>.col-xs-12 {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* footer */
    .footer {
        background-color: #EBF8FF;
        width: 100%;
        /* max-width: 1500px; */
    }

    .link-footer-sub-wrapper-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .link-footer-shop-container {
        display: flex;
        padding: 8px 16px;
        width: 100%;
        gap: 24px;
        align-self: stretch;
        align-items: center;
        flex-direction: row;
        border-radius: 8px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
    }

    .link-footer-shop-container .text-link-footer {
        white-space: nowrap;
    }

    .footer-link-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-link-sub-wrapper {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-content: start;
    }

    #accordion .tab-panel-batt-footer.collapse.in,
    #accordion .tab-panel-batt-footer.collapsing {
        background-color: #EBF8FF !important;
        /* ชนะ #fff !important */
        display: flex;
        flex-direction: column;
        padding: 8px 16px;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;

    }

    .search-close-button-container {
        display: flex;
        min-height: 24px;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 24px;
    }

    .search-close-button {
        background: transparent;
        border: transparent;
    }

    .search-close-button img {
        min-width: 24px;
        min-height: 24px;
    }

    .search-box-container {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        padding: 32px;
        min-height: 100vh;
        margin-left: auto;
        margin-right: auto;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%), #FFF;
    }

    .search-box-container__vector {
        position: absolute;
        right: 5px;
        bottom: 75px;
        width: 100%;
        max-width: 635px;
        height: auto;
        margin: 0;
        opacity: 0.15;
        /* หรือ 0.2 ให้ใกล้ banner */
        object-fit: contain;
        object-position: right bottom;
        z-index: 0;
        pointer-events: none;
    }

    /* ให้เนื้อหาอยู่เหนืารูป */
    .search-close-button-container,
    .search-box-field,
    .search-word-wrapper {
        position: relative;
        z-index: 1;
    }

    .search-box-field {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 0 0 16px 0;
        border: 1px solid #E2E2E2;
        background: #FFF;
    }

    .search-box-field:focus-within {
        border-color: #007FC6;
        /* แทน .search-box-input:focus */
    }

    .search-box-field-input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: transparent;
        outline: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .search-word-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .search-word-recommend {
        display: flex;
        flex-direction: column;
        align-items: start;
        align-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .header-search-panel-sticky {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        z-index: 9999;
    }

    .header-search-panel-sticky.is-open {
        display: block;
    }

    .contact-footer-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        margin-bottom: 8px;
    }

    .contact-footer-wrapper .contact-footer-container {
        display: flex;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        border: 1px solid #00B6F1;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        box-sizing: border-box;
    }


    /* email นอก wrapper — กว้างตาม content */
    .contact-footer-container:not(.contact-footer-wrapper .contact-footer-container) {
        width: max-content;
        max-width: 100%;
        box-sizing: border-box;
    }

    .contact-footer-container {
        display: flex;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        border: 1px solid #00B6F1;
        width: max-content;
        max-width: 100%;
        box-sizing: border-box;
    }

    .contact-footer-icon-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 21px;
    }

    .contact-footer-icon {
        width: 32px;
        height: 32px;
        aspect-ratio: 1/1;
    }

    .bottom-footer-wrapper {
        display: flex;
        padding: 16px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        background: #FFF;
    }

    .text-detail-reserved {

        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #231F20;
        text-align: start;
    }

    .featured-news-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        font-size: 20px;
        line-height: 1.5;
        font-weight: 700;
        font-style: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .about-us-other-company-info-image-wrapper {
        width: 100%;
        max-width: 50%;
        flex: 0 1 50%;
        min-width: 0;
        height: auto;
        aspect-ratio: 1/1;
    }

    .about-us-feature-company-info-wrapper {
        flex-wrap: wrap;
    }

    .about-us-feature-company-info-item {
        flex: 1 1 calc(33.333% - 16px);
        min-width: min(100%, 260px);
        max-width: 100%;
        box-sizing: border-box;
    }

    .about-us-feature-company-info-item .h4-bold {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .about-us-feature-company-info-item-value-with-img {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .about-us-feature-company-info-item-value-with-img .h4-bold {
        flex: 1 1 0;
        min-width: 0;
    }

    .about-us-other-company-info-wrapper {
        min-width: 0;
    }

    /* Landing page */

    .landing-page-image-text-wrapper {
        display: flex;
        width: 100%;
        padding-top: 80px;
        flex-direction: column;
        gap: 6px;
    }

    .img-box-landing-page-row,
    .img-box-landing-page-row-2 {
        position: relative;
        display: flex;
        align-items: stretch;
        justify-content: center;
        width: 100%;
        max-width: 1295px;
        margin: 0 auto;
        box-sizing: border-box;
        transform: translateX(clamp(-36px, -2.78vw, 0px));
    }

    .img-box-landing-page-container {
        height: 431px;
        width: 60%;
        flex-shrink: 0;
        margin-top: 42px;
        position: relative;
        overflow: hidden;
        transform: skewX(-10deg);
        border-radius: 0 0 48px 0;
        background-color: #f1f1f1;
    }

    .img-box-landing-page-container-right {
        height: 431px;
        width: 60%;
        flex-shrink: 0;
        margin-top: 42px;
        right: 3%;
        position: relative;
        overflow: hidden;
        transform: skewX(-10deg);
        border-radius: 0 0 48px 0;
        background-color: #f1f1f1;
    }

    .img-box-landing-page {
        position: absolute;
        top: 0;
        left: -12%;
        width: 120%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .column-description-container-landing-page-right {
        position: relative;
        overflow: visible;
        display: flex;
        width: 111.93%;
        margin-left: -24px;
        margin-right: 0px;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.90);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .column-description-container-landing-page-left {
        position: relative;
        z-index: 1;
        display: flex;
        width: 111.93%;
        margin-right: -24px;
        margin-left: 16px;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.90);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .btn-view-more-landing-page {
        z-index: 2;
        bottom: 75px;
        display: inline-flex;
        height: 48px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #00B6F1;
        background: #007FC6;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .btn-view-more-landing-page-left {
        left: 300px;
    }

    .btn-view-more-landing-page-right {
        left: 50px;
    }

    .landing-page-text-list-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        align-self: stretch;
        padding: 80px 0;
    }

    .landing-page-video-section {
        height: auto;
    }
}


@media (max-width: 767px) {
    .footer-link-sub-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 16px;
        padding: 8px 0;
        align-items: center;
    }

    .sidenav .sidenav-header-batt-search-category-container h5 {
        width: 35%;
    }

    .search-box-container__vector {
        position: absolute;
        right: -55px;
        bottom: 70px;
        width: 130%;
        height: auto;
        margin: 0;
        opacity: 0.06;
        object-fit: contain;
        object-position: right bottom;
        z-index: 0;
        pointer-events: none;
    }

}


@media (max-width:1295px) and (min-width:1024px) {
    h1 {
        font-size: 48px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h2 {

        font-size: 32px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h3 {
        font-size: 24px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h4 {
        font-size: 20px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h5 {
        font-size: 18px;
        font-style: normal;
        line-height: 1.0;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h6 {
        font-size: 12px;
        font-style: normal;
        line-height: 1.0;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    p {
        font-size: 16px;
        font-style: normal;
        line-height: 1.5;
    }


    .blue-h1 {
        font-size: 48px;

        line-height: 36px;
        font-weight: 800;
        color: #007FC6;
    }

    .mobile-h1 {
        font-size: 32px;
        font-weight: 700;
    }

    .mobile-h2 {
        font-size: 24px;
        line-height: 1.4;
    }

    .body1 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .body1-bold {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .body2 {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.25;
    }

    .body3 {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.25;
    }

    .content-space {
        min-height: 108px;
        flex: 1 0 0;
        align-self: stretch;

    }

    .space-extra-large {
        height: 92px;
        margin-top: 0;
    }

    .space-large {
        margin-top: 81px;
    }

    .space-medium {
        margin-top: 64px;
    }

    .space-semi-medium {
        height: 52px;
        margin-top: 0;
    }

    .space-extra-small {
        height: 44px;
        margin-top: 0;
    }

    .space-small-med {
        margin-top: 48px
    }

    .space-small {
        margin-top: 40px
    }

    .space-small-2 {
        margin-top: 32px;
    }

    .space-s-small {
        margin-top: 24px;
    }


    .space-xs {
        margin-top: 16px;
    }

    .space-xxs {
        height: 8px;
        margin-top: 0;
    }

    .search-result-content-margin {
        margin-top: -30px;
    }

    .blue-small-banner-header-margin {
        margin-left: 57px;
    }

    .horizontial-space {
        padding-left: 60px;
        padding-right: 60px;
    }

    .bottom-space-s {
        margin-bottom: 20px
    }

    .service-section-decor {
        position: relative;
        overflow-x: clip;
        /* กันขวา ไม่สร้าง scroll แนวนอน */
        overflow-y: visible;
    }

    .tough-vector {
        height: auto;
        width: clamp(820px, calc(995px - (1295px - 100vw) * 0.6), 995px);
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: clamp(560px, calc(760px - (1295px - 100vw) * 0.4), 760px);
        opacity: 0.04;
    }

    .tough-vector-2 {
        width: clamp(320px, calc(645px - (1295px - 100vw) * 0.83), 445px);
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: clamp(920px, calc(1090px - (1295px - 100vw) * 0.6), 1090px);
        opacity: 0.04;
    }

    .tough-vector-3 {
        width: 42%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: 0;
        bottom: -280px;
        opacity: 0.10;
    }

    .gradient-circle-left {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -490px;
        top: 1100px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .gradient-circle-right {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -579px;
        top: 1800px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }


    .blue-small-banner {
        width: 100%;
        background: #007FC6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        height: 178px;
        z-index: 2;
    }

    .blue-small-banner__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex: 0 1 auto;
        z-index: 2;
    }

    .blue-small-banner-nav {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .blue-small-banner img {
        width: 590px;
        height: 178px;
        opacity: 0.2;
        object-fit: cover;
        object-position: center bottom;
    }

    .search-result-content {
        margin-left: auto;
        margin-right: auto;
        height: 100%;
        position: relative;
        z-index: 1;
    }

    .search-result-container {
        display: flex;
        padding: 12px 16px;
        align-items: center;
        gap: 10px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: 4px;
        border: 1px solid #007FC6;
        background: #FFF;
    }

    .search-result-container__query {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-result-query-filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .search-result-query-filter-wrapper-item {
        display: flex;
        align-items: center;
    }

    .search-result-filter-container {
        display: flex;
        padding: 8px 8px 8px 16px;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
    }

    .search-result-card {
        display: flex;
        padding: 24px;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
        border-radius: 0 0 40px 0;
        border: 1px solid #D8D8D8;
        background: #FFF;
    }

    .search-result-card-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
    }

    .search-result-card-image {
        position: relative;
        flex-shrink: 0;
    }

    .search-result-card-image .search-result-card-image-img {
        aspect-ratio: 1/1;
        width: clamp(200px, calc(250px - (1295px - 100vw) * 0.85), 250px);
        height: clamp(200px, calc(250px - (1295px - 100vw) * 0.85), 250px);
        object-fit: cover;
        border-radius: 0 0 32px 0;
    }

    .search-result-batt-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        flex: 1 0 0;
    }

    .search-result-battery-wrapper {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16px;
        align-self: stretch;
    }

    .search-result-contact-btn-group {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .search-batt-category-btn {
        background-color: #fff;
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 0;
        color: #80A700;
        border: 1px solid #80A700;
    }

    .search-result-batt-spec-wrapper {
        display: flex;
        align-items: flex-start;
    }

    .search-result-batt-spec-wrapper-item {
        display: flex;
        min-width: 80px;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid #D8D8D8;
        padding: 0 8px;
        gap: 8px;
    }

    .search-result-batt-spec-wrapper-item:first-child {
        padding-left: 0;
    }

    .search-result-batt-spec-wrapper-item:last-child {
        border-right: none;
    }

    .search-result-card-badge {
        position: absolute;
        top: 0;
        right: 0;
        width: clamp(100px,
                calc(128px - (1295px - 100vw) * 0.3),
                128px);
        height: clamp(100px,
                calc(128px - (1295px - 100vw) * 0.3),
                128px);
        pointer-events: none;
        z-index: 2;
    }


    .search-result-contact-btn {
        background-color: #fff;
        display: flex;
        font-size: 14px;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }

    .search-result-contact-btn-icon {
        width: clamp(14px,
                calc(20px - (1295px - 100vw) * 0.022),
                32px);
        height: clamp(14px,
                calc(20px - (1295px - 100vw) * 0.022),
                32px);
        flex-shrink: 0;
    }


    .search-btn-tag-activities {
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        background-color: white;
        border: 1px solid #007FC6;
        color: #007FC6;
        font-size: 14px;
    }

    .product-pass-hero {
        position: relative;
        z-index: 16;
        isolation: isolate;
    }

    .product-pass-hero img {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        z-index: 0;
    }

    .product-header-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        z-index: 2;
    }

    .product-banner-nav {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .product-banner-header-margin {
        margin-top: 70px;
        margin-left: 64px;
    }


    .product-list-layout {
        display: flex;
        width: 100%;
        align-items: stretch;
        background: #fff;
    }

    .product-filter-column {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        min-height: 100%;
        width: 328px;
        padding-top: 66px;
        flex-shrink: 0;
        background: #EBF8FF;
    }

    .product-filter-header-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: flex-start;
    }

    .product-filter-content {
        display: flex;
        flex-direction: column;
        padding: 16px 28px;
        align-items: stretch;
        gap: 16px;
    }

    .product-filter-search {
        display: flex;
        height: 40px;
        padding: 16px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 280px;
        border-radius: 0 0 16px 0;
        color: rgba(40, 40, 40, 0.5);
        background: #FFF;
    }

    .product-filter-box {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 280px;
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.30);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
    }

    .product-filter-box-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .product-list-container {
        display: flex;
        width: 1041px;
        padding: 80px 24px 80px 24px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 48px;
    }

    .product-filter-box-selector {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 16px;
        width: 100%;
        min-width: 0;
        align-self: stretch;
        box-sizing: border-box;
    }

    .product-filter-box-selector .product-filter-box-text {
        min-width: 0;
        width: 100%;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .product-filter-box-selector .btn-search-gradient-2 {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .product-filter-box-text {
        display: flex;
        min-width: 154px;
        color: #a6a6a6;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .product-expanded-vehicle-filter-box .product-filter-box-body,
    .product-expanded-battery-filter-box .product-filter-box-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .product-filter-sub-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .product-filter-batt-type {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .product-filter-batt-type-container {
        display: flex;
        padding: 13px 8px;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        background-color: white;
        border-radius: 0 0 16px 0;
        width: 100%;
        height: auto;
    }


    .product-filter-batt-name {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 8px;
    }

    .product-batt-genre-wrapper {
        display: flex;
        align-items: center;
        align-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        flex-wrap: wrap;
    }

    .product-batt-genre-container {
        display: flex;
        max-width: 100%;
        min-width: 0;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        border-radius: 0 0 16px 0;
        background: #FFF;
        gap: 8px;
    }

    .product-batt-genre-container .body1 {
        min-width: 0;
        word-break: break-word;
    }

    .product-filter-batt-type-container,
    .product-batt-genre-container {
        cursor: pointer;
    }

    .product-filter-batt-type-container.is-active {
        background: var(--Primary, #007FC6);
        color: white;
    }

    .product-batt-genre-container.is-active {
        background: var(--Primary, #007FC6);
        color: white;
    }

    .product-filter-select {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.08);
    }

    .product-filter-select select {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;

        font-size: 16px;
        line-height: 24px;
        color: #282828;
        cursor: pointer;
        padding-right: 8px;
    }

    .product-filter-select img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        pointer-events: none;
    }

    .product-filter-select--stacked {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filter-select-car__trigger {
        display: flex;
        flex: 1;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .filter-select-car {
        position: static;
        width: 100%;
        /* ชิดใต้กล่องขาว */
        left: 0;
        right: 0;
        z-index: 20;
        margin-top: 4px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        border-radius: 4px;
        background: #FFF;
        box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.14);

    }

    .filter-select-car-item-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 24px;
        align-self: stretch;
    }

    .filter-select-car-item-image img {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 1px 0 5px 0;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
    }

    .filter-select-car-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .filter-select-car {
        margin-top: 8px;
        /* หรือ 0 ถ้าอยากติดกับกล่องบน */
    }

    .filter-select-sub__trigger,
    .filter-select-brand__trigger {
        display: flex;
        flex: 1;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .filter-select-sub-group,
    .filter-select-brand-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .filter-select-sub-panel,
    .filter-select-brand-panel {
        width: 100%;
        margin-top: 8px;
        border-radius: 0 0 4px 4px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
        display: flex;
        flex-direction: column;
        max-height: 320px;
    }

    .filter-select-sub-panel__header,
    .filter-select-sub-panel__footer,
    .filter-select-brand-panel__header,
    .filter-select-brand-panel__footer {
        flex-shrink: 0;
        padding: 8px 16px;
        background: #F8F8F8;
        color: var(--Primary, #007FC6);
    }

    .filter-select-sub-panel__list,
    .filter-select-brand-panel__list {
        flex: 1;
        min-height: 0;
        border-radius: 0 0 4px 4px;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: #00B6F1 #F5F5F5;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar,
    .filter-select-brand-panel__list::-webkit-scrollbar {
        width: 8px;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar-track,
    .filter-select-brand-panel__list::-webkit-scrollbar-track {
        background: #F5F5F5;
        border-radius: 999px;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar-thumb,
    .filter-select-brand-panel__list::-webkit-scrollbar-thumb {
        background: #007FC6;
        border-radius: 999px;
    }

    .filter-select-sub-item,
    .filter-select-brand-item {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 14px 16px;
        cursor: pointer;
    }

    .filter-select-sub-item:hover,
    .filter-select-sub-item.is-active,
    .filter-select-brand-item:hover,
    .filter-select-brand-item.is-active {
        background: #F1F1F1;
    }


    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 3 คอลัมน์ */
        gap: 24px;
    }

    .product-grid-item {
        display: block;
    }

    .product-filter-2-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .product-filter-2-sub-wrapper {
        display: flex;
        align-items: center;
        gap: 0px;
        align-self: stretch;
    }

    .product-filter-2-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .pagination-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    .pagination-prev-button {
        display: flex;
        width: 52px;
        height: 52px;
        padding: 24px 16px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        aspect-ratio: 1/1;
        border-radius: 0 0 0 16px;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-next-button {
        display: flex;
        width: 52px;
        height: 52px;
        padding: 24px 16px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        aspect-ratio: 1/1;
        border-radius: 0 0 16px 0;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-number-button-wrapper {
        display: flex;
        align-items: center;
        gap: 0px;
    }

    .pagination-number-button {
        width: 52px;
        height: 52px;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #9E9E9E;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-number-button-wrapper .pagination-number-button:not(:last-child) {
        margin-right: 8px;
    }

    .pagination-number-button.is-active {
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--Primary, #007FC6);
        color: #fff;
    }

    .compare-product-main-wrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0px;
    }

    .compare-product-header-wrapper {
        display: flex;
        width: 28%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0px;

    }

    .compare-product-box-wrapper {
        padding: 27px 30px;
        width: 27.5%;
        position: relative;
        overflow: hidden;
        background: #F8F8F8;
        z-index: 0;
    }

    .compare-product-btn-close {
        width: 24px;
        height: 24px;
        aspect-ratio: 1 / 1;
    }


    .compare-product-box-content .compare-product-btn-close {
        position: absolute;
        top: 27px;
        right: 30px;
        z-index: 3;
        cursor: pointer;
    }


    .compare-product-gradient-background {
        position: absolute;
        width: 814px;
        height: 814px;
        aspect-ratio: 1/1;
        border-radius: 814px;
        background: radial-gradient(46.98% 46.98% at 51.68% 53.05%, rgba(230, 248, 254, 0.50) 0%, rgba(181, 234, 252, 0.00) 87.5%);
        top: 80%;
        transform: translate(-50%, -50%);
        z-index: -1;
        pointer-events: none;
    }

    .compare-product-img-container {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        background: #E9E9E9;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        overflow: hidden;
    }

    .compare-product-img-container-have-img>img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        /* ถ้าอยากเต็มกรอบแบบ crop ใช้ cover */
        display: block;
    }

    .compare-product-add-image-text {
        color: var(--Primary, #007FC6);
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .compare-product-table-header {
        width: 100%;
        height: 81px;
        padding: 0px 26px;
        display: flex;
        align-items: center;
        background: var(--BG-Light, #EBF8FF)
    }

    .compare-product-table-body {
        border-bottom: 1px solid #DEE2E6;
    }

    .compare-product-two-col {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
    }

    .compare-product-two-col-left {
        display: flex;
        align-items: center;
        flex-direction: row;
        align-self: stretch;
        gap: 0px;
        width: 25%;
        min-width: 0;
        padding: 8px;
    }

    .compare-product-two-col-right-prodcut-spec {
        width: 25%;
        display: flex;
        align-items: center;
        align-self: stretch;
        border-left: 1px solid #DEE2E6;
        flex: 1;
        min-width: 0;
        padding: 8px;
    }

    .compare-product-two-col-left-text {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .compare-product-two-col:nth-child(even) {
        background-color: #F9FAFB;
    }

    /* หรือเฉพาะซ้าย */
    .compare-product-two-col:nth-child(even) .product-detail-two-col__left {
        background-color: #F9FAFB;
    }

    .compare-product-modal-overlay.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }

    /* panel ขวา — ไม่ใช่ flex center */
    .compare-product-modal-shell.is-open {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 89vw;
        z-index: 10001;
        overflow: hidden;
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        transform: translateX(0);
        transition: transform 0.3s ease;
    }

    .compare-product-search-batt-wrapper {
        display: flex;
        width: 89vw;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 24px 60px;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .compare-product-search-box-wrapper {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }

    /* Homepage hero search tabs */
    .compare-product-search-batt-wrapper .tabbable-panel {
        display: flex;
        width: 100%;
        margin-left: auto;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
    }

    .compare-product-search-batt-wrapper .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .compare-product-search-batt-wrapper .nav-tabs-container-item:last-child {
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
    }


    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(166, 166, 166, 0.10);
        backdrop-filter: blur(12px);
        box-shadow: none;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        cursor: pointer;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        color: #007FC6 !important;
        border-bottom: 0;
        background: #EBF8FF;
        backdrop-filter: blur(12px);
    }

    .compare-product-search-batt-wrapper .btn-wrapper-search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }


    .compare-product-modal-input-box-search {
        height: 188px;
        width: 100%;
        padding: 25px 15px;
        border-radius: 0 0 24px 0;
        border-top: 1px solid #007FC6;
        background: transparent;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        isolation: isolate;
    }

    .compare-product-modal-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .compare-product-modal-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 0 0 24px 0;
        background: #EBF8FF;
        pointer-events: none;
        z-index: 0;
    }

    .compare-product-modal-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .compare-product-modal-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .compare-product-modal-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .compare-product-modal-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 24px;
        width: 100%;
        min-width: 0;
    }

    .compare-product-modal-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        box-sizing: border-box;
        cursor: pointer;
        flex: none;
        align-self: stretch;
        overflow: hidden;
    }

    .compare-product-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }


    #compare-product-modal .compare-product-modal-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    #compare-product-modal .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    #compare-product-modal .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    .compare-product-btn-main {
        display: inline-flex;
        min-width: 180px;
        width: auto;
        padding: 8px 16px;
        margin-right: 16px;
        align-items: center;
        gap: 16px;
        border-radius: 8px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
        cursor: pointer;
    }

    .compare-product-btn-main-icon {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 0.6px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
    }


    .compare-product-product-selected-banner {
        display: none;
        width: 100%;
        height: 100px;
        padding: 16px 103.5px 16px 72.5px;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        background: linear-gradient(270deg, #00B6F1 0%, #005BAA 100%);
    }

    .compare-product-product-selected-banner.is-visible {
        display: flex;
    }

    .compare-product-product-selected-banner:not(.has-items) .compare-product-product-selected-item-wrapper.is-open {
        display: none;
    }

    .compare-product-product-selected-banner.has-items .compare-product-product-selected-item-wrapper.is-empty {
        display: none;
    }

    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper {
        width: 100%;
    }

    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper.is-open,
    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: none;
    }

    /* มีรายการปกติ */
    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-open {
        display: flex;
    }

    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-empty,
    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: none;
    }

    /* no-mapping */
    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
    }

    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-empty,
    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-open {
        display: none;
    }

    .compare-product-product-selected-open-title.is-open {
        margin-right: auto;
        flex-shrink: 0;
    }

    body.product-list-compare-active .compare-product-btn-2.is-not-selected {
        display: flex;
    }

    body.product-list-compare-active {
        padding-bottom: 100px;
    }

    .compare-product-product-selected-item-wrapper.is-open {
        display: flex;
        width: 100%;
        min-width: 0;
        height: 68px;
        padding-bottom: 8px;
        justify-content: flex-end;
        align-items: center;
        gap: 24px;
        flex-shrink: 1;
    }

    .compare-product-product-selected-item-wrapper.is-empty {
        display: flex;
        width: 100%;
        height: 68px;
        align-items: center;
        justify-content: space-between;
    }

    .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
        width: 100%;
        height: 68px;
        align-items: center;
        justify-content: space-between;
    }


    .compare-product-product-selected-item-sub-wrapper.is-no-mapping {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .compare-no-related-title {
        color: #fff;
        font-weight: 700;
        line-height: 1.3;
    }

    .compare-no-related-desc {
        color: #fff;
        opacity: 0.95;
        line-height: 1.4;
    }

    .compare-product-product-selected-item-blue-container-wrapper {
        display: flex;
        align-items: center;
        gap: 24px;
        flex: 1 1 0;
        min-width: 0;
    }

    .compare-product-product-selected-item-blue-container {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        max-width: 241px;
        height: 43px;
        padding: 8px 16px;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        box-sizing: border-box;
        border-radius: 0 0 24px 0;
        background: #00B6F1;
    }

    .compare-product-product-selected-item-blue-container>span {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .compare-product-product-selected-item-close-btn {
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper.is-empty,
    .compare-product-product-selected-btn-wrapper.is-no-mapping {
        margin-left: 0;
        flex-shrink: 0;
    }


    .compare-selected-empty {
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper {
        margin-left: 25px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .compare-product-product-selected-item-close-btn img {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
    }


    .dealer-store-layout {
        position: relative;
        margin-left: 64px;
        margin-right: 64px;
        /* สูงกว่า .product-pass-hero (16) */
    }

    .dealer-store-text-align {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .dealer-store-subtitle-text {
        color: #6D6D6D;
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .dealer-store-search-container {
        display: flex;
        width: 100%;
        position: relative;
        z-index: 20;
        margin-top: -40px;
        padding: 48px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
        border-radius: 0 0 48px 0;
        background: var(--BG-Light, #EBF8FF);
        box-shadow: 0 0 30px 0 rgba(56, 56, 56, 0.12);
    }

    .dealer-store-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-dropdown>.dealer-store-input-box-search-main-wrapper {
        flex: 1;
        min-width: 0;
    }

    .dealer-store-input-box-search-dropdown>.dealer-store-input-box-search-main-wrapper:first-child {
        flex: 1.4091;
    }

    .dealer-store-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .dealer-store-input-box-search-main-wrapper .select-search-car,
    .dealer-store-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-main-wrapper .select-search-car select,
    .dealer-store-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    .dealer-store-input-box-search .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    .dealer-store-input-box-search .wd-input-box-search-wrapper {
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    .dealer-store-input-box-search .btn-wrapper-search {
        position: relative;
        z-index: 1;
    }

    .dealer-store-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        cursor: pointer;
        box-sizing: border-box;
    }

    .dealer-store-input-box-search .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    /* อันแรก — ยืดกินพื้นที่ที่เหลือ */
    .dealer-store-text-sort-wrapper>h2 {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    /* อันสอง — กว้างตาม content */
    .dealer-store-sort-sub-wrapper {
        display: flex;
        align-items: center;
        align-self: stretch;
        width: fit-content;
        /* override align-self: stretch จาก rule ทั่วไป */
    }

    .dealer-store-sort-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .dealer-store-text-sort-wrapper {
        display: flex;
        width: 100%;
        padding-bottom: 24px;
        justify-content: start;
        align-items: stretch;
        gap: 35px;
    }

    .dealer-store-card-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 24px;
    }

    .dealer-store-card-container {
        display: flex;
        width: 100%;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
        border-radius: 0 0 48px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        cursor: pointer;
    }

    .dealer-store-card-header-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }

    .dealer-store-card-header-wrapper img {
        width: 100%;
        height: auto;
        max-width: 87px;
        max-height: 87px;
        aspect-ratio: 1/1;
    }

    .dealer-store-card-header-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        flex: 1 0 0;
    }

    .dealer-store-card-header-province-container {
        display: flex;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid rgba(210, 210, 210, 0.87);
        background: var(--BG-Light, #EBF8FF)
    }

    .dealer-store-card-header-province-container img {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }

    .dealer-store-card-content-seperator {
        width: 100%;
        height: 1px;
        opacity: 0.5;
        background: #9E9E9E;
    }

    .dealer-store-card-contact-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .dealer-store-card-contact-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-card-contact-container img {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .dealer-store-search-container .btn-wrapper-search {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
    }

    .dealer-store-search-form {
        cursor: default;
        gap: 8px;
    }

    .dealer-store-search-input {
        flex: 1;
        min-width: 0;
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: #282828;
    }

    .dealer-store-search-input::placeholder {
        color: #A6A6A6;
    }

    .dealer-store-search-submit {
        display: flex;
        flex-shrink: 0;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    .dealer-store-pop-up-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .dealer-store-pop-up-overlay.is-hidden,
    .dealer-store-pop-up-container.is-hidden {
        display: none;
    }

    .dealer-store-pop-up-container {
        display: flex;
        flex-direction: row;
        padding: 40px;
        align-items: center;
        gap: 24px;
        border-radius: 12px;
        background: #FFF;
        max-width: 100%;
        width: 885px;
    }

    .dealer-store-pop-up-image {
        width: 100%;
        max-width: 362px;
        max-height: 362px;
        aspect-ratio: 1/1;
        border-radius: 0 0 48px 0;
        overflow: hidden;
        flex-shrink: 0;
    }

    .dealer-store-pop-up-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 48px 0;
    }

    .dealer-store-pop-up-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .dealer-store-pop-up-text-detail-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .dealer-store-text-detail-contact-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-sub-input-box-search.filter-select-sub__trigger {
        max-height: 40px;
    }

    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 100%;
        z-index: 10050;
    }

    .gs-1380-sub-banner-wrapper {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 32px;
        right: 0;
        margin-top: 32px;
        z-index: 1;
        width: 70.05%;
    }

    .gs-1380-sub-banner-bg {
        width: 100%;
        height: 700px;
        object-fit: cover;
        object-position: bottom;
        display: block;
    }

    .gs-1380-sub-banner-item-container-wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        width: 600px;
    }

    .warranty-scroll-track {
        --warranty-lock-height: min(820px, 100vh);
    }

    .warranty-scroll-track>.warranty-register-step-wrapper {
        position: sticky;
        top: max(0px, calc((100vh - var(--warranty-lock-height)) / 2));
        height: var(--warranty-lock-height);
        max-height: var(--warranty-lock-height);
        display: flex;
        align-items: center;
        overflow: visible;
    }

    .warranty-sub-banner>img {
        width: 100%;
        height: auto;
        min-height: 1000px;
        object-fit: cover;
    }

    .wrapper-404 {
        width: 100%;
        max-width: 100%;
        display: flex;
        height: 610px;
        align-items: center;
        gap: 40px;
        justify-content: center;
    }

    .wrapper-404-image img {
        aspect-ratio: 1/1;
        width: 400px;
        height: 400px;
        object-fit: cover;
    }

    .wrapper-404-text {
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
    }

    /* Homepage: banner carousel + hero bg-search (sync 1300–1585) */
    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-weight: 600;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .banner-wrapper,
    .interesting-banner-wrapper {
        margin: 0 auto;
        position: relative;
        --owl-items: 1.38;
    }

    .banner-wrapper .owl-stage-outer {
        overflow: hidden;
    }

    .interesting-banner-wrapper .owl-stage-outer {
        overflow: visible;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .banner-wrapper .owl-item .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item .h-w-imag-ban-slide {
        border-radius: 0 0 48px 0;
    }

    .banner-wrapper .banner-slide-card,
    .interesting-banner-wrapper .banner-slide-card {
        position: relative;
    }

    .banner-wrapper .owl-item.center .banner-slide-media,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media {
        display: block;
        position: relative;
        border-radius: 0 0 48px 0;
        overflow: hidden;
    }

    .banner-wrapper .owl-item.center .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after {
        opacity: 1;
    }

    .banner-wrapper .owl-item:not(.center) .banner-slide-btn,
    .interesting-banner-wrapper .owl-item:not(.center) .banner-slide-btn {
        display: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-btn {
        position: absolute;
        left: 50%;
        top: auto;
        bottom: 20px;
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(0);
        white-space: nowrap;
        flex-shrink: 0;
        width: max-content;
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
        text-decoration: none;
        pointer-events: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-12px);
        pointer-events: auto;
    }

    .banner-wrapper .owl-item:not(.center),
    .banner-wrapper .owl-item:not(.active),
    .interesting-banner-wrapper .owl-item:not(.center),
    .interesting-banner-wrapper .owl-item:not(.active),
    .h-w-imag-ban-slide {
        opacity: 1;
        transform-origin: center center;
        transform: scale(0.92);
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .banner-wrapper .owl-item.center .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item.center .h-w-imag-ban-slide {
        opacity: 1;
        transform: scale(1);
        transform-origin: center center;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    }

    .banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 0 0 0 16px;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    }


    .banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-prev {
        left: max(16px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-next {
        right: max(16px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .banner-wrapper .owl-prev:hover,
    .banner-wrapper .owl-next:hover,
    .interesting-banner-wrapper .owl-prev:hover,
    .interesting-banner-wrapper .owl-next:hover {
        background: #007FC6;
    }

    .banner-wrapper .owl-prev:hover img,
    .banner-wrapper .owl-next:hover img,
    .interesting-banner-wrapper .owl-prev:hover img,
    .interesting-banner-wrapper .owl-next:hover img {
        filter: brightness(0) invert(1);
    }

    .banner-wrapper .owl-prev.disabled,
    .banner-wrapper .owl-next.disabled,
    .interesting-banner-wrapper .owl-prev.disabled,
    .interesting-banner-wrapper .owl-next.disabled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .box-position-baner-hero {
        position: absolute;
        top: 10%;
        left: 15%;
    }

    #custom-indicators {
        position: static;
        margin: 0 auto;
    }

    #custom-indicators .active {
        margin: 0;
        margin-right: 4px;
        width: 52px;
        height: 8px;
        background-color: #007FC6;
        transition: all 0.4s ease;
    }

    #custom-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators {
        position: static;
        margin: 24px auto 0;
        padding-left: 0;
        width: auto;
        list-style: none;
        text-align: center;
    }

    #interesting-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators .active {
        width: 52px;
        height: 8px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .btn-view-more {
        z-index: 2;
        bottom: 24px;
        display: inline-flex;
        height: 48px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #00B6F1;
        background: #007FC6;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .btn-view-more-left {
        left: 380px;
    }

    .btn-view-more-right {
        left: 70px;
    }

    .btn-view-more::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .btn-view-more:hover::after {
        opacity: 1;
    }

    .service-items-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        gap: 24px;
    }

    .service-item-main-container {
        height: 200px;
        width: 300px;
        display: flex;
        align-items: flex-end;
    }

    .service-item-container {
        height: 160px;
        width: 300px;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 48px 0px;
        cursor: pointer;
    }

    .service-item-container::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -8;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .service-item-container:hover::after {
        opacity: 1;
    }

    .service-item-inner {
        transform: skewX(18deg);
    }

    .service-item-inner:has(.service-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 112px;
        width: 112px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .service-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .service-item-container:hover .service-item-icon img {
        transform: translateY(-10%);
    }

    .service-item-title {
        margin-top: 48px;
        text-align: center;
        color: #fff;
    }

    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
    }

    .bg-search-batt {
        position: relative;
        overflow: hidden;
        z-index: 20;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 720px;
        margin-top: -128px;
        padding-top: 128px;
        box-sizing: border-box;
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 30px),
                0 100%);
    }

    .bg-search-batt__vector {
        position: absolute;
        right: 0;
        bottom: 0;
        width: clamp(200px, 45vw, 440px);
        /* ปรับตาม design */
        height: auto;
        max-height: 85%;
        object-fit: contain;
        object-position: right bottom;
        /* เทียบ blue-small-banner */
        z-index: 4;
        /* เหนือ video, ใต้/เท่า filter */
        pointer-events: none;
    }

    .bg-search-batt__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 4;
        pointer-events: none;
        display: block;
    }

    .bg-search-batt__filter {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(0, 136, 170);
        /* ปรับความเข้ม */
        mix-blend-mode: hue;
    }

    .bg-search-batt__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 1313px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .bg-search-batt__content .box-search h1,
    .bg-search-batt__content .sub-title-search {
        position: relative;
        z-index: 2;
    }

    .sub-title-search {

        font-size: 24px;
        line-height: 1.25;
        color: #fff;
        text-align: center;
        margin-bottom: 49px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        max-width: 378px;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        margin-top: 64px;
        margin-inline: auto;
        width: 100%;
        max-width: min(1150px, calc(100% - 64px));
    }

    .wd-input-box-search-img {
        position: absolute;
        top: -50px;
        left: -45px;
        max-width: 21.4%;
    }

    .wd-input-box-search-img img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .wd-input-box-search-img-2 {
        position: absolute;
        left: -70px;
        bottom: -87px;
        width: 22%;
    }

    .wd-input-box-search-img-2 img {
        display: block;
        width: 100%;
        height: auto;
        display: block;

        object-fit: contain;
    }

    /* Dealer hero: ขยาย overflow ซ้าย/บน แต่ crop ขอบขวาและล่าง */
    .wd-input-box-search--dealer .wd-input-box-search-img-2 {
        clip-path: inset(-160px 0 0 -140px);
    }

    .wd-input-box-search {
        height: 188px;
        width: 100%;
        padding: 25px 15px;
        border-radius: 40px 0 32px 0;
        border: none;
        background: transparent;
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        isolation: isolate;
    }

    .wd-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(90deg, #00B6F1 0%, #0B3149 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 40px 0 32px 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(11, 49, 73, 0.80) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .wd-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 80%;
        min-width: 0;
    }

    .wd-input-box-search-dropdown.dealer {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 82%;
        min-width: 0;
    }


    .wd-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .wd-input-box-search-main-wrapper .select-search-car,
    .wd-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper .select-search-car select,
    .wd-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .wd-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    .wd-input-box-search .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    .wd-input-box-search .wd-input-box-search-wrapper {
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    .wd-input-box-search .btn-wrapper-search {
        position: relative;
        z-index: 1;
    }

    .wd-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        cursor: pointer;
        box-sizing: border-box;
    }

    .wd-input-box-search .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    .img-box-home-row {
        position: relative;
        display: flex;
        /* ← เพิ่ม */
        align-items: stretch;
    }

    .img-box-home-row-2 {
        position: relative;
        display: flex;
        /* ← เพิ่ม */
        align-items: stretch;
    }

    /* แถวที่ 2: รูปขวา skew ทับกล่องข้อความซ้าย — ยก z-index คอลัมน์ข้อความ */
    .img-box-home-row:has(.img-box-home-container-right)>.pdd-left {
        position: relative;
        z-index: 2;
    }

    .img-box-home-row:has(.img-box-home-container-right)>.pdd-right {
        position: relative;
        z-index: 1;
    }

    .img-box-home-tough {
        position: absolute;
        bottom: 0;
        left: 4%;
        width: clamp(250px, 18vw, 300px);
        /* ปรับตามดีไซน์ */
        height: auto;
        pointer-events: none;
        z-index: 2;
        object-fit: contain;
        object-position: left bottom;
    }

    .img-box-home-container {
        height: 431px;
        width: 89.065%;
        position: relative;
        overflow: hidden;
        left: 12%;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
    }

    .img-box-home-container-right {
        height: 431px;
        width: 89%;
        position: relative;
        overflow: hidden;
        right: 7%;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
    }

    .img-box-home {
        position: absolute;
        top: 0;
        left: -12%;
        width: 150%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .column-description-container-right {
        position: relative;
        overflow: visible;
        display: flex;
        right: 8%;
        margin-top: 63px;
        padding: 40px 40px 56px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .column-description-container-left {
        position: relative;
        /* ต้องมี position ถึงจะใช้ z-index ได้ */
        z-index: 1;
        display: flex;
        left: 6%;
        margin-top: 63px;
        padding: 40px 40px 56px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .btn-view-more {
        z-index: 2;
        bottom: 24px;
        display: inline-flex;
        height: 48px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #00B6F1;
        background: #007FC6;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .btn-view-more-left {
        left: 300px;
    }

    .btn-view-more-right {
        left: 370px;
    }

    .btn-view-more::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .btn-view-more:hover::after {
        opacity: 1;
    }

    .btn-view-more-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        padding: 0 24px;
        gap: 8px;
        z-index: 3;
        border-radius: 0 0 16px 0;
        border: 1px solid var(--Primary, #007FC6);
        background: #FFF;
        color: #007FC6;
        text-decoration: none;
        transition: background 0.25s ease, color 0.25s ease;
    }

    .btn-view-more-2:hover {
        background: #007FC6;
        color: #fff !important;
    }

    .btn-view-more-2:hover img {
        filter: brightness(0) invert(1);
    }

    .sub-banner-container {
        display: grid;
        position: relative;
        overflow: hidden;
        margin-top: 80px;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        height: auto;
    }

    .sub-banner-container>img {
        position: absolute;
        inset: 0;
        width: 110%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: bottom;
        z-index: 0;
    }

    .sub-banner-content {
        position: relative;
        display: flex;
        width: 814px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding-left: 64px;
        padding-top: 24px;
        padding-bottom: 48px;
        z-index: 1;
    }

    .sub-banner-grid-2x3 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 16px;
    }

    .sub-banner-box {
        display: flex;
        width: 458px;
        height: auto;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        border: 0.5px solid rgba(255, 255, 255, 0.70);
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .image-gsbattery {
        margin-top: 30px;
        max-width: 100%;
        max-height: 535px;
    }

    .career-bg {
        height: 420px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 20px;
    }

    .title-news-2 {
        font-size: 20px;
        height: 60px;
        overflow: hidden;
        margin-top: 15px;
    }

    .box-radis-des-sales::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #005BAA;
        position: absolute;
        margin-top: 7px;
    }

    .box-radis-des-sales {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #00B6F1;
        position: absolute;
        margin-top: 7px;
    }

    .ma-bottom-20 {
        margin-bottom: 20px;
    }

    .box-radis-sale {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-sale::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #005BAA;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .box-radis-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-batt::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #00B6F1;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .display-destop {
        display: block;
    }

    .display-mobile {
        display: none;
    }

    .box-chage-lang {
        margin-top: -22px;
        margin-right: 20px;
    }

    .line-abt-verticle2 {
        background-color: #005BAA;
        width: 67%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .line-abt-verticle {
        background-color: #005BAA;
        width: 83%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .margin-abt-timeline {
        margin-top: 30px;
    }

    .bg-color-footer {
        height: 20px;
        background-color: #005BAA;
    }

    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    /* คง layout skew ใน container — อย่าใช้ .img-box-home แบบ block 360px ทับด้านบน */
    .img-box-home-container .img-box-home,
    .img-box-home-container-right .img-box-home {
        position: absolute;
        top: 0;
        left: -12%;
        width: 150%;
        height: 100%;
        margin: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .pad-left {
        padding-left: 20px;
    }

    .bg-footer {
        background-color: #ffffff;
        width: 100%;
        height: auto;
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: #005BAA;
        margin: 10px 0px;
    }

    .select-search-model select {
        display: flex;
        appearance: none;
        width: 200px;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
    }

    .select-search-car select {
        display: flex;
        appearance: none;
        width: 200px;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
    }


    .box-text-activities {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .border-bottom-new-act {
        width: 155px;
        height: 4px;
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
    }

    .sub-new-des {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .img-box {
        width: 100%;
        background-color: #f1f1f1;
        height: 200px;
        margin: 20px 0px;
    }

    .batt-long-time {
        margin: 20px 0px;
    }

    .tabbable-line>.nav-tabs>li {
        margin: 0 60px;
    }

    .text-colo-link {
        color: #005BAA;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 168px;
    }

    .img-box-fing-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 556px;
    }

    /* prduct detailpage */
    .text-breadcrumb {
        color: #282828;
    }

    .bg-pro-detail {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        /* หรือ 32px — ระยะขอบใน */
        box-sizing: border-box;
    }

    .product-items-row {
        margin-top: -20px;
        margin-inline: auto;
        width: fit-content;
        max-width: 100%;
        box-sizing: border-box;
        padding-inline: 8px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        gap: clamp(8px, 1.2vw, 24px);
    }

    .product-item-main-container {
        flex: 0 0 auto;
        width: 130px;
        min-width: 0;
        min-height: 80px;
        display: flex;
        flex-direction: column;
    }

    .product-item-inner {
        transform: skewX(18deg);
    }

    .product-item-inner:has(.product-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        width: 100%;
    }

    .product-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 53.537px;
        height: 53.537px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -90%);
        z-index: 2;
    }

    .product-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }


    .product-item-container {
        flex: 1;
        min-height: 65px;
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 20px 16px 12px;
        box-sizing: border-box;
        background: var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 15px 0px;
        cursor: pointer;
    }

    .product-item-title {
        margin-top: 16px;
        text-align: center;
        color: #fff;
        width: 100%;
    }

    .product-item-title .body2 {
        white-space: normal;
        line-height: 1.3;
    }

    .img-product-batt-detail {
        width: auto;
        height: auto;
        max-width: 72%;
        /* ปรับได้ เช่น 65%–80% */
        max-height: 85%;
        /* ไม่ล้นความสูงกล่อง */
        object-fit: contain;
        display: block;
    }

    .btn-border-w {
        background-color: #FFFFFF;
        border: 1px solid #D3D3D3;
        border-radius: 25px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 209px;
        height: 50px;
        font-weight: 600px;
        font-size: 17px;

    }

    .box-view-big-img {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .text-type-pro-detail {

        font-size: 18px;
        line-height: 1.4;
        font-weight: 700;
        color: #00B6F1;
    }

    .text-name-pro-detail {

        font-size: 56px;
        line-height: normal;
        font-weight: 700;
        color: #00B6F1;
    }

    .compare-product-btn {
        background-color: #fff;
        display: inline-flex;
        height: 40px;
        padding: 0 24px;
        align-items: center;
        gap: 8px;
        color: #007FC6;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }

    .compare-product-btn-2 {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 8px 6px 7px 6px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 4px;
        background: var(--White, #FFF);
    }

    .compare-product-btn-2.is-not-selected {
        display: none;
    }

    .compare-product-btn-2 img {
        display: none;
    }

    .compare-product-btn-2.is-check img {
        display: block;
    }

    .compare-product-btn-2.is-check {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 8px 6px 7px 6px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 4px;
        border: 1px solid var(--Primary, #007FC6);
        background: var(--Primary, #007FC6);
    }

    .product-grid-item .compare-product-btn-2 {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
    }

    .product-detail-two-col {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
    }

    .product-detail-two-col__left {
        display: flex;
        align-items: center;
        flex-direction: row;
        align-self: stretch;
        gap: 0px;
        width: 50%;
        min-width: 0;
    }

    .product-detail-two-col__right {
        display: flex;
        align-items: center;
        align-self: stretch;
        border-left: 1px solid #F9FAFB;
        flex: 1;
        min-width: 0;
        padding-left: 24px;
    }

    .product-detail-two-col__left-text {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;

    }

    .product-detail-two-col:nth-child(even) {
        background-color: #F9FAFB;
    }

    /* หรือเฉพาะซ้าย */
    .product-detail-two-col:nth-child(even) .product-detail-two-col__left {
        background-color: #F9FAFB;
    }

    .product-info-seperator {
        height: 1px;
        background: #D2D2DD;
    }

    .product-detail-hero {
        position: relative;
    }

    .product-detail-main {
        padding-bottom: 24px;
    }

    .product-car-filter-layout {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .product-car-filter-container {
        cursor: pointer;
    }

    .product-car-filter-container {
        display: flex;
        height: 48px;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        background: var(--BG-Light, #EBF8FF);
        backdrop-filter: blur(12px);
    }

    .product-car-filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .related-product-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .box-data-pro-detail {
        padding-left: 32px;
    }

    .text-sub-pro-detail {

        font-size: 19px;
        line-height: 25px;
        font-weight: 500;
        color: #000000;
    }

    .text-slogrand-pro-detail {

        font-size: 27px;
        line-height: 55px;
        font-weight: 500;
        color: #000000;
    }

    .btn-circle-product {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        width: 41px;
        height: 41px;
    }

    .text-icon-pro-detail {

        font-size: 17px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .margin-bottom-img {
        margin-bottom: 5px;
    }

    .text-data-contant {

        font-size: 27px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .text-sub-detail {

        font-size: 16px;
        font-style: italic;
        line-height: 23px;
        padding-left: 50px;
    }

    .a-text-size {
        margin-left: 30px;
    }

    .text-h-pro {

        font-size: 16px;
        font-style: italic;
        line-height: 23px;
        font-weight: 600;
        color: #000000;
    }

    .text--sub-h-pro {

        font-size: 22px;
        font-style: italic;
        line-height: 17px;
        font-weight: 600;
        color: #000000;
        margin-top: 10px;
    }

    .green-box {
        background-color: #C7EB02;
        height: 42px;
        width: 3px;
        position: absolute;
        margin-top: 5px;
        left: 2px;
    }

    .padd-bottom-btn {
        padding-bottom: 20px;
    }

    .new-box-tip {
        padding-top: 29%;
    }

    .title-news-tip {
        font-size: 43px;

        font-weight: 500;
        line-height: 55px;
        color: #000;
    }

    .sub-new-detail {
        font-size: 23px;

        font-weight: 500;
        line-height: 32px;
        color: #005BAA;
        padding-right: 35%;
    }

    .img-icon-prodetail {
        width: 50px;
        height: auto;
    }

    .img-icon-prodetail-list {
        width: 43px;
        height: 43px;
    }

    /* end productdetail page */
    .img-icon-prodetail-list {
        width: 43px;
        height: 43px;
    }

    .select-box select {
        border-radius: 4px;
        background-color: #ffffff;
        border: 2px solid #005BAA;
        padding: 4px 10px;
        width: 96px;
    }

    .select-box {
        margin-top: 20px;
        padding-left: 20px;
    }

    .select-box select:active,
    select:hover {
        outline: none;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .border-footer {
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .img-footer-logo {
        height: 64px;
    }

    .padding-top-footer {
        padding-top: 50px;
    }

    .contact-text-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .text-detail-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 8px;
    }

    .text-detail-reserved {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .text-address-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
    }

    .img-icon-footer {
        width: 35px;
        height: 35px;
        margin-left: 5px;
        margin-top: 20px;
    }

    .text-link-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .text-link-footer-sub {

        font-size: 14px;
        line-height: 24px;
        color: #231F20;
    }

    .tab-panel-batt-footer {
        background-color: #fff !important;
    }

    .tab-footer {
        border-top: 1px solid #9E9E9E;
        padding-top: 24px;
        padding-bottom: 8px;
    }

    .tab-footer:first-child {
        border-top: none;
    }

    .tab-footer:not(:has(~ .tab-footer)) {
        border-bottom: 1px solid #9E9E9E;
    }


    .short-full-footer {
        color: #231F20;
        margin-top: -17px;
        padding-right: 10px;
    }

    /* endfooter */
    .margin-space-banner {
        margin-top: 10px;
    }

    .btn-main-border {
        background-color: #fff;
        width: 220px;
        height: 50px;
        border: 2px solid #005BAA;

        font-size: 16px;
        color: #005BAA;
        border-radius: 4px;
        margin-top: 10px;
    }

    .btn-main-border:hover {
        box-shadow: 0px 3px 6px #00B6F1;
        color: #000000;
    }

    .btn-main-border:active {
        background: rgba(0, 51, 161, 1);
        background: -moz-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: -webkit-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: -o-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: -ms-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: linear-gradient(to right, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
        border-radius: 32px;
        width: 220px;
        height: 50px;
        border: none;

        font-size: 16px;
        color: #000000;
        border-radius: 32px;
        margin-top: 10px;
        box-shadow: 0px 3px 6px #00B6F1;
    }

    /* Search all page  */
    .stylish-input-group .input-group-addon {
        background: white !important;
    }

    .stylish-input-group .form-control {
        border-right: 0;
        box-shadow: 0 0 0;
        border-color: #ccc;
    }

    .stylish-input-group button {
        border: 0;
        background: transparent;
    }

    .mdl-textfield {
        position: relative;
        font-size: 16px;
        display: inline-block;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 20px 0;
    }

    .btn-search {
        position: absolute;
        right: 20px;
        top: 25px;
    }

    .text-search-margin {
        margin-bottom: 20px;
    }

    .text-header-search {
        color: #04163D;
        margin-bottom: 5px;
    }

    .btn-search {
        position: absolute;
        right: 20px;
        top: 25px;
    }

    .mdl-textfield--floating-label {

        font-size: 14px;
    }

    #search input[type="text"]:focus {
        width: 250px;
    }

    .text-cancel-bar {
        position: absolute;
        margin-top: -33px;
        right: 3%;
        z-index: -999;
        font-size: 12px !important;

    }

    .text-link-suport {

        font-size: 16px;
        line-height: 18px;
    }

    .collapsing ul li a,
    .in ul li a {
        color: #555 !important;
    }

    .collapsing ul li a:hover,
    .in ul li a:hover {
        color: #f1f1f1 !important;
    }

    .navbar-center {
        position: absolute;
        left: 30%;
        right: 20%;
    }

    .navbar-main {
        display: none !important;

    }

    .invisible-mobile {
        display: none !important;
    }

    .visible-tablet-slide-baner {
        display: none !important;
    }

    .visible-mobile {
        display: block !important;
    }

    .invisible-slide-baner {
        display: block;
    }

    .visible-slide-baner {
        display: none;
    }

    .visible-component-desktop {
        display: block;
    }

    .visible-component-mobile {
        display: none;
    }

    .search-result-card-excerpt--full {
        display: block;
    }

    .search-result-card-excerpt--short {
        display: none;
    }


    .service-section-decor--mobile {
        display: none;
    }

    .navbar-brand {
        float: right;
    }

    .menu-text-mobile {
        border-bottom: 1px solid #9E9E9E;
        font-size: 14px;

        margin-top: 5px;
    }

    .margin-top-menu-mobile {
        margin-top: 20px;
    }

    .h-mobile {
        margin-top: 20px;
    }

    .margin-top-mobile-Procategory {
        margin-top: 40px;
    }

    /* advance search  */
    .cd-main-header,
    .cd-main-content {
        position: relative;
        transition: transform 0.3s;
    }

    .cd-main-header.nav-is-visible,
    .cd-main-content.nav-is-visible {
        transform: translateX(-260px);
    }

    .flipkart-navbar-input {
        padding: 12px 16px;
        border-radius: 2px 0 0 2px;
        border: 0 none;
        outline: 0 none;
        font-size: 15px;

    }

    .flipkart-navbar-button {
        background-color: #999;
        border: 1px solid #999;
        border-radius: 0 2px 2px 0;
        color: #565656;
        padding: 10px 0;
        height: 44.5px;
        cursor: pointer;
    }

    .box-size {
        height: 443px !important;
    }

    .img-box {
        width: 200px;
        height: 100px;
        margin-right: 41%;
    }

    .navbar-center {
        position: absolute;
        left: 30%;
        right: 20%;
    }

    .main-menu-header {
        color: #ffffff !important;
        font-size: 15px;

        cursor: pointer;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1100;
        top: 10px;
        left: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%), #FFF;
        overflow-x: hidden;
        transition: 0.5s;
        margin-top: 70px;
    }

    .sidenav a {
        padding: 12px 16px;
        text-decoration: none;
        color: #000;
        font-size: 18px;
        font-weight: 700;
        display: block;
        transition: 0.3s;

        display: flex;
        justify-content: space-between;
    }

    .sidenav a:hover,
    .sidenav a:focus {
        color: #00B6F1;
    }

    .sidenav .chevron-down-icon {
        display: inline-block;
        transition: transform 0.3s ease;
        transform: rotate(0deg);
    }

    .sidenav a.menu-text-mobile[aria-expanded="true"] {
        color: #00B6F1;
    }

    /* เปิดแล้วเท่านั้น */
    .sidenav a.menu-text-mobile[aria-expanded="true"] .chevron-down-icon {
        transform: rotate(180deg);
    }

    .sidenav .closebtn {

        position: absolute;
        top: 2px;
        left: 18px;
        font-size: 36px;
        margin-left: 50px;
    }

    .select-list-link-mobile {
        position: relative;
        margin-left: 275px;
        margin-top: -34px;
        color: white;
    }

    .img-logo {
        height: 31px;
        margin-top: 6px;
        left: 50%;
        right: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
    }

    .img-logo-app {
        height: 31px;
        margin-top: 6px;
        left: 50%;
        right: 50%;
        transform: translate(-50%, -155%);
        position: absolute;
    }

    .navbar-default {
        height: 70px;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: white;
        margin-top: 6px;
    }

    .navbar-toggle .icon-bar {
        width: 24px;
    }

    /* homepage */
    .img-banner-mobile {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px;
    }

    .img-icon-type {
        height: 70px;
    }

    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-style: italic;
        font-weight: 600;
    }


    .padding-left-box-new {
        padding-left: 15px;
        padding-right: 15px;
    }

    .title-news {

        font-size: 30px;
        line-height: 38px;
        margin-top: 20px;
        font-weight: 600;
        height: 64px;
        overflow: hidden;
    }

    .tag-news-type {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .btn-tag-tip {
        background-color: #00B6F1;
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }

    .btn-tag-activities:hover {
        color: #fff;
    }

    .btn-tag {
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }

    .position-btn-typ-batt {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: 0;
    }

    .text-detail-type-battery {

        font-size: 16px;
        line-height: 19px;
        color: #fff;
        padding-top: 0px;
        padding-left: 33px;
        padding-right: 33px;
        font-style: italic;
    }

    .text-mobile-sub {

        font-size: 17px;
        line-height: 22px;
        color: #000000;
        font-style: italic;
        text-align: center;
        font-weight: 500;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
        text-align: left;
    }

    /* Homepage: hero bg-search + text (sync 1296–1299 / 1300–1585) */
    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
    }

    .bg-search-batt {
        position: relative;
        overflow: hidden;
        z-index: 20;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 750px;
        margin-top: -128px;
        box-sizing: border-box;
    }

    .bg-search-batt__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 4;
        pointer-events: none;
        display: block;
    }

    .bg-search-batt__filter {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(0, 136, 170);
        mix-blend-mode: hue;
    }

    .bg-search-batt__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 1313px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .bg-search-batt__content .box-search h1,
    .bg-search-batt__content .sub-title-search {
        position: relative;
        z-index: 2;
    }

    .sub-title-search {

        font-size: 24px;
        line-height: 1.25;
        color: #fff;
        text-align: center;
        margin-bottom: 49px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        max-width: 378px;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        margin-top: 64px;
        margin-inline: auto;
        width: 100%;
        max-width: min(1150px, calc(100% - 64px));
    }

    .wd-input-box-search {
        height: 188px;
        width: 100%;
        padding: 25px 15px;
        border-radius: 40px 0 32px 0;
        border: none;
        background: transparent;
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        isolation: isolate;
    }

    .wd-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(90deg, #00B6F1 0%, #0B3149 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 40px 0 32px 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(11, 49, 73, 0.80) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .wd-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 165px;
        width: auto;
    }

    .wd-input-box-search-main-wrapper .select-search-car,
    .wd-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper .select-search-car select,
    .wd-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .select-search select:active,
    .select-search select:hover {
        outline: none;
    }

    .box-search-batt {
        margin-top: 139px;
        padding-left: 131px;
    }

    .title-search-batt {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
    }

    .text-content-batt {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin: 10px 0;
    }

    .title-news {

        font-size: 20px;
        line-height: 1.25;
        font-weight: 600;
    }

    .tag-news-type {
        margin-top: 10px;
        margin-bottom: 20px;
    }



    .date-news {
        color: #999;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .featured-news-card {
        display: flex;
        align-items: stretch;
        gap: 24px;
    }

    .featured-news-text-align {
        flex: 1;
        padding-left: 0;
    }

    .other-news-text-align {
        flex: 1;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .other-news-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        font-size: 20px;
        line-height: 1.25;
        font-weight: 700;
        font-style: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* ข่าว/ประกาศ — แพทเทิร์นเดียวกับ max-width 1585 (สเกล 331→431 ในช่วง 1024–1295) */
    .img-box-news {
        aspect-ratio: 1 / 1;
        width: 341px;
        height: 341px;
        flex: 0 0 341px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .img-box-news-main {
        width: 100%;
        height: 343px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .news-section-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .news-category-list {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .news-category-container {
        display: inline-flex;
        height: 40px;
        padding: 8px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: rgba(166, 166, 166, 0.10);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        white-space: nowrap;
        transition: none;
    }

    .news-category-container:hover {
        border: 1px solid var(--Primary, #007FC6);
        background: #D9F2FF;
    }

    .description-news {
        font-size: 16px;
        font-style: normal;
        line-height: 1.25;
        font-weight: 400;
        color: #464646;
        margin-top: 16px;
    }

    .news-column-container {
        display: flex;
        min-height: 110px;
        height: auto;
        align-items: flex-start;
        gap: var(--border-radius-none, 0);
        flex-shrink: 0;
        align-self: stretch;
        border-radius: var(--border-radius-200, 8px);
        border: 1px solid #D8D8D8;
        background: #FFF;
        margin-bottom: 16px;
        cursor: pointer;
        overflow: hidden;
    }

    .news-column-content {
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: auto;
    }

    .news-column-image {
        width: 120px;
        height: 120px;
        flex: 0 0 120px;
        aspect-ratio: 1 / 1;
        align-self: flex-start;
        border-radius: var(--border-radius-200, 8px) 0 0 var(--border-radius-200, 8px);
    }

    .new-column-text-align {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 8px;
        gap: 10px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        margin-top: 31px;
        text-align: left;
    }

    .select-search select:active,
    select:hover {
        outline: none;
    }

    .select-search select:after,
    select:hover {
        outline: none;
    }

    .text-title-app {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-content-app {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-sub-blue {
        color: #00B6F1 !important;
    }

    .app-box {
        margin-top: 25%;
    }

    .img-box-type-battery {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 533px;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .box-search-batt {
        margin-top: 139px;
        padding-left: 131px;
    }

    .title-search-batt {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
    }

    .text-content-batt {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
    }

    .text-name-hero {

        font-size: 38px;
        line-height: 33px;
        color: #fff;
        font-style: italic;
        font-weight: bolder;
        padding-left: 20px;
    }

    .text-sub-hero {

        font-size: 31px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: 600;
    }

    .box-position-baner-hero {
        position: absolute;
        top: 14%;
        left: 15%;
    }

    .text-slo-grand {

        font-size: 17px;
        line-height: 18px;
        color: #fff;
        font-style: italic;
        font-weight: 500;
        width: 271px;
        text-align: center;
    }

    /* end homepage */
    /* product page */
    .img-product-pass-batt {
        background-position: center;
        background-repeat: no-repeat;
        height: 600px;
        width: 100%;
        background-size: cover;
    }

    .text-batt-type-one {

        font-style: italic;
        color: #C7EB02;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 41px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 20px;
        line-height: 32px;
    }

    .text-batt-type-two {

        font-style: italic;
        color: #FF9300;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 29px;
        line-height: 32px;
    }

    .text-batt-type-three {

        font-style: italic;
        color: #00B6F1;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 29px;
        line-height: 32px;
    }

    .position-type-product {
        position: absolute;
        top: 130px;
    }

    .position-type-product-right {
        position: absolute;
        top: 130px;
        right: 50px;
    }

    .box-bg-product {
        background-color: #fff;
        height: auto;
        border-radius: 0 0 24px 0;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        overflow: hidden;
    }

    .img-product-batt-wrap {
        width: 100%;
        aspect-ratio: 3 / 2;
        min-height: 201px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E9E9E9;
        overflow: hidden;
        position: relative;
    }

    .img-product-batt {
        width: 72%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform .3s ease;
        transform-origin: center center;
    }

    .box-bg-product:hover .img-product-batt {
        transform: scale(1.12);
    }

    .product-batt-name {

        color: #000000;
        text-align: left;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 700;
    }

    .type-batt-name {
        margin-top: 8px;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 700;
    }

    .batt-info-seperator {
        height: 1px;
        opacity: 0.5;
        background: #D2D2DD;
    }

    .batt-spec-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-spec-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-terminal-container {
        display: inline-flex;
        width: auto;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid #D2D2D2;
        background: #EBF8FF;
        margin-bottom: 8px;
    }

    .tag-batt-name {

        color: #005BAA;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        height: 124px;
        overflow: hidden;
    }

    .text-barnd {
        cursor: pointer;
    }

    .padding-box-pro-batt {
        padding: 24px 24px 24px 24px;
    }

    .btn-circle {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        position: absolute;
        bottom: 239px;
        right: 29px;
    }

    .banner-box-pro-car-type {
        margin-top: 10px;
        height: 469px;
    }

    .img-product-batt-banner {
        width: 100%;
        height: 100%;
    }

    .MultiCarousel {
        float: left;
        overflow: hidden;
        padding: 15px;
        width: 100%;
        position: relative;
    }

    .MultiCarousel .MultiCarousel-inner {
        transition: 1s ease all;
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: center;
        padding: 10px;
        margin: 10px;
        background: #fff;
        color: #000;
    }

    .activeBrand {
        border-bottom: 4px solid #005BAA;
    }

    .MultiCarousel .leftLst,
    .MultiCarousel .rightLst {
        position: absolute;
        border-radius: 50%;
        top: calc(50% - 16px);
    }

    .MultiCarousel .leftLst {
        left: 0;
    }

    .MultiCarousel .rightLst {
        right: 0;
    }

    .MultiCarousel .leftLst.over,
    .MultiCarousel .rightLst.over {
        pointer-events: none;
        background: #ccc;
    }


    /* Homepage hero search tabs */
    .bg-search-batt__content .tabbable-panel {
        display: flex;
        max-width: 1313px;
        width: 78%;
        margin-left: auto;
        align-items: stretch;
        flex-direction: row;
        justify-content: flex-end;
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
        width: 100%;
        flex: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
        align-self: stretch;
    }

    .bg-search-batt__content .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .nav-tabs-container-item:last-child {
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
    }

    .bg-search-batt__content .nav-tabs-container-item.active {
        border-top: 1px solid #005BAA;
        border-left: 1px solid #005BAA;
        border-bottom: 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(28, 53, 74, 0.80) 100%);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .nav-tabs-container-item.active:last-child {
        border-right: 1px solid #005BAA;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:focus,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
    }

    .bg-search-batt__content .btn-wrapper-search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }

    /*End product page */
    .col-xs-12 {
        position: relative;
        min-height: 1px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .img-close-app {
        width: 21px;
        margin-top: 13px;
    }

    .breadcrumb {
        padding: 8px 10px;
    }

    .navbar-toggle {
        padding: 0px 0px !important;
        margin-right: 0px !important;
    }

    /* about us page  */
    .abt-img {
        width: 100%;
        height: 359px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .text-abt {

        color: #646464;
        font-size: 24px;
        line-height: 55px;
        font-weight: 500;
    }

    .text-name-building {

        color: #000;
        font-size: 32px;
        line-height: 29px;
        font-weight: 500;
    }

    .breadcrumb>.active {
        font-weight: 600;
    }

    .line-abt {
        background-color: #005BAA;
        width: 4px;
        height: 661px;
        position: absolute;
        margin-left: 5px;
        margin-top: -11px;
    }

    .line-abt-2 {
        background-color: #005BAA;
        width: 4px;
        height: 560px;
        position: absolute;
        margin-left: 5px;
        margin-top: -11px;
    }

    /* .about_line {
            position: absolute; 
          
            height: 255px;
            width: 5px;
        } */
    .text-year-abt {

        color: #005BAA;
        font-size: 30px;
        line-height: 45px;
        font-weight: 500;
    }

    .text-h-abt {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
    }

    .text-h-abt-detail {

        color: #000000;
        font-size: 14px;
        line-height: 24px;
    }

    .mar-top-box-history {
        margin-top: 50px;
    }

    .padding-top-abt {
        margin-top: 26px;
    }

    .data-abt-h-text {

        color: #005BAA;
        font-size: 36px;
        line-height: 40px;
        text-align: center;
        font-weight: 500;
    }

    .padding-left {
        padding-left: 0px;
        padding-right: 0px;
    }

    .text-job-position {
        color: #FFFFFF;
        font-size: 16px;
        line-height: 30px;

    }

    .short-full {
        color: #fff;
        font-size: 14px;
        margin-top: 10px;
    }

    .sub-data-abt-h-text {

        color: #646464;
        font-size: 24px;
        line-height: 1.5;
        text-align: center;
        font-weight: 500;
    }

    .paddding-left-news {
        padding-left: 106px;
    }

    .margin-top-abt {
        margin-top: 60px;
    }

    .text-detail-abt-h {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
        text-align: justify;
        padding-right: 40px;
    }

    .text-h-abt-gs {

        color: #000000;
        font-size: 30px;
        line-height: 55px;
        margin-bottom: 20px;
    }

    /* end about us page  */
    /* find batt type page  */
    .position-type {
        position: absolute;
        top: 151px;
        left: 20px;
    }

    .text-batt-name {

        font-size: 30px;
        line-height: 55px;
        color: #00B6F1;
        font-style: italic;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .batt-type {

        font-size: 39px;
        line-height: 33px;
        color: #005BAA;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .detail-title {

        font-size: 34px;
        line-height: 18px;
        color: #fff;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .sub-batt-type {

        font-size: 17px;
        line-height: 34px;
        color: #fff;
        font-style: italic;
        margin-bottom: 20px;
    }

    /* end find batt type page  */
    /*  start Contact page  */
    .input-mar-padding {
        /* padding-top:30px; */
    }

    .text-contact-header {

        color: #000000;
        font-size: 22px;
        line-height: 43px;
        font-weight: 500;
        text-align: left;
        font-style: italic;
    }

    .text-contact-h-main {

        color: #005BAA;
        font-size: 35px;
        line-height: 40px;
        font-weight: 500;
        margin-top: 50px;
        font-style: italic;
    }

    .request-select {
        color: #F00 !important;
    }

    .margin-top-input {
        margin-top: 20px;
        padding-bottom: 43px;
    }

    /* End Contact page  */
    .bg-footer-mobile {
        width: 100%;
        height: 116px;
        position: absolute;
        bottom: 0px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .warranty-register-step-wrapper {
        width: 100%;
        height: auto;
        padding: 80px 64px;
    }

    .warranty-register-step-inner {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
        box-sizing: border-box;
        overflow: visible;
    }

    .warranty-register-step-item-wrapper {
        display: flex;
        width: 100%;
        padding-right: 0px;
        align-items: flex-start;
        gap: 48px;
        height: 455px;
        /* ความสูงหน้าต่างที่มองเห็น (ล้อกับ progress 455px) */
        overflow: hidden;
        mask-image: linear-gradient(to bottom,
                #000 0%,
                #000 50%,
                transparent 89%);
    }


    .warranty-register-step-indicators {
        position: absolute;
        left: 0;
        top: 35%;
        z-index: 2;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
    }

    .warranty-register-step-indicators li {
        display: inline-block;
        width: 8px;
        height: 24px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0 solid transparent;
        border-radius: 0;
        transform: skewY(45deg);
        cursor: pointer;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    .warranty-gradient-circle-left {
        width: 465px;
        height: 465px;
        aspect-ratio: 1/1;
        pointer-events: none;
        z-index: -1;
        /* อยู่ข้างหลังรูปและ text */
        position: absolute;
        left: 50%;
        top: 60%;
        transform: translate(-50%, -50%);
        /* center กลางรูป illustration */
        border-radius: 465px;
        background: radial-gradient(50% 50% at 50% 50%, rgba(0, 182, 241, 0.60) 0%, rgba(181, 234, 252, 0.00) 87.5%);
    }

    .warranty-register-vector {
        position: absolute;
        left: -60px;
        top: 40px;
        width: 765px;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 765px;
        background: radial-gradient(50% 50% at 50% 50%, rgba(0, 182, 241, 0.60) 0%, rgba(181, 234, 252, 0.00) 87.5%);
    }

    .warranty-register-step-indicators .active {
        width: 8px;
        height: 52px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .warranty-register-step-illustration-content {
        position: relative;
        width: 40%;
        height: 100%;
        max-height: 799px;
        min-height: 400px;
        overflow: visible;
    }


    .warranty-register-step-illustration-viewport {
        position: relative;
        width: 365px;
        height: 799px;
        overflow: hidden;
    }

    .warranty-register-step-illustration-track {
        position: absolute;
        left: 0;
        top: 0;
        width: 365px;
        display: flex;
        flex-direction: column;
        transition: transform 0.4s ease;
    }

    .warranty-register-step-illustration-image {
        width: 365px;
        height: 799px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .warranty-vector {
        position: absolute;
        left: 31%;
        bottom: -36%;
        transform: translate(-50%, -50%);
        width: 160%;
        max-width: none;
        z-index: -1;
        pointer-events: none;
        opacity: 0.05;
    }

    .news-list-banner-carousel-wrapper {
        width: auto;
        max-width: 100%;
        /* หรือ 100% ก็ได้ ถ้าจะ scale ข้างใน */
        margin: 0 auto;
        padding: 0 64px;
        /* inset ด้วย padding แทน margin ถ้าลูกศร absolute */
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        overflow: visible;
    }

    .news-list-banner-text-container {
        display: flex;
        position: relative;
        z-index: 2;
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        margin-left: -64px;
        margin-right: auto;
        margin-top: -64px;
        height: 100%;
        padding: 32px 48px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: none;
        backdrop-filter: blur(12px);
    }

    .news-list-banner-carousel-wrapper .owl-prev {
        left: 32px;
    }

    .news-list-banner-carousel-wrapper .owl-next {
        right: 64px;
    }

    .company-gradient-circle-left-2 {
        left: -40%;
        top: 456px;
    }


    .img-box-about-us-row,
    .img-box-about-us-row-2 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 1295px;
        margin: 0 auto;
        padding: 0 64px;
        box-sizing: border-box;
        transform: translateX(clamp(-36px, -2.78vw, 0px));
    }

    .img-box-about-us-row-2 {
        transform: none;
    }

    /* แถวที่ 1: รูปซ้าย max 641px + กล่องข้อความขวา */
    .img-box-about-us-row>div:first-child {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        width: 100%;
        max-width: 641px;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
    }

    .img-box-about-us-row>div:last-child {
        position: relative;
        z-index: 2;
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* แถวที่ 2: กล่องข้อความซ้าย ~51% + รูปขวา ~49% */
    .img-box-about-us-row-2>div:first-child {
        position: relative;
        z-index: 2;
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .img-box-about-us-row-2>div:last-child {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        width: 100%;
        max-width: 595px;
        min-width: 0;
        display: flex;
        justify-content: flex-start;
    }

    .img-box-about-us-container {
        height: 431px;
        width: 90%;
        position: relative;
        overflow: hidden;
        transform: skewX(-10deg);
        border-radius: 0 0 48px 0;
        background-color: #f1f1f1;
    }

    .img-box-about-us-container-right {
        height: 431px;
        width: 90%;
        margin-top: 42px;
        position: relative;
        overflow: hidden;
        transform: skewX(-10deg);
        border-radius: 0 0 48px 0;
        background-color: #f1f1f1;
    }

    .img-box-about-us {
        position: absolute;
        top: 0;
        left: -12%;
        width: 120%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .about-us-column-description-container-right {
        position: relative;
        overflow: visible;
        display: flex;
        width: 111.93%;
        margin-left: -24px;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.60);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .about-us-column-description-container-left {
        position: relative;
        z-index: 1;
        display: flex;
        width: 111.93%;
        margin-right: -24px;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

}

/* tablet mini or small device */

@media (max-width:1023px) and (min-width:768px) {
    h1 {
        font-size: 36px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h2 {
        font-size: 30px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h3 {
        font-size: 24px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h4 {
        font-size: 20px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h5 {
        font-size: 18px;
        font-style: normal;
        line-height: 1.4;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h6 {
        font-size: 12px;
        font-style: normal;
        line-height: 1.0;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    p {
        font-size: 16px;
        font-style: normal;
        line-height: 1.5;
    }

    .blue-h1 {
        font-size: 40px;

        line-height: 36px;
        font-weight: 800;
        color: #007FC6;
    }

    .h4-subbanner {
        font-size: 22px;

        line-height: 24px;
        font-weight: 700;
        color: #fff;
    }

    .body1 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .body1-bold {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .body2 {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.25;
    }

    .body3 {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.25;
    }

    .space-extra-large {
        height: 92px;
        margin-top: 0;
    }


    .space-large {
        margin-top: 81px;
    }

    .space-medium {
        margin-top: 64px;
    }


    .space-semi-medium {
        height: 52px;
        margin-top: 0;
    }

    .space-small-med {
        margin-top: 48px
    }

    .space-small {
        margin-top: 40px
    }

    .space-small-2 {
        margin-top: 32px;
    }

    .space-s-small {
        margin-top: 24px;
    }

    .space-xs {
        margin-top: 16px;
    }

    .space-xxs {
        height: 8px;
        margin-top: 0;
    }


    .search-result-content-margin {
        margin-top: -20px;
    }

    .blue-small-banner-header-margin {
        margin-left: 57px;
    }

    .horizontial-space {
        padding-left: 60px;
        padding-right: 60px;
    }

    .bottom-space-s {
        margin-bottom: 20px
    }

    .service-section-decor {
        position: relative;
        overflow-x: clip;
        /* กันขวา ไม่สร้าง scroll แนวนอน */
        overflow-y: visible;
    }

    .tough-vector {
        height: auto;
        width: clamp(620px, calc(1023px - (1023px - 100vw) * 0.6), 823px);
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: clamp(910px, calc(1000px - (1023px - 100vw) * 0.52), 1000px);
        opacity: 0.04;
    }

    .tough-vector-2 {
        width: clamp(420px, calc(645px - (1295px - 100vw) * 0.83), 645px);
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: clamp(1060px, calc(1280px - (1030px - 100vw) * 0.4), 1280px);
        opacity: 0.04;
    }

    .tough-vector-3 {
        width: 45%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: 0;
        bottom: -80px;
        opacity: 0.10;
    }

    .gradient-circle-left {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -490px;
        top: 1100px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .gradient-circle-right {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -579px;
        top: 1800px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }


    .wrapper-404 {
        width: 100%;
        max-width: 100%;
        display: flex;
        height: auto;
        align-items: center;
        flex-direction: column-reverse;
        gap: 24px;
        justify-content: center;
    }

    .wrapper-404-end {
        margin-right: auto;
    }

    .wrapper-404-image img {
        aspect-ratio: 1/1;
        width: 445px;
        height: 445px;
        object-fit: cover;
    }

    .wrapper-404-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        flex-shrink: 0;
    }


    /* Homepage: banner carousel + hero bg-search (sync 1300–1585) */
    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-weight: 600;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .banner-wrapper,
    .interesting-banner-wrapper {
        margin: 0 auto;
        position: relative;
        --owl-items: 1.38;
    }

    .banner-wrapper .owl-stage-outer {
        overflow: hidden;
    }

    .interesting-banner-wrapper .owl-stage-outer {
        overflow: visible;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .banner-wrapper .owl-item .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item .h-w-imag-ban-slide {
        border-radius: 0 0 48px 0;
    }

    .banner-wrapper .banner-slide-card,
    .interesting-banner-wrapper .banner-slide-card {
        position: relative;
    }

    .banner-wrapper .owl-item.center .banner-slide-media,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media {
        display: block;
        position: relative;
        border-radius: 0 0 48px 0;
        overflow: hidden;
    }

    .banner-wrapper .owl-item.center .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after {
        opacity: 1;
    }

    .banner-wrapper .owl-item:not(.center) .banner-slide-btn,
    .interesting-banner-wrapper .owl-item:not(.center) .banner-slide-btn {
        display: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-btn {
        position: absolute;
        left: 50%;
        top: auto;
        bottom: 20px;
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(0);
        white-space: nowrap;
        flex-shrink: 0;
        width: max-content;
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
        text-decoration: none;
        pointer-events: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-12px);
        pointer-events: auto;
    }

    .banner-wrapper .owl-item:not(.center),
    .banner-wrapper .owl-item:not(.active),
    .interesting-banner-wrapper .owl-item:not(.center),
    .interesting-banner-wrapper .owl-item:not(.active),
    .h-w-imag-ban-slide {
        opacity: 1;
        transform-origin: center center;
        transform: scale(0.92);
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    }

    .banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 0 0 0 16px;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
    }


    .banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-prev {
        left: max(16px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-next {
        right: max(16px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .banner-wrapper .owl-prev:hover,
    .banner-wrapper .owl-next:hover,
    .interesting-banner-wrapper .owl-prev:hover,
    .interesting-banner-wrapper .owl-next:hover {
        background: #007FC6;
    }

    .banner-wrapper .owl-prev:hover img,
    .banner-wrapper .owl-next:hover img,
    .interesting-banner-wrapper .owl-prev:hover img,
    .interesting-banner-wrapper .owl-next:hover img {
        filter: brightness(0) invert(1);
    }

    .banner-wrapper .owl-prev.disabled,
    .banner-wrapper .owl-next.disabled,
    .interesting-banner-wrapper .owl-prev.disabled,
    .interesting-banner-wrapper .owl-next.disabled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .box-position-baner-hero {
        position: absolute;
        top: 10%;
        left: 15%;
    }

    #custom-indicators {
        position: static;
        margin: 0 auto;
    }

    #custom-indicators .active {
        margin: 0;
        margin-right: 4px;
        width: 52px;
        height: 8px;
        background-color: #007FC6;
        transition: all 0.4s ease;
    }

    #custom-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators {
        position: static;
        margin: 24px auto 0;
        padding-left: 0;
        width: auto;
        list-style: none;
        text-align: center;
    }

    #interesting-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators .active {
        width: 52px;
        height: 8px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .btn-view-more {
        z-index: 2;
        bottom: 24px;
        display: inline-flex;
        height: 48px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #00B6F1;
        background: #007FC6;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .btn-view-more-left {
        left: 380px;
    }

    .btn-view-more-right {
        left: 70px;
    }

    .btn-view-more::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .btn-view-more:hover::after {
        opacity: 1;
    }

    .btn-view-more-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        padding: 0 24px;
        gap: 8px;
        z-index: 3;
        border-radius: 0 0 16px 0;
        border: 1px solid var(--Primary, #007FC6);
        background: #FFF;
        color: #007FC6;
        text-decoration: none;
        transition: background 0.25s ease, color 0.25s ease;
    }

    .btn-view-more-2:hover {
        background: #007FC6;
        color: #fff !important;
    }

    .btn-view-more-2:hover img {
        filter: brightness(0) invert(1);
    }

    .service-item-container {
        height: 140px;
        width: 290px;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-left: 40px;
        padding-right: 40px;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 48px 0px;
        cursor: pointer;
    }

    .service-item-container::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -8;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .service-item-container:hover::after {
        opacity: 1;
    }

    .service-item-inner {
        transform: skewX(18deg);
    }

    .service-item-inner:has(.service-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 112px;
        width: 112px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .service-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .service-item-container:hover .service-item-icon img {
        transform: translateY(-10%);
    }

    .service-item-title {
        margin-top: 0;
        margin-left: -48px;
        text-align: left;
        color: #fff;
        width: 100%;
    }

    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
    }

    .bg-search-batt {
        position: relative;
        overflow: hidden;
        z-index: 20;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 720px;
        margin-top: -128px;
        padding-top: 128px;
        box-sizing: border-box;
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 30px),
                0 100%);
    }

    .bg-search-batt__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 4;
        pointer-events: none;
        display: block;
    }

    .bg-search-batt__filter {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(0, 136, 170);
        /* ปรับความเข้ม */
        mix-blend-mode: hue;
    }

    .bg-search-batt__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 1313px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .bg-search-batt__content .box-search h1,
    .bg-search-batt__content .sub-title-search {
        position: relative;
        z-index: 2;
    }

    .sub-title-search {

        font-size: 24px;
        line-height: 1.25;
        color: #fff;
        text-align: center;
        margin-bottom: 49px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        max-width: 378px;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        margin-top: 64px;
        margin-inline: auto;
        width: 100%;
        max-width: min(1150px, calc(100% - 64px));
    }

    .wd-input-box-search-img img {
        flex-shrink: 0;
        aspect-ratio: 1/1;

        width: clamp(150px,
                calc(247px - (1400px - 100vw) * 0.7),
                247.891px);

        height: clamp(150px,
                calc(247px - (1400px - 100vw) * 0.5),
                247.891px);

        margin-top: clamp(-74px,
                calc(-74px + (1400px - 100vw) * 0.12),
                -35px);

        margin-right: clamp(4px,
                calc(14px - (1400px - 100vw) * 0.04),
                14px);

        object-fit: contain;
    }

    .wd-input-box-search {
        height: 188px;
        width: 100%;
        padding: 25px 15px;
        border-radius: 40px 0 32px 0;
        border: none;
        background: transparent;
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        isolation: isolate;
    }

    .wd-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(90deg, #00B6F1 0%, #0B3149 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 40px 0 32px 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(11, 49, 73, 0.80) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .wd-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .wd-input-box-search-main-wrapper .select-search-car,
    .wd-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper .select-search-car select,
    .wd-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .img-box-home-row {
        position: relative;
        display: flex;
        /* ← เพิ่ม */
        align-items: stretch;
    }

    .img-box-home-row-2 {
        position: relative;
        display: flex;
        /* ← เพิ่ม */
        align-items: stretch;
    }

    /* แถวที่ 2: รูปขวา skew ทับกล่องข้อความซ้าย — ยก z-index คอลัมน์ข้อความ */
    .img-box-home-row:has(.img-box-home-container-right)>.pdd-left {
        position: relative;
        z-index: 2;
    }

    .img-box-home-row:has(.img-box-home-container-right)>.pdd-right {
        position: relative;
        z-index: 1;
    }

    .img-box-home-tough {
        position: absolute;
        bottom: 0;
        left: 4%;
        width: clamp(350px, 18vw, 400px);
        /* ปรับตามดีไซน์ */
        height: auto;
        pointer-events: none;
        z-index: 2;
        object-fit: contain;
        object-position: left bottom;
    }

    .img-box-home-container {
        height: 431px;
        width: 89.065%;
        position: relative;
        overflow: hidden;
        left: 12%;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
    }

    .img-box-home-container-right {
        height: 431px;
        width: 89%;
        position: relative;
        overflow: hidden;
        right: 7%;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
    }

    .img-box-home {
        position: absolute;
        top: 0;
        left: -12%;
        width: 150%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .column-description-container-right {
        position: relative;
        overflow: visible;
        display: flex;
        right: 8%;
        margin-top: 63px;
        padding: 40px 40px 56px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .column-description-container-left {
        position: relative;
        /* ต้องมี position ถึงจะใช้ z-index ได้ */
        z-index: 1;
        display: flex;
        left: 6%;
        margin-top: 63px;
        padding: 40px 40px 56px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }



    .sub-banner-container {
        display: grid;
        position: relative;
        overflow: hidden;
        margin-top: 80px;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        height: auto;
        min-height: 0;
    }

    .sub-banner-container>img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: bottom;
        z-index: 0;
        min-height: 0;
    }

    .sub-banner-content {
        position: relative;
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding-top: 24px;
        padding-bottom: 48px;
        padding-left: 32px;
        padding-right: 32px;
        z-index: 1;
    }


    .sub-banner-box {
        display: flex;
        width: 408px;
        height: auto;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        border: 0.5px solid rgba(255, 255, 255, 0.70);
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .image-gsbattery {
        margin-top: 30px;
        max-width: 100%;
        max-height: 535px;
    }

    .career-bg {
        height: 420px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 20px;
    }

    .title-news-2 {
        font-size: 20px;
        height: 60px;
        overflow: hidden;
        margin-top: 15px;
    }

    .box-radis-des-sales::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #005BAA;
        position: absolute;
        margin-top: 7px;
    }

    .box-radis-des-sales {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #00B6F1;
        position: absolute;
        margin-top: 7px;
    }

    .ma-bottom-20 {
        margin-bottom: 20px;
    }

    .box-radis-sale {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-sale::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #005BAA;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .box-radis-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-batt::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #00B6F1;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .display-destop {
        display: block;
    }

    .display-mobile {
        display: none;
    }

    .box-chage-lang {
        margin-top: -22px;
        margin-right: 20px;
    }

    .line-abt-verticle2 {
        background-color: #005BAA;
        width: 67%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .line-abt-verticle {
        background-color: #005BAA;
        width: 83%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .margin-abt-timeline {
        margin-top: 30px;
    }

    .bg-color-footer {
        height: 20px;
        background-color: #005BAA;
    }

    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    /* คง layout skew ใน container — อย่าใช้ .img-box-home แบบ block 360px ทับด้านบน */
    .img-box-home-container .img-box-home,
    .img-box-home-container-right .img-box-home {
        position: absolute;
        top: 0;
        left: -12%;
        width: 150%;
        height: 100%;
        margin: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .pad-left {
        padding-left: 20px;
    }

    .bg-footer {
        background-color: #ffffff;
        width: 100%;
        height: auto;
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: #005BAA;
        margin: 10px 0px;
    }

    .select-search-model select {
        display: flex;
        appearance: none;
        width: 200px;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
    }

    .select-search-car select {
        display: flex;
        appearance: none;
        width: 200px;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
    }


    .box-text-activities {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .border-bottom-new-act {
        width: 155px;
        height: 4px;
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
    }

    .sub-new-des {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .img-box {
        width: 100%;
        background-color: #f1f1f1;
        height: 200px;
        margin: 20px 0px;
    }

    .batt-long-time {
        margin: 20px 0px;
    }

    .tabbable-line>.nav-tabs>li {
        margin: 0 60px;
    }

    .text-colo-link {
        color: #005BAA;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 168px;
    }

    .img-box-fing-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 556px;
    }

    /* prduct detailpage */
    .text-breadcrumb {
        color: #282828;
    }

    .bg-pro-detail {
        margin-top: -32px;
        background-color: #E9E9E9;
        width: 100%;
        height: 700px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        /* หรือ 32px — ระยะขอบใน */
        box-sizing: border-box;
    }

    .product-items-row {
        margin-top: -80px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 24px;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
    }

    .product-item-main-container {
        height: 110px;
        width: 160px;
        display: flex;
        align-items: flex-end;
    }

    .product-item-inner {
        transform: skewX(18deg);
    }

    .product-item-inner:has(.product-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 53.537px;
        height: 53.537px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -40%);
        z-index: 2;
    }

    .product-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }


    .product-item-container {
        height: 120px;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-left: 16px;
        padding-right: 16px;
        background: var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 15px 0px;
        cursor: pointer;
    }

    .product-item-title {
        margin-top: 16px;
        text-align: center;
        color: #fff;
    }

    .img-product-batt-detail {
        width: auto;
        height: auto;
        max-width: 72%;
        /* ปรับได้ เช่น 65%–80% */
        max-height: 85%;
        /* ไม่ล้นความสูงกล่อง */
        object-fit: contain;
        display: block;
    }

    .btn-border-w {
        background-color: #FFFFFF;
        border: 1px solid #D3D3D3;
        border-radius: 25px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 209px;
        height: 50px;
        font-weight: 600px;
        font-size: 17px;

    }

    .box-view-big-img {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .box-data-pro-detail {
        padding-left: 16px;
        padding-right: 16px;
    }

    .text-type-pro-detail {
        font-size: 16px;
        line-height: 1.5;
        font-weight: 700;
        color: #00B6F1;
    }

    .text-name-pro-detail {

        font-size: 56px;
        line-height: normal;
        font-weight: 700;
        color: #00B6F1;
    }

    .text-sub-pro-detail {

        font-size: 19px;
        line-height: 25px;
        font-weight: 500;
        color: #000000;
    }

    .text-slogrand-pro-detail {

        font-size: 27px;
        line-height: 55px;
        font-weight: 500;
        color: #000000;
    }

    .btn-circle-product {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        width: 41px;
        height: 41px;
    }

    .text-icon-pro-detail {

        font-size: 17px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .margin-bottom-img {
        margin-bottom: 5px;
    }

    .text-data-contant {

        font-size: 27px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .text-sub-detail {

        font-size: 16px;
        font-style: italic;
        line-height: 23px;
        padding-left: 50px;
    }

    .a-text-size {
        margin-left: 30px;
    }

    .text-h-pro {

        font-size: 16px;
        font-style: italic;
        line-height: 23px;
        font-weight: 600;
        color: #000000;
    }

    .text--sub-h-pro {

        font-size: 22px;
        font-style: italic;
        line-height: 17px;
        font-weight: 600;
        color: #000000;
        margin-top: 10px;
    }

    .green-box {
        background-color: #C7EB02;
        height: 42px;
        width: 3px;
        position: absolute;
        margin-top: 5px;
        left: 2px;
    }

    .padd-bottom-btn {
        padding-bottom: 20px;
    }

    .new-box-tip {
        padding-top: 29%;
    }

    .title-news-tip {
        font-size: 43px;

        font-weight: 500;
        line-height: 55px;
        color: #000;
    }

    .sub-new-detail {
        font-size: 23px;

        font-weight: 500;
        line-height: 32px;
        color: #005BAA;
        padding-right: 35%;
    }

    .img-icon-prodetail {
        width: 50px;
        height: auto;
    }

    .img-icon-prodetail-list {
        width: 43px;
        height: 43px;
    }

    /* end productdetail page */


    .img-icon-prodetail-list {
        width: 43px;
        height: 43px;
    }

    .select-box select {
        border-radius: 4px;
        background-color: #ffffff;
        border: 2px solid #005BAA;
        padding: 4px 10px;
        width: 96px;
    }

    .select-box {
        margin-top: 20px;
        padding-left: 20px;
    }

    .select-box select:active,
    select:hover {
        outline: none;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .border-footer {
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .img-footer-logo {
        height: 64px;
    }

    .padding-top-footer {
        padding-top: 50px;
    }

    .contact-text-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .text-detail-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 8px;
    }

    .text-detail-reserved {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .text-address-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
    }

    .img-icon-footer {
        width: 35px;
        height: 35px;
        margin-left: 5px;
        margin-top: 20px;
    }

    .text-link-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .text-link-footer-sub {

        font-size: 14px;
        line-height: 24px;
        color: #231F20;
    }

    .tab-panel-batt-footer {
        background-color: #fff !important;
    }

    .tab-footer {
        border-top: 1px solid #9E9E9E;
        padding-top: 24px;
        padding-bottom: 8px;
    }

    .tab-footer:first-child {
        border-top: none;
    }

    .tab-footer:not(:has(~ .tab-footer)) {
        border-bottom: 1px solid #9E9E9E;
    }



    .short-full-footer {
        color: #231F20;
        margin-top: -17px;
        padding-right: 10px;
    }

    /* endfooter */
    .margin-space-banner {
        margin-top: 10px;
    }

    .btn-main-border {
        background-color: #fff;
        width: 220px;
        height: 50px;
        border: 2px solid #005BAA;

        font-size: 16px;
        color: #005BAA;
        border-radius: 4px;
        margin-top: 10px;
    }

    .btn-main-border:hover {
        box-shadow: 0px 3px 6px #00B6F1;
        color: #000000;
    }

    .btn-main-border:active {
        background: rgba(0, 51, 161, 1);
        background: -moz-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: -webkit-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: -o-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: -ms-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: linear-gradient(to right, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
        border-radius: 32px;
        width: 220px;
        height: 50px;
        border: none;

        font-size: 16px;
        color: #000000;
        border-radius: 32px;
        margin-top: 10px;
        box-shadow: 0px 3px 6px #00B6F1;
    }

    /* Search all page  */
    .stylish-input-group .input-group-addon {
        background: white !important;
    }

    .stylish-input-group .form-control {
        border-right: 0;
        box-shadow: 0 0 0;
        border-color: #ccc;
    }

    .stylish-input-group button {
        border: 0;
        background: transparent;
    }

    .mdl-textfield {
        position: relative;
        font-size: 16px;
        display: inline-block;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 20px 0;
    }

    .btn-search {
        position: absolute;
        right: 20px;
        top: 25px;
    }

    .text-search-margin {
        margin-bottom: 20px;
    }

    .text-header-search {
        color: #04163D;
        margin-bottom: 5px;
    }

    .btn-search {
        position: absolute;
        right: 20px;
        top: 25px;
    }

    .mdl-textfield--floating-label {

        font-size: 14px;
    }

    #search input[type="text"]:focus {
        width: 250px;
    }

    .text-cancel-bar {
        position: absolute;
        margin-top: -33px;
        right: 3%;
        z-index: -999;
        font-size: 12px !important;

    }

    .text-link-suport {

        font-size: 16px;
        line-height: 18px;
    }

    .collapsing ul li a,
    .in ul li a {
        color: #555 !important;
    }

    .collapsing ul li a:hover,
    .in ul li a:hover {
        color: #f1f1f1 !important;
    }

    .navbar-center {
        position: absolute;
        left: 30%;
        right: 20%;
    }

    .navbar-main {
        display: none !important;

    }

    .invisible-mobile {
        display: none !important;
    }

    .visible-product-banner {
        display: none;
    }


    .visible-mobile {
        display: block !important;
    }

    .visible-slide-baner {
        display: none;
    }

    .visible-component-desktop {
        display: block;
    }

    .visible-component-mobile {
        display: none;
    }

    .search-result-card-excerpt--full {
        display: block;
    }

    .search-result-card-excerpt--short {
        display: none;
    }

    .section-white {
        display: none;
    }


    .service-section-decor--mobile {
        display: none;
    }

    .navbar-brand {
        float: right;
    }

    .menu-text-mobile {
        border-bottom: 1px solid #9E9E9E;
        font-size: 14px;

        margin-top: 5px;
    }

    .margin-top-menu-mobile {
        margin-top: 20px;
    }

    .h-mobile {
        margin-top: 20px;
    }

    .margin-top-mobile-Procategory {
        margin-top: 40px;
    }

    /* advance search  */
    .cd-main-header,
    .cd-main-content {
        position: relative;
        transition: transform 0.3s;
    }

    .cd-main-header.nav-is-visible,
    .cd-main-content.nav-is-visible {
        transform: translateX(-260px);
    }

    .flipkart-navbar-input {
        padding: 12px 16px;
        border-radius: 2px 0 0 2px;
        border: 0 none;
        outline: 0 none;
        font-size: 15px;

    }

    .flipkart-navbar-button {
        background-color: #999;
        border: 1px solid #999;
        border-radius: 0 2px 2px 0;
        color: #565656;
        padding: 10px 0;
        height: 44.5px;
        cursor: pointer;
    }

    .box-size {
        height: 443px !important;
    }

    .img-box {
        width: 200px;
        height: 100px;
        margin-right: 41%;
    }

    .navbar-center {
        position: absolute;
        left: 30%;
        right: 20%;
    }

    .main-menu-header {
        color: #ffffff !important;
        font-size: 15px;

        cursor: pointer;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1100;
        top: 10px;
        left: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%), #FFF;
        overflow-x: hidden;
        transition: 0.5s;
        margin-top: 70px;
    }

    .sidenav a {
        padding: 12px 16px;
        text-decoration: none;
        font-size: 18px;
        font-weight: 700;
        display: block;
        transition: 0.3s;

        display: flex;
        justify-content: space-between;
    }

    .sidenav a:hover,
    .sidenav a:focus {
        color: #00B6F1;
    }

    .sidenav .chevron-down-icon {
        display: inline-block;
        transition: transform 0.3s ease;
        transform: rotate(0deg);
    }

    .sidenav a.menu-text-mobile[aria-expanded="true"] {
        color: #00B6F1;
    }

    /* เปิดแล้วเท่านั้น */
    .sidenav a.menu-text-mobile[aria-expanded="true"] .chevron-down-icon {
        transform: rotate(180deg);
    }

    .sidenav .closebtn {

        position: absolute;
        top: 2px;
        left: 18px;
        font-size: 36px;
        margin-left: 50px;
    }

    .select-list-link-mobile {
        position: relative;
        margin-left: 275px;
        margin-top: -34px;
        color: white;
    }

    .img-logo {
        height: 31px;
        margin-top: 6px;
        left: 50%;
        right: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
    }

    .img-logo-app {
        height: 31px;
        margin-top: 6px;
        left: 50%;
        right: 50%;
        transform: translate(-50%, -155%);
        position: absolute;
    }

    .navbar-default {
        height: 70px;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: white;
        margin-top: 6px;
    }

    .navbar-toggle .icon-bar {
        width: 24px;
    }



    /* homepage */
    .img-banner-mobile {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 700px;
    }

    .img-icon-type {
        height: 70px;
    }

    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-style: italic;
        font-weight: 600;
    }


    .padding-left-box-new {
        padding-left: 15px;
        padding-right: 15px;
    }

    .title-news {

        font-size: 30px;
        line-height: 38px;
        margin-top: 20px;
        font-weight: 600;
        height: 64px;
        overflow: hidden;
    }

    .tag-news-type {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .btn-tag-tip {
        background-color: #00B6F1;
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }

    .btn-tag-activities {
        background: #fff;
        padding: 8px;
        border-radius: 0px;
        font-size: 14px;
    }

    .btn-tag {
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }

    .position-btn-typ-batt {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: 0;
    }

    .text-detail-type-battery {

        font-size: 16px;
        line-height: 19px;
        color: #fff;
        padding-top: 0px;
        padding-left: 33px;
        padding-right: 33px;
        font-style: italic;
    }

    .text-mobile-sub {

        font-size: 17px;
        line-height: 22px;
        color: #000000;
        font-style: italic;
        text-align: center;
        font-weight: 500;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
        text-align: left;
    }

    /* Homepage: hero bg-search + text (sync 1296–1299 / 1300–1585) */
    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
    }

    .bg-search-batt {
        position: relative;
        overflow: hidden;
        z-index: 20;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 600px;
        margin-top: -128px;
        box-sizing: border-box;
    }

    .bg-search-batt__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 4;
        pointer-events: none;
        display: block;
    }

    .bg-search-batt__filter {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(0, 136, 170);
        mix-blend-mode: hue;
    }

    .bg-search-batt__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 1313px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .bg-search-batt__content .box-search h1,
    .bg-search-batt__content .sub-title-search {
        position: relative;
        z-index: 2;
    }

    .sub-title-search {

        font-size: 24px;
        line-height: 1.25;
        color: #fff;
        text-align: center;
        margin-bottom: 49px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        max-width: 378px;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        margin-top: 64px;
        margin-inline: auto;
        width: 100%;
        max-width: min(1150px, calc(100% - 64px));
    }

    .wd-input-box-search-img img {
        flex-shrink: 0;
        aspect-ratio: 1/1;
        width: clamp(210px,
                calc(247px - (1296px - 100vw) * 0.7),
                247.891px);
        height: clamp(210px,
                calc(247px - (1296px - 100vw) * 0.7),
                247.891px);
        margin-top: clamp(-60px,
                calc(-74px + (100vw - 1024px) * 0.05),
                -74px);
        margin-right: clamp(14px,
                calc(14px - (1296px - 100vw) * 0.05),
                14.45px);
        object-fit: contain;
    }

    .wd-input-box-search {
        height: 188px;
        width: 100%;
        padding: 25px 15px;
        border-radius: 40px 0 32px 0;
        border: none;
        background: transparent;
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        isolation: isolate;
    }

    .wd-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(90deg, #00B6F1 0%, #0B3149 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 40px 0 32px 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(11, 49, 73, 0.80) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .wd-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 165px;
        width: auto;
    }

    .wd-input-box-search-main-wrapper .select-search-car,
    .wd-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper .select-search-car select,
    .wd-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .select-search select:active,
    .select-search select:hover {
        outline: none;
    }

    .box-search-batt {
        margin-top: 139px;
        padding-left: 131px;
    }

    .title-search-batt {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
    }

    .text-content-batt {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin: 10px 0;
    }

    .service-items-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        gap: 24px;
    }

    .service-item-main-container {
        height: 200px;
        display: flex;
        align-items: flex-end;
    }

    .service-item-container {
        height: 140px;
        width: 260px;
        position: relative;
        display: flex;
        flex-direction: column;
        padding-left: 40px;
        padding-right: 40px;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transform: skewX(-18deg);
        border-radius: 0 0 32px 0;
        cursor: pointer;
    }

    .service-item-container::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -8;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .service-item-container:hover::after {
        opacity: 1;
    }

    .service-item-inner {
        transform: skewX(18deg);
    }

    .service-item-inner:has(.service-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 112px;
        width: 112px;
        position: absolute;
        left: 45%;
        top: 0;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .service-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .service-item-container:hover .service-item-icon img {
        transform: translateY(-10%);
    }

    .service-item-title {
        text-align: center;
        color: #fff;
    }

    .title-news {

        font-size: 20px;
        line-height: 1.25;
        font-weight: 600;
    }

    .tag-news-type {
        margin-top: 10px;
        margin-bottom: 20px;
    }



    .date-news {
        color: #999;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .featured-news-card {
        display: flex;
        align-items: stretch;
        gap: 24px;
    }

    .featured-news-text-align {
        flex: 1;
        padding-left: 0;
    }

    .other-news-text-align {
        flex: 1;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .other-news-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 500;
        font-style: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* ข่าว/ประกาศ — แพทเทิร์นเดียวกับ max-width 1585 (สเกล 331→431 ในช่วง 1024–1295) */
    .img-box-news {
        aspect-ratio: 1 / 1;
        width: 341px;
        height: 341px;
        flex: 0 0 341px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .img-box-news-main {
        width: 100%;
        height: 343px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .news-section-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .news-category-list {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .news-category-container {
        display: inline-flex;
        height: 40px;
        min-width: 100px;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: rgba(166, 166, 166, 0.10);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        white-space: nowrap;
        transition: none;
    }

    .news-category-container:hover {
        border: 1px solid var(--Primary, #007FC6);
        background: #D9F2FF;
    }

    .description-news {
        font-size: 16px;
        font-style: normal;
        line-height: 1.25;
        font-weight: 400;
        color: #464646;
        margin-top: 16px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        margin-top: 31px;
        text-align: left;
    }

    .select-search select:active,
    select:hover {
        outline: none;
    }

    .select-search select:after,
    select:hover {
        outline: none;
    }

    .text-title-app {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-content-app {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-sub-blue {
        color: #00B6F1 !important;
    }

    .app-box {
        margin-top: 25%;
    }

    .img-box-type-battery {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 533px;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .box-search-batt {
        margin-top: 139px;
        padding-left: 131px;
    }

    .title-search-batt {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
    }

    .text-content-batt {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
    }

    .text-name-hero {

        font-size: 38px;
        line-height: 33px;
        color: #fff;
        font-style: italic;
        font-weight: bolder;
        padding-left: 20px;
    }

    .text-sub-hero {

        font-size: 31px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        font-weight: 600;
    }

    .box-position-baner-hero {
        position: absolute;
        top: 14%;
        left: 15%;
    }

    .text-slo-grand {

        font-size: 17px;
        line-height: 18px;
        color: #fff;
        font-style: italic;
        font-weight: 500;
        width: 271px;
        text-align: center;
    }

    /* end homepage */
    /* product page */
    .img-product-pass-batt {
        background-position: center;
        background-repeat: no-repeat;
        height: 600px;
        width: 100%;
        background-size: cover;
    }

    .text-batt-type-one {

        font-style: italic;
        color: #C7EB02;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 41px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 20px;
        line-height: 32px;
    }

    .text-batt-type-two {

        font-style: italic;
        color: #FF9300;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 29px;
        line-height: 32px;
    }

    .text-batt-type-three {

        font-style: italic;
        color: #00B6F1;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 29px;
        line-height: 32px;
    }

    .position-type-product {
        position: absolute;
        top: 130px;
    }

    .position-type-product-right {
        position: absolute;
        top: 130px;
        right: 50px;
    }

    .box-bg-product {
        background-color: #F0F0F0;
        height: 582px;
        margin-top: 20px;
    }

    .img-product-batt {
        width: 100%;
        height: 290px;
    }

    .product-batt-name {

        font-style: italic;
        color: #000000;
        font-size: 32px;
        line-height: 55px;
        font-weight: 500;
    }

    .tag-batt-name {

        color: #005BAA;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        height: 124px;
        overflow: hidden;
    }

    .text-barnd {
        cursor: pointer;
    }

    .padding-box-pro-batt {
        padding: 27.35px;
    }

    .btn-circle {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        position: absolute;
        bottom: 239px;
        right: 29px;
    }

    .banner-box-pro-car-type {
        margin-top: 10px;
        height: 469px;
    }

    .img-product-batt-banner {
        width: 100%;
        height: 100%;
    }

    .MultiCarousel {
        float: left;
        overflow: hidden;
        padding: 15px;
        width: 100%;
        position: relative;
    }

    .MultiCarousel .MultiCarousel-inner {
        transition: 1s ease all;
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: center;
        padding: 10px;
        margin: 10px;
        background: #fff;
        color: #000;
    }

    .activeBrand {
        border-bottom: 4px solid #005BAA;
    }

    .MultiCarousel .leftLst,
    .MultiCarousel .rightLst {
        position: absolute;
        border-radius: 50%;
        top: calc(50% - 16px);
    }

    .MultiCarousel .leftLst {
        left: 0;
    }

    .MultiCarousel .rightLst {
        right: 0;
    }

    .MultiCarousel .leftLst.over,
    .MultiCarousel .rightLst.over {
        pointer-events: none;
        background: #ccc;
    }


    /* Homepage hero search tabs */
    .bg-search-batt__content .tabbable-panel {
        display: flex;
        max-width: 1313px;
        width: 90%;
        margin-left: auto;
        align-items: stretch;
        flex-direction: row;
        justify-content: flex-end;
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
        width: 100%;
        flex: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
        align-self: stretch;
    }

    .bg-search-batt__content .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .nav-tabs-container-item:last-child {
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
    }

    .bg-search-batt__content .nav-tabs-container-item.active {
        border-top: 1px solid #005BAA;
        border-left: 1px solid #005BAA;
        border-bottom: 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(28, 53, 74, 0.80) 100%);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .nav-tabs-container-item.active:last-child {
        border-right: 1px solid #005BAA;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:focus,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
    }

    .bg-search-batt__content .btn-wrapper-search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }

    /*End product page */
    .col-xs-12 {
        position: relative;
        min-height: 1px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .img-close-app {
        width: 21px;
        margin-top: 13px;
    }

    .breadcrumb {
        padding: 8px 10px;
    }

    .navbar-toggle {
        padding: 0px 0px;
        margin-right: 0px;
        margin-top: 8px;
    }

    /* about us page  */
    .abt-img {
        width: 100%;
        height: 359px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .text-abt {

        color: #646464;
        font-size: 24px;
        line-height: 55px;
        font-weight: 500;
    }

    .text-name-building {

        color: #000;
        font-size: 32px;
        line-height: 29px;
        font-weight: 500;
    }

    .breadcrumb>.active {
        font-weight: 600;
    }

    .line-abt {
        background-color: #005BAA;
        width: 4px;
        height: 661px;
        position: absolute;
        margin-left: 5px;
        margin-top: -11px;
    }

    .line-abt-2 {
        background-color: #005BAA;
        width: 4px;
        height: 560px;
        position: absolute;
        margin-left: 5px;
        margin-top: -11px;
    }

    /* .about_line {
            position: absolute; 
          
            height: 255px;
            width: 5px;
        } */
    .text-year-abt {

        color: #005BAA;
        font-size: 30px;
        line-height: 45px;
        font-weight: 500;
    }

    .text-h-abt {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
    }

    .text-h-abt-detail {

        color: #000000;
        font-size: 14px;
        line-height: 24px;
    }

    .mar-top-box-history {
        margin-top: 50px;
    }

    .padding-top-abt {
        margin-top: 26px;
    }

    .data-abt-h-text {

        color: #005BAA;
        font-size: 36px;
        line-height: 40px;
        text-align: center;
        font-weight: 500;
    }

    .padding-left {
        padding-left: 0px;
        padding-right: 0px;
    }

    .text-job-position {
        color: #FFFFFF;
        font-size: 16px;
        line-height: 30px;

    }

    .short-full {
        color: #fff;
        font-size: 14px;
        margin-top: 10px;
    }

    .sub-data-abt-h-text {

        color: #646464;
        font-size: 24px;
        line-height: 1.5;
        text-align: center;
        font-weight: 500;
    }

    .paddding-left-news {
        padding-left: 106px;
    }

    .margin-top-abt {
        margin-top: 60px;
    }

    .text-detail-abt-h {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
        text-align: justify;
        padding-right: 40px;
    }

    .text-h-abt-gs {

        color: #000000;
        font-size: 30px;
        line-height: 55px;
        margin-bottom: 20px;
    }

    /* end about us page  */
    /* find batt type page  */
    .position-type {
        position: absolute;
        top: 151px;
        left: 20px;
    }

    .text-batt-name {

        font-size: 30px;
        line-height: 55px;
        color: #00B6F1;
        font-style: italic;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .batt-type {

        font-size: 39px;
        line-height: 33px;
        color: #005BAA;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .detail-title {

        font-size: 34px;
        line-height: 18px;
        color: #fff;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .sub-batt-type {

        font-size: 17px;
        line-height: 34px;
        color: #fff;
        font-style: italic;
        margin-bottom: 20px;
    }

    /* end find batt type page  */
    /*  start Contact page  */
    .input-mar-padding {
        /* padding-top:30px; */
    }

    .text-contact-header {

        color: #000000;
        font-size: 22px;
        line-height: 43px;
        font-weight: 500;
        text-align: left;
        font-style: italic;
    }

    .text-contact-h-main {

        color: #005BAA;
        font-size: 35px;
        line-height: 40px;
        font-weight: 500;
        margin-top: 50px;
        font-style: italic;
    }

    .request-select {
        color: #F00 !important;
    }

    .margin-top-input {
        margin-top: 20px;
        padding-bottom: 43px;
    }

    /* End Contact page  */
    .bg-footer-mobile {
        width: 100%;
        height: 116px;
        position: absolute;
        bottom: 0px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .company-gradient-circle-left-2 {
        left: -35%;
        top: 456px;
    }

    .img-box-about-us-row,
    .img-box-about-us-row-2 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 1295px;
        margin: 0 auto;
        padding: 0 64px;
        box-sizing: border-box;
        transform: translateX(clamp(-36px, -2.78vw, 0px));
    }

    /* แถวที่ 1: รูปซ้าย max 641px + กล่องข้อความขวา */
    .img-box-about-us-row>div:first-child {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        width: 100%;
        max-width: 641px;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
    }

    .img-box-about-us-row>div:last-child {
        position: relative;
        z-index: 2;
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* แถวที่ 2: กล่องข้อความซ้าย ~51% + รูปขวา ~49% */
    .img-box-about-us-row-2>div:first-child {
        position: relative;
        z-index: 2;
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .img-box-about-us-row-2>div:last-child {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        width: 100%;
        max-width: 595px;
        min-width: 0;
        display: flex;
        justify-content: flex-start;
    }

    .img-box-about-us-container {
        height: 431px;
        width: 95%;
        position: relative;
        overflow: hidden;
        transform: skewX(-10deg);
        border-radius: 0 0 48px 0;
        background-color: #f1f1f1;
    }

    .img-box-about-us-container-right {
        height: 431px;
        width: 95%;
        margin-top: 42px;
        position: relative;
        overflow: hidden;
        transform: skewX(-10deg);
        border-radius: 0 0 48px 0;
        background-color: #f1f1f1;
    }

    .img-box-about-us {
        position: absolute;
        top: 0;
        left: -12%;
        width: 125%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .about-us-column-description-container-right {
        position: relative;
        overflow: visible;
        display: flex;
        width: 110%;
        margin-left: -2px;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .about-us-column-description-container-left {
        position: relative;
        z-index: 1;
        display: flex;
        width: 110%;
        margin-right: -24px;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    /* Landing page */
    .img-box-about-us-row,
    .img-box-about-us-row-2 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 1295px;
        margin: 0 auto;
        padding: 0 64px;
        box-sizing: border-box;
        transform: translateX(clamp(-36px, -2.78vw, 0px));
    }

    /* แถวที่ 1: รูปซ้าย max 641px + กล่องข้อความขวา */
    .img-box-about-us-row>div:first-child {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        width: 100%;
        max-width: 641px;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
    }

    .img-box-about-us-row>div:last-child {
        position: relative;
        z-index: 2;
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* แถวที่ 2: กล่องข้อความซ้าย ~51% + รูปขวา ~49% */
    .img-box-about-us-row-2>div:first-child {
        position: relative;
        z-index: 2;
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .img-box-about-us-row-2>div:last-child {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        width: 100%;
        max-width: 595px;
        min-width: 0;
        display: flex;
        justify-content: flex-start;
    }

    .img-box-about-us-container {
        height: 431px;
        width: 95%;
        position: relative;
        overflow: hidden;
        transform: skewX(-10deg);
        border-radius: 0 0 48px 0;
        background-color: #f1f1f1;
    }

    .img-box-about-us-container-right {
        height: 431px;
        width: 95%;
        margin-top: 42px;
        position: relative;
        overflow: hidden;
        transform: skewX(-10deg);
        border-radius: 0 0 48px 0;
        background-color: #f1f1f1;
    }

    .img-box-about-us {
        position: absolute;
        top: 0;
        left: -12%;
        width: 125%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .about-us-column-description-container-right {
        position: relative;
        overflow: visible;
        display: flex;
        width: 110%;
        margin-left: -2px;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .about-us-column-description-container-left {
        position: relative;
        z-index: 1;
        display: flex;
        width: 110%;
        margin-right: -24px;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }


    /* Landing page */

}


/* Homepage service items: แคบกว่า 950 */
@media (max-width: 1023px) {
    .invisible-slide-baner {
        display: none !important;
    }

    .visible-tablet-slide-baner {
        display: block !important;
    }

    .warranty-invisible-mobile {
        display: block !important;
    }

    .warranty-visible-mobile {
        display: none !important;
    }

    .product-list-layout {
        overflow: visible;
    }

    .sub-banner-row {
        margin-left: 16px;
        margin-right: 16px;
    }

    .w-100-h-auto {
        width: 100%;
        padding-top: 100px;
        min-height: 280px;
    }

    .global-btn-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 12px;
        position: fixed;
        top: auto;
        left: auto;
        right: 20px;
        bottom: 20px;
        z-index: 999;
        pointer-events: none;
    }

    .readall-new {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .readall-new__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 48px;
        width: auto;
        padding: 0 24px;
        border: 1px solid transparent;
        border-radius: 0 0 16px 0;
        background: transparent;
        color: inherit;
        text-decoration: none;
        transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    .readall-new__btn:hover {
        background: #FFF;
        border-color: var(--Primary, #007FC6);
        color: #007FC6 !important;
    }

    .readall-new__btn-icon {
        width: 24px;
        height: 24px;
    }

    .readall-new__btn:hover .icon-swap__default {
        opacity: 0;
    }

    .readall-new__btn:hover .icon-swap__hover {
        opacity: 1;
    }


    /* Tablet compare banner: layout แยก wrapper */
    .visible-tablet-slide-baner .compare-product-product-selected-banner {
        height: auto;
        min-height: 100px;
        padding: 16px;
        align-items: stretch;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-banner.is-visible:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-open,
    .visible-tablet-slide-baner .compare-product-product-selected-banner.is-visible.has-no-mapping .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        height: auto;
        padding-bottom: 0;
        gap: 0;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-item-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-item-header-text-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-item-header-text-main-wrapper {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        flex: 1 1 0;
        min-width: 0;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-header-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-open-title.is-open {
        margin-right: 0;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-no-mapping-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        flex: 1 1 0;
        min-width: 0;
    }

    .visible-tablet-slide-baner .compare-clear-btn {
        flex-shrink: 0;
    }

    .visible-tablet-slide-baner .js-compare-selected-items-stage {
        display: none;
        width: 100%;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .js-compare-selected-items-stage {
        display: block;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-item-blue-container-wrapper {
        width: 100%;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-item-blue-container {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        gap: 8px;
        padding: 8px 10px;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-btn-wrapper--tablet-full {
        display: flex;
        width: 100%;
        margin-left: 0;
    }

    .visible-tablet-slide-baner .compare-product-product-selected-btn-wrapper--tablet-full>.btn-view-more-2 {
        width: 100%;
        justify-content: center;
    }

    .space-large-tablet {
        height: 120px;
    }

    .space-large-tablet-2 {
        height: 98px;
    }

    .btn-search-gradient {
        display: flex;
        width: 100%;
        height: 40px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: none;
        background: #007FC6;
        color: #fff;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
    }

    .news-column-container {
        display: flex;
        max-height: none;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        align-items: flex-start;
        flex-shrink: 0;
        border-radius: 0 0 16px 0;
        border: 1px solid #D8D8D8;
        background: #FFF;
        margin-bottom: 16px;
        cursor: pointer;
        overflow: hidden;
    }

    .news-column-content {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
        min-width: 0;
    }

    .news-column-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        align-self: stretch;
    }

    .new-column-text-align {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .product-hero-tablet {
        position: relative;
    }

    .product-hero-tablet .product-header-background .compare-product-btn {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 16px;
        margin-right: 16px;
        z-index: 3;
    }

    .product-header-background {
        height: auto;
        padding: 16px;
        background: #E9E9E9;
    }

    .bg-pro-detail {
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        /* หรือ 32px — ระยะขอบใน */
        box-sizing: border-box;
    }

    .product-header-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        z-index: 2;
    }

    .product-banner-nav {
        display: flex;
        align-items: center;
        align-content: center;
        gap: 4px;
        align-self: stretch;
        flex-wrap: wrap;
    }

    .product-banner-header-margin {
        margin-top: 48px;
        margin-left: 64px;
    }

    .product-banner-text-h1 {
        font-size: 54px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .product-detail-two-col {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
    }

    .product-detail-two-col__left {
        display: flex;
        align-items: center;
        flex-direction: row;
        align-self: stretch;
        gap: 0px;
        width: 55%;
        min-width: 0;
    }

    .product-detail-two-col__right {
        display: flex;
        align-items: center;
        align-self: stretch;
        border-left: 1px solid #F5F5F5;
        flex: 1;
        min-width: 0;
        padding-left: 24px;
    }

    .product-detail-two-col__left-text {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
    }

    .product-detail-two-col:nth-child(even) {
        background-color: #F5F5F5;
    }

    /* หรือเฉพาะซ้าย */
    .product-detail-two-col:nth-child(even) .product-detail-two-col__left {
        background-color: #F5F5F5;
    }

    .product-info-seperator {
        height: 1px;
        background: #D2D2DD;
    }

    .product-detail-hero {
        position: relative;
    }

    .product-detail-main {
        padding-bottom: 24px;
    }

    .product-car-filter-layout {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .product-car-filter-container {
        cursor: pointer;
    }

    .product-car-filter-container {
        display: flex;
        height: 48px;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        background: var(--BG-Light, #EBF8FF);
        backdrop-filter: blur(12px);
    }

    .product-car-filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .related-product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .bg-search-batt {
        position: relative;
        overflow: hidden;
        z-index: 20;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 920px;
        margin-top: -128px;
        padding-top: 128px;
        box-sizing: border-box;
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 30px),
                0 100%);
    }

    .bg-search-batt__vector {
        position: absolute;
        right: 0;
        bottom: 0;
        width: clamp(300px, 55vw, 640px);
        /* ปรับตาม design */
        height: auto;
        max-height: 85%;
        object-fit: contain;
        object-position: right bottom;
        z-index: 4;
        pointer-events: none;
    }

    .bg-search-batt__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 4;
        pointer-events: none;
        display: block;
    }

    .bg-search-batt__filter {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(0, 136, 170);
        mix-blend-mode: hue;
    }

    .bg-search-batt__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 1313px;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .bg-search-batt__content .box-search h1,
    .bg-search-batt__content .sub-title-search {
        position: relative;
        z-index: 2;
    }

    .sub-title-search {

        font-size: 24px;
        line-height: 1.25;
        color: #fff;
        text-align: center;
        margin-bottom: 32px;
    }

    .box-search {
        margin-top: 64px;
        margin-inline: auto;
        box-sizing: border-box;
        text-align: center;
    }

    .wd-input-box-search {
        height: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 25px 15px;
        border-radius: 0 0 40px 0;
        border: none;
        background: transparent;
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        isolation: isolate;
    }

    .wd-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(90deg, #00B6F1 0%, #0B3149 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 0 0 40px 0;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(11, 49, 73, 0.80) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .wd-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .wd-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-wrapper {
        display: flex;
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        align-self: stretch;
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .wd-input-box-search-main-wrapper-half {
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper-half>.wd-input-box-search-main-wrapper {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
    }

    .wd-input-box-search-main-wrapper .select-search-car,
    .wd-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .wd-input-box-search-main-wrapper .select-search-car select,
    .wd-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .wd-input-box-search-main-wrapper.filter-select-sub-group {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        position: relative;
    }

    .wd-input-box-search-main-wrapper-half>.wd-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        max-width: none;
    }

    .wd-input-box-search .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    .wd-input-box-search .wd-input-box-search-wrapper {
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    .wd-input-box-search .btn-wrapper-search {
        position: relative;
        z-index: 1;
    }

    .wd-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        cursor: pointer;
        box-sizing: border-box;
    }

    .wd-input-box-search .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    .wd-filter-select-sub-panel__list,
    .wd-filter-select-brand-panel__list {
        flex: 1;
        min-height: 0;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: #00B6F1 #F5F5F5;
    }


    .select-search-model select,
    .select-search-car select {
        display: flex;
        appearance: none;
        width: 100%;
        height: 48px;
        padding: 14px 16px;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        background-image: url('../icon/chevron_down.svg');
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 24px 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 125%;
        box-sizing: border-box;
    }

    .bg-search-batt__content .tabbable-panel {
        display: flex;
        max-width: 1313px;
        width: 100%;
        min-width: 0;
        margin-left: auto;
        align-items: stretch;
        flex-direction: row;
        justify-content: flex-end;
        position: relative;
        margin-bottom: 4px;
        z-index: 2;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
        gap: 4px;
        width: 100%;
        min-width: 0;
        flex: 1;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
        align-self: stretch;
    }

    .bg-search-batt__content .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        min-width: 0;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.70);
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }


    .bg-search-batt__content .nav-tabs-container-item.active {
        border-top: 1px solid #005BAA;
        border-left: 1px solid #005BAA;
        border-right: 1px solid #005BAA;
        border-bottom: 1px solid #005BAA;
        background: linear-gradient(180deg, rgba(20, 40, 64, 0.80) 0%, rgba(28, 53, 74, 0.80) 100%);
        backdrop-filter: blur(12px);
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:focus,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
    }

    .bg-search-batt__content .btn-wrapper-search {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        width: 100%;
        gap: 16px;
    }

    .wd-modal-window-overlay-tablet-mobile:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        z-index: 10002;
    }

    .wd-modal-window-overlay-tablet-mobile.is-open {
        opacity: 1;
    }

    .wd-modal-window-tablet-mobile:not([hidden]) {
        display: flex;
        position: fixed;
        margin-top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        max-height: 100vh;
        background: #fff;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
        flex-direction: column;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        z-index: 10003;
    }

    .wd-modal-window-tablet-mobile.is-open {
        opacity: 1;
        visibility: visible;
    }

    .wd-modal-window-tablet-mobile-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #00B6F1 #F5F5F5;
    }

    .wd-modal-window-tablet-mobile-header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        /* title อยู่กลาง */
        flex-shrink: 0;
        padding: 20px 20px;
        border-bottom: 1px solid #EEE;
        background: #007FC6;
        color: white;
        opacity: 1;
    }

    .wd-modal-window-tablet-mobile-close {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
    }


    .wd-modal-window-tablet-mobile-close img {
        width: 24px;
        height: 24px;
    }

    .wd-modal-window-tablet-mobile-body::-webkit-scrollbar {
        width: 8px;
    }

    .wd-modal-window-tablet-mobile-body::-webkit-scrollbar-track {
        background: #F5F5F5;
        border-radius: 999px;
    }

    .wd-modal-window-tablet-mobile-body::-webkit-scrollbar-thumb {
        background: #007FC6;
        border-radius: 999px;
    }

    .wd-modal-window-tablet-mobile-list {
        max-height: none;
        height: auto;
        min-height: 100%;
        padding: 0px 15px;
        overflow: visible;
    }

    .wd-modal-window-tablet-mobile-search-wrapper {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        padding: 16px;
        box-sizing: border-box;
    }

    .wd-modal-window-tablet-mobile-search-wrapper[hidden] {
        display: none !important;
    }

    .wd-modal-window-tablet-mobile-search {
        display: flex;
        height: 48px;
        padding: 14px 16px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        border-radius: 4px;
        background: #D2EFFF;
        top: 0;
        z-index: 2;
        box-sizing: border-box;
    }

    .wd-modal-window-tablet-mobile-search-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .wd-modal-window-tablet-mobile-search-input {
        flex: 1 1 auto;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        color: #282828;
        font-size: 16px;
    }

    .wd-modal-window-tablet-mobile-search-input::placeholder {
        color: #A6A6A6;
    }

    .wd-modal-window-tablet-mobile-list .filter-select-sub-item.is-filtered-out {
        display: none !important;
    }

    .wd-modal-window-tablet-mobile-list-empty {
        display: none;
        padding: 16px;
        text-align: center;
        color: #A6A6A6;
    }

    .wd-modal-window-tablet-mobile-list-empty.is-visible {
        display: block;
    }

    .wd-icon-wrapper-batt {
        flex: 0 0 auto;
        align-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        max-height: 36px;
        width: auto;
        aspect-ratio: 11 / 9;
    }

    .wd-icon-wrapper-batt img,
    .wd-icon-wrapper-batt svg {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .service-items-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-right: 0;
    }

    .service-item-main-container {
        margin-inline: auto;
        width: 100%;
        max-width: min(342px, calc(100% - 72px));
        /* 72 = 36+36 เหมือน 64 ของ box-search */
        min-width: min(342px, 100%);
        /* ค้างที่ 342 เหมือน 347 ของ box-search */
        box-sizing: border-box;
        height: auto;
        align-items: stretch;
    }

    .service-item-container {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        /* เหมือน wd-input-box-search */
        box-sizing: border-box;
        height: auto;
        min-height: 90px;
        padding: 18px 24px 18px 12px;
        box-sizing: border-box;
    }

    .service-item-inner:has(.service-item-icon) {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .service-item-inner:has(.service-item-title) {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .service-item-icon {
        position: relative;
        left: -50%;
        top: 0;
        transform: none;
        margin-right: 202px;
        width: 90px;
        height: 90px;
        flex-shrink: 0;
        margin: 0;
    }

    .service-item-container:hover .service-item-icon img {
        transform: translateY(-10%);
    }


    .service-item-title h3 {
        font-size: 18px;
    }

    .sub-banner-container {
        display: grid;
        position: relative;
        height: auto;
        overflow: hidden;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .sub-banner-container>img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        z-index: 0;
    }

    .sub-banner-content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 48px;
        z-index: 1;
    }

    .sub-banner-align {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .sub-banner-box {
        display: flex;
        height: auto;
        /* เอา height: 100% ออก */
        min-height: clamp(96px, 22vw, 136px);
        width: 100%;
        min-height: 136px;
        padding: 8px 24px;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 8px;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        border: 0.5px solid rgba(255, 255, 255, 0.70);
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }


    .news-column-wrapper-mobile {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
        gap: 24px;
        margin-bottom: 48px;
    }

    .home-news-section-clip {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        overflow-y: visible;
        isolation: isolate;
    }

    .visible-tablet-slide-baner {
        position: relative;
        max-width: 100%;
    }

    .visible-tablet-slide-baner .container {
        overflow-x: clip;
        overflow-y: visible;
        max-width: 100%;
    }

    .news-column-wrapper-mobile>.row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .other-news-carousel-bleed {
        /* แท็บเล็ตโชว์ 3 การ์ดเต็ม — ไม่วิ่ง bleed / ไม่ crop ขอบซ้ายขวา */
        margin-left: 0;
        margin-right: 0;
        overflow-x: visible;
    }

    .other-news-carousel-wrapper {
        width: 100%;
        max-width: none;
        position: relative;
        box-sizing: border-box;
    }


    .other-news-carousel-wrapper .owl-item {
        padding: 0;
        box-sizing: border-box;
    }

    .other-news-carousel-wrapper .news-column-container {
        margin-bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .other-news-carousel-wrapper .owl-prev,
    .other-news-carousel-wrapper .owl-next {
        display: none;
    }

    .other-news-indicators {
        display: none;
        position: static;
        margin: 15px auto 0;
        padding-left: 0;
        width: auto;
        list-style: none;
        text-align: center;
    }

    .other-news-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    .other-news-indicators .active {
        width: 52px;
        height: 8px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .other-news-carousel-wrapper .owl-stage-outer {
        margin-left: 0;
        overflow: visible;
    }

    @media (max-width: 767px) {
        .other-news-indicators {
            display: block;
        }

        .other-news-carousel-bleed {
            margin-right: calc(50% - 50vw);
            margin-left: calc(50% - 50vw);
            overflow-x: clip;
            overflow-y: visible;
        }

        .other-news-carousel-wrapper .owl-item {
            padding: 0 4px;
        }

        .other-news-carousel-wrapper .owl-stage-outer {
            margin-left: -6%;
            /* ดึงไปซ้าย ชดเชย peek ซ้าย (มือถือ) */
            overflow: hidden;
        }
    }

    .blue-small-banner {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 140px;
        padding: 24px 16px;
        background: #007FC6;
        z-index: 0;
    }

    .blue-small-banner__vector {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 70%;
        height: 100%;
        margin: 0;
        opacity: 0.2;
        object-fit: cover;
        object-position: right bottom;
        z-index: 0;
        pointer-events: none;
    }

    .blue-small-banner__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex: 0 1 auto;
        z-index: 1;
    }

    .blue-small-banner-nav {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .blue-small-banner img {
        width: 590px;
        height: 178px;
        opacity: 0.2;
        object-fit: cover;
        object-position: center bottom;
    }

    .search-result-content {
        margin-left: auto;
        margin-right: auto;
        height: 100%;
        position: relative;
        z-index: 1;
    }

    .search-result-container {
        display: flex;
        padding: 12px 16px;
        align-items: center;
        gap: 10px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: 4px;
        border: 1px solid #007FC6;
        background: #FFF;
    }

    .search-result-container__query {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-result-query-filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .search-result-query-filter-wrapper-item {
        display: flex;
        align-items: center;
    }

    .search-result-filter-container {
        display: flex;
        padding: 8px 8px 8px 16px;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
    }

    .search-result-card {
        display: flex;
        padding: 24px;
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 24px;
        align-self: stretch;
        border-radius: 8px;
        border: 1px solid #D8D8D8;
        background: #FFF;
    }

    .search-result-card-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
    }

    .search-result-card-image {
        position: relative;
        display: flex;
        align-self: center;
        flex-shrink: 0;
    }

    .search-result-card-image .search-result-card-image-img {
        aspect-ratio: 1/1;
        width: clamp(295px, calc(295px - (1295px - 100vw) * 0.85), 500px);
        height: clamp(295px, calc(295px - (1295px - 100vw) * 0.85), 500px);
        object-fit: cover;
    }

    .search-result-batt-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        flex: 1 0 0;
    }

    .search-result-battery-wrapper {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16px;
        align-self: stretch;
    }

    .search-result-contact-btn-group {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .search-batt-category-btn {
        background-color: #fff;
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 0;
        color: #80A700;
        border: 1px solid #80A700;
    }

    .search-result-batt-spec-wrapper {
        display: flex;
        align-items: flex-start;
    }

    .search-result-batt-spec-wrapper-item {
        display: flex;
        min-width: 80px;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid #D8D8D8;
        padding: 0 8px;
        gap: 8px;
    }

    .search-result-batt-spec-wrapper-item:first-child {
        padding-left: 0;
    }

    .search-result-batt-spec-wrapper-item:last-child {
        border-right: none;
    }

    .search-result-card-badge {
        position: absolute;
        top: 0;
        right: 0;
        width: clamp(100px,
                calc(128px - (1295px - 100vw) * 0.3),
                128px);
        height: clamp(100px,
                calc(128px - (1295px - 100vw) * 0.3),
                128px);
        pointer-events: none;
        z-index: 2;
    }


    .search-result-contact-btn {
        background-color: #fff;
        display: flex;
        font-size: clamp(10px, calc(12px - (1023px - 100vw) * 0.022), 10px);
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }

    .search-result-contact-btn-icon {
        width: clamp(14px,
                calc(20px - (1023px - 100vw) * 0.022),
                32px);
        height: clamp(14px,
                calc(20px - (1023px - 100vw) * 0.022),
                32px);
        flex-shrink: 0;
    }


    .search-btn-tag-activities {
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        background-color: white;
        border: 1px solid #007FC6;
        color: #007FC6;
        font-size: 14px;
    }


    .box-bg-product {
        background-color: #fff;
        height: auto;
        border-radius: 0 0 24px 0;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        overflow: hidden;
    }

    .img-product-batt-wrap {
        width: 100%;
        aspect-ratio: 3 / 2;
        min-height: 201px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E9E9E9;
        overflow: hidden;
        position: relative;
    }

    .img-product-batt {
        width: 72%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform .3s ease;
        transform-origin: center center;
    }

    .box-bg-product:hover .img-product-batt {
        transform: scale(1.12);
    }

    .product-batt-name {

        color: #000000;
        text-align: left;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 700;
    }

    .type-batt-name {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
    }

    .batt-info-seperator {
        height: 1px;
        opacity: 0.5;
        background: #D2D2DD;
    }

    .batt-spec-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-spec-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-terminal-container {
        display: inline-flex;
        width: auto;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid #D2D2D2;
        background: #EBF8FF;
        margin-bottom: 8px;
    }

    .product-pass-hero {
        position: relative;
        z-index: 16;
        margin-top: -124px;
        isolation: isolate;
    }

    .product-pass-hero img {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        z-index: 0;
    }

    .product-list-layout {
        display: block;
        width: 100%;
        background: #fff;
    }

    .product-filter-hamburger {
        display: block;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
        background: var(--BG-Light, #EBF8FF);
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(0, 127, 198, 0.08);
    }

    .product-filter-search-hamburger {
        display: flex;
        height: 40px;
        padding: 16px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-width: 293px;
        border-radius: 0 0 16px 0;
        color: rgba(40, 40, 40, 0.5);
        background: #FFF;
    }

    .product-filter-hamburger-placeholder {
        width: 100%;
        flex-shrink: 0;
    }

    .product-filter-hamburger.is-fixed {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 55;
    }

    .product-filter-hamburger.is-compact {
        padding-top: 20px;
        padding-bottom: 12px;
    }

    .product-filter-hamburger.is-fixed.is-compact .product-filter-tablet-mobile-category-container-label {
        max-height: 0;
        min-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .product-filter-sub-hamburger {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        cursor: pointer;
    }

    .product-filter-tablet-mobile-category-wrapper {
        display: flex;
        align-items: stretch;
        gap: 8px;
        flex: 1 0 0;
        width: 100%;
    }

    .product-filter-tablet-mobile-category-container {
        display: flex;
        padding: 8px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        flex: 1 1 0;
        min-width: 0;
        align-self: stretch;
        box-sizing: border-box;
        border-radius: 8px 8px 16px 8px;
        background: rgba(255, 255, 255, 0.30);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        cursor: pointer;
    }

    .product-filter-tablet-mobile-category-container-label {
        display: block;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: 2.5em;
        text-align: center;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        line-height: 1.3;
    }

    .product-filter-tablet-mobile-category-container-icon {
        display: flex;
        width: 61.148px;
        height: 26.418px;
        flex: 0 0 auto;
        justify-content: center;
        align-items: center;
        aspect-ratio: 61.15/26.42;
    }

    .product-filter-tablet-mobile-category-container-icon img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .product-filter-tablet-mobile-category-container.is-active {
        background: linear-gradient(180deg, #0090E0 0%, #007FC6 100%);
    }

    .product-filter-tablet-mobile-category-container.is-active .product-filter-tablet-mobile-category-container-label {
        color: #fff;
    }


    .product-filter-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 10000;
    }

    .product-filter-drawer-overlay.is-open {
        display: block;
    }

    .product-filter-drawer {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 98vh;
        max-height: 98vh;
        display: flex;
        flex-direction: column;
        background: #fff;
        z-index: 10001;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        visibility: hidden;
    }

    .product-filter-drawer.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    .product-filter-drawer-header {
        display: flex;
        flex-shrink: 0;
        padding: 16px;
        align-items: center;
        justify-content: space-between;
        background: var(--BG-Light, #EBF8FF);
    }

    .product-filter-drawer-header-title {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .product-filter-drawer-close {
        display: flex;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    .product-filter-drawer-close img {
        width: 24px;
        height: 24px;
    }

    .product-filter-drawer-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        background: #fff;
    }

    .product-filter-drawer-content {
        align-items: stretch;
        width: 100%;
    }

    .product-filter-drawer-search-title {
        align-self: flex-start;
        margin: 0;
        font-weight: 700;
        color: #282828;
    }

    .product-filter-search-input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        color: #282828;
    }

    .product-filter-search-input::placeholder {
        color: rgba(40, 40, 40, 0.5);
    }

    .product-filter-search-input--display {
        display: flex;
        align-items: center;
    }

    .product-filter-search-placeholder {
        color: rgba(40, 40, 40, 0.5);
    }

    .product-filter-drawer .product-filter-search,
    .product-filter-drawer .product-filter-box {
        min-width: 0;
    }

    .product-filter-drawer-footer .btn-search-gradient img {
        filter: brightness(0) invert(1);
    }

    .product-filter-column {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        min-height: 100%;
        width: 30%;
        padding-top: 66px;
        flex-shrink: 0;
        background: #EBF8FF;
    }

    .product-filter-header-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: flex-start;
    }

    .product-filter-content {
        display: flex;
        flex-direction: column;
        padding: 16px 28px;
        align-items: stretch;
        gap: 16px;
    }

    .product-filter-search {
        display: flex;
        height: auto;
        width: 100%;
        padding: 16px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 310px;
        border-radius: 0 0 16px 0;
        color: rgba(40, 40, 40, 0.5);
        background: #FFF;
    }

    .product-filter-box {
        display: flex;
        min-width: 310px;
        width: 100%;
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.30);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
    }

    .product-filter-box-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
    }

    .product-list-container {
        display: flex;
        width: 100%;
        padding: 25px 24px 80px 24px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 48px;
    }

    .product-filter-box-selector {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 16px;
        width: 100%;
        min-width: 0;
        align-self: stretch;
        box-sizing: border-box;
    }

    .product-filter-box-selector .product-filter-box-text {
        min-width: 0;
        width: 100%;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .product-filter-box-selector .btn-search-gradient-2 {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .product-filter-box-text {
        display: flex;
        min-width: 154px;
        color: #a6a6a6;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .product-expanded-vehicle-filter-box .product-filter-box-body,
    .product-expanded-battery-filter-box .product-filter-box-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .product-filter-sub-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .product-filter-batt-type {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .product-filter-batt-type-container {
        display: flex;
        padding: 13px 8px;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        background-color: white;
        border-radius: 0 0 16px 0;
        width: 100%;
        height: auto;
    }

    .product-filter-batt-type-icon {
        width: 72.522px;
        height: 31.469px;
        flex-shrink: 0;
    }

    .product-filter-batt-name {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: 8px;
    }


    .product-filter-batt-type-img {
        flex: 0 0 auto;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-batt-genre-wrapper {
        display: flex;
        align-items: center;
        align-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        flex-wrap: wrap;
    }

    .product-batt-genre-container {
        display: flex;
        max-width: 100%;
        min-width: 0;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        background: #FFF;
        gap: 8px;
    }

    .product-batt-genre-container .body1 {
        min-width: 0;
        word-break: break-word;
    }

    .product-filter-batt-type-container,
    .product-batt-genre-container {
        cursor: pointer;
    }

    .product-filter-batt-type-container.is-active {
        background: linear-gradient(180deg, #0090E0 0%, #007FC6 100%);
        color: white;
    }

    .product-filter-batt-type-container.is-active .product-filter-batt-type-img {
        filter: brightness(0) invert(1);
    }

    .product-batt-genre-container.is-active {
        background: var(--Primary, #007FC6);
        color: white;
    }

    .product-filter-select {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 16px;
    }

    .product-filter-select select {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;

        font-size: 16px;
        line-height: 24px;
        color: #282828;
        cursor: pointer;
        padding-right: 8px;
    }

    .product-filter-select img {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        pointer-events: none;
    }

    .product-filter-select--stacked {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filter-select-car__trigger {
        display: flex;
        flex: 1;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .filter-select-car {
        position: static;
        width: 100%;
        /* ชิดใต้กล่องขาว */
        left: 0;
        right: 0;
        z-index: 20;
        margin-top: 4px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        border-radius: 4px;
        background: #FFF;
        box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.14);

    }

    .filter-select-car-item-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 24px;
        align-self: stretch;
    }

    .filter-select-car-item-image img {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 1px 0 5px 0;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
    }

    .filter-select-car-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .filter-select-car {
        margin-top: 8px;
        /* หรือ 0 ถ้าอยากติดกับกล่องบน */
    }

    .filter-select-sub__trigger,
    .filter-select-brand__trigger {
        display: flex;
        flex: 1;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .filter-select-sub-group,
    .filter-select-brand-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .filter-select-sub-panel,
    .filter-select-brand-panel {
        width: 100%;
        margin-top: 8px;
        border-radius: 0 0 4px 4px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
        display: flex;
        flex-direction: column;
        max-height: 320px;
    }

    .filter-select-sub-panel__header,
    .filter-select-sub-panel__footer,
    .filter-select-brand-panel__header,
    .filter-select-brand-panel__footer {
        flex-shrink: 0;
        padding: 8px 16px;
        background: #F8F8F8;
        color: var(--Primary, #007FC6);
    }

    .filter-select-sub-panel__list,
    .filter-select-brand-panel__list {
        flex: 1;
        min-height: 0;
        border-radius: 0 0 4px 4px;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: #00B6F1 #F5F5F5;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar,
    .filter-select-brand-panel__list::-webkit-scrollbar {
        width: 8px;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar-track,
    .filter-select-brand-panel__list::-webkit-scrollbar-track {
        background: #F5F5F5;
        border-radius: 999px;
    }

    .filter-select-sub-panel__list::-webkit-scrollbar-thumb,
    .filter-select-brand-panel__list::-webkit-scrollbar-thumb {
        background: #007FC6;
        border-radius: 999px;
    }

    .filter-select-sub-item,
    .filter-select-brand-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        width: 100%;
        border: 0;
        background: transparent;
        border-bottom: 0.5px solid var(--Grey, #9E9E9E);
        text-align: left;
        padding: 14px 16px;
        cursor: pointer;
    }

    .filter-select-sub-item:has(+ .filter-select-brand-panel__footer),
    .filter-select-brand-item:has(+ .filter-select-brand-panel__footer) {
        border-bottom: none;
    }

    .filter-select-sub-item:hover,
    .filter-select-sub-item.is-active,
    .filter-select-brand-item:hover,
    .filter-select-brand-item.is-active {
        background: #F1F1F1;
    }

    .mobile-brand-text {
        color: var(--Primary, #007FC6);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }


    .product-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 3 คอลัมน์ */
        gap: 24px;
    }

    .product-grid-item {
        position: relative;
        display: block;
    }

    .product-filter-2-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .product-filter-2-sub-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .product-filter-2-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .compare-product-btn-2 {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 8px 6px 7px 6px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 4px;
        background: var(--White, #FFF);
    }

    .compare-product-btn-2.is-not-selected {
        display: none;
    }

    .compare-product-btn-2 img {
        display: none;
    }

    .compare-product-btn-2.is-check img {
        display: block;
    }

    .compare-product-btn-2.is-check {
        display: flex;
        width: 24px;
        height: 24px;
        padding: 8px 6px 7px 6px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        border-radius: 4px;
        border: 1px solid var(--Primary, #007FC6);
        background: var(--Primary, #007FC6);
    }

    .product-grid-item .compare-product-btn-2 {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
        cursor: pointer;
    }

    body.product-list-compare-active .compare-product-btn-2.is-not-selected {
        display: flex;
    }

    .pagination-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }

    .pagination-prev-button {
        display: flex;
        width: 52px;
        height: 52px;
        padding: 24px 16px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        aspect-ratio: 1/1;
        border-radius: 0 0 0 16px;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-next-button {
        display: flex;
        width: 52px;
        height: 52px;
        padding: 24px 16px;
        justify-content: center;
        align-items: center;
        gap: 24px;
        aspect-ratio: 1/1;
        border-radius: 0 0 16px 0;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-number-button-wrapper {
        display: flex;
        align-items: center;
        gap: 0px;
    }

    .pagination-number-button {
        width: 52px;
        height: 52px;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #9E9E9E;
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--White, #FFF);
    }

    .pagination-number-button-wrapper .pagination-number-button:not(:last-child) {
        margin-right: 8px;
    }

    .pagination-number-button.is-active {
        border: 1px solid rgba(0, 0, 0, 0.20);
        background: var(--Primary, #007FC6);
        color: #fff;
    }

    .compare-product-main-wrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0px;
    }

    .compare-product-sub-wrapper {
        width: 100%;
        min-width: 513px;
        display: flex;
        flex-direction: row;
        gap: 0;
        min-width: 0;
    }

    .compare-product-header-wrapper {
        display: flex;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .compare-product-header-sub-wrapper {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
    }

    .compare-product-box-wrapper {
        padding: 27px 30px;
        width: 80%;
        min-width: 171px;
        min-height: 244px;
        position: relative;
        overflow: hidden;
        background: #F8F8F8;
        z-index: 0;
    }

    .compare-product-btn-close {
        width: 24px;
        height: 24px;
        aspect-ratio: 1 / 1;
    }


    .compare-product-box-content .compare-product-btn-close {
        position: absolute;
        top: 27px;
        right: 30px;
        z-index: 3;
        cursor: pointer;
    }


    .compare-product-gradient-background {
        position: absolute;
        width: 814px;
        height: 814px;
        aspect-ratio: 1/1;
        border-radius: 814px;
        background: radial-gradient(46.98% 46.98% at 51.68% 53.05%, rgba(230, 248, 254, 0.50) 0%, rgba(181, 234, 252, 0.00) 87.5%);
        top: 80%;
        transform: translate(-50%, -50%);
        z-index: -1;
        pointer-events: none;
    }

    .compare-product-img-container {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        background: #E9E9E9;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        overflow: hidden;
    }

    .compare-product-img-container-have-img>img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        /* ถ้าอยากเต็มกรอบแบบ crop ใช้ cover */
        display: block;
    }

    .compare-product-add-image-text {
        color: var(--Primary, #007FC6);
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .compare-product-table-header {
        width: 100%;
        min-width: 513px;
        height: auto;
        padding: 10px 32px;
        display: flex;
        align-items: center;
        background: var(--BG-Light, #EBF8FF);
    }

    .compare-product-table-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .compare-product-two-col {
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        width: 100%;
    }

    .compare-product-two-col-left {
        display: flex;
        align-items: center;
        flex-direction: row;
        align-self: stretch;
        gap: 0px;
        width: 25%;
        min-width: 0;
        padding: 8px;
    }

    .compare-product-two-col-right-prodcut-spec {
        width: 25%;
        display: flex;
        align-items: center;
        align-self: stretch;
        border-left: 1px solid #DEE2E6;
        flex: 1;
        min-width: 0;
        padding: 8px;
    }

    .compare-product-two-col-left-text {
        display: flex;
        padding: 14px 16px;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .compare-product-two-col:nth-child(even) {
        background-color: #F9FAFB;
    }

    /* หรือเฉพาะซ้าย */
    .compare-product-two-col:nth-child(even) .product-detail-two-col__left {
        background-color: #F9FAFB;
    }

    .compare-product-modal-overlay.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }

    /* panel ขวา — ไม่ใช่ flex center */
    .compare-product-modal-shell.is-open {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 100vw;
        z-index: 10001;
        overflow: hidden;
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        transform: translateX(0);
        transition: transform 0.3s ease;
    }

    .compare-product-search-batt-wrapper {
        display: flex;
        width: 100vw;
        margin-top: 70px;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 24px 12px;
        background-color: #fff;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .compare-product-text-header-wrapper {
        display: flex;
        flex-direction: column;
        align-self: center;
        align-items: center;
    }

    .compare-product-search-box-wrapper {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }

    /* Homepage hero search tabs */
    .compare-product-search-batt-wrapper .tabbable-panel {
        display: flex;
        width: 100%;
        margin-left: auto;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
    }

    .compare-product-search-batt-wrapper .nav-tabs-container-item {
        display: flex;
        max-width: 355px;
        width: 100%;
        min-height: 48px;
        height: auto;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.70);
        border-left: 0.5px solid rgba(255, 255, 255, 0.70);
        border-bottom: 0;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(12px);
    }

    .compare-product-search-batt-wrapper .nav-tabs-container-item:last-child {
        border-right: 0.5px solid rgba(255, 255, 255, 0.70);
    }


    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 20px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(166, 166, 166, 0.10);
        backdrop-filter: blur(12px);
        box-shadow: none;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        cursor: pointer;
    }

    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .compare-product-search-batt-wrapper .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        color: #007FC6 !important;
        border-bottom: 0;
        background: #EBF8FF;
        backdrop-filter: blur(12px);
    }

    .compare-product-search-batt-wrapper .btn-wrapper-search {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        width: 100%;
        gap: 16px;
        margin-top: 24px;
    }


    .compare-product-modal-input-box-search {
        height: 100%;
        width: 100%;
        padding: 25px 15px;
        border-top: 1px solid #007FC6;
        background: transparent;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        isolation: isolate;
    }

    .compare-product-modal-input-box-search::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    .compare-product-modal-input-box-search::after {
        content: "";
        position: absolute;
        inset: 1px;
        background: #EBF8FF;
        pointer-events: none;
        z-index: 0;
    }

    .compare-product-modal-input-box-search>* {
        position: relative;
        z-index: 1;
    }

    .compare-product-modal-input-box-search-wrapper {
        display: flex;
        height: 76px;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .compare-product-modal-input-box-search-main-wrapper {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: auto;
    }

    .compare-product-modal-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        min-width: 0;
    }

    .compare-product-modal-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        box-sizing: border-box;
        cursor: pointer;
        flex: none;
        align-self: stretch;
        overflow: hidden;
    }

    .compare-product-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .compare-product-close-button {
        align-self: flex-end;
        margin-bottom: -24px !important;
        cursor: pointer;
    }

    .compare-product-btn-main {
        display: inline-flex;
        min-width: 180px;
        width: auto;
        padding: 8px 16px;
        align-items: center;
        gap: 16px;
        border-radius: 8px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
        cursor: pointer;
    }

    .compare-product-btn-main-icon {
        display: flex;
        width: 32px;
        height: 32px;
        padding: 0.6px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
    }

    .compare-product-btn {
        display: flex;
        width: 48px;
        height: 48px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 10/9;
        background: var(--Primary, #007FC6);
        backdrop-filter: blur(15.193799018859863px);
    }


    .compare-product-product-selected-banner {
        display: none;
        width: 100%;
        height: 100px;
        padding: 16px 103.5px 16px 72.5px;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        background: linear-gradient(270deg, #00B6F1 0%, #005BAA 100%);
    }

    .compare-product-product-selected-banner.is-visible {
        display: flex;
    }

    .compare-product-product-selected-banner:not(.has-items) .compare-product-product-selected-item-wrapper.is-open {
        display: none;
    }

    .compare-product-product-selected-banner.has-items .compare-product-product-selected-item-wrapper.is-empty {
        display: none;
    }

    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper {
        width: 100%;
    }

    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper.is-open,
    .compare-product-product-selected-banner .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: none;
    }

    /* มีรายการปกติ */
    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-open {
        display: flex;
    }

    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-empty,
    .compare-product-product-selected-banner.has-items:not(.has-no-mapping) .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: none;
    }

    /* no-mapping */
    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
    }

    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-empty,
    .compare-product-product-selected-banner.has-no-mapping .compare-product-product-selected-item-wrapper.is-open {
        display: none;
    }

    .compare-product-product-selected-open-title.is-open {
        margin-right: auto;
        flex-shrink: 0;
    }

    body.product-list-compare-active .compare-product-btn-2.is-not-selected {
        display: flex;
    }

    body.product-list-compare-active {
        padding-bottom: 100px;
    }

    .compare-product-product-selected-item-wrapper.is-open {
        display: flex;
        width: 100%;
        min-width: 0;
        height: 68px;
        padding-bottom: 8px;
        justify-content: flex-end;
        align-items: center;
        gap: 24px;
        flex-shrink: 1;
    }

    .compare-product-product-selected-item-wrapper.is-empty {
        display: flex;
        width: 100%;
        height: 68px;
        align-items: center;
        justify-content: space-between;
    }

    .compare-product-product-selected-item-wrapper.is-no-mapping {
        display: flex;
        width: 100%;
        height: 68px;
        align-items: center;
        justify-content: space-between;
    }


    .compare-product-product-selected-item-sub-wrapper.is-no-mapping {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .compare-no-related-title {
        color: #fff;
        font-weight: 700;
        line-height: 1.3;
    }

    .compare-no-related-desc {
        color: #fff;
        opacity: 0.95;
        line-height: 1.4;
    }

    .compare-product-product-selected-item-blue-container-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 0;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .compare-product-product-selected-item-blue-container {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        height: 43px;
        padding: 8px 16px;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        box-sizing: border-box;
        border-radius: 0 0 24px 0;
        background: #00B6F1;
    }

    .compare-product-product-selected-item-blue-container>span {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .compare-product-product-selected-item-close-btn {
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper.is-empty,
    .compare-product-product-selected-btn-wrapper.is-no-mapping {
        margin-left: 0;
        flex-shrink: 0;
    }


    .compare-selected-empty {
        flex-shrink: 0;
    }

    .compare-product-product-selected-btn-wrapper {
        margin-left: 25px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .compare-product-product-selected-item-close-btn img {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
    }

    .compare-product-related-blog-container {
        display: flex;
        padding: 64px 24px;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        align-self: stretch;
        background: none;
    }

    .news-banner-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 8px;
        margin-left: 16px;
    }

    .news-banner-nav-detail {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-bottom: 16px;
        margin-left: 16px;
        max-width: 100%;
        min-width: 0;
    }

    .news-list-banner {
        width: 1088px;
        position: relative;
        display: flex;
        overflow: visible;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .news-list-banner-carousel .item {
        padding-bottom: 24px;
        padding-top: 0px;
        padding-right: 0px;
        box-sizing: border-box;
    }

    .news-list-gradient-circle-left {
        width: 793px;
        height: 793px;
        aspect-ratio: 1/1;
        pointer-events: none;
        z-index: 0;
        position: absolute;
        left: 2%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 793px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .news-list-gradient-circle-right {
        width: 873px;
        height: 873px;
        aspect-ratio: 1/1;
        pointer-events: none;
        z-index: 0;
        position: absolute;
        right: -40%;
        top: 0;
        transform: translateY(-50%);
        border-radius: 873px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .news-list-banner-image {
        position: relative;
        width: 100%;
        aspect-ratio: 1/1;
        background-color: #000;
        overflow: hidden;
    }

    .news-list-banner-image::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
    }

    .news-list-banner-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.25s ease;
        transform: scale(1);
        transform-origin: center center;
    }

    .news-list-banner-link:hover .news-list-banner-image::after {
        opacity: 0;
        transition: none
    }

    .news-list-banner-link:hover .news-list-banner-image img {
        transform: scale(1);
        transition: none;
    }

    .news-list-banner-text-container {
        display: flex;
        position: relative;
        z-index: 2;
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        margin-left: auto;
        margin-right: auto;
        margin-top: -64px;
        height: 100%;
        padding: 32px 48px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: none;
        backdrop-filter: blur(12px);
    }

    .news-list-banner-text-wrapper {
        display: flex;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }

    .news-list-banner-link {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .news-list-banner-carousel-bleed>.service-section-decor,
    .news-list-banner-carousel-bleed>.service-section-decor--desktop-tablet,
    .news-list-banner-carousel-bleed>.service-section-decor--mobile {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: visible;
    }

    .news-list-banner-carousel .owl-stage-outer {
        overflow-x: hidden;
        overflow-y: visible;
        padding-bottom: 24px;
        margin-bottom: -24px;
    }

    .news-list-banner-carousel .owl-stage {
        display: flex;
        align-items: stretch;
        overflow: visible;
        padding-bottom: 0px;
    }

    .news-list-banner-carousel .owl-item {
        display: flex;
        flex-shrink: 0;
    }

    .news-list-banner-carousel-wrapper {
        --banner-pad: 0;
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        container-type: inline-size;
        --owl-items: 1;
        position: relative;
        z-index: 1;
        overflow: visible;
        box-sizing: border-box;
    }

    .news-list-banner-carousel .news-list-banner {
        width: 100%;
        overflow: visible;
    }

    .news-list-banner-carousel .owl-item,
    .news-list-banner-carousel .item,
    .news-list-banner-link,
    .news-list-banner {
        width: 100%;
        overflow: visible;
        min-width: 0;
    }

    .news-list-banner-carousel-wrapper .owl-prev {
        --owl-items: 1;
        top: 25cqw;
        left: max(64px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .news-list-banner-carousel-wrapper .owl-next {
        --owl-items: 1;
        top: 25cqw;
        right: max(64px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .news-list-banner-carousel-wrapper .owl-prev:hover,
    .news-list-banner-carousel-wrapper .owl-next:hover {
        background: #007FC6;
    }

    .news-list-banner-carousel-wrapper .owl-prev:hover img,
    .news-list-banner-carousel-wrapper .owl-next:hover img {
        filter: brightness(0) invert(1);
    }

    .news-list-banner-carousel-wrapper .owl-prev.disabled,
    .news-list-banner-carousel-wrapper .owl-next.disabled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .news-list-banner-carousel-bleed .carousel-indicators {
        position: static;
        margin: 0 auto;
    }

    .news-list-banner-carousel-bleed .carousel-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    .news-list-banner-carousel-bleed .carousel-indicators .active {
        margin: 0;
        margin-right: 4px;
        width: 52px;
        height: 8px;
        background-color: #007FC6;
        transition: all 0.4s ease;
    }

    .related-news-carousel-wrapper .owl-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 42px;
        height: 42px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
        right: -10px;
    }

    .related-news-carousel-wrapper .owl-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 42px;
        height: 42px;
        border-radius: 0 0 0 16px;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
        left: -10px;
    }

    .dealer-store-layout {
        position: relative;
        margin-left: 64px;
        margin-right: 64px;
        /* สูงกว่า .product-pass-hero (16) */
    }

    .dealer-store-text-align {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .dealer-store-subtitle-text {
        color: #6D6D6D;
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .dealer-store-search-container {
        display: flex;
        width: 100%;
        height: auto;
        position: relative;
        z-index: 20;
        margin-top: -60px;
        padding: 48px 40px;
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
        border-radius: 0 0 48px 0;
        background: var(--BG-Light, #EBF8FF);
        box-shadow: 0 0 30px 0 rgba(56, 56, 56, 0.12);
    }

    .dealer-store-input-box-search-dropdown {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        width: 100%;
    }

    .dealer-store-input-box-search-main-wrapper .select-search-car,
    .dealer-store-input-box-search-main-wrapper .select-search-model {
        width: 100%;
        min-width: 0;
    }

    .dealer-store-input-box-search-main-wrapper .select-search-car select,
    .dealer-store-input-box-search-main-wrapper .select-search-model select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        position: relative;
    }

    .dealer-store-input-box-search .filter-select-sub-panel[hidden] {
        display: none !important;
    }

    .dealer-store-input-box-search .wd-input-box-search-wrapper {
        position: relative;
        z-index: 2;
        overflow: visible;
    }

    .dealer-store-input-box-search .btn-wrapper-search {
        position: relative;
        z-index: 1;
    }

    .dealer-store-sub-input-box-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;
        padding: 14px 16px;
        border-radius: 0 0 16px 0;
        background: #FFF;
        cursor: pointer;
        box-sizing: border-box;
    }

    .dealer-store-input-box-search .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        margin-top: 0;
        z-index: 10050;
    }

    /* อันแรก — ยืดกินพื้นที่ที่เหลือ */
    .dealer-store-text-sort-wrapper>h2 {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    /* อันสอง — กว้างตาม content */
    .dealer-store-sort-sub-wrapper {
        display: flex;
        align-items: center;
        align-self: stretch;
        width: fit-content;
        /* override align-self: stretch จาก rule ทั่วไป */
    }

    .dealer-store-sort-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .dealer-store-text-sort-wrapper-main {
        text-align: center;
    }

    .dealer-store-text-sort-wrapper {
        display: flex;
        width: 100%;
        padding-bottom: 24px;
        justify-content: end;
        align-items: stretch;
        gap: 35px;
    }

    .dealer-store-card-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 24px;
    }

    .dealer-store-card-container {
        display: flex;
        width: 100%;
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        flex-shrink: 0;
        border-radius: 0 0 48px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        cursor: pointer;
    }

    .dealer-store-card-header-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }

    .dealer-store-card-header-wrapper img {
        width: 100%;
        height: auto;
        max-width: 72px;
        max-height: 72px;
        aspect-ratio: 1/1;
    }

    .dealer-store-card-header-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        flex: 1 0 0;
    }

    .dealer-store-card-header-province-container {
        display: flex;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid rgba(210, 210, 210, 0.87);
        background: var(--BG-Light, #EBF8FF)
    }

    .dealer-store-card-header-province-container img {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }

    .dealer-store-card-content-seperator {
        width: 100%;
        height: 1px;
        opacity: 0.5;
        background: #9E9E9E;
    }

    .dealer-store-card-contact-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .dealer-store-card-contact-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-card-contact-container img {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .dealer-store-search-container .btn-wrapper-search {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .dealer-store-search-form {
        cursor: default;
        gap: 8px;
    }

    .dealer-store-search-input {
        flex: 1;
        min-width: 0;
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: #282828;
    }

    .dealer-store-search-input::placeholder {
        color: #A6A6A6;
    }

    .dealer-store-search-submit {
        display: flex;
        flex-shrink: 0;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }

    .dealer-store-search-container .btn-wrapper-search>span {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dealer-store-pop-up-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .dealer-store-pop-up-overlay.is-hidden,
    .dealer-store-pop-up-container.is-hidden {
        display: none;
    }

    .dealer-store-pop-up-container {
        display: flex;
        flex-direction: row;
        padding: 40px;
        align-items: center;
        gap: 24px;
        border-radius: 12px;
        background: #FFF;
        max-width: 100%;
        width: 885px;
    }

    .dealer-store-pop-up-image {
        width: 100%;
        max-width: 362px;
        max-height: 362px;
        aspect-ratio: 1/1;
        border-radius: 0 0 48px 0;
        overflow: hidden;
        flex-shrink: 0;
    }

    .dealer-store-pop-up-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 48px 0;
    }

    .dealer-store-pop-up-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .dealer-store-pop-up-text-detail-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .dealer-store-text-detail-contact-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-sub-input-box-search.filter-select-sub__trigger {
        max-height: 40px;
    }

    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 100%;
        z-index: 10050;
    }

    .gs-1380-sub-banner-container {
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding-bottom: 48px;
    }

    .gs-1380-sub-banner-bg {
        width: 100%;
        height: 100%;
        max-height: 750px;
        object-fit: cover;
        object-position: bottom;
        display: block;
    }

    .gs-1380-sub-banner-wrapper {
        position: absolute;
        inset: 48px 16px;
        /* top right bottom left = “margin” ที่ถูกต้อง */
        width: auto;
        /* อย่าใส่ width: 100% ซ้ำ */
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-sizing: border-box;
    }

    .gs-1380-sub-banner-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .gs-1380-sub-banner-text-wrapper img {
        width: clamp(239.684px, 18vw, 352px);
        height: auto;
        aspect-ratio: 352 / 101;
        display: block;
    }

    .gs-1380-sub-banner-header {
        color: var(--Primary, #007FC6);

        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        /* 78px */
    }

    .gs-1380-sub-banner-sub-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .gs-1380-sub-banner-item-container-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .gs-1380-sub-banner-item-container {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    .gs-1380-sub-banner-item-container img {
        max-width: 64px;
        max-height: 64px;
        aspect-ratio: 1 / 1;
    }

    .gs-1380-sub-banner-item-container-text-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .gs-1380-sub-banner-btn {
        display: flex;
        width: auto;
        height: 79px;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 29.72px;
        align-self: stretch;
        border-radius: 9.907px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4.953px 12.383px 0 rgba(0, 182, 241, 0.15);
    }

    .gs-1380-sub-banner-btn-label {
        color: #FFF;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        /* 48.46px */
    }

    .gs-1380-sub-banner-btn-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        width: fit-content;
    }

    .gs-1380-sub-banner-btn {
        display: flex;
        width: 100%;
        height: 79px;
        padding: 16px 24px;
        align-items: center;
        gap: 16px;
        border-radius: 16.153px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 8.077px 20.192px 0 rgba(0, 182, 241, 0.15);
    }

    .gs-1380-sub-banner-btn-2 {
        display: flex;
        width: 100%;
        height: 79px;
        padding: 16px 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        border: 1px solid #007FC6;
        background: #FFF;
    }

    .gs-1380-sub-banner-btn img {
        width: 81.661px;
        height: 59.49px;
        aspect-ratio: 81.66/59.49;
    }


    .warranty-sub-banner {
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        display: flex;
        align-items: center;
    }

    .warranty-sub-banner>img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    .warranty-sub-banner-text-wrapper {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 0px;
        top: -556px;
        align-items: flex-start;
        gap: 32px;
        align-self: stretch;
    }

    .warranty-sub-banner-header-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .warranty-sub-banner-header {
        position: relative;
        align-self: stretch;
        display: inline-block;
        font-size: 80px;
        font-style: normal;
        font-weight: 900;
        line-height: 140%;
        filter: drop-shadow(0 3px 40px rgba(79, 222, 255, 0.60));
    }

    .warranty-sub-banner-header-stroke,
    .warranty-sub-banner-header-fill {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .warranty-sub-banner-header-stroke {
        position: absolute;
        top: 0;
        left: 0;
        color: transparent;
        -webkit-text-stroke-width: 6px;
        -webkit-text-stroke-color: #007FC6;
        z-index: 1;
    }

    .warranty-sub-banner-header-fill {
        position: relative;
        background: linear-gradient(180deg, #AAA 0%, #FFF 46.12%, #AAA 92.86%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 2;
    }

    .warranty-sub-banner-sub-header {
        align-self: stretch;
        color: var(--Accent, #B4EB00);
    }

    .warranty-sub-banner-benefits-header {
        align-self: stretch;
        color: #FFF;
    }

    .warranty-sub-banner-benefits-item-wrapper-main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }

    .warranty-sub-banner-benefits-item-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .warranty-sub-banner-benefits-item-wrapper img {
        width: 48px;
        height: 48px;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

    .warranty-layout {
        position: relative;
        overflow-x: clip;
        overflow-y: visible;
    }

    .warranty-gradient-circle-left {
        width: 482px;
        height: 482px;
        aspect-ratio: 1/1;
        pointer-events: none;
        z-index: -1;
        /* อยู่ข้างหลังรูปและ text */
        position: absolute;
        left: 50%;
        top: 65%;
        transform: translate(-50%, -50%);
        /* center กลางรูป illustration */
        border-radius: 482px;
        background: radial-gradient(50% 50% at 50% 50%, rgba(0, 182, 241, 0.80) 0%, rgba(181, 234, 252, 0.00) 87.5%);
    }

    .warranty-gradient-circle-right {
        width: 1291px;
        height: 1291px;
        aspect-ratio: 1/1;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -428px;
        top: -675px;
        border-radius: 1291px;
        background: radial-gradient(circle,
                #E6F8FEFF 0%,
                #B5EAFC00 88%);
    }

    .warranty-register-step-wrapper {
        position: relative;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        height: 100%;
        max-height: none;
        padding: 80px calc(50vw - 50% + 5px);
        box-sizing: border-box;
        overflow-x: clip;
        overflow-y: visible;
    }

    .warranty-register-step-inner {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
        box-sizing: border-box;
        /* ให้ padding ถูกนับอยู่ใน height */
        overflow: hidden;
    }

    .warranty-register-step-indicators {
        position: absolute;
        left: 0;
        top: 35%;
        z-index: 2;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
    }

    .warranty-register-step-indicators li {
        display: inline-block;
        width: 8px;
        height: 24px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0 solid transparent;
        border-radius: 0;
        transform: skewY(45deg);
        cursor: pointer;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    .warranty-register-vector {
        position: absolute;
        left: -60px;
        top: 40px;
        width: 765px;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 765px;
        background: radial-gradient(50% 50% at 50% 50%, rgba(0, 182, 241, 0.60) 0%, rgba(181, 234, 252, 0.00) 87.5%);
    }

    .warranty-register-step-indicators .active {
        width: 8px;
        height: 52px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .warranty-register-step-illustration-content {
        position: relative;
        height: 100%;
        width: 40%;
        overflow: visible;
        /* ปล่อยให้ glow ล้นออกได้ — ตัวที่ crop รูปคือ viewport */
    }

    .warranty-register-step-illustration-track {
        position: absolute;
        left: -26px;
        top: -26px;
        display: flex;
        flex-direction: column;
        transition: transform 0.4s ease;
        /* ทำให้เลื่อนนุ่ม */
    }

    .warranty-register-step-illustration-image {
        position: static;
        /* เปลี่ยนจาก absolute → เรียงในแนวตั้ง */
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        max-width: 507px;
        max-height: 699px;
    }

    .warranty-register-step-text-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 48px;
        flex: 1 0 0;
    }

    .warranty-register-step-text-header-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 17px;
        align-self: stretch;
    }

    .warranty-register-step-item-wrapper {
        display: flex;
        align-items: stretch;
        padding-right: 0px;
        gap: 15px;
        height: auto;
        overflow: visible;
        mask-image: none;
    }

    /* mobile/tablet: แสดง step ทั้งหมด ให้ user scroll, progress sticky ตาม scroll */
    .warranty-register-step-item-wrapper-text-wrapper-main {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .warranty-register-step-item-wrapper-text-wrapper-main {
        transition: transform 0.4s ease;
    }

    .warranty-register-step-illustration-image {
        transition: opacity 0.3s ease;
    }


    .warranty-register-step-item-wrapper-text-image-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .warranty-register-step-item-wrapper-image-wrapper {
        position: relative;
        z-index: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: visible;
    }

    .warranty-register-step-item-wrapper-image-wrapper img {
        width: 100%;
        height: 100%;
        max-width: 419.236px;
        min-height: 578px;
        object-fit: cover;
    }

    .warranty-register-step-item-wrapper-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .warranty-register-step-items-text-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }

    .warranty-step-progress {
        position: relative;
        width: 12px;
        height: auto;
        flex-shrink: 0;
        overflow: visible;
    }

    .warranty-step-progress-track {
        width: 100%;
        position: absolute;
        inset: 0;
        transform: none !important;
    }

    .warranty-step-progress-track::before {
        content: "";
        position: absolute;
        top: 6px;
        bottom: 6px;
        left: 50%;
        width: 1px;
        transform: translateX(-50%);
        background: repeating-linear-gradient(to bottom,
                #E5E5E5 0 8px,
                transparent 8px 14px);
    }

    .warranty-step-progress-fill {
        position: absolute;
        top: 6px;
        left: 50%;
        width: 3px;
        height: 0;
        transform: translateX(-50%);
        background: #B4EB00;
        z-index: 1;
        transition: height 0.12s ease;
    }

    .warranty-register-step-point-item {
        position: absolute;
        left: 50%;
        width: 12px;
        height: 12px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: #E5E5E5;
        z-index: 2;
    }

    .warranty-register-step-point-item:first-of-type {
        top: 0;
    }

    /* ตำแหน่ง top ของ point item ถูกกำหนดด้วย JS ให้ตรงกับ top ของ badge */

    .warranty-register-step-point-item.active {
        background: #B4EB00;
    }

    .warranty-register-step-badge {
        display: flex;
        padding: 4px 12px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 8px 0;
        background: #9E9E9E;
        color: #FFF;
        transition: all 0.3s ease;
    }

    .warranty-register-step-badge.is-active {
        background: #007FC6;
    }

    .warranty-register-step-items-text-content img {
        max-width: 103px;
        max-height: 103px;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    .warranty-register-step-final-btn-wrapper {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-star !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .warranty-register-step-final-btn {
        white-space: nowrap !important;
        text-align: left !important;
    }

    .warranty-register-step-final-btn--sm {
        max-width: 289px !important;
    }

    .warranty-register-step-final-btn--lg {
        max-width: 266px !important;
    }

    .contact-us-vector {
        position: absolute;
        left: 30%;
        top: 55%;
        transform: translate(-50%, -50%);
        width: 60%;
        max-width: none;
        z-index: -1;
        pointer-events: none;
        opacity: 0.05;
    }

    .contact-us-header-spacing {
        padding: 0 64px;
    }

    .input-form-box {
        display: flex;
        padding: 32px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 32px;
        flex: 1 0 0;
        border-radius: 0 0 48px 0;
        background: rgba(255, 255, 255, 0.12);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
    }

    .contact-us-box-inside-wrapper {
        width: 100%;
        display: flex;
        padding: 48px 16px;
        align-items: stretch;
        flex-direction: column;
        gap: 24px;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0 0 0 0;
        background: #EBF8FF;
    }

    .landing-form-box-inside-wrapper {
        width: 100%;
        position: relative;
        z-index: 0;
        display: flex;
        padding: 48px 16px;
        align-items: stretch;
        flex-direction: column;
        gap: 24px;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0 0 0 0;
        background: #EBF8FF;
    }

    .contact-us-box-inside-wrapper-2 {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 0px;
        box-sizing: border-box;
    }

    .mapouter {
        height: 314px;
        width: 100%;
        position: relative;
        z-index: 2;
    }

    .gmap_canvas {
        position: relative;
        z-index: 2;
        overflow: hidden;
        background: none !important;
        height: 314px;
        max-width: 100%;
        width: 100%;
        border-radius: 0 0 48px 0;
    }

    .contact-us-address-sale.text-editor p,
    .contact-us-address-batt.text-editor p {
        margin-bottom: 16px;
        margin-top: 16px;
    }

    .contact-us-call-center-btn {
        display: inline-flex;
        width: fit-content;
        height: auto;
        padding: 8px 16px;
        align-items: center;
        gap: 16px;
        border-radius: 8px;
        border: 1px solid transparent;
        background:
            var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box,
            linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
        position: relative;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
    }

    .btn-view-more-contact-icon {
        max-width: 16px;
        max-height: 16px;
    }

    .sub-banner-container.contact {
        max-height: 300px;
        margin-top: 0px;
    }

    .sub-banner-content.contact {
        grid-area: 1 / 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        margin-right: 0;
        gap: 24px;
        z-index: 1;
    }

    .career-box-inside-wrapper {
        width: 100%;
        position: relative;
        z-index: 0;
        display: flex;
        padding: 48px 16px;
        align-items: stretch;
        flex-direction: column;
        gap: 24px;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0;
        border-bottom: 1px solid var(--line, #D2D2D2);
        background: #EBF8FF;
    }

    .career-job-heading-row {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        align-self: stretch;
    }

    .career-company-box-wrapper {
        display: flex;
        width: 100%;
        padding: 0 64px;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 24px;
    }

    .career-company-box-wrapper-item {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        padding: 32px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 32px;
        border-radius: 0 0 48px 0;
        background: rgba(255, 255, 255, 0.40);
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
    }

    .privacy-policy-main-item-wrapper {
        display: flex;
        padding: 16px 0;
        height: auto;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;
        border-bottom: 1px solid var(--Primary, #007FC6);
    }

    .privacy-policy-main-item-wrapper.bullet {
        padding-left: 0px;
        border-bottom: 1px solid var(--line, #D2D2D2);
    }

    .privacy-policy-link-wrapper {
        height: 48px;
    }

    .landing-page-hero-content-bottom {
        position: absolute;
        left: 0;
        bottom: 77px;
        display: flex;
        width: 100%;
        padding: 0 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs, 14px);
        flex-shrink: 0;
        z-index: 3;
        color: #fff;
        box-sizing: border-box;
    }

    .landing-page-text-list-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        align-self: stretch;
        padding: 80px 32px;
    }

    .landing-page-video-section-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 80px 32px;
    }

    .landing-page-url-video-section-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 80px 32px;
    }


}

/* แถวที่ 2 (ข้อความซ้าย + รูป skew ขวา): กล่องข้อความต้องอยู่เหนือรูป — ทุก breakpoint */
.img-box-home-row:has(.img-box-home-container-right)>.pdd-left {
    position: relative;
    z-index: 3;
}

.img-box-home-row:has(.img-box-home-container-right)>.pdd-right {
    position: relative;
    z-index: 1;
}

.img-box-home-row:has(.img-box-home-container-right)>.pdd-left .column-description-align,
.img-box-home-row:has(.img-box-home-container-right)>.pdd-left .column-description-container-left,
.img-box-home-row:has(.img-box-home-container-right)>.pdd-left .btn-view-more-right {
    position: relative;
    z-index: 3;
}

@media (max-width: 992px) {

    .img-box-home-row>.col-md-6,
    .img-box-home-row-2>.col-md-6 {
        display: flex;
        min-width: 0;
        max-width: 50%;
        overflow: visible;
    }

    .img-box-home-row>.col-md-6>div[data-aos],
    .img-box-home-row-2>.col-md-6>div[data-aos] {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
    }

    .column-description-container-right,
    .column-description-container-left {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        margin-top: -30px;
        padding: 28px 20px 40px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    .img-box-home-container,
    .img-box-home-container-right {
        width: 80%;
        max-width: 100%;
        padding-left: 2.5%;
        left: 0;
        right: 0;
        height: clamp(260px, 38vw, 400px);
    }

    .news-list-banner-carousel-wrapper .owl-prev {
        --owl-items: 1;
        top: 30cqw;
        left: max(64px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .news-list-banner-carousel-wrapper .owl-next {
        --owl-items: 1;
        top: 30cqw;
        right: max(64px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .img-box-about-us-row,
    .img-box-about-us-row-2 {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 32px;
        box-sizing: border-box;
        transform: none;
    }

    .img-box-about-us-row-2 {
        flex-direction: column-reverse;
    }

    .img-box-about-us-row>div:first-child,
    .img-box-about-us-row>div:last-child,
    .img-box-about-us-row-2>div:first-child,
    .img-box-about-us-row-2>div:last-child {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: stretch;
    }

    .img-box-about-us-row>div[data-aos],
    .img-box-about-us-row-2>div[data-aos] {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
    }

    .img-box-about-us-row .column-description-align,
    .img-box-about-us-row-2 .column-description-align {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-box-about-us-container,
    .img-box-about-us-container-right {
        width: 86.7%;
        max-width: 100%;
        padding-left: 2.5%;
        left: -3%;
        margin-top: 0;
        height: clamp(260px, 38vw, 400px);
    }

    .img-box-about-us-container {
        left: 0%;
    }

    .img-box-about-us {
        position: absolute;
        top: 0;
        left: -12%;
        width: 125%;
        height: 100%;
        margin: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .about-us-column-description-container-right,
    .about-us-column-description-container-left {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: -30px;
        padding: 32px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    .about-us-blue-container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        background: var(--BG-Light, #EBF8FF);
        padding: 48px 32px;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .about-us-seperator {
        width: 1px;
        height: 97px;
        background: #D2D2D2;
    }

    .about-us-text-content-wrapper {
        display: flex;
        align-items: center;
        gap: 24px;
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .about-us-text-content-item-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .about-us-feature-company-info-wrapper {
        display: flex;
        align-items: stretch;
        gap: 24px;
        flex-direction: column;
        align-self: stretch;
        flex-wrap: nowrap;
        margin: 0 auto;
    }

    .about-us-feature-company-info-item {
        display: flex;
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        align-self: stretch;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.60);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
        box-sizing: border-box;
    }

    .about-us-feature-company-info-item .h4-bold {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .about-us-feature-company-info-item-value-with-img {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .about-us-feature-company-info-item-img {
        width: 84px;
        height: 84px;
        aspect-ratio: 1/1;
        flex-shrink: 0;
    }

    .about-us-feature-company-info-item-value-with-img .h4-bold {
        flex: 1 1 0;
        min-width: 0;
    }

    .about-us-feature-company-info-item-img img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .about-us-other-company-info-wrapper {
        display: flex;
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 40px;
        margin: 0 auto;
    }

    .about-us-other-company-info-image-wrapper {
        width: 80%;
        max-width: 100%;
        flex: 0 1 auto;
        min-width: 0;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 0 0 48px 0;
        overflow: hidden;
        margin: 0 auto;
    }

    .about-us-other-company-info-image-wrapper img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .about-us-other-company-info-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 1 0;
        min-width: 0;
    }

    .about-us-other-company-info-text-item-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }

    .about-us-other-company-info-text-item-title {
        flex: 0 1 174px;
        min-width: 0;
        max-width: 100%;
    }

    .about-us-other-company-info-text-item-wrapper>.about-us-other-company-info-content {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .about-us-other-company-info-bullet-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .about-us-other-company-info-bullet {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #007FC6;
        flex-shrink: 0;
        margin-top: 0.5em;
    }

    .about-us-text-item-separator {
        width: 100%;
        height: 1px;
        background: #D2D2D2;
    }

    /* Landing Page */

    .landing-page-image-text-wrapper {
        display: flex;
        width: 100%;
        padding-top: 36px;
        flex-direction: column;
        gap: 32px;
    }

    .img-box-landing-page-row,
    .img-box-landing-page-row-2 {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 36px 32px;
        box-sizing: border-box;
        transform: none;
    }

    .img-box-landing-page-row-2 {
        flex-direction: column-reverse;
    }

    .img-box-landing-page-row>div:first-child,
    .img-box-landing-page-row>div:last-child,
    .img-box-landing-page-row-2>div:first-child,
    .img-box-landing-page-row-2>div:last-child {
        flex: 0 0 auto;
        max-width: 100%;
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: stretch;
    }

    .img-box-landing-page-row>div[data-aos],
    .img-box-landing-page-row-2>div[data-aos] {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
    }


    .img-box-landing-page-container,
    .img-box-landing-page-container-right {
        width: 86.7%;
        max-width: 100%;
        padding-left: 2.5%;
        left: 9%;
        right: 0%;
        margin-top: 0;
        height: clamp(260px, 38vw, 400px);
    }

    .img-box-landing-page {
        position: absolute;
        top: 0;
        left: -12%;
        width: 125%;
        height: 100%;
        margin: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .column-description-container-landing-page-right,
    .column-description-container-landing-page-left {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: -30px;
        padding: 32px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    .img-box-landing-page-row .column-description-align,
    .img-box-landing-page-row-2 .column-description-align {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn-view-more-landing-page-left,
    .btn-view-more-landing-page-right {
        left: auto !important;
        right: auto !important;
        align-self: center;
        margin-top: -36px;
        bottom: auto;
    }



}


/* Homepage about: แคบกว่า 992 — col-md ไม่แบ่งคอลัมน์, เรียงแนวตั้ง (รูปก่อนเสมอ) */
@media (max-width: 991px) and (min-width: 768px) {

    .container {
        width: 100%;
        max-width: clamp(720px,
                calc(970px - (991px - 100vw) * 0.88),
                970px);
        box-sizing: border-box;
    }

    .img-box-home-row,
    .img-box-home-row-2 {
        flex-direction: column;
        align-items: stretch;
    }

    /* แถวที่ 2 ใน blade: ข้อความมาก่อนรูปใน DOM → reverse ให้รูปอยู่บน */
    .img-box-home-row:has(.img-box-home-container-right) {
        flex-direction: column-reverse;
    }

    .img-box-home-row>.col-md-6,
    .img-box-home-row-2>.col-md-6 {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        float: none;
        overflow: visible;
    }

    .column-description-align {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .column-description-container-right,
    .column-description-container-left {
        width: 100%;
        max-width: 100;
        left: 0;
        right: 0;
        border-radius: 16px;
        padding: 24px 20px 32px;
        box-sizing: border-box;
    }

    .img-box-home-container,
    .img-box-home-container-right {
        width: 89%;
        max-width: 100%;
        left: 2%;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        height: clamp(260px, 52vw, 380px);
    }

    .img-box-home-container .img-box-home,
    .img-box-home-container-right .img-box-home {
        position: absolute;
        top: 0;
        left: -12%;
        width: 150%;
        height: 100%;
        margin: 0;
    }

    .btn-view-more-left,
    .btn-view-more-right {
        left: auto !important;
        right: auto !important;
        align-self: center;
        top: -15px;
    }

    .warranty-sub-banner-text-wrapper {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 32px;
        padding-top: 0px;
        top: -635px;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }
}

@media (max-width: 767px) {

    .service-section-decor--desktop-tablet {
        display: none;
    }

    .service-section-decor--mobile {
        display: block;
    }

    .padding-left-only {
        padding-left: 16px;
    }

    .sub-banner-row {
        margin-left: 16px;
        margin-right: 16px;
    }

    .about-us-milestone-section--mobile {
        display: flex;
        flex-direction: column;
        gap: 48px;
        padding: 48px 16px;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .about-us-milestone-section--mobile .about-us-milestone-headline {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .about-us-milestone-section--mobile .about-us-milestone-title,
    .about-us-milestone-section--mobile .about-us-milestone-subtitle {
        font-size: 24px;
        font-weight: 700;
        line-height: 140%;
        margin: 0;
    }

    .about-us-milestone-section--mobile .about-us-milestone-title {
        color: #282828;
    }

    .about-us-milestone-section--mobile .about-us-milestone-subtitle {
        color: #007FC6;
    }

    .about-us-milestone-section--mobile .news-category-list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .about-us-milestone-section--mobile .news-category-list::-webkit-scrollbar {
        display: none;
    }

    .about-us-milestone-section--mobile .news-category-container {
        flex-shrink: 0;
        display: inline-flex;
        height: 40px;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: 0;
        border-radius: 0 0 16px 0;
        background: rgba(166, 166, 166, 0.10);
        color: #000;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 150%;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: none;
        transition: background 0.25s ease, border-color 0.25s ease, border 0.25s ease;
    }

    .about-us-milestone-section--mobile .news-category-container.active,
    .about-us-milestone-section--mobile .news-category-container.active:hover {
        border: 1px solid var(--Primary, #007FC6);
        background: #D9F2FF;
        color: #000;
    }

    .about-us-timeline-mobile-viewport {
        width: 100%;
        overflow: hidden;
        transition: height 0.3s ease;
    }

    .about-us-timeline-mobile-panels {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-sizing: border-box;
    }

    .about-us-timeline-mobile-panels::-webkit-scrollbar {
        display: none;
    }

    .about-us-milestone-section--mobile .about-us-timeline-slide {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        flex: 0 0 auto;
    }

    .about-us-milestone-section--mobile .about-us-timeline-item-container {
        width: 312px;
        max-width: calc(100vw - 48px);
        flex-shrink: 0;
        gap: 24px;
    }

    .about-us-milestone-section--mobile .about-us-timeline-separator {
        width: 1.5px;
        height: 100%;
        align-self: stretch;
        min-height: 514px;
        background: #D2D2D2;
        flex-shrink: 0;
    }

    .about-us-milestone-section--mobile .about-us-timeline-item-title {
        font-size: 24px;
        line-height: 140%;
    }

    .about-us-timeline-item-image {
        width: 100%;
        height: auto;
        aspect-ratio: 312 / 176;
        background: #D2D2D2;
        border-radius: 0 0 48px 0;
        overflow: hidden;
    }

    .about-us-main-headline-align {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }


    .body1-white {
        font-size: 12px;
        font-weight: 500;
    }

    .compare-product--icon {
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .home-page-wrap {
        position: relative;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
        isolation: isolate;
    }

    /* Phantom decor layer: คงตำแหน่ง vector เดิม แต่ crop ส่วนล้นซ้าย/ขวา */
    .service-section-decor.service-section-decor--page-overlay {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 0;
        min-height: 0;
        overflow-x: clip;
        overflow-y: visible;
        clip-path: inset(-100vmax 0 -100vmax 0);
        -webkit-clip-path: inset(-100vmax 0 -100vmax 0);
        isolation: isolate;
        z-index: 0;
        pointer-events: none;
    }

    .home-page-wrap+.tab-content {
        overflow-x: hidden;
        overflow-x: clip;
        max-width: 100%;
    }

    #carousel-general-banner,
    #carousel-general-banner .banner-wrapper {
        overflow: hidden;
        max-width: 100%;
    }

    #carousel-general-banner .banner-wrapper .owl-stage-outer {
        margin-left: 0;
    }

    .home-bleed-section {
        overflow-x: hidden;
        overflow-x: clip;
    }

    .section-white--shear-top {
        overflow-x: hidden;
        overflow-x: clip;
        max-width: 100%;
    }

    .section-white__decor {
        overflow-x: hidden;
        overflow-x: clip;
        max-width: 100%;
        box-sizing: border-box;
    }

    .other-news-carousel-bleed {
        overflow-x: hidden;
        overflow-x: clip;
    }

    .other-news-carousel-wrapper .owl-stage-outer {
        margin-left: 0;
    }

    .featured-news-card .img-box-news {
        aspect-ratio: 1 / 1;
        border-radius: 0 0 48px 0;
    }

    .product-filter-2-sub-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        align-self: stretch;
    }

    .product-filter-2-sub-wrapper-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .compare-product-btn-main {
        display: flex;
        padding: 8px 16px;
        align-items: center;
        gap: 16px;
        border-radius: 8px;
        border: 1px solid transparent;
        background: var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%)) padding-box, linear-gradient(90deg, #FFFFFF 0%, #007FC6 100%) border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 182, 241, 0.15);
        cursor: pointer;
        width: auto;
        justify-content: center;
    }

    .compare-product-btn {
        display: flex;
        width: 48px;
        height: 48px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 10/9;
        background: var(--Primary, #007FC6);
        backdrop-filter: blur(15.193799018859863px);
    }


    .compare-product-main-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .compare-product-row-main {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        width: 100%;
        overflow: hidden;
    }

    .compare-product-box-wrapper-main {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .compare-product-sub-wrapper {
        flex: 0 0 45%;
        max-width: 45%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .compare-product-box-col-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 44px;
        flex: 0 0 44px;
        padding: 0 8px;
        background: var(--BG-Light, #EBF8FF);
        color: #007FC6;
        box-sizing: border-box;
    }

    .compare-product-header-wrapper {
        display: flex;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .compare-product-header-sub-wrapper {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4px;
    }

    .compare-product-box-wrapper {
        padding: 16px;
        width: 100%;
        aspect-ratio: 1 / 1;
        min-height: 0;
        position: relative;
        overflow: hidden;
        background: #F8F8F8;
        z-index: 0;
        box-sizing: border-box;
    }

    .compare-product-box-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .compare-product-box-wrapper:has(.compare-product-img-container-have-img) {
        padding: 0;
    }

    .compare-product-box-content:has(.compare-product-img-container-have-img) {
        position: relative;
        justify-content: flex-start;
        padding: 12px 12px 0;
        box-sizing: border-box;
    }

    .compare-product-box-content:has(.compare-product-img-container-have-img)>.body2:empty,
    .compare-product-box-content:has(.compare-product-img-container-have-img)>.space-xxs {
        display: none;
    }

    .compare-product-box-content:has(.compare-product-img-container-have-img)>.body2:not(:empty) {
        display: block;
        width: 100%;
        margin: 0 0 8px;
        text-align: center;
    }

    .compare-product-box-content[data-compare-open] {
        cursor: pointer;
    }

    .compare-product-box-content>h3 {
        width: 100%;
        margin: 0 0 8px;
        text-align: center;
    }

    .compare-product-box-content .compare-product-img-container,
    .compare-product-box-content .compare-product-img-container-have-img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        flex: 0 0 auto;
    }

    .compare-product-box-content:has(.compare-product-img-container-have-img) .compare-product-img-container-have-img {
        flex: 1 1 auto;
        width: calc(100% + 32px);
        margin: 0 -16px;
        min-height: 0;
        background: transparent;
        align-self: stretch;
    }

    .compare-product-btn-close {
        width: 12px;
        height: 12px;
        aspect-ratio: 1 / 1;
    }

    .compare-product-btn-close img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }


    .compare-product-box-content .compare-product-btn-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
        cursor: pointer;
    }


    .compare-product-gradient-background {
        position: absolute;
        width: 814px;
        height: 814px;
        aspect-ratio: 1/1;
        border-radius: 814px;
        background: radial-gradient(46.98% 46.98% at 51.68% 53.05%, rgba(230, 248, 254, 0.50) 0%, rgba(181, 234, 252, 0.00) 87.5%);
        top: 80%;
        transform: translate(-50%, -50%);
        z-index: -1;
        pointer-events: none;
    }

    .compare-product-img-container {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        display: flex;
        width: 100%;
        aspect-ratio: 269.98 / 200.98;
        height: auto;
        gap: 8px;
        background: #E9E9E9;
        justify-content: center;
        align-items: center;
    }

    .compare-product-img-container-have-img {
        overflow: hidden;
    }

    .compare-product-img-container-have-img>img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        /* ถ้าอยากเต็มกรอบแบบ crop ใช้ cover */
        display: block;
    }

    .compare-product-add-image-text {
        color: var(--Primary, #007FC6);
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .compare-product-table-header {
        width: 100%;
        min-width: 513px;
        height: auto;
        padding: 10px 32px;
        display: flex;
        align-items: center;
        background: var(--BG-Light, #EBF8FF);
    }

    .compare-product-table-body {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden;
    }

    .compare-product-spec-scroll {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        gap: 0;
        min-height: 0;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-padding-inline-end: 16px;
    }

    .compare-product-spec-scroll::after {
        content: '';
        flex: 0 0 16px;
        width: 16px;
    }

    .compare-product-spec-scroll::-webkit-scrollbar {
        display: none;
    }

    .compare-product-spec-col {
        flex: 0 0 200px;
        width: 200px;
        max-width: 200px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        border-right: 1px solid #DEE2E6;
    }

    .compare-product-spec-scroll>.compare-product-spec-col:last-of-type {
        border-right: none;
    }

    .compare-product-table-sub-header {
        width: 100%;
        min-width: 0;
        height: 44px;
        flex: 0 0 44px;
        display: flex;
        padding: 0 16px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-sizing: border-box;
    }

    .compare-product-table-row-wrapper {
        display: flex;
        align-items: stretch;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%;
        min-width: 0;
    }

    .compare-product-table-row {
        display: flex;
        flex: 1 1 0;
        width: 100%;
        min-height: 0;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
    }

    .compare-product-related-blog-container {
        display: flex;
        padding: 24px 16px 48px 16px;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        align-self: stretch;
    }

    .news-section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        overflow: visible;
        /* ให้ list ล้นได้ */
    }

    .news-banner-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        margin-bottom: 8px;
        margin-left: 0px;
    }

    .news-banner-nav-detail {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-bottom: 8px;
        margin-left: 0px;
        max-width: 100%;
        min-width: 0;
    }

    .news-list-gradient-circle-left {
        width: 364px;
        height: 364px;
        aspect-ratio: 1/1;
        pointer-events: none;
        z-index: 0;
        position: absolute;
        left: 5%;
        top: 86%;
        transform: translate(-50%, -50%);
        border-radius: 364px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .news-list-gradient-circle-right {
        width: 364px;
        height: 364px;
        aspect-ratio: 1/1;
        pointer-events: none;
        z-index: 0;
        position: absolute;
        right: -50%;
        top: 0;
        transform: translateY(-50%);
        border-radius: 364px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .news-list-input-box-search-wrapper {
        display: flex;
        height: 48px;
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: row;
        gap: 16px;
        align-self: stretch;
    }

    .news-list-input-box-search-dropdown {
        width: 100%;
        max-width: 100%;
    }

    .news-list-input-box-search-main-wrapper.filter-select-news-year-group {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }

    .news-category-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        /* ดึงพื้นที่ scroll ให้กว้างเท่าจอ */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding-left: calc(50vw - 50%);
        /* ชิดซ้ายเท่า container (padding 16px) */
        padding-right: 16px;
        box-sizing: border-box;
    }

    .news-category-list::-webkit-scrollbar {
        display: none;
    }

    .news-category-container {
        flex-shrink: 0;
        /* ปุ่มไม่ถูกบีบ */
    }

    .news-list-card-container-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        align-self: stretch;
    }

    .news-list-card-container {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        flex-direction: column;
        align-items: flex-start;
        flex-shrink: 0;
        background: #FFF;
        border-radius: 0 0 32px 0;
        border: 1px solid #D2D2D2;
        cursor: pointer;
        overflow: hidden;
    }

    .news-list-card-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        align-self: stretch;
        overflow: hidden;
    }

    .news-list-card-text-wrapper {
        display: flex;
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 1 auto;
        gap: 8px;
        align-self: stretch;
    }

    .news-list-card-tag-activities {
        padding: 2.25px 8px;
        background: transparent;
        border: 1px solid #007FC6;
        border-radius: 0px;
    }

    .compare-product-related-blog-container .related-news-indicators {
        position: static;
        margin: 24px auto 0;
        padding-left: 0;
        width: auto;
        list-style: none;
        text-align: center;
    }

    .news-details-header-date-category-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        align-self: stretch;
    }

    .news-details-header-date-category-seperator {
        width: 1px;
        height: 33px;
        background: #D2D2D2;
    }

    .news-details-header-social-media-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .news-details-header-social-media-icon-wrapper {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .news-details-header-social-media-icon {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
        display: block;
    }

    .news-details-header-social-media-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-grid-item .compare-product-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
    }

    .pdp-related-section.service-section-decor--mobile {
        height: auto;
        min-height: 0;
        position: relative;
        overflow-x: clip;
        overflow-y: visible;
    }

    .pdp-related-carousel-wrapper .owl-item {
        padding: 24px 16px;
    }

    .pdp-related-carousel .item>a {
        display: block;
        text-decoration: none;
    }

    .pdp-related-carousel.owl-carousel .owl-item .img-product-batt {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;
    }

    .pdp-related-carousel .batt-spec-container img {
        width: auto;
        height: auto;
        max-width: none;
        flex-shrink: 0;
    }

    .pdp-indicators {
        position: static;
        margin: auto 0;
        padding-left: 0;
        width: auto;
        list-style: none;
        text-align: center;
    }

    .pdp-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    .pdp-indicators .active {
        width: 52px;
        height: 8px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .compare-product-header-wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }

    .service-section-decor--mobile .compare-product-table-header--edge {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 10px 32px;
        /* ไม่มี overflow-x ที่นี่ */
    }

    .service-section-decor--mobile .compare-product-scroll {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .service-section-decor--mobile .compare-product-scroll::-webkit-scrollbar {
        display: none;
    }

    /* Clip สองชั้นแยกกัน:
       1) .bg-search-batt / shared media — ตัดขอบล่าง hero
       2) .section-white__shear-clipper — ตัด decor เท่านั้น (อย่าดึงขึ้นไปใต้ hero โปร่งใส)
       ช่องว่างจาก clip hero โชว์พื้นขาวของ .home-hero-shared-media ไม่ใช่ชั้น shear */
    .home-hero-tabs > .tab-pane > .visible-tablet-slide-baner {
        position: relative;
        z-index: 0;
        isolation: isolate;
    }

    .home-hero-shared-media {
        background: #fff;
    }

    .bg-search-batt,
    .home-hero-shared-media .bg-search-batt {
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 30px),
                0 100%);
    }

    .section-white--shear-top {
        position: relative;
        z-index: 0;
        margin-top: 0;
        /* สำคัญ: ห้ามติดลบ — ถ้าดึงขึ้นจะโชว์ขาวทะลุ shell โปร่งใสของ hero */
        background: transparent;
        overflow: visible;
        clip-path: none;
    }

    /* clip แนวนอนตรงสำหรับ decor เท่านั้น — ห้ามมีพื้นขาว
       (.home-hero-tabs อยู่เหนือ shared media ถ้ามีพื้นขาวจะไปทับ/ตัด hero)
       พื้นขาวในรอยเฉียงมาจาก .home-hero-shared-media ที่อยู่หลัง hero */
    .section-white__shear-clipper {
        position: relative;
        z-index: 1;
        display: block;
        background: transparent;
        clip-path: polygon(0 40px, 100% 56px, 100% 100%, 0 100%);
        padding-bottom: 48px;
        pointer-events: none;
    }

    .section-white__decor {
        position: relative;
        z-index: 1;
        left: -20px;
        margin-top: -36px;
        /* ดึงขึ้นพอประมาณให้ไม่สูงเกิน */
        padding-bottom: 0;
        pointer-events: none;
    }

    .section-white__decor-img {
        width: 100%;
        max-width: 400px;
        opacity: 0.08;
    }

    /* content หลัง hero (ถูกดึงขึ้นด้วย -260px) ให้อยู่เหนือ shear shell */
    .home-hero-tabs > .service-section-decor--mobile,
    .home-hero-tabs > .service-section-decor--mobile ~ .row,
    .home-hero-tabs > .service-section-decor--mobile ~ div {
        position: relative;
        z-index: 1;
    }

    .other-news-carousel-wrapper .owl-stage-outer {
        margin-left: -12%;
        /* ดึงไปซ้าย ชดเชย peek ซ้าย */
    }

    .pdp-related-carousel-wrapper.other-news-carousel-wrapper .owl-stage-outer {
        margin-left: 0;
    }

    .product-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        /* 3 คอลัมน์ */
        gap: 24px;
    }

    .product-filter-2-wrapper {
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .product-items-row {
        margin-top: -40px;
        margin-inline: auto;
        padding: 0 2px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: clamp(10px, 2vw, 24px);
        width: fit-content;
        max-width: calc(100% - 32px);
    }

    .product-item-main-container {
        flex: 0 0 auto;
        width: clamp(200px, 72vw, 320px);
        min-width: 0;
        min-height: 102px;
        height: clamp(112px, 16vw, 120px);
        display: flex;
        align-items: flex-end;
        overflow: visible;
    }

    .product-item-inner {
        transform: skewX(10deg);
    }

    .product-item-inner:has(.product-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 70px;
        position: absolute;
        right: 0;
        left: auto;
        top: 0;
        transform: translate(35%, -55%);
        z-index: 2;
    }

    .product-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }


    .product-item-container {
        padding-top: -4px;
        width: 100%;
        min-height: 100px;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 18px 40px 18px 16px;
        box-sizing: border-box;
        overflow: visible;
        background: var(--Gradient, linear-gradient(270deg, #00B6F1 0%, #005BAA 100%));
        transform: skewX(-10deg);
        border-radius: 0px 0px 25px 0px;
        cursor: pointer;
    }

    .product-item-title {
        margin-top: 0;
        margin-left: 48px;
        text-align: center;
        font-weight: 700;
        color: #fff;
    }

    .dealer-store-layout {
        position: relative;
        margin-left: 16px;
        margin-right: 16px;
        /* สูงกว่า .product-pass-hero (16) */
    }

    .dealer-store-card-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 24px;
    }

    .dealer-store-search-container {
        display: flex;
        width: 100%;
        height: auto;
        position: relative;
        z-index: 20;
        margin-top: -60px;
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
        border-radius: 0 0 48px 0;
        background: var(--BG-Light, #EBF8FF);
        box-shadow: 0 0 30px 0 rgba(56, 56, 56, 0.12);
    }

    .dealer-store-search-title {
        color: var(--Neutral, #282828);
        text-align: center;

        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        /* 33.6px */
    }


    .dealer-store-pop-up-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .dealer-store-pop-up-btn-close {
        position: absolute;
        top: 17px;
        right: 16px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .dealer-store-pop-up-overlay.is-hidden,
    .dealer-store-pop-up-container.is-hidden {
        display: none;
    }

    .dealer-store-pop-up-container {
        padding: 48px 16px 24px 16px;
        border-radius: 12px;
        background: #FFF;
        min-width: 333px;
        width: 60%;
        display: inline-flex;
        height: 608px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .dealer-store-pop-up-content-main {
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-height: 0;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .dealer-store-pop-up-image {
        width: 100%;
        max-width: none;
        max-height: none;
        min-width: 303px;
        aspect-ratio: 1/1;
        border-radius: 0 0 48px 0;
        overflow: hidden;
        flex-shrink: 0;
    }

    .dealer-store-pop-up-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 0 48px 0;
    }

    .dealer-store-pop-up-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .dealer-store-pop-up-text-detail-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .dealer-store-text-detail-contact-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dealer-store-sub-input-box-search.filter-select-sub__trigger {
        max-height: 40px;
    }

    .dealer-store-input-box-search-main-wrapper.filter-select-sub-group .filter-select-sub-panel:not([hidden]) {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 100%;
        z-index: 10050;
    }

    .warranty-gradient-circle-right {
        width: 577px;
        height: 577px;
        aspect-ratio: 1/1;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -250px;
        top: -205px;
        border-radius: 577px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }



    .gs-1380-sub-banner-btn-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        width: 100%;
    }

    .warranty-sub-banner-text-wrapper {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 16px;
        padding-top: 0px;
        top: -356px;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }

    .news-list-banner-text-wrapper {
        display: flex;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    .news-list-banner-carousel-wrapper .owl-prev {
        --owl-items: 1;
        top: 35cqw;
        left: max(64px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .news-list-banner-carousel-wrapper .owl-next {
        --owl-items: 1;
        top: 35cqw;
        right: max(64px, calc(50% - 50% / var(--owl-items) - 26px));
    }

    .contact-us-layout {
        padding: 48px 0;
    }

    .contact-us-header-spacing {
        padding: 0 16px;
    }

    .contact-us-vector {
        position: absolute;
        left: 20%;
        top: 55%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: none;
        z-index: -1;
        pointer-events: none;
        opacity: 0.05;
    }

    .contact-searchable-filter .contact-searchable-trigger {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 40px;
        height: 40px;
        border: none;
        border-radius: 0 0 16px 0;
        background: #FFF;
        padding: 14px 16px;
        justify-content: space-between;
        gap: 8px;
        cursor: pointer;
    }

    .company-gradient-circle-right {
        width: 675px;
        height: 675px;
        aspect-ratio: 1/1;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -70%;
        top: 0;
        transform: translateY(-50%);
        border-radius: 675px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .company-gradient-circle-left-2 {
        width: 471px;
        height: 471px;
        aspect-ratio: 1/1;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -25%;
        top: 956px;
        transform: translateY(-50%);
        border-radius: 471px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .card-body {
        padding: 16px;
    }

    .career-company-box-wrapper {
        display: flex;
        width: 100%;
        padding: 0 16px;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 24px;
    }

    .img-box-about-us-row,
    .img-box-about-us-row-2 {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 16px;
        box-sizing: border-box;
        transform: none;
    }

    .img-box-about-us-row-2 {
        flex-direction: column-reverse;
    }

    .about-us-column-description-container-right,
    .about-us-column-description-container-left {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: -30px;
        padding: 24px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    .about-us-seperator {
        width: 100%;
        height: 1px;
        background: #D2D2D2;
    }

    .about-us-text-content-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
        align-self: stretch;
    }

    /* Landing Page */
    .img-box-landing-page-row,
    .img-box-landing-page-row-2 {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 48px 0;
        box-sizing: border-box;
        transform: none;
    }

    .img-box-landing-page-row-2 {
        flex-direction: column-reverse;
    }

    .img-box-landing-page-container,
    .img-box-landing-page-container-right {
        width: 86.7%;
        max-width: 100%;
        padding-left: 2.5%;
        left: 8%;
        right: 0%;
        margin-top: 0;
        height: clamp(260px, 38vw, 400px);
    }

    .column-description-container-landing-page-right,
    .column-description-container-landing-page-left {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: -30px;
        padding: 24px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    .img-box-landing-page-row .column-description-align,
    .img-box-landing-page-row-2 .column-description-align {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn-view-more-landing-page-left,
    .btn-view-more-landing-page-right {
        left: auto !important;
        right: auto !important;
        align-self: center;
        margin-top: -36px;
        bottom: auto;
    }

    .landing-page-hero-content-bottom {
        position: absolute;
        left: 0;
        bottom: 77px;
        display: flex;
        width: 100%;
        padding: 0 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs, 14px);
        flex-shrink: 0;
        z-index: 3;
        color: #fff;
        box-sizing: border-box;
    }


    .landing-page-hero-content-top {
        position: absolute;
        left: 0;
        top: 130px;
        display: flex;
        width: 100%;
        padding: 0 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        flex-shrink: 0;
        z-index: 3;
        color: #fff;
        box-sizing: border-box;
    }

    .landing-page-hero-btn-group {
        margin-top: 8px;
    }

    .landing-page-text-header-columns {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .landing-page-feature-list {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .landing-page-text-list-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        align-self: stretch;
        padding: 36px 0;
    }

    .container.media {
        max-width: none;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding-inline: 0;
    }

    .landing-page-video-section-wrapper,
    .landing-page-url-video-section-wrapper {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 36px 0;
    }

    .landing-page-video-section,
    .landing-page-url-video-section {
        display: flex;
        width: 100%;
        max-height: 100%;
        aspect-ratio: 58/103;
        justify-content: center;
        align-items: center;
        gap: 5.833px;
        align-self: stretch;
        background-color: #646464;
    }

    .landing-page-video-section>.service-section-decor--desktop-tablet {
        display: none;
    }

    .landing-page-video-section>.service-section-decor--mobile {
        display: block;
    }

    .landing-page-video-section-play-icon {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
    }

    .landing-page-contact-us-box-inside-wrapper {
        width: 100%;
        max-width: 100%;
    }

}

@media (max-width: 767px) and (min-width: 600px) {
    /* hero #tab_default_1 → ท้ายไฟล์ @media (max-width: 950px) */

    h1 {
        font-size: 36px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h2 {

        font-size: 30px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h3 {
        font-size: 24px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h4 {
        font-size: 20px;
        font-style: normal;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h5 {
        font-style: normal;
        font-size: 18px;
        line-height: 1.0;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h6 {
        font-style: normal;
        font-size: 12px;
        line-height: 1.0;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    p {
        font-size: 16px;
        font-style: normal;
        line-height: 24px;
    }

    .blue-h1 {
        font-size: 32px;

        line-height: 36px;
        font-weight: 800;
        color: #007FC6;
    }

    .h4-subbanner {
        font-size: 22px;

        line-height: 24px;
        font-weight: 700;
        color: #fff;
    }

    .body1 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .body1-bold {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .body2 {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.25;
    }

    .body3 {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.25;
    }

    .space-extra-large {
        height: 92px;
        margin-top: 0;
    }


    .space-large {
        margin-top: 81px;
    }

    .space-medium {
        margin-top: 64px;
    }


    .space-semi-medium {
        height: 52px;
        margin-top: 0;
    }

    .space-small-med {
        margin-top: 48px
    }

    .space-small-2 {
        margin-top: 32px;
    }

    .space-small {
        margin-top: 40px
    }

    .space-s-small {
        margin-top: 24px;
    }

    .space-xs {
        margin-top: 16px;
    }

    .space-xxs {
        height: 8px;
        margin-top: 0;
    }

    .search-result-content-margin {
        margin-top: -20px;
    }

    .blue-small-banner-header-margin {
        margin-left: 48px;
    }

    .horizontial-space {
        padding-left: 60px;
        padding-right: 60px;
    }

    .bottom-space-s {
        margin-bottom: 20px
    }

    .search-result-contact-btn-group {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .search-result-card-badge {
        position: absolute;
        top: 0;
        right: 0;
        width: clamp(91px,
                calc(100px - (1295px - 100vw) * 0.3),
                100px);
        height: clamp(91px,
                calc(100px - (1295px - 100vw) * 0.3),
                100px);
        pointer-events: none;
        z-index: 2;
    }


    .search-result-contact-btn {
        background-color: #fff;
        display: flex;
        font-size: 14px;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }

    .search-result-contact-btn-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }


    .search-batt-category-btn {
        background-color: #fff;
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 0;
        color: #80A700;
        border: 1px solid #80A700;
    }

    .service-section-decor {
        position: relative;
        overflow-x: hidden;
        overflow-x: clip;
        overflow-y: visible;
        isolation: isolate;
    }

    .tough-vector {
        height: auto;
        width: clamp(620px, calc(1023px - (1023px - 100vw) * 0.6), 823px);
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: clamp(910px, calc(1000px - (1023px - 100vw) * 0.52), 1000px);
        opacity: 0.04;
    }

    .tough-vector-2 {
        width: clamp(520px, calc(645px - (767px - 100vw) * 0.83), 745px);
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -260px;
        top: clamp(1560px, calc(1680px - (767px - 100vw) * 0.2), 1680px);
        opacity: 0.04;
    }

    .tough-vector-3 {
        width: 55%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: 0;
        bottom: -80px;
        opacity: 0.10;
    }

    .tough-vector-6 {
        width: 80%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        bottom: 240px;
        opacity: 0.10;
    }

    .tough-vector-7 {
        width: 70%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        bottom: 20px;
        opacity: 0.10;
    }

    .gradient-circle-left {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: 1100px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .gradient-circle-right {
        width: 1100px;
        height: 1100px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -579px;
        top: 1800px;
        border-radius: 1100px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .wrapper-404 {
        width: 100%;
        max-width: 100%;
        display: flex;
        height: auto;
        align-items: center;
        flex-direction: column-reverse;
        gap: 24px;
        justify-content: center;
    }

    .wrapper-404-end {
        margin-right: auto;
    }

    .wrapper-404-image img {
        aspect-ratio: 1/1;
        width: 345px;
        height: 345px;
        object-fit: cover;
    }

    .wrapper-404-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        flex-shrink: 0;
    }


    /* Homepage: banner carousel + hero bg-search (sync 1300–1585) */
    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-weight: 600;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .banner-wrapper,
    .interesting-banner-wrapper {
        margin: 0 auto;
        position: relative;
        --owl-items: 1.4;
    }

    .banner-wrapper .owl-stage-outer {
        overflow: hidden;
    }

    .interesting-banner-wrapper .owl-stage-outer {
        overflow: visible;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .banner-wrapper .owl-item .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item .h-w-imag-ban-slide {
        border-radius: 0 0 48px 0;
    }

    .banner-wrapper .banner-slide-card,
    .interesting-banner-wrapper .banner-slide-card {
        position: relative;
    }

    .banner-wrapper .owl-item.center .banner-slide-media,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media {
        display: block;
        position: relative;
        border-radius: 0 0 48px 0;
        overflow: hidden;
    }

    .banner-wrapper .owl-item.center .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after {
        opacity: 1;
    }

    .banner-wrapper .owl-item:not(.center) .banner-slide-btn,
    .interesting-banner-wrapper .owl-item:not(.center) .banner-slide-btn {
        display: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-btn {
        position: absolute;
        left: 50%;
        top: auto;
        bottom: 20px;
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(0);
        white-space: nowrap;
        flex-shrink: 0;
        width: max-content;
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
        text-decoration: none;
        pointer-events: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-12px);
        pointer-events: auto;
    }

    .banner-wrapper .owl-item:not(.center),
    .banner-wrapper .owl-item:not(.active),
    .interesting-banner-wrapper .owl-item:not(.center),
    .interesting-banner-wrapper .owl-item:not(.active),
    .h-w-imag-ban-slide {
        opacity: 1;
        transform-origin: center center;
        transform: scale(0.92);
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .banner-wrapper .owl-item.center .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item.center .h-w-imag-ban-slide {
        opacity: 1;
        transform: scale(1);
        transform-origin: center center;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .banner-wrapper .owl-prev,
    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-next {
        display: none;
    }




    .box-position-baner-hero {
        position: absolute;
        top: 10%;
        left: 15%;
    }

    #custom-indicators {
        margin-top: 24px;
        position: static;
        margin: 0 auto;
    }

    #custom-indicators .active {
        margin: 0;
        margin-right: 4px;
        width: 52px;
        height: 8px;
        background-color: #007FC6;
        transition: all 0.4s ease;
    }

    #custom-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators {
        position: static;
        margin: 24px auto 0;
        padding-left: 0;
        width: auto;
        list-style: none;
        text-align: center;
    }

    #interesting-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators .active {
        width: 52px;
        height: 8px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .btn-view-more {
        z-index: 2;
        bottom: 24px;
        display: inline-flex;
        height: 48px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #00B6F1;
        background: #007FC6;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .column-description-align {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-box-home-row,
    .img-box-home-row-2 {
        flex-direction: column;
        align-items: stretch;
    }

    .img-box-home-tough {
        position: absolute;
        bottom: 5%;
        left: 4%;
        width: clamp(300px, 18vw, 350px);
        /* ปรับตามดีไซน์ */
        height: auto;
        pointer-events: none;
        z-index: 2;
        object-fit: contain;
        object-position: left bottom;
    }


    /* แถวที่ 2 ใน blade: ข้อความมาก่อนรูปใน DOM → reverse ให้รูปอยู่บน */
    .img-box-home-row:has(.img-box-home-container-right) {
        display: flex;
        flex-direction: column-reverse;
    }

    .img-box-home-row>.col-md-6,
    .img-box-home-row-2>.col-md-6 {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        float: none;
        overflow: visible;
    }

    .column-description-container-right,
    .column-description-container-left {
        width: 100%;
        max-width: 100;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 20px 32px;
        box-sizing: border-box;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.90);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .img-box-home-container,
    .img-box-home-container-right {
        position: relative;
        overflow: hidden;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
        width: 89%;
        max-width: 100%;
        left: 2%;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        height: clamp(260px, 52vw, 380px);
    }

    .img-box-home-container .img-box-home,
    .img-box-home-container-right .img-box-home {
        position: absolute;
        top: 0;
        left: -12%;
        width: 150%;
        height: 100%;
        margin: 0;
        transform: skewX(10deg);
        /* คู่กับ container */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }


    .btn-view-more::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .btn-view-more:hover::after {
        opacity: 1;
    }

    .btn-view-more-left,
    .btn-view-more-right {
        left: auto !important;
        right: auto !important;
        top: -15px;
        align-self: center;
    }

    .btn-view-more-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        padding: 0 24px;
        gap: 8px;
        z-index: 3;
        border-radius: 0 0 16px 0;
        border: 1px solid var(--Primary, #007FC6);
        background: #FFF;
        color: #007FC6;
        text-decoration: none;
        transition: background 0.25s ease, color 0.25s ease;
    }

    .btn-view-more-2:hover {
        background: #007FC6;
        color: #fff !important;
    }

    .btn-view-more-2:hover img {
        filter: brightness(0) invert(1);
    }


    .service-item-container {
        position: relative;
        display: flex;
        min-height: 100px;
        flex-direction: row;
        padding-left: 40px;
        padding-right: 40px;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 32px 0px;
        cursor: pointer;
    }

    .service-item-container::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -8;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .service-item-container:hover::after {
        opacity: 1;
    }

    .service-item-inner {
        transform: skewX(18deg);
    }

    .service-item-inner:has(.service-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .service-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88px;
        width: 88px;
        position: absolute;
        top: 0;
        transform: translate(-80%, -50%);
        z-index: 2;
    }

    .service-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .service-item-container:hover .service-item-icon img {
        transform: translateY(-10%);
    }

    .service-item-title {
        margin-left: 24px;
        text-align: left;
        color: #fff;
        width: 100%;
    }

    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
    }

    .bg-search-batt {
        position: relative;
        overflow: hidden;
        z-index: 20;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 720px;
        margin-top: -128px;
        padding-top: 128px;
        box-sizing: border-box;
        /* clip ชั้นที่ 1: ตัดขอบล่าง hero (คู่กับ shear-clipper 60px) */
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 60px),
                0 100%);
    }

    .home-hero-shared-media .bg-search-batt {
        clip-path: polygon(0 0,
                100% 0,
                100% calc(100% - 60px),
                0 100%);
    }

    .section-white--shear-top {
        margin-top: 0;
        z-index: 0;
    }

    .section-white__shear-clipper {
        /* clip ชั้นที่ 2: ตัด decor เท่านั้น */
        clip-path: polygon(0 0, 100% 96px, 100% 100%, 36px 100%);
    }

    .bg-search-batt__vector {
        width: clamp(500px, 45vw, 1040px);
    }

    .bg-search-batt__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 4;
        pointer-events: none;
        display: block;
    }

    .bg-search-batt__filter {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(0, 136, 170);
        /* ปรับความเข้ม */
        mix-blend-mode: hue;
    }

    .bg-search-batt__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 1313px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .bg-search-batt__content .box-search h1,
    .bg-search-batt__content .sub-title-search {
        position: relative;
        z-index: 2;
    }

    .sub-banner-container {
        height: auto;
        overflow: hidden;
        min-height: unset;
        position: relative;
    }

    .sub-banner-container>img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center bottom;
        min-height: 0;
        z-index: 0;
    }

    .sub-banner-content {
        position: relative;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        padding-top: clamp(24px, 8vw, 95px);
        padding-bottom: clamp(32px, 6vw, 64px);
        padding-inline: clamp(16px, 5vw, 64px);
        box-sizing: border-box;
        z-index: 1;
    }

    .a-text-size {
        margin-left: 20px;
    }

    .image-gsbattery {
        margin-top: 30px;
        max-width: 100%;
        max-height: 535px;
    }

    .career-bg {
        height: 360px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 20px;
    }

    .box-radis-des-sales::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #005BAA;
        position: absolute;
        margin-top: 7px;
    }

    .box-radis-des-sales {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #00B6F1;
        position: absolute;
        margin-top: 7px;
    }

    .ma-bottom-20 {
        margin-bottom: 20px;
    }

    .box-radis-sale {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-sale::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #005BAA;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .box-radis-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-batt::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #00B6F1;
        position: absolute;
        left: -24px;
        margin-top: 17px;
    }

    .display-destop {
        display: none;
    }

    .display-mobile {
        display: block;
    }

    .line-abt-verticle2 {
        background-color: #005BAA;
        width: 67%;
        height: 4px;
        position: absolute;
        left: 12px;
        top: 60px;
    }

    .box-chage-lang {
        margin-top: -22px;
        margin-right: 20px;
    }

    .nav-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        display: -webkit-box;
        display: -moz-box;
    }

    .nav-tabs>li {
        float: none;
    }

    .bg-color-footer {
        height: 20px;
        background-color: #005BAA;
    }

    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .pad-left {
        padding-left: 20px;
    }

    .bg-footer {
        background-color: #ffffff;
        width: 100%;
        height: 393px;
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .box-news-activities {
        margin: 10px 0;
        text-align: center;
    }

    .box-text-activities {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .border-bottom-new-act {
        width: 155px;
        height: 4px;
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
    }

    .news-category-container {
        display: inline-flex;
        height: 40px;
        min-width: 100px;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: rgba(166, 166, 166, 0.10);
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        white-space: nowrap;
        transition: none;
    }

    .news-category-container:hover {
        border: 1px solid var(--Primary, #007FC6);
        background: #D9F2FF;
    }

    .sub-new-des {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin: 10px 0;
    }

    .img-box-home {
        width: 100%;
        background-color: #f1f1f1;
        height: 360px;
        margin: 20px 0px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .batt-long-time {
        margin: 20px 0px;
    }

    .tabbable-line>.nav-tabs>li {
        margin: 0 20px;
    }

    .text-colo-link {
        color: #005BAA;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 531px;
    }

    .img-box-fing-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 1002px;
    }

    /* prduct detailpage */
    .text-breadcrumb {
        color: #282828;
    }


    .bg-pro-detail {
        background-color: #E9E9E9;
        width: 100%;
        height: 540px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        /* หรือ 32px — ระยะขอบใน */
        box-sizing: border-box;
    }


    .product-header-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        z-index: 2;
    }


    .product-banner-header-margin {
        margin-top: 0px;
        margin-left: 16px;
    }

    .product-banner-text-h1 {
        font-size: 32px;
        margin-top: 0px;
        margin-bottom: 0px;
    }


    .img-product-batt-detail {
        width: auto;
        height: auto;
        max-width: 72%;
        /* ปรับได้ เช่น 65%–80% */
        max-height: 85%;
        /* ไม่ล้นความสูงกล่อง */
        object-fit: contain;
        display: block;
    }

    .bg-new-product {
        height: 45px;
        width: 124px;
    }

    .btn-border-w {
        background-color: #FFFFFF;
        border: 1px solid #D3D3D3;
        border-radius: 25px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 209px;
        height: 50px;
        font-weight: 600px;
        font-size: 17px;

    }

    .box-view-big-img {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .text-type-pro-detail {
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
        color: #00B6F1;
    }

    .text-name-pro-detail {

        font-size: 32px;
        line-height: normal;
        font-weight: 700;
        color: #00B6F1;
    }

    .box-data-pro-detail {
        padding-left: 16px;
        padding-right: 16px;
    }

    .text-sub-pro-detail {

        font-size: 19px;
        line-height: 25px;
        font-weight: 500;
        color: #000000;
    }

    .text-slogrand-pro-detail {

        font-size: 27px;
        line-height: 55px;
        font-weight: 500;
        color: #000000;
    }

    .btn-circle-product {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        width: 41px;
        height: 41px;
    }

    .text-icon-pro-detail {

        font-size: 17px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .margin-bottom-img {
        margin-bottom: 5px;
    }

    .text-data-contant {

        font-size: 27px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .text-sub-detail {

        font-size: 16px;
        font-style: italic;
        line-height: 23px;
        padding-left: 50px;
    }

    .text-h-pro {

        font-size: 11px;
        font-style: italic;
        line-height: 23px;
        font-weight: 600;
        color: #000000;
    }

    .text--sub-h-pro {

        font-size: 22px;
        font-style: italic;
        line-height: 17px;
        font-weight: 600;
        color: #000000;
        margin-top: 10px;
    }

    .green-box {
        background-color: #C7EB02;
        height: 42px;
        width: 3px;
        position: absolute;
        margin-top: 5px;
        left: 2px;
    }

    .padd-bottom-btn {
        padding-bottom: 20px;
    }

    .new-box-tip {
        padding-top: 29%;
    }

    .title-news-tip {
        font-size: 43px;

        font-weight: 500;
        line-height: 55px;
        color: #000;
    }

    .sub-new-detail {
        font-size: 23px;

        font-weight: 500;
        line-height: 32px;
        color: #005BAA;
        padding-right: 35%;
    }

    .img-icon-prodetail {
        width: 50px;
        height: auto;
    }

    .img-icon-prodetail-list {
        width: 43px;
        height: 43px;
    }

    /* end productdetail page */
    .select-box select {
        border-radius: 4px;
        background-color: #ffffff;
        border: 2px solid #005BAA;
        padding: 4px 10px;
        width: 96px;
    }

    .select-box {
        margin-top: 20px;
        padding-left: 20px;
    }

    .select-box select:active,
    select:hover {
        outline: none;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .border-footer {
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .img-footer-logo {
        height: 64px;
    }

    .padding-top-footer {
        padding-top: 50px;
    }

    .contact-text-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .text-detail-footer {

        font-size: 14px;
        line-height: 1.5;
        color: #231F20;
        padding-top: 8px;
    }

    .text-detail-reserved {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .text-address-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
    }

    .img-icon-footer {
        width: 35px;
        height: 35px;
        margin-left: 5px;
        margin-top: 20px;
    }

    .text-link-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .text-link-footer-sub {

        font-size: 14px;
        line-height: 24px;
        color: #231F20;
    }

    .tab-panel-batt-footer {
        background-color: #fff !important;
    }

    .tab-footer {
        border-top: 1px solid #9E9E9E;
        padding-top: 24px;
        padding-bottom: 8px;
    }

    .tab-footer:first-child {
        border-top: none;
    }

    .tab-footer:not(:has(~ .tab-footer)) {
        border-bottom: 1px solid #9E9E9E;
    }



    .short-full-footer {
        color: #231F20;
        margin-top: -17px;
        padding-right: 10px;
    }

    /* endfooter */
    .margin-space-banner {
        margin-top: 10px;
    }

    .btn-main-border {
        background-color: #fff;
        width: 220px;
        height: 50px;
        border: 2px solid #005BAA;

        font-size: 16px;
        color: #005BAA;
        border-radius: 4px;
        margin-top: 10px;
    }

    .btn-main-border:hover {
        box-shadow: 0px 3px 6px #00B6F1;
        color: #000000;
    }

    .btn-main-border:active {
        background: rgba(0, 51, 161, 1);
        background: -moz-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: -webkit-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: -o-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: -ms-linear-gradient(left, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        background: linear-gradient(to right, rgba(0, 51, 161, 1) 0%, rgba(0, 161, 224, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
        border-radius: 32px;
        width: 220px;
        height: 50px;
        border: none;

        font-size: 16px;
        color: #000000;
        border-radius: 32px;
        margin-top: 10px;
        box-shadow: 0px 3px 6px #00B6F1;
    }

    /* Search all page  */
    .stylish-input-group .input-group-addon {
        background: white !important;
    }

    .stylish-input-group .form-control {
        border-right: 0;
        box-shadow: 0 0 0;
        border-color: #ccc;
    }

    .stylish-input-group button {
        border: 0;
        background: transparent;
    }

    .mdl-textfield {
        position: relative;
        font-size: 16px;
        display: inline-block;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 20px 0;
    }

    .btn-search {
        position: absolute;
        right: 20px;
        top: 25px;
    }

    .text-search-margin {
        margin-bottom: 20px;
    }

    .text-header-search {
        color: #04163D;
        margin-bottom: 5px;
    }

    .btn-search {
        position: absolute;
        right: 20px;
        top: 25px;
    }

    .mdl-textfield--floating-label {

        font-size: 14px;
    }

    #search input[type="text"]:focus {
        width: 250px;
    }

    .text-cancel-bar {
        position: absolute;
        margin-top: -33px;
        right: 3%;
        z-index: -999;
        font-size: 12px !important;

    }

    .text-link-suport {

        font-size: 16px;
        line-height: 18px;
    }


    .collapsing ul li a,
    .in ul li a {
        color: #555 !important;
    }

    .collapsing ul li a:hover,
    .in ul li a:hover {
        color: #f1f1f1 !important;
    }

    .navbar-center {
        position: absolute;
        left: 30%;
        right: 20%;
    }

    .invisible-mobile {
        display: none !important;
    }

    .visible-mobile {
        display: block !important;
    }

    .visible-slide-baner {
        display: block;
    }

    .visible-component-desktop {
        display: block;
    }

    .visible-component-mobile {
        display: none;
    }

    .search-result-card-excerpt--full {
        display: none;
    }

    .search-result-card-excerpt--short {
        display: block;
    }

    .navbar-brand {
        float: right;
    }

    .menu-text-mobile {
        border-bottom: 1px solid #9E9E9E;
        font-size: 14px;

        margin-top: 5px;
    }

    .margin-top-menu-mobile {
        margin-top: 20px;
    }

    .h-mobile {
        margin-top: 20px;
    }

    .margin-top-mobile-Procategory {
        margin-top: 40px;
    }

    /* advance search  */
    .cd-main-header,
    .cd-main-content {
        position: relative;
        transition: transform 0.3s;
    }

    .cd-main-header.nav-is-visible,
    .cd-main-content.nav-is-visible {
        transform: translateX(-260px);
    }

    .flipkart-navbar-input {
        padding: 12px 16px;
        border-radius: 2px 0 0 2px;
        border: 0 none;
        outline: 0 none;
        font-size: 15px;

    }

    .flipkart-navbar-button {
        background-color: #999;
        border: 1px solid #999;
        border-radius: 0 2px 2px 0;
        color: #565656;
        padding: 10px 0;
        height: 44.5px;
        cursor: pointer;
    }

    .box-size {
        height: 443px !important;
    }

    .img-box {
        width: 200px;
        height: 100px;
        margin-right: 41%;
    }

    .navbar-center {
        position: absolute;
        left: 30%;
        right: 20%;
    }

    .main-menu-header {
        color: #ffffff !important;
        font-size: 15px;
        padding: 0 20px 0 20px;

        cursor: pointer;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 10px;
        left: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%), #FFF;
        overflow-x: hidden;
        transition: 0.5s;
        margin-top: 70px;
    }

    .sidenav a {
        padding: 12px 16px;
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        display: block;
        transition: 0.3s;

        display: flex;
        justify-content: space-between;
    }

    .sidenav a:hover,
    .sidenav a:focus {
        color: #00B6F1;
    }

    .sidenav .chevron-down-icon {
        display: inline-block;
        transition: transform 0.3s ease;
        transform: rotate(0deg);
    }

    .sidenav a.menu-text-mobile[aria-expanded="true"] {
        color: #00B6F1;
    }

    /* เปิดแล้วเท่านั้น */
    .sidenav a.menu-text-mobile[aria-expanded="true"] .chevron-down-icon {
        transform: rotate(180deg);
    }

    .sidenav .closebtn {

        position: absolute;
        top: 0;
        left: -64px;
        font-size: 36px;
        margin-left: 50px;
    }

    .select-list-link-mobile {
        position: relative;
        margin-left: 275px;
        margin-top: -34px;
        color: white;
    }

    .img-logo {
        height: 31px;
        margin-top: 6px;
        left: 50%;
        right: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
    }

    .img-logo-app {
        height: 31px;
        margin-top: 6px;
        left: 50%;
        right: 50%;
        transform: translate(-50%, -155%);
        position: absolute;
    }

    .navbar-default {
        height: 70px;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: white;
        margin-top: 6px;
    }

    .navbar-toggle .icon-bar {
        width: 24px;
    }

    .navbar-toggle {
        padding: 0px 0px;
        margin-right: 0px;
        margin-top: 8px;
    }

    homepage .img-banner-mobile {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 1063px;
    }

    .img-icon-type {
        height: 70px;
    }

    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-style: italic;
        font-weight: 600;
    }

    .date-news {
        color: #999;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .padding-left-box-new {
        padding-left: 15px;
        padding-right: 15px;
    }

    .title-news {

        font-size: 30px;
        line-height: 38px;
        margin-top: 20px;
        font-weight: 600;
        height: 64px;
        overflow: hidden;
    }

    .tag-news-type {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .btn-tag-tip {
        background-color: #00B6F1;
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }



    .btn-tag {
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }

    .position-btn-typ-batt {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: 0;
    }

    .text-detail-type-battery {

        font-size: 16px;
        line-height: 19px;
        color: #fff;
        padding-top: 0px;
        padding-left: 33px;
        padding-right: 33px;
        font-style: italic;
    }

    .text-mobile-sub {

        font-size: 17px;
        line-height: 22px;
        color: #000000;
        font-style: italic;
        text-align: center;
        font-weight: 500;
    }

    .h-w-imag-ban-slide {
        width: 100%;
        max-width: 100%;
    }

    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
        text-align: center;
    }

    .bg-search-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 920px;
    }

    .sub-title-search {

        font-size: 16px;
        line-height: 1.5;
        color: #fff;
        text-align: center;
        margin-bottom: 32px;
    }

    .title-news {

        font-size: 20px;
        line-height: 1.25;
        font-weight: 600;
    }

    .tag-news-type {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .date-news {
        color: #999;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .featured-news-card {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 24px;
    }

    .featured-news-text-align {
        flex: 1;
        padding-left: 0;
    }



    .other-news-text-align {
        flex: 1;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .other-news-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 500;
        font-style: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }


    .img-box-news-main {
        width: 100%;
        height: 343px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .news-section-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .description-news {
        font-size: 16px;
        font-style: normal;
        line-height: 1.25;
        font-weight: 400;
        color: #464646;
        margin-top: 16px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        margin-top: 31px;
        margin-inline: auto;
        max-width: min(1150px, calc(100% - 32px));
        text-align: center;
    }

    .select-search select:active,
    select:hover {
        outline: none;
    }

    .select-search select:after,
    select:hover {
        outline: none;
    }

    .text-title-app {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-content-app {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-sub-blue {
        color: #00B6F1 !important;
    }

    .app-box {
        margin-top: 25%;
    }

    .img-box-type-battery {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 803px;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .box-search-batt {
        margin-top: 139px;
        padding-left: 131px;
    }

    .title-search-batt {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
    }

    .text-content-batt {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
    }

    .img-box-news {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .img-box-news-main {
        width: 100%;
        height: 423px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .text-name-hero {

        font-size: 38px;
        line-height: 33px;
        color: #005BAA;
        font-style: italic;
        font-weight: bolder;
        padding-left: 20px;
    }

    .text-sub-hero {

        font-size: 31px;
        line-height: 55px;
        color: #005BAA;
        font-style: italic;
        font-weight: 600;
    }

    .box-position-baner-hero {
        position: absolute;
        top: 24%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .text-slo-grand {

        font-size: 17px;
        line-height: 18px;
        color: #000000;
        font-style: italic;
        font-weight: 500;
        width: 271px;
        text-align: center;
    }

    /* end homepage */
    /* product page */
    .img-product-pass-batt {
        background-position: center;
        background-repeat: no-repeat;
        height: 921px;
        width: 100%;
        background-size: cover;
    }

    .text-batt-type-one {

        font-style: italic;
        color: #C7EB02;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 41px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 20px;
        line-height: 32px;
    }

    .text-batt-type-two {

        font-style: italic;
        color: #FF9300;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 29px;
        line-height: 32px;
    }

    .text-batt-type-three {

        font-style: italic;
        color: #00B6F1;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 29px;
        line-height: 32px;
    }

    .position-type-product {
        position: absolute;
        top: 130px;
    }

    .position-type-product-right {
        position: absolute;
        top: 130px;
        right: 50px;
    }

    .box-bg-product {
        background-color: #fff;
        height: auto;
        border-radius: 0 0 27.349px 0;
        box-shadow: 0 0 34.186px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(13.674419403076172px);
        overflow: hidden;
    }

    .img-product-batt-wrap {
        width: 100%;
        aspect-ratio: 3 / 2;
        min-height: 201px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E9E9E9;
        overflow: hidden;
        position: relative;
    }

    .img-product-batt {
        width: 72%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform .3s ease;
        transform-origin: center center;
    }

    .box-bg-product:hover .img-product-batt {
        transform: scale(1.12);
    }

    .product-batt-name {

        color: #000000;
        text-align: left;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 700;
    }

    .type-batt-name {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
    }

    .batt-info-seperator {
        height: 1px;
        opacity: 0.5;
        background: #D2D2DD;
    }

    .batt-spec-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-spec-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-terminal-container {
        display: inline-flex;
        width: auto;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid #D2D2D2;
        background: #EBF8FF;
        margin-bottom: 8px;
    }

    .tag-batt-name {

        color: #005BAA;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        height: 124px;
        overflow: hidden;
    }

    .text-barnd {
        cursor: pointer;
    }

    .padding-box-pro-batt {
        padding: 24px 24px 24px 24px;
    }

    .btn-circle {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        position: absolute;
        bottom: 239px;
        right: 29px;
    }

    .banner-box-pro-car-type {
        margin-top: 10px;
        height: 469px;
    }

    .img-product-batt-banner {
        width: 100%;
        height: 100%;
    }

    .MultiCarousel {
        float: left;
        overflow: hidden;
        padding: 15px;
        width: 100%;
        position: relative;
    }

    .MultiCarousel .MultiCarousel-inner {
        transition: 1s ease all;
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: center;
        padding: 10px;
        margin: 10px;
        background: #fff;
        color: #000;
    }

    .activeBrand {
        border-bottom: 4px solid #005BAA;
    }

    .MultiCarousel .leftLst,
    .MultiCarousel .rightLst {
        position: absolute;
        border-radius: 50%;
        top: calc(50% - 16px);
    }

    .MultiCarousel .leftLst {
        left: 0;
    }

    .MultiCarousel .rightLst {
        right: 0;
    }

    .MultiCarousel .leftLst.over,
    .MultiCarousel .rightLst.over {
        pointer-events: none;
        background: #ccc;
    }


    /* Homepage hero search tabs */

    .bg-search-batt__content .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
        width: 100%;
        flex: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
        align-self: stretch;
    }



    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:focus,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none;
        color: #fff;

        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-decoration: none;
        cursor: pointer;
    }

    .bg-search-batt__content .btn-wrapper-search {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        width: 100%;
        gap: 16px;
    }

    .bg-search-batt__content .tabbable-panel {
        justify-content: stretch;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs {
        justify-content: stretch;
    }

    .bg-search-batt__content .nav-tabs-container-item {
        max-width: none;
        min-width: 0;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:focus,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        padding: 8px 12px;
    }

    /*End product page */
    .col-xs-12 {
        position: relative;
        min-height: 1px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .img-close-app {
        width: 21px;
        margin-top: 13px;
    }

    .breadcrumb {
        padding: 8px 10px;
    }

    .navbar-toggle {
        padding: 0px 0px;
        margin-right: 0px;
        margin-top: 8px;
    }

    /* about us page  */
    .abt-img {
        width: 100%;
        height: 378px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .text-abt {

        color: #646464;
        font-size: 24px;
        line-height: 55px;
        font-weight: 500;
    }

    .box-content-abt {}

    .text-name-building {

        color: #000;
        font-size: 32px;
        line-height: 29px;
        font-weight: 500;
    }

    .breadcrumb>.active {
        font-weight: 600;
    }

    .line-abt {
        background-color: #005BAA;
        width: 4px;
        height: 661px;
        position: absolute;
        margin-left: 5px;
        margin-top: -11px;
    }

    .line-abt-2 {
        background-color: #005BAA;
        width: 4px;
        height: 560px;
        position: absolute;
        margin-left: 5px;
        margin-top: -11px;
    }

    /* .about_line {
            position: absolute; 
          
            height: 255px;
            width: 5px;
        } */
    .text-year-abt {

        color: #005BAA;
        font-size: 30px;
        line-height: 45px;
        font-weight: 500;
    }

    .text-h-abt {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
    }

    .text-h-abt-detail {

        color: #000000;
        font-size: 14px;
        line-height: 24px;
    }

    .mar-top-box-history {
        margin-top: 50px;
    }

    .padding-top-abt {
        margin-top: 26px;
    }

    .data-abt-h-text {

        color: #005BAA;
        font-size: 35px;
        line-height: 40px;
        text-align: left;
        font-weight: 500;
    }

    .padding-left {
        padding-left: 0px;
        padding-right: 0px;
    }

    .text-job-position {
        color: #FFFFFF;
        font-size: 16px;
        line-height: 30px;

    }

    .short-full {
        color: #fff;
        font-size: 14px;
        margin-top: 10px;
    }

    .sub-data-abt-h-text {

        color: #646464;
        font-size: 24px;
        line-height: 1.5;
        text-align: left;
        font-weight: 500;
    }

    .margin-top-abt {
        margin-top: 60px;
    }

    .text-detail-abt-h {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
        text-align: justify;
    }

    .text-h-abt-gs {

        color: #000000;
        font-size: 30px;
        line-height: 55px;
        margin-bottom: 20px;
    }

    /* end about us page  */
    /* find batt type page  */
    .position-type {
        position: absolute;
        top: 151px;
        left: 20px;
    }

    .text-batt-name {

        font-size: 30px;
        line-height: 55px;
        color: #00B6F1;
        font-style: italic;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .batt-type {

        font-size: 39px;
        line-height: 33px;
        color: #005BAA;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .detail-title {

        font-size: 34px;
        line-height: 18px;
        color: #fff;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .sub-batt-type {

        font-size: 17px;
        line-height: 34px;
        color: #fff;
        font-style: italic;
        margin-bottom: 20px;
    }

    /* end find batt type page  */
    /*  start Contact page  */
    .input-mar-padding {
        padding-top: 30px;
    }

    .text-contact-header {

        color: #000000;
        font-size: 22px;
        line-height: 43px;
        font-weight: 500;
        text-align: center;
        font-style: italic;
    }

    .text-contact-h-main {

        color: #005BAA;
        font-size: 35px;
        line-height: 40px;
        font-weight: 500;
        margin-top: 50px;
        font-style: italic;
    }

    .request-select {
        color: #F00 !important;
    }

    .gs-1380-sub-banner-bg {
        width: 100%;
        height: 100%;
        min-height: 886px;
        object-fit: cover;
        object-position: bottom;
        display: block;
    }

    /* End Contact page  */
    .bg-footer-mobile {
        width: 100%;
        height: 116px;
        position: absolute;
        bottom: 0px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .sub-banner-container.contact {
        max-height: 399px;
    }

}

@media (max-width: 750px) {

    .news-list-display-desktop-tablet {
        display: none;
    }

    .news-list-display-mobile {
        display: block;
    }

    .news-list-display-mobile.desc {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin-bottom: 16px;
    }


    .news-list-banner-image {
        position: relative;
        width: 100%;
        max-width: 472px;
        aspect-ratio: 1/1;
        background-color: #000;
        overflow: hidden;
    }

    .news-list-banner-text-wrapper {
        display: flex;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    .news-list-banner-carousel-wrapper .owl-next {
        position: absolute;
        top: 40cqw;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 52px;
        height: 52px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
        right: calc((100% - min(100%, 472px)) / 3 + clamp(4px, 2.4vw, 6px));
    }

    .news-list-banner-carousel-wrapper .owl-prev {
        position: absolute;
        top: 40cqw;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 52px;
        height: 52px;
        border-radius: 0 0 0 16px;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
        left: calc((100% - min(100%, 472px)) / 3 + clamp(4px, 2.4vw, 6px));
    }

    .news-list-banner-text-container {
        display: flex;
        position: relative;
        z-index: 2;
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        margin-left: auto;
        margin-right: auto;
        height: 100%;
        min-height: 242px;
        padding: 16px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 16px;
        border-radius: 0 0 24px 0;
        background: rgba(255, 255, 255, 0.75);
        box-shadow: none;
        backdrop-filter: blur(12px);
    }
}

@media (max-width: 700px) {
    .warranty-invisible-mobile {
        display: none !important;
    }

    .warranty-visible-mobile {
        display: block !important;
    }

    .warranty-sub-banner-text-wrapper {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 16px;
        padding-top: 0px;
        top: -300px;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }

    .warranty-sub-banner-header-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .warranty-sub-banner-header {
        position: relative;
        align-self: stretch;
        display: inline-block;
        font-size: 40px;
        font-style: normal;
        font-weight: 900;
        line-height: 140%;
        filter: drop-shadow(0 3px 40px rgba(79, 222, 255, 0.60));
    }

    .warranty-sub-banner-header-stroke,
    .warranty-sub-banner-header-fill {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .warranty-sub-banner-header-stroke {
        position: absolute;
        top: 0;
        left: 0;
        color: transparent;
        -webkit-text-stroke-width: 6px;
        -webkit-text-stroke-color: #007FC6;
        z-index: 1;
    }

    .warranty-sub-banner-header-fill {
        position: relative;
        background: linear-gradient(180deg, #AAA 0%, #FFF 46.12%, #AAA 92.86%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 2;
    }

    .warranty-sub-banner-sub-header {
        align-self: stretch;
        color: var(--Accent, #B4EB00);
    }

    .warranty-sub-banner-benefits-header {
        align-self: stretch;
        color: #FFF;
    }

    .warranty-sub-banner-benefits-item-wrapper-main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }

    .warranty-sub-banner-benefits-item-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .warranty-sub-banner-benefits-item-wrapper img {
        width: 36px;
        height: 36px;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

}


/* moblie */

@media (max-width: 599px) {
    h1 {
        font-size: 32px;

        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h2 {

        font-size: 24px;
        line-height: 1.5;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h3 {

        font-size: 24px;
        line-height: 1.5;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h4 {

        font-size: 18px;
        line-height: 27px;
        font-weight: 700;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h5 {

        font-size: 18px;
        line-height: 19px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    h6 {

        font-size: 12px;
        line-height: 16px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .a-text-size {
        margin-left: 20px;
    }

    p {

        font-size: 16px;
        line-height: 24px;
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .blue-h1 {
        font-size: 32px;

        line-height: 36px;
        font-weight: 800;
        color: #007FC6;
    }

    .h1-banner {
        font-size: 32px;
        margin-bottom: 0px;
        font-weight: 700;
        line-height: 36px;
        color: #fff;
    }

    .h4-subbanner {
        font-size: 18px;

        line-height: 24px;
        font-weight: 700;
        color: #fff;
    }

    .body1 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .body1-bold {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .body2 {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.25;
    }

    .body3 {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.25;
    }

    .space-extra-large {
        height: 92px;
        margin-top: 0;
    }

    .space-large {
        margin-top: 64px;
    }

    .space-medium {
        margin-top: 48px;
    }

    .space-semi-medium {
        height: 32px;
        margin-top: 0;
    }

    .space-small-med {
        margin-top: 24px
    }

    .space-small-2 {
        margin-top: 32px;
    }

    .space-small {
        margin-top: 40px
    }

    .space-s-small {
        margin-top: 24px;
    }

    .space-xs {
        margin-top: 16px;
    }

    .space-xxs {
        height: 8px;
        margin-top: 0;
    }


    .search-result-content-margin {
        margin-top: -20px;
    }



    .bottom-space-s {
        margin-bottom: 20px
    }

    .search-result-contact-btn-group {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .search-result-card-badge {
        position: absolute;
        top: 0;
        right: 0;
        width: clamp(91px,
                calc(100px - (1295px - 100vw) * 0.3),
                100px);
        height: clamp(91px,
                calc(100px - (1295px - 100vw) * 0.3),
                100px);
        pointer-events: none;
        z-index: 2;
    }


    .search-result-contact-btn {
        background-color: #fff;
        display: flex;
        font-size: 14px;
        height: 40px;
        padding: 0 24px 0 16px;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #007FC6;
    }

    .search-result-contact-btn-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }


    .search-batt-category-btn {
        background-color: #fff;
        display: flex;
        min-height: 30px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 0;
        color: #80A700;
        border: 1px solid #80A700;
    }

    /* 
    .service-section-decor--mobile:not(.pdp-related-section) {
        position: relative;
        height: 0;
        min-height: 0;
    }

    .pdp-related-section.service-section-decor--mobile {
        height: auto;
        min-height: 0;
    } */

    .service-section-decor {
        position: relative;
        overflow-x: hidden;
        overflow-x: clip;
        overflow-y: visible;
        isolation: isolate;
    }

    .tough-vector {
        height: auto;
        width: clamp(620px, calc(1023px - (1023px - 100vw) * 0.6), 823px);
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -20px;
        top: clamp(910px, calc(1000px - (1023px - 100vw) * 0.52), 1000px);
        opacity: 0.04;
    }

    .tough-vector-2 {
        width: clamp(520px, calc(600px - (599px - 100vw) * 0.83), 600px);
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: -260px;
        top: 1450px;
        opacity: 0.04;
        overflow-x: hidden;
    }


    .tough-vector-3 {
        width: 55%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        right: 0;
        bottom: -80px;
        opacity: 0.10;
    }

    .tough-vector-6 {
        width: 125%;
        height: auto;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: -4px;
        bottom: 175px;
        opacity: 0.10;
    }

    .tough-vector-7 {
        width: 90%;
        height: auto;
        pointer-events: none;
        z-index: 0;
        position: absolute;
        left: 3px;
        bottom: 34px;
        opacity: 0.10;
    }

    .gradient-circle-left {
        width: 607px;
        height: 607px;
        pointer-events: none;
        z-index: -1;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        top: 150px;
        border-radius: 607px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }

    .gradient-circle-right {
        width: 607px;
        height: 607px;
        pointer-events: none;
        overflow-x: hidden;
        z-index: 0;
        position: absolute;
        right: -303px;
        top: 2200px;
        border-radius: 607px;
        background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(181, 234, 252, 1) 0%,
    rgba(181, 234, 252, 0) 87.5%
);
    }


    .wrapper-404 {
        width: 100%;
        max-width: 100%;
        display: flex;
        height: auto;
        align-items: center;
        flex-direction: column-reverse;
        gap: 16px;
        justify-content: center;
    }

    .wrapper-404-end {
        margin-right: auto;
    }

    .wrapper-404-image img {
        aspect-ratio: 1/1;
        width: 240px;
        height: 240px;
        object-fit: cover;
    }

    .wrapper-404-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
    }

    .btn-view-more {
        z-index: 2;
        bottom: 24px;
        display: inline-flex;
        height: 48px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #00B6F1;
        background: #007FC6;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }


    /* Homepage: banner carousel + hero bg-search (sync 1300–1585) */
    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-weight: 600;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .banner-wrapper,
    .interesting-banner-wrapper {
        margin: 0 auto;
        --owl-items: 1;
    }

    .banner-wrapper .owl-stage-outer {
        overflow: hidden;
    }

    .interesting-banner-wrapper .owl-stage-outer {
        overflow: visible;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .banner-wrapper .owl-item .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item .h-w-imag-ban-slide {
        border-radius: 0 0 20px 0;
    }

    .banner-wrapper .banner-slide-card,
    .interesting-banner-wrapper .banner-slide-card {
        position: relative;
    }

    .banner-wrapper .owl-item.center .banner-slide-media,
    .interesting-banner-wrapper .owl-item.center .banner-slide-media {
        display: block;
        position: relative;
        border-radius: 0 0 20px 0;
        overflow: hidden;
    }

    .interesting-banner-wrapper .owl-item.center .banner-slide-media::after {
        display: none;
    }

    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-media::after {
        display: none;
    }

    .banner-wrapper .owl-item:not(.center) .banner-slide-btn,
    .interesting-banner-wrapper .owl-item:not(.center) .banner-slide-btn {
        display: none;
    }

    /* banner: mobile ใช้ hover แบบ desktop — interesting ยังซ่อนปุ่ม hover */
    .banner-wrapper .owl-item.center .banner-slide-btn {
        position: absolute;
        left: 50%;
        top: auto;
        bottom: 20px;
        z-index: 3;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(0);
        white-space: nowrap;
        flex-shrink: 0;
        width: max-content;
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
        text-decoration: none;
        pointer-events: none;
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-12px);
        pointer-events: auto;
    }

    .interesting-banner-wrapper .owl-item.center .banner-slide-btn {
        display: none;
    }

    .interesting-banner-wrapper .owl-item.center .banner-slide-card:hover .banner-slide-btn {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-12px);
        pointer-events: auto;
    }

    .banner-wrapper .owl-item,
    .banner-wrapper .owl-item.center,
    .banner-wrapper .owl-item:not(.center),
    .banner-wrapper .owl-item:not(.active),
    .interesting-banner-wrapper .owl-item,
    .interesting-banner-wrapper .owl-item.center,
    .interesting-banner-wrapper .owl-item:not(.center),
    .interesting-banner-wrapper .owl-item:not(.active),
    .banner-wrapper .owl-item .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item .h-w-imag-ban-slide,
    .h-w-imag-ban-slide {
        opacity: 1;
        transform: none;
    }

    .banner-wrapper .owl-prev,
    .banner-wrapper .owl-next,
    .interesting-banner-wrapper .owl-prev,
    .interesting-banner-wrapper .owl-next {
        display: none;
    }


    .box-position-baner-hero {
        position: absolute;
        top: 10%;
        left: 15%;
    }

    #custom-indicators {
        margin-top: 24px;
        position: static;
        margin: 0 auto;
    }

    #custom-indicators .active {
        margin: 0;
        margin-right: 4px;
        width: 52px;
        height: 8px;
        background-color: #007FC6;
        transition: all 0.4s ease;
    }

    #custom-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators {
        position: static;
        margin: 24px auto 0;
        padding-left: 0;
        width: auto;
        list-style: none;
        text-align: center;
    }

    #interesting-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    #interesting-indicators .active {
        width: 52px;
        height: 8px;
        margin: 0 4px 0 0;
        background-color: #007FC6;
    }

    .banner-wrapper .banner-slide-card,
    .interesting-banner-wrapper .banner-slide-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .banner-wrapper .banner-slide-media,
    .interesting-banner-wrapper .banner-slide-media {
        position: static;
        width: 100%;
    }

    /* ใน @media (max-width: 599px) */
    .banner-wrapper .visible-component-mobile,
    .interesting-banner-wrapper .visible-component-mobile {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .banner-wrapper .visible-component-mobile .h-w-imag-ban-slide,
    .interesting-banner-wrapper .visible-component-mobile .h-w-imag-ban-slide {
        width: 100%;
        aspect-ratio: 375/650;
        display: block;
        object-fit: cover;
        border-radius: 0 0 48px 0;
    }

    .interesting-banner-wrapper .owl-item .banner-slide-btn,
    .interesting-banner-wrapper .owl-item.center .banner-slide-btn {
        display: none !important;
    }

    .banner-wrapper .visible-component-mobile,
    .interesting-banner-wrapper .visible-component-mobile {
        position: relative;
        width: 100%;
    }

    /* banner mobile: glow overlay แบบ desktop (รูปอยู่ที่ visible-component-mobile) */
    .banner-wrapper .owl-item.center .visible-component-mobile::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 0 0 48px 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.4s ease;
        box-shadow: inset 0 0 32px 16px rgba(0, 182, 241, 0.7);
        z-index: 2;
    }

    .banner-wrapper .owl-item.center .banner-slide-card:hover .visible-component-mobile::after {
        opacity: 1;
    }

    /* banner: ซ่อนปุ่ม mobile แบบ always-on — ใช้ hover banner-slide-btn แทน */
    .banner-wrapper .visible-component-mobile .btn-view-more-2 {
        display: none !important;
    }

    /* interesting: ปุ่มดูเพิ่มเติมบน mobile ใช้แค่สี/hover ของปุ่ม prev-next */
    .interesting-banner-wrapper .visible-component-mobile .btn-view-more-2 {
        position: absolute !important;
        left: 50%;
        transform: translate(-50%, 0%) translateY(5px) !important;
        /* ปรับ -24px / -40px ตามชอบ */
        z-index: 3;
        opacity: 1 !important;
        background: var(--White, #FFF);
        color: #007FC6 !important;
        text-decoration: none;
        transition: background 0.25s ease, color 0.25s ease;
    }

    .interesting-banner-wrapper .visible-component-mobile .btn-view-more-2 img {
        width: 24px !important;
        height: 24px !important;
    }

    .interesting-banner-wrapper .visible-component-mobile .btn-view-more-2:hover {
        background: #007FC6;
        color: #fff !important;
    }

    .interesting-banner-wrapper .visible-component-mobile .btn-view-more-2:hover img {
        filter: brightness(0) invert(1);
    }

    /* ปิด overlay shadow บน hover — เฉพาะ interesting */
    .interesting-banner-wrapper .owl-item.center .banner-slide-media::after {
        display: none;
    }

    .banner-wrapper .owl-stage-outer,
    .interesting-banner-wrapper .owl-stage-outer {
        margin-left: -2.5%;
        /* ปรับ % ตามที่อยากดึง */
        overflow: visible;
        /* กันรูปถูก clip ขอบขวา */
    }

    .banner-wrapper,
    .interesting-banner-wrapper {
        position: relative;
    }

    .banner-wrapper .owl-nav,
    .interesting-banner-wrapper .owl-nav {
        display: none !important;
    }

    .banner-wrapper .visible-component-mobile .btn-view-more-2::after,
    .interesting-banner-wrapper .visible-component-mobile .btn-view-more-2::after {
        display: none !important;
    }


    .btn-view-more {
        z-index: 2;
        bottom: 24px;
        display: inline-flex;
        height: 48px;
        padding: 0 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 0 0 16px 0;
        border: 1px solid #00B6F1;
        background: #007FC6;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .column-description-align {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-box-home-row,
    .img-box-home-row-2 {
        flex-direction: column;
        align-items: stretch;
    }

    .img-box-home-tough {
        position: absolute;
        bottom: 11%;
        left: 4%;
        width: clamp(150px, 18vw, 200px);
        /* ปรับตามดีไซน์ */
        height: auto;
        pointer-events: none;
        z-index: 2;
        object-fit: contain;
        object-position: left bottom;
    }


    /* แถวที่ 2 ใน blade: ข้อความมาก่อนรูปใน DOM → reverse ให้รูปอยู่บน */
    .img-box-home-row:has(.img-box-home-container-right) {
        display: flex;
        flex-direction: column-reverse;
    }

    .img-box-home-row>.col-md-6,
    .img-box-home-row-2>.col-md-6 {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        float: none;
        overflow: visible;
    }

    .column-description-container-right,
    .column-description-container-left {
        width: 100%;
        max-width: 100;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 24px 20px 32px;
        box-sizing: border-box;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.90);
        box-shadow: 0 0 32px 0 rgba(0, 127, 198, 0.16);
        backdrop-filter: blur(12px);
    }

    .img-box-home-container,
    .img-box-home-container-right {
        position: relative;
        overflow: hidden;
        transform: skewX(-10deg);
        border-radius: 0 0 30px 0;
        background-color: #f1f1f1;
        width: 89%;
        max-width: 100%;
        left: 2%;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        height: clamp(260px, 52vw, 380px);
    }

    .img-box-home-container .img-box-home,
    .img-box-home-container-right .img-box-home {
        position: absolute;
        top: 0;
        left: -12%;
        width: 150%;
        height: 100%;
        margin: 0;
        transform: skewX(10deg);
        /* คู่กับ container */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }


    .btn-view-more::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .btn-view-more:hover::after {
        opacity: 1;
    }

    .btn-view-more-left,
    .btn-view-more-right {
        left: auto !important;
        right: auto !important;
        top: -16px;
        align-self: center;
    }

    .btn-view-more-2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        padding: 0 24px;
        gap: 8px;
        z-index: 3;
        border-radius: 0 0 16px 0;
        border: 1px solid var(--Primary, #007FC6);
        background: #FFF;
        color: #007FC6;
        text-decoration: none;
        transition: background 0.25s ease, color 0.25s ease;
    }

    .btn-view-more-2:hover {
        background: #007FC6;
        color: #fff !important;
    }

    .btn-view-more-2:hover img {
        filter: brightness(0) invert(1);
    }

    .service-items-row {
        margin-left: 16px;
        margin-right: 16px;
    }

    .service-item-container {
        position: relative;
        display: flex;
        flex-direction: row;
        padding-left: 40px;
        padding-right: 40px;
        background: var(--gradient, linear-gradient(180deg, #0090E0 0%, #007FC6 100%));
        transform: skewX(-18deg);
        border-radius: 0px 0px 32px 0px;
        cursor: pointer;
    }

    .service-item-container::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -8;
        border-radius: inherit;
        background: radial-gradient(ellipse 50% 30% at 50% 100%,
                rgba(0, 182, 241, 0.7) 0%,
                rgba(0, 182, 241, 0.35) 45%,
                rgba(0, 182, 241, 0) 100%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .service-item-container:hover::after {
        opacity: 1;
    }

    .service-item-inner {
        transform: skewX(18deg);
    }

    .service-item-inner:has(.service-item-title) {
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .service-item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88px;
        width: 88px;
        position: absolute;
        top: 0;
        transform: translate(-80%, -50%);
        z-index: 2;
    }

    .service-item-icon img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .service-item-container:hover .service-item-icon img {
        transform: translateY(-10%);
    }

    .service-item-title {
        margin-left: 42px;
        text-align: left;
        color: #fff;
        width: 100%;
    }

    .service-item-share-icon {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        width: 25px;
        height: 25px;
        background: var(--BG-Light, #EBF8FF);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .service-item-share-icon img {
        width: 12px;
        height: 12px;
        display: block;
        transform: skewX(18deg);
    }


    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
    }

    .bg-search-batt {
        position: relative;
        overflow: hidden;
        z-index: 20;
        isolation: isolate;
        width: 100%;
        max-width: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 720px;
        box-sizing: border-box;
    }

    .bg-search-batt__vector {
        width: clamp(360px, 72vw, 480px);
        height: auto;
        max-height: 30%;
        object-fit: contain;
        object-position: right bottom;
    }

    .bg-search-batt__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 4;
        pointer-events: none;
        display: block;
    }

    .bg-search-batt__filter {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(0, 136, 170);
        /* ปรับความเข้ม */
        mix-blend-mode: hue;
    }

    .bg-search-batt__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: 1313px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .bg-search-batt__content .box-search h1,
    .bg-search-batt__content .sub-title-search {
        position: relative;
        z-index: 2;
    }

    .title-news {

        font-size: 20px;
        line-height: 1.25;
        font-weight: 600;
    }

    .tag-news-type {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .date-news {
        color: #999;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .featured-news-card {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 24px;
    }

    .featured-news-text-align {
        flex: 1;
        padding-left: 0;
    }



    .other-news-text-align {
        flex: 1;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .other-news-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 1;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 500;
        font-style: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* ข่าว/ประกาศ — แพทเทิร์นเดียวกับ max-width 1585 (สเกล 331→431 ในช่วง 1024–1295) */
    .img-box-news {
        aspect-ratio: 1 / 1;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .img-box-news-main {
        width: 100%;
        height: 343px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .news-section-header {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }

    .news-category-container {
        display: inline-flex;
        height: 40px;
        min-width: 100px;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        gap: 10px;
        border-radius: 0 0 16px 0;
        background: rgba(166, 166, 166, 0.10);
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        white-space: nowrap;
        transition: none;
    }

    .news-category-container:hover {
        border: 1px solid var(--Primary, #007FC6);
        background: #D9F2FF;
    }

    .description-news {
        font-size: 16px;
        font-style: normal;
        line-height: 1.25;
        font-weight: 400;
        color: #464646;
        margin-top: 16px;
    }

    .news-column-container {
        display: flex;
        max-height: 618px;
        min-width: 279px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        align-items: flex-start;
        flex-shrink: 0;
        border-radius: 0px 0px 32px 0px;
        border: 1px solid #D8D8D8;
        background: #FFF;
        margin-bottom: 24px;
        cursor: pointer;
    }

    .news-column-content {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
    }

    .news-column-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        align-self: stretch;
    }

    .new-column-text-align {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }


    .sub-banner-container {
        margin-top: 50px;
        height: auto;
        overflow: hidden;
        min-height: unset;
        position: relative;
    }

    .sub-banner-container.contact {
        max-height: 399px;
    }

    .sub-banner-container>img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center bottom;
        min-height: 0;
        z-index: 0;
    }


    .sub-banner-content {
        position: relative;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        padding-top: clamp(24px, 8vw, 95px);
        padding-bottom: clamp(32px, 6vw, 64px);
        padding-inline: clamp(16px, 5vw, 64px);
        box-sizing: border-box;
        z-index: 1;
    }


    .image-gsbattery {
        margin-top: 30px;
        max-width: 100%;
        max-height: 535px;
    }

    .career-bg {
        height: 330px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 20px;
    }

    .box-radis-des-sales::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #005BAA;
        position: absolute;
        margin-top: 7px;
    }

    .box-radis-des-sales {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-radis-des-batt::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        background-color: #00B6F1;
        position: absolute;
        margin-top: 7px;
    }

    .ma-bottom-20 {
        margin-bottom: 20px;
    }

    .box-radis-sale {
        background-color: #005BAA;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-sale::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #005BAA;
        position: absolute;
        left: -25px;
        margin-top: 17px;
    }

    .box-radis-batt {
        background-color: #00B6F1;
        display: block;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        margin-top: 7px;
        z-index: 1;
    }

    .box-timeline-ver-batt::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #00B6F1;
        position: absolute;
        left: -25px;
        margin-top: 17px;
    }

    .display-destop {
        display: none;
    }

    .display-mobile {
        display: block;
    }

    .margin-left-nav {
        margin-left: 140px !important;
    }

    .box-chage-lang {
        margin-top: -22px;
        margin-right: 20px;
    }

    .nav-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        display: -webkit-box;
        display: -moz-box;
    }

    .nav-tabs>li {
        float: none;
    }

    .bg-color-footer {
        height: 20px;
        background-color: #005BAA;
    }

    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .pad-left {
        padding-left: 20px;
    }

    .bg-footer {
        background-color: #ffffff;
        width: 100%;
        height: 393px;
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .box-news-activities {
        margin: 10px 0;
        text-align: center;
    }

    .box-text-activities {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .border-bottom-new-act {
        width: 155px;
        height: 4px;
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
    }

    .sub-new-des {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin: 10px 0;
    }

    .img-box-home {
        width: 100%;
        background-color: #f1f1f1;
        height: 360px;
        margin: 20px 0px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .batt-long-time {
        margin: 20px 0px;
    }

    .tabbable-line>.nav-tabs>li {
        margin: 0 15px;
    }

    .text-colo-link {
        color: #005BAA;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 168px;
    }

    .img-box-fing-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 556px;
    }

    /* prduct detailpage */
    .text-breadcrumb {
        color: #282828;
    }

    .bg-pro-detail {
        background-color: #E9E9E9;
        width: 100%;
        height: clamp(266px, calc(540px - (599px - 100vw) * 1.0), 540px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        /* หรือ 32px — ระยะขอบใน */
        box-sizing: border-box;

    }

    .product-header-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        z-index: 2;
    }

    .product-banner-header-margin {
        margin-left: 16px;
    }

    .product-banner-text-h1 {
        font-size: 32px;
        margin-top: 0px;
        margin-bottom: 0px;
    }


    .img-product-batt-detail {
        width: auto;
        height: auto;
        max-width: 72%;
        /* ปรับได้ เช่น 65%–80% */
        max-height: 85%;
        /* ไม่ล้นความสูงกล่อง */
        object-fit: contain;
        display: block;
    }

    .btn-border-w {
        background-color: #FFFFFF;
        border: 1px solid #D3D3D3;
        border-radius: 25px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 209px;
        height: 50px;
        font-weight: 600px;
        font-size: 17px;

    }

    .box-view-big-img {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .text-type-pro-detail {
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
        color: #00B6F1;
    }

    .text-name-pro-detail {

        font-size: 32px;
        line-height: normal;
        font-weight: 700;
        color: #00B6F1;
    }

    .box-data-pro-detail {}

    .text-sub-pro-detail {

        font-size: 19px;
        line-height: 25px;
        font-weight: 500;
        color: #000000;
    }

    .text-slogrand-pro-detail {

        font-size: 27px;
        line-height: 55px;
        font-weight: 500;
        color: #000000;
    }

    .btn-circle-product {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        width: 41px;
        height: 41px;
    }

    .text-icon-pro-detail {

        font-size: 17px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .margin-bottom-img {
        margin-bottom: 5px;
    }

    .text-data-contant {

        font-size: 27px;
        font-style: italic;
        line-height: 40px;
        font-weight: 500;
        color: #000000;
    }

    .text-sub-detail {

        font-size: 16px;
        font-style: italic;
        line-height: 23px;
        padding-left: 50px;
    }

    .text-h-pro {

        font-size: 11px;
        font-style: italic;
        line-height: 23px;
        font-weight: 600;
        color: #000000;
    }

    .text--sub-h-pro {

        font-size: 20px;
        font-style: italic;
        line-height: 17px;
        font-weight: 600;
        color: #000000;
        margin-top: 10px;
    }

    .green-box {
        background-color: #C7EB02;
        height: 42px;
        width: 3px;
        position: absolute;
        margin-top: 5px;
        left: 2px;
    }

    .padd-bottom-btn {
        padding-bottom: 20px;
    }

    .new-box-tip {
        padding-top: 29%;
    }

    .title-news-tip {
        font-size: 43px;

        font-weight: 500;
        line-height: 55px;
        color: #000;
    }

    .sub-new-detail {
        font-size: 23px;

        font-weight: 500;
        line-height: 32px;
        color: #005BAA;
        padding-right: 35%;
    }

    .img-icon-prodetail {
        width: 50px;
        height: auto;
    }

    .img-icon-prodetail-list {
        width: 43px;
        height: 43px;
    }

    /* end productdetail page */
    .select-box select {
        border-radius: 4px;
        background-color: #ffffff;
        border: 2px solid #005BAA;
        padding: 4px 10px;
        width: 96px;
    }

    .select-box {
        margin-top: 20px;
        padding-left: 20px;
    }

    .select-box select:active,
    select:hover {
        outline: none;
    }

    .row {
        margin-left: 16px;
        margin-right: 16px;
    }

    .border-footer {
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .img-footer-logo {
        height: 64px;
    }

    .padding-top-footer {
        padding-top: 50px;
    }

    .contact-text-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .text-detail-footer {

        font-size: 14px;
        line-height: 1.5;
        color: #231F20;
        padding-top: 8px;
    }

    .text-detail-reserved {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .text-address-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
        padding-top: 20px;
    }

    .img-icon-footer {
        width: 35px;
        height: 35px;
        margin-left: 5px;
        margin-top: 20px;
    }

    .text-link-footer {

        font-size: 16px;
        line-height: 24px;
        color: #231F20;
    }

    .text-link-footer-sub {

        font-size: 14px;
        line-height: 24px;
        color: #231F20;
    }

    .tab-panel-batt-footer {
        background-color: #fff !important;
    }

    .tab-footer {
        border-top: 1px solid #9E9E9E;
        padding-top: 24px;
        padding-bottom: 8px;
    }

    .tab-footer:first-child {
        border-top: none;
    }

    .tab-footer:not(:has(~ .tab-footer)) {
        border-bottom: 1px solid #9E9E9E;
    }

    .short-full-footer {
        color: #231F20;
        margin-top: -17px;
        padding-right: 10px;
    }

    /* endfooter */
    .margin-space-banner {
        margin-top: 10px;
    }

    .btn-main-border {
        background-color: #fff;
        width: 220px;
        height: 50px;
        border: 2px solid #005BAA;

        font-size: 16px;
        color: #005BAA;
        border-radius: 4px;
        margin-top: 10px;
    }

    .btn-main-border:hover {
        box-shadow: 0px 3px 6px #00B6F1;
        color: #000000;
    }

    .btn-main-border:active {
        background: rgba(0, 51, 161, 1);
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
        border-radius: 32px;
        width: 220px;
        height: 50px;
        border: none;

        font-size: 16px;
        color: #000000;
        margin-top: 10px;
        box-shadow: 0px 3px 6px #00B6F1;
    }

    /* Search all page  */
    .stylish-input-group .input-group-addon {
        background: white !important;
    }

    .stylish-input-group .form-control {
        border-right: 0;
        box-shadow: 0 0 0;
        border-color: #ccc;
    }

    .stylish-input-group button {
        border: 0;
        background: transparent;
    }

    .mdl-textfield {
        position: relative;
        font-size: 16px;
        display: inline-block;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        padding: 20px 0;
    }

    .btn-search {
        position: absolute;
        right: 20px;
        top: 25px;
    }

    .text-search-margin {
        margin-bottom: 20px;
    }

    .text-header-search {
        color: #04163D;
        margin-bottom: 5px;
    }

    .btn-search {
        position: absolute;
        right: 20px;
        top: 25px;
    }

    .mdl-textfield--floating-label {

        font-size: 14px;
    }

    #search input[type="text"]:focus {
        width: 250px;
    }

    .text-cancel-bar {
        position: absolute;
        margin-top: -33px;
        right: 3%;
        z-index: -999;
        font-size: 12px !important;

    }

    .text-link-suport {

        font-size: 16px;
        line-height: 18px;
    }

    .collapsing ul li a,
    .in ul li a {
        color: #555 !important;
    }

    .collapsing ul li a:hover,
    .in ul li a:hover {
        color: #f1f1f1 !important;
    }

    .navbar-center {
        position: absolute;
        left: 30%;
        right: 20%;
    }


    .contact-footer-wrapper {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .contact-footer-wrapper .contact-footer-container {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0 8px;
        justify-content: flex-start;
    }

    /* footer mobile: email container เต็มความกว้าง + content กึ่งกลาง */
    .contact-footer-container:not(.contact-footer-wrapper .contact-footer-container) {
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        justify-content: center;
    }

    .invisible-mobile {
        display: none !important;
    }

    .visible-mobile {
        display: block !important;
    }

    .invisible-slide-baner {
        display: none;
    }

    .visible-slide-baner {
        display: block;
    }

    .visible-component-desktop {
        display: none;
    }

    .visible-component-mobile {
        display: block;
    }

    .search-result-card-excerpt--full {
        display: none;
    }

    .search-result-card-excerpt--short {
        display: block;
    }

    .navbar-brand {
        float: right;
    }

    .menu-text-mobile {
        border-bottom: 1px solid #9E9E9E;
        font-size: 14px;

        margin-top: 5px;
    }

    .margin-top-menu-mobile {
        margin-top: 20px;
    }

    .h-mobile {
        margin-top: 20px;
    }

    .margin-top-mobile-Procategory {
        margin-top: 40px;
    }

    /* advance search  */
    .cd-main-header,
    .cd-main-content {
        position: relative;
        transition: transform 0.3s;
    }

    .cd-main-header.nav-is-visible,
    .cd-main-content.nav-is-visible {
        transform: translateX(-260px);
    }

    .flipkart-navbar-input {
        padding: 12px 16px;
        border-radius: 2px 0 0 2px;
        border: 0 none;
        outline: 0 none;
        font-size: 15px;

    }

    .flipkart-navbar-button {
        background-color: #999;
        border: 1px solid #999;
        border-radius: 0 2px 2px 0;
        color: #565656;
        padding: 10px 0;
        height: 44.5px;
        cursor: pointer;
    }

    .box-size {
        height: 443px !important;
    }

    .navbar-center {
        position: absolute;
        left: 30%;
        right: 20%;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 10px;
        left: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 74.52%, rgba(224, 235, 245, 0.95) 100%), #FFF;
        overflow-x: hidden;
        transition: 0.5s;
        margin-top: 70px;
    }

    .sidenav a {
        padding: 12px 16px;
        text-decoration: none;
        color: #000;
        font-size: 16px;
        font-weight: 700;
        display: block;
        transition: 0.3s;

        display: flex;
        justify-content: space-between;
    }

    .sidenav a:hover,
    .sidenav a:focus {
        color: #00B6F1;
    }

    .sidenav .chevron-down-icon {
        display: inline-block;
        transition: transform 0.3s ease;
        transform: rotate(0deg);
    }

    .sidenav a.menu-text-mobile[aria-expanded="true"] {
        color: #00B6F1;
    }

    /* เปิดแล้วเท่านั้น */
    .sidenav a.menu-text-mobile[aria-expanded="true"] .chevron-down-icon {
        transform: rotate(180deg);
    }

    .sidenav .closebtn {

        position: absolute;
        top: 0;
        left: -64px;
        font-size: 36px;
        margin-left: 50px;
    }

    .select-list-link-mobile {
        position: relative;
        margin-left: 275px;
        margin-top: -34px;
        color: white;
    }

    .img-logo {
        height: 31px;
        margin-top: 6px;
        left: 50%;
        right: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
    }

    .img-logo-app {
        height: 31px;
        margin-top: 6px;
        left: 50%;
        right: 50%;
        transform: translate(-50%, -155%);
        position: absolute;
    }

    .navbar-default {
        height: 70px;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: white;
        margin-top: 6px;
    }

    .navbar-toggle .icon-bar {
        width: 24px;
    }

    .navbar-toggle {
        margin-top: 15px;
    }

    /* homepage */
    .img-banner-mobile {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 900px;
    }

    .img-icon-type {
        height: 70px;
    }

    .text-sub-logo-type {

        font-size: 16px;
        line-height: 38px;
        font-style: italic;
        font-weight: 600;
    }

    .date-news {
        color: #999;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
    }

    .padding-left-box-new {
        padding-left: 15px;
        padding-right: 15px;
    }

    .title-news {

        font-size: 30px;
        line-height: 38px;
        margin-top: 20px;
        font-weight: 600;
        height: 64px;
        overflow: hidden;
    }

    .tag-news-type {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .btn-tag-tip {
        background-color: #00B6F1;
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }



    .btn-tag {
        padding: 2px 22px 1px 22px;
        border-radius: 0px;
        color: #fff;
        font-size: 13px;
    }

    .position-btn-typ-batt {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: 0;
    }

    .text-detail-type-battery {

        font-size: 16px;
        line-height: 19px;
        color: #fff;
        padding-top: 0px;
        padding-left: 33px;
        padding-right: 33px;
        font-style: italic;
    }

    .text-mobile-sub {

        font-size: 17px;
        line-height: 22px;
        color: #000000;
        font-style: italic;
        text-align: center;
        font-weight: 500;
    }

    .h-w-imag-ban-slide {
        max-width: 100%;
        width: 100%;
    }

    .title-search {

        font-size: 36px;
        line-height: 55px;
        color: #005BAA;
        text-align: center;
    }

    .bg-search-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: 56px;
        height: 880px;
    }

    .sub-title-search {

        font-weight: 400;
        font-size: 16px;
        line-height: 1.5;
        color: #fff;
        text-align: center;
        margin-bottom: 32px;
    }

    .select-search select {
        border-radius: 4px;
        background-color: #f1f1f1;
        border: 2px solid #00B6F1;
        padding: 10px 10px 10px 10px;
        width: 100%;
        color: #005BAA;
        margin-bottom: 10px;
        height: 50px;
    }

    .box-search {
        padding-top: 23px;
        text-align: center;
    }

    .select-search select:active,
    select:hover {
        outline: none;
    }

    .select-search select:after,
    select:hover {
        outline: none;
    }

    .text-title-app {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-content-app {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
        font-style: italic;
        margin-bottom: 10px;
    }

    .text-sub-blue {
        color: #00B6F1 !important;
    }

    .app-box {
        margin-top: 25%;
    }

    .img-box-type-battery {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 533px;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .box-search-batt {
        margin-top: 139px;
        padding-left: 131px;
    }

    .title-search-batt {

        font-size: 48px;
        line-height: 55px;
        color: #fff;
    }

    .text-content-batt {

        font-size: 30px;
        line-height: 32px;
        color: #fff;
    }

    .img-box-news-main {
        width: 100%;
        height: 423px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .text-name-hero {

        font-size: 38px;
        line-height: 33px;
        color: #005BAA;
        font-style: italic;
        font-weight: bolder;
        padding-left: 20px;
    }

    .text-sub-hero {

        font-size: 31px;
        line-height: 55px;
        color: #005BAA;
        font-style: italic;
        font-weight: 600;
    }

    .box-position-baner-hero {
        position: absolute;
        top: 24%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .carousel-indicators {
        position: static;
        margin: 0 auto;
    }

    .carousel-indicators li {
        display: inline-block;
        width: 24px;
        height: 8px;
        margin: 0;
        margin-right: 4px;
        text-indent: -999px;
        border: 0px solid transparent;
        border-radius: 0px;
        transform: skewX(-45deg);
        cursor: pointer;
        background-color: #000 \9;
        background-color: rgb(174, 174, 174);
        transition: all 0.3s ease;
    }

    .carousel-indicators .active {
        margin: 0;
        margin-right: 4px;
        width: 52px;
        height: 8px;
        background-color: #007FC6;
        transition: all 0.4s ease;
    }


    .text-slo-grand {

        font-size: 17px;
        line-height: 18px;
        color: #000000;
        font-style: italic;
        font-weight: 500;
        width: 271px;
        text-align: center;
    }

    /* end homepage */
    /* product page */
    .img-product-pass-batt {
        background-position: center;
        background-repeat: no-repeat;
        height: 612px;
        width: 100%;
        background-size: cover;
    }

    .text-batt-type-one {

        font-style: italic;
        color: #C7EB02;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 41px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-one {

        font-style: italic;
        color: #FFFFFF;
        font-size: 20px;
        line-height: 32px;
    }

    .text-batt-type-two {

        font-style: italic;
        color: #FF9300;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-two {

        font-style: italic;
        color: #000;
        font-size: 29px;
        line-height: 32px;
    }

    .text-batt-type-three {

        font-style: italic;
        color: #00B6F1;
        font-size: 30px;
        line-height: 32px;
    }

    .title-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 49px;
        line-height: 55px;
        font-weight: bold;
    }

    .sub-batt-type-three {

        font-style: italic;
        color: #fff;
        font-size: 29px;
        line-height: 32px;
    }

    .position-type-product {
        position: absolute;
        top: 130px;
    }

    .position-type-product-right {
        position: absolute;
        top: 130px;
        right: 50px;
    }

    .box-bg-product {
        background-color: #fff;
        height: auto;
        border-radius: 0 0 24px 0;
        box-shadow: 0 0 30px 0 rgba(0, 127, 198, 0.12);
        backdrop-filter: blur(12px);
        overflow: hidden;
    }

    .img-product-batt-wrap {
        width: 100%;
        aspect-ratio: 3 / 2;
        min-height: 201px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #E9E9E9;
        overflow: hidden;
        position: relative;
    }

    .img-product-batt {
        width: 72%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform .3s ease;
        transform-origin: center center;
    }

    .box-bg-product:hover .img-product-batt {
        transform: scale(1.12);
    }

    .product-batt-name {

        color: #000000;
        text-align: left;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 700;
    }

    .type-batt-name {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
    }

    .batt-info-seperator {
        height: 1px;
        opacity: 0.5;
        background: #D2D2DD;
    }

    .batt-spec-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-spec-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .batt-terminal-container {
        display: inline-flex;
        width: auto;
        padding: 4px 8px;
        align-items: center;
        gap: 4px;
        border-radius: 4px;
        border: 0.5px solid #D2D2D2;
        background: #EBF8FF;
        margin-bottom: 8px;
    }

    .tag-batt-name {

        color: #005BAA;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        height: 124px;
        overflow: hidden;
    }

    .text-barnd {
        cursor: pointer;
    }

    .padding-box-pro-batt {
        padding: 24px 24px 24px 24px;
    }

    .btn-circle {
        background-color: #fff;
        color: #000;
        font-weight: 600;
        border-radius: 50%;
        position: absolute;
        bottom: 239px;
        right: 29px;
    }

    .banner-box-pro-car-type {
        margin-top: 10px;
        height: 469px;
    }

    .img-product-batt-banner {
        width: 100%;
        height: 100%;
    }

    .MultiCarousel {
        float: left;
        overflow: hidden;
        padding: 15px;
        width: 100%;
        position: relative;
    }

    .MultiCarousel .MultiCarousel-inner {
        transition: 1s ease all;
        float: left;
    }

    .MultiCarousel .MultiCarousel-inner .item {
        float: left;
        padding: 50px;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: center;
        padding: 10px;
        margin: 10px;
        background: #fff;
        color: #000;
    }

    .activeBrand {
        border-bottom: 4px solid #005BAA;
    }

    .MultiCarousel .leftLst,
    .MultiCarousel .rightLst {
        position: absolute;
        border-radius: 50%;
        top: calc(50% - 16px);
    }

    .MultiCarousel .leftLst {
        left: 0;
    }

    .MultiCarousel .rightLst {
        right: 0;
    }

    .MultiCarousel .leftLst.over,
    .MultiCarousel .rightLst.over {
        pointer-events: none;
        background: #ccc;
    }


    .bg-search-batt__content .tabbable-panel>.nav-tabs {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
        width: 100%;
        flex: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>li.nav-tabs-container-item {
        float: none;
        margin-bottom: 0;
        align-self: stretch;
    }


    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:focus,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        display: flex;
        flex: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 8px 24px;
        align-items: center;
        justify-content: center;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
    }

    .bg-search-batt__content .btn-wrapper-search {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 16px;
    }

    .bg-search-batt__content .tabbable-panel {
        justify-content: stretch;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs {
        justify-content: stretch;
    }

    .bg-search-batt__content .nav-tabs-container-item {
        max-width: none;
        min-width: 0;
    }

    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item>a:focus,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:hover,
    .bg-search-batt__content .tabbable-panel>.nav-tabs>.nav-tabs-container-item.active>a:focus {
        padding: 16px 8px;
    }

    /*End product page */
    .col-xs-12 {
        position: relative;
        min-height: 1px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .img-close-app {
        width: 21px;
        margin-top: 13px;
    }

    .breadcrumb {
        padding: 8px 10px;
    }

    .navbar-toggle {
        padding: 0px 0px;
        margin-right: 0px;
        margin-top: 8px;
    }

    /* about us page  */
    .abt-img {
        width: 100%;
        height: 378px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .text-abt {

        color: #646464;
        font-size: 24px;
        line-height: 55px;
        font-weight: 500;
    }

    .box-content-abt {}

    .text-name-building {

        color: #000;
        font-size: 32px;
        line-height: 29px;
        font-weight: 500;
    }

    .breadcrumb>.active {
        font-weight: 600;
    }

    .line-abt {
        background-color: #005BAA;
        width: 4px;
        height: 661px;
        position: absolute;
        margin-left: 5px;
        margin-top: -11px;
    }

    .line-abt-2 {
        background-color: #005BAA;
        width: 4px;
        height: 560px;
        position: absolute;
        margin-left: 5px;
        margin-top: -11px;
    }

    /* .about_line {
            position: absolute; 
          
            height: 255px;
            width: 5px;
        } */
    .text-year-abt {

        color: #005BAA;
        font-size: 30px;
        line-height: 45px;
        font-weight: 500;
    }

    .text-h-abt {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
    }

    .text-h-abt-detail {

        color: #000000;
        font-size: 14px;
        line-height: 24px;
    }

    .mar-top-box-history {
        margin-top: 50px;
    }

    .padding-top-abt {
        margin-top: 26px;
    }

    .data-abt-h-text {

        color: #005BAA;
        font-size: 35px;
        line-height: 40px;
        text-align: left;
        font-weight: 500;
    }

    .padding-left {
        padding-left: 0px;
        padding-right: 0px;
    }

    .text-job-position {
        color: #FFFFFF;
        font-size: 16px;
        line-height: 30px;

    }

    .short-full {
        color: #fff;
        font-size: 14px;
        margin-top: 10px;
    }

    .sub-data-abt-h-text {

        color: #646464;
        font-size: 24px;
        line-height: 1.5;
        text-align: left;
        font-weight: 500;
    }

    .margin-top-abt {
        margin-top: 60px;
    }

    .text-detail-abt-h {

        color: #000000;
        font-size: 16px;
        line-height: 24px;
        text-align: justify;
    }

    .text-h-abt-gs {

        color: #000000;
        font-size: 30px;
        line-height: 55px;
        margin-bottom: 20px;
    }

    /* end about us page  */
    /* find batt type page  */
    .position-type {
        position: absolute;
        top: 151px;
        left: 20px;
    }

    .text-batt-name {

        font-size: 30px;
        line-height: 55px;
        color: #00B6F1;
        font-style: italic;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .batt-type {

        font-size: 39px;
        line-height: 33px;
        color: #005BAA;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .detail-title {

        font-size: 34px;
        line-height: 18px;
        color: #fff;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .sub-batt-type {

        font-size: 17px;
        line-height: 34px;
        color: #fff;
        font-style: italic;
        margin-bottom: 20px;
    }

    /* end find batt type page  */
    /*  start Contact page  */
    .input-mar-padding {
        padding-top: 30px;
    }

    .text-contact-header {

        color: #000000;
        font-size: 22px;
        line-height: 43px;
        font-weight: 500;
        text-align: center;
        font-style: italic;
    }

    .text-contact-h-main {

        color: #005BAA;
        font-size: 35px;
        line-height: 40px;
        font-weight: 500;
        margin-top: 50px;
        font-style: italic;
    }

    .request-select {
        color: #F00 !important;
    }

    .news-list-banner-image {
        position: relative;
        width: 100%;
        max-width: 272px;
        aspect-ratio: 1/1;
        background-color: #000;
        overflow: hidden;
    }

    .news-list-banner-carousel-wrapper .owl-next {
        position: absolute;
        top: 20%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 32px;
        height: 32px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
        right: calc((100% - min(100%, 272px)) / 2 - 14px);
    }

    .news-list-banner-carousel-wrapper .owl-prev {
        position: absolute;
        top: 20%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 32px;
        height: 32px;
        border-radius: 0 0 0 16px;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
        left: calc((100% - min(100%, 272px)) / 2 - 14px);
    }

    .news-list-banner-carousel-wrapper .owl-prev img,
    .news-list-banner-carousel-wrapper .owl-next img {
        width: 14.308px;
        height: 14.308px;
    }


    .gs-1380-sub-banner-bg {
        width: 100%;
        height: 100%;
        min-height: 880px;
        object-fit: cover;
        display: block;
    }

    .gs-1380-sub-banner-text-wrapper img {
        width: 239.684px;
        height: 69px;
        aspect-ratio: 66/19;
        display: block;
    }

    .gs-1380-sub-banner-header {
        color: #007FC6;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    /* End Contact page  */
    .bg-footer-mobile {
        width: 100%;
        height: 116px;
        position: absolute;
        bottom: 0px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .mar-bottom-60 {
        margin-bottom: 60px;
    }

    .contact-us-vector {
        position: absolute;
        left: 50%;
        top: 55.5%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: none;
        z-index: -1;
        pointer-events: none;
        opacity: 0.05;
    }


    .mapouter {
        height: 194px;
        width: 100%;
    }

    .gmap_canvas {
        overflow: hidden;
        background: none !important;
        height: 194px;
        width: 100%;
        border-radius: 0 0 48px 0;
    }

    .about-us-blue-container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        background: var(--BG-Light, #EBF8FF);
        padding: 32px 20px;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .about-us-other-company-info-image-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        aspect-ratio: 1/1;
        flex: 0 1 auto;
        border-radius: 0 0 48px 0;
        overflow: hidden;
    }

    .about-us-other-company-info-image-wrapper img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .about-us-other-company-info-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 1 0;
        min-width: 0;
    }

    .about-us-other-company-info-text-item-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }

    .about-us-other-company-info-text-item-title {
        flex: 0 1 104px;
        min-width: 0;
        max-width: 100%;
    }

    .about-us-other-company-info-text-item-wrapper>.about-us-other-company-info-content {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .about-us-other-company-info-bullet-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .img-box-landing-page-container,
    .img-box-landing-page-container-right {
        width: 86.7%;
        max-width: 100%;
        padding-left: 2.5%;
        left: 7%;
        right: 0%;
        margin-top: 0;
        height: clamp(260px, 38vw, 400px);
    }

}

@media (max-width: 560px) {
    .related-news-carousel-wrapper .owl-next {
        position: absolute;
        top: 35%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 32px;
        height: 32px;
        border-radius: 0 0 16px 0;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
        right: -10px;
    }

    .related-news-carousel-wrapper .owl-prev {
        position: absolute;
        top: 35%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 32px;
        height: 32px;
        border-radius: 0 0 0 16px;
        background: var(--White, #FFF);
        box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.35s ease, visibility 0.35s ease, background 0.25s ease;
        left: -10px;
    }

    .related-news-carousel-wrapper .owl-prev img,
    .related-news-carousel-wrapper .owl-next img {
        width: 14.308px;
        height: 14.308px;
    }
}

@media (max-width: 520px) {
    .product-banner-header-margin {
        margin-top: 48px;
        margin-left: 16px;
    }
}

@media (max-width: 500px) {
    .bg-footer {
        background-color: #ffffff;
        width: 100%;
        height: 393px;
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .line-abt {
        background-color: #005BAA;
        width: 4px;
        height: 726px;
        position: absolute;
        margin-left: 6px;
        margin-top: -11px;
    }

    .line-abt-2 {
        background-color: #005BAA;
        width: 4px;
        height: 605px;
        position: absolute;
        margin-left: 5px;
        margin-top: -11px;
    }

    .career-bg {
        height: 270px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom: 20px;
    }

    .pad-left {
        padding-left: 20px;
    }

    .a-text-size {
        margin-left: 20px;
    }

    .bg-footer-mobile {
        width: 100%;
        height: 102px;
        position: absolute;
        bottom: 0px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .img-banner-mobile {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 698px;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 309px;
    }

    .box-chage-lang {
        margin-top: -22px;
        margin-right: 20px;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin: 10px 0;
    }

    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .img-box-home {
        width: 100%;
        background-color: #f1f1f1;
        height: 360px;
        margin: 20px 0px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .batt-long-time {
        margin: 20px 0px;
    }

    .box-text-activities {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .border-bottom-new-act {
        width: 155px;
        height: 4px;
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
    }

    .sub-new-des {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }
}

@media (max-width: 429px) {
    .box-timeline-ver-sale::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #005BAA;
        position: absolute;
        left: -16px;
        margin-top: 17px;
    }

    .box-timeline-ver-batt::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #00B6F1;
        position: absolute;
        left: -16px;
        margin-top: 17px;
    }

    .bg-footer {
        background-color: #ffffff;
        width: 100%;
        height: 393px;
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .tabbable-line>.nav-tabs>li {
        margin: 0 18px;
    }

    .img-banner-mobile {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 622px;
    }

    .img-box-fing-batt {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 600px;
    }

    .margin-left-nav {
        margin-left: 102px !important;
    }

    .a-text-size {
        margin-left: 25px;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 317px;
    }

    .pad-left {
        padding-left: 20px;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin-top: 0px;
        margin-bottom: 24px;
    }

    .img-box-home {
        width: 100%;
        background-color: #f1f1f1;
        height: 200px;
        margin: 20px 0px;
    }

    .batt-long-time {
        margin: 20px 0px;
    }

    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .contact-us-vector {
        position: absolute;
        left: 50%;
        top: 58.5%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: none;
        z-index: -1;
        pointer-events: none;
        opacity: 0.05;
    }

    .landing-page-video-section,
    .landing-page-url-video-section {
        display: flex;
        width: 100%;
        height: 666px;
        aspect-ratio: 58/103;
        justify-content: center;
        align-items: center;
        gap: 5.833px;
        align-self: stretch;
        background-color: #646464;
    }

}

@media (max-width: 399px) {
    .box-timeline-ver-sale::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #005BAA;
        position: absolute;
        left: -16px;
        margin-top: 17px;
    }

    .box-timeline-ver-batt::before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        background-color: #00B6F1;
        position: absolute;
        left: -16px;
        margin-top: 17px;
    }

    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .margin-left-nav {
        margin-left: 81px !important;
    }

    .pad-left {
        padding-left: 20px;
    }

    .bg-footer {
        background-color: #ffffff;
        width: 100%;
        height: 393px;
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .tabbable-line>.nav-tabs>li {
        margin: 0 18px;
    }

    .img-banner-mobile {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 568px;
    }

    .line-abt {
        background-color: #005BAA;
        width: 4px;
        height: 830px;
        position: absolute;
        margin-left: 6px;
        margin-top: -11px;
    }

    .line-abt-2 {
        background-color: #005BAA;
        width: 4px;
        height: 642px;
        position: absolute;
        margin-left: 5px;
        margin-top: -11px;
    }

    .bg-footer-mobile {
        width: 100%;
        height: 79px;
        position: absolute;
        bottom: 0px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: center;
        padding: 10px;
        margin: 10px;
        background: #fff;
        color: #000;
        width: 145px;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 282px;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin-top: 0px;
        margin-bottom: 24px;
    }

    .img-box-home {
        width: 100%;
        background-color: #f1f1f1;
        height: 200px;
        margin: 20px 0px;
    }

    .batt-long-time {
        margin: 20px 0px;
    }

    .box-news-activities {
        margin: 10px 0;
    }

    .box-text-activities {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .border-bottom-new-act {
        width: 155px;
        height: 4px;
        background: #005BAA;
        background: -moz-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -webkit-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -o-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: -ms-linear-gradient(left, #005BAA 0%, #00B6F1 100%);
        background: linear-gradient(to right, #005BAA 0%, #00B6F1 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#005BAA', endColorstr='#00B6F1', GradientType=1);
    }

    .sub-new-des {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 10px;
    }
}

@media (max-width: 320px) {
    .box-text-tip {

        font-size: 24px;
        line-height: 26px;
        font-weight: 400;
        color: #005BAA;
    }

    .pad-left {
        padding-left: 20px;
    }

    .bg-footer {
        background-color: #ffffff;
        width: 100%;
        height: 393px;
        border-bottom: 4px solid #00B6F1;
        border-top: 4px solid #00B6F1;
    }

    .line-abt {
        background-color: #005BAA;
        width: 4px;
        height: 906px;
        position: absolute;
        margin-left: 6px;
        margin-top: -11px;
    }

    .line-abt-2 {
        background-color: #005BAA;
        width: 4px;
        height: 666px;
        position: absolute;
        margin-left: 7px;
        margin-top: -11px;
    }

    .bg-footer-mobile {
        width: 100%;
        height: 79px;
        position: absolute;
        bottom: 0px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .MultiCarousel .MultiCarousel-inner .item>div {
        text-align: center;
        padding: 10px;
        margin: 10px;
        background: #fff;
        color: #000;
    }

    .btn-position-banner {
        left: 50%;
        transform: translate(-50%, 50%);
        position: absolute;
        bottom: 282px;
    }

    .text-header-batt {

        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: black;
        margin-top: 0px;
        margin-bottom: 24px;
    }

    .img-box-home {
        width: 100%;
        background-color: #f1f1f1;
        height: 200px;
        margin: 20px 0px;
    }

    .batt-long-time {
        margin: 20px 0px;
    }
}

@media (min-width: 1440px) {
    .p-r-0 {
        padding-right: 0;
    }

    .img-new-m-img-box {
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 176px !important;
        margin-bottom: 100px;
    }


}

@media (min-width: 992px) {
    .f-s-bn-titile {
        font-size: 36px;

    }

}

@media (min-width: 1200px) {
    .p-r-0 {
        padding-right: 0;
    }

    .img-new-m-img-box {
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 176px !important;
        margin-bottom: 100px;
    }


}

@media (max-width: 1300px) {
    .ma-gin-l {
        margin-right: 7px;
    }
}

@media (max-width: 1300px) and (min-width: 1024px) {
    .warranty-sub-banner-text-wrapper {
        position: absolute;
        inset: 0;
        padding-left: 55px;
        padding-top: 55px;
    }
}

@media (max-width: 1200px) {
    .box-call-138 {
        position: fixed;
        top: 380px;
        right: 16px;
    }


    .warranty-register-step-final-btn-wrapper {
        display: flex;
        align-items: stretch;
        flex-direction: row;
        gap: 16px;
    }

    .warranty-register-step-final-btn {
        white-space: no-wrap;
        text-align: left;
    }

    .warranty-register-step-final-btn {
        white-space: wrap;
    }

    .warranty-register-step-final-btn--sm {
        max-width: 208px;
    }

    .warranty-register-step-final-btn--lg {
        max-width: 267px;
    }


}

@media (max-width: 1024px) {
    .box-call-138 {
        position: fixed;
        top: 323px;
        right: 16px;
    }

    .box-call-icon-138 {
        height: 75px;
        width: 75px;
        font-size: 14px;
        padding: 8px;

    }

    .title-our-h-text {
        padding: 10px 38px;
    }
}

@media (max-width: 800px) {
    .box-show-data {
        display: block;
        height: 450px;
    }

    .p-r-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .mrt-top {
        margin-top: 40px;
    }

    .img-banner-bg-p-lt {
        height: 400px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 15% 100%;
    }
}

@media (max-width: 475px) {

    .btn-center-mobile {
        margin: 0px auto;
    }

    .pd-l-r-btn {
        margin: 10px auto;
    }

    .box-content-b {
        text-align: center;
    }

    .f-s-bn-titile {
        font-size: 26px;
    }

    .f-s-bn-sub {
        font-size: 18px;
    }

    .img-banner-bg-p-lt {
        height: 400px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 33% 100%;
    }

}

@media (min-width: 992px) {
    .pd-l-r-btn {
        margin: 10px 10px 10px 0px;
    }
}

@media (max-width: 375px) {

    .sub-our-text {

        color: #646464;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 500;
    }

    .title-our-h-text {
        padding: 10px 13px;
    }

    .img-new-m-img-box:after {
        padding-bottom: 183.94% !important;
    }

    .mrt-top {
        margin-top: 30px;
    }

    .w-100-m {
        width: 100%;
    }

    .f-title {
        font-size: 30px;
    }

    .btn-center-mobile {
        margin: 0px auto;
    }

    .img-banner-bg-p-lt {
        background-position: 36% 100%;
    }

}



@media (min-width: 427px) {
    .show-destop {
        display: block;
    }

    .show-m {
        display: none;
    }

}

@media (max-width: 426px) {
    .show-destop {
        display: none;
    }

    .show-m {
        display: block;
    }

    .gs-1380-sub-banner-bg {
        width: 100%;
        height: 100%;
        min-height: 950px;
        object-fit: cover;
        display: block;
    }

    .gs-1380-sub-banner-text-wrapper img {
        width: 239.684px;
        height: 69px;
        aspect-ratio: 66/19;
        display: block;
    }

    .gs-1380-sub-banner-header {
        color: #007FC6;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .company-gradient-circle-left-2 {
        left: -85%;
    }


}

@media (max-width: 340px) {
    .product-item-title .body2 {
        font-size: 11px;
    }
}

@media (max-width: 300px) {
    .gs-1380-sub-banner-bg {
        width: 100%;
        height: 100%;
        min-height: 980px;
        object-fit: cover;
        display: block;
    }
}


.img-new-m-img-box {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 63px
}

.mobile-img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.img-new-m-img-box:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 154.94%;

}

body.wd-filter-window-open {
    overflow: hidden;
}

.wd-modal-window-overlay-tablet-mobile,
.wd-modal-window-tablet-mobile {
    display: none;
}

.wd-modal-window-overlay-tablet-mobile[hidden],
.wd-modal-window-tablet-mobile[hidden] {
    display: none !important;
}

/* Home: tablet/mobile filter window — no transitions */
.wd-modal-window-overlay-tablet-mobile,
.wd-modal-window-tablet-mobile {
    transition: none !important;
}

.filter-select-sub-group:has(.filter-select-sub-panel:not([hidden])),
.filter-select-brand-group:has(.filter-select-brand-panel:not([hidden])) {
    z-index: 50;
}

.wd-input-box-search-wrapper:has(.filter-select-sub-panel:not([hidden])),
.dealer-store-input-box-search .wd-input-box-search-wrapper:has(.filter-select-sub-panel:not([hidden])) {
    z-index: 50;
}

/* Hero search: panel ลอย fixed เหนือ section-white โดยไม่เปลี่ยน layout hero */
.bg-search-batt .filter-select-sub-panel.is-floating:not([hidden]) {
    position: fixed;
    z-index: 12000;
    margin-top: 0;
}

/* AOS wrapper ใน hero: หลังจบ animation อย่าคง transform ไว้
   มิฉะนั้นจะกลายเป็น containing block ของ panel ที่เป็น position:fixed
   ทำให้ตำแหน่งที่ JS คำนวณจาก viewport เพี้ยน */
.bg-search-batt [data-aos].aos-animate {
    transform: none !important;
}

/* GS 1380 sub-banner: fade-right + translate Y */
[data-aos=fade-right-down] {
    transform: translate3d(-100px, -20px, 0);
}

/* GS 1380 sub-banner: translate X only (no fade) */
[data-aos=slide-x-right] {
    transform: translate3d(-15px, 0, 0);
}

.gs-1380-sub-banner-wrapper [data-aos].aos-animate {
    transform: none !important;
}

/* Product list — bottom-right tough vector (matches homestyle .tough-vector-3) */
.product-list-layout {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}

/* Desktop PLP: sticky filter sidebar after product-pass-hero scrolls away */
@media (min-width: 1024px) {
    /* stretch filter height via wrapper (Safari: height:100% alone fails) */
    .product-list-layout > .invisible-slide-baner {
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    .product-list-layout > .invisible-slide-baner > .product-filter-column {
        flex: 1 1 auto;
        height: auto;
        min-height: 100%;
        align-self: stretch;
    }

    .product-filter-content {
        position: sticky;
        top: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: hidden;
        z-index: 5;
    }
}

.product-list-container {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
}

.product-list-tough-decor.service-section-decor {
    position: absolute;
    right: -253px;
    bottom: 23px;
    width: 100%;
    pointer-events: none;
}

.product-tough-vector {
    width: 70%;
    height: auto;
    pointer-events: none;
    z-index: -1;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.10;
}


/* Compare modal filter trigger — match wd-sub-input-box-search box model */
.compare-product-modal-sub-input-box-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 14px 16px;
    border-radius: 0 0 16px 0;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    flex: none;
    align-self: stretch;
    overflow: hidden;
}

.compare-product-modal-sub-input-box-search>span.body1,
.compare-product-modal-sub-input-box-search>span.body2,
.compare-product-modal-sub-input-box-search .wd-sub-input-box-search__input {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-product-modal-sub-input-box-search>img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    pointer-events: none;
}

/* Compare banner — desktop (invisible): hint when selected < 3 */
.invisible-slide-baner .compare-selected-comparable-hint {
    color: #fff;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Compare banner — tablet (visible): hint below compare title */
.visible-tablet-slide-baner .js-compare-comparable-hint-tablet {
    color: #fff;
    opacity: 0.95;
    line-height: 1.4;
}

.compare-product-product-selected-btn-wrapper.is-empty .compare-clear-btn,
.compare-product-product-selected-btn-wrapper.is-empty .compare-submit-btn {
    pointer-events: none;
    cursor: default;
}
/* Banner carousel ≥2561: equal slide size — no scale / no opacity dim */
@media (min-width: 3500px) {
    .banner-wrapper .owl-item:not(.center),
    .banner-wrapper .owl-item:not(.active),
    .interesting-banner-wrapper .owl-item:not(.center),
    .interesting-banner-wrapper .owl-item:not(.active),
    .banner-wrapper .owl-item .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item .h-w-imag-ban-slide {
        opacity: 1;
        transform: scale(1);
    }

    .banner-wrapper .owl-item.center .h-w-imag-ban-slide,
    .interesting-banner-wrapper .owl-item.center .h-w-imag-ban-slide {
        opacity: 1;
        transform: none;
    }
}

/* Home hero: shared media behind tabs (single video, no remount on tab change) */
.home-hero-shell {
    position: relative;
    height: 0;
    z-index: 0;
    pointer-events: none;
}

.home-hero-shared-media {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    pointer-events: none;
}

.home-hero-shared-media .bg-search-batt--shared-media {
    pointer-events: none;
}

.home-hero-tabs {
    position: relative;
    z-index: 1;
}

.home-hero-tabs > .tab-pane > .invisible-slide-baner > .bg-search-batt,
.home-hero-tabs > .tab-pane > .visible-tablet-slide-baner > .bg-search-batt {
    background: transparent;
}