.container {
    max-width: 1320px;
}

.invisible {
    visibility: hidden !important;
}

input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 1535px) {
    /* 2xl breakpoint ของ Tailwind */
    .container {
        max-width: 1320px;
    }
}

@media (max-width: 1279px) {
    /* xl breakpoint ของ Tailwind */
    .container {
        max-width: 1140px;
    }
}

@media (max-width: 1023px) {
    /* lg breakpoint ของ Tailwind */
    .container {
        max-width: 960px;
    }
}

@media (max-width: 767px) {
    /* md breakpoint ของ Tailwind */
    .container {
        max-width: 720px;
    }
}

@media (max-width: 639px) {
    /* sm breakpoint ของ Tailwind */
    .container {
        max-width: 540px;
    }
}

:root {
    /* blue */
    --blue-1: #e5f0fe;
    --blue-2: #d6e7fc;
    --blue-3: #c6defa;
    --blue-4: #bcd8fa;
    --blue-5: #90b6f1;
    --blue-6: #6394e5;
    --blue-7: #0b5dc1;
    --blue-8: #083e97;
    --blue-9: #052c65; /*text*/
    --blue-10: #031e47;

    /* yellow */
    --yellow-1: #fff7d9;
    --yellow-2: #ffeba5;
    --yellow-3: #ffe073;
    --yellow-4: #ffd43a;
    --yellow-5: #fbcb23;
    --yellow-6: #f2bd1d;
    --yellow-7: #ecb51d;
    --yellow-8: #d89f17;
    --yellow-9: #b38311;
    --yellow-10: #8c660d;

    /* gray */
    --gray-1: #fafafa;
    --gray-2: #e5e8f0;
    --gray-3: #d2d7e4;
    --gray-4: #b3bbd0;
    --gray-5: #8d9ab6;
    --gray-6: #6c7a96;
    --gray-7: #56607c;
    --gray-8: #454e65;
    --gray-9: #454e65;
    --gray-10: #2c3040;

    /* Font */
    --placeholder: #8d9ab6;

    /* Action */
    --info-1: #d1edeb;
    --info-2: #324470;
    --success-1: #def0d3;
    --success-2: #0f501d;
    --graph: #86efac;
    --warning-1: #fbffd2;
    --warning-2: #565414;
    --danger-1: #ffeded;
    --danger-2: #ff0000;
}

/* Font */
.placeholder-text {
    color: var(--gray-5);
}
.default {
    color: #080808;
}
.text-blue-custom {
    color: var(--blue-9);
}
.bg-blue-custom {
    background-color: var(--blue-9);
}

.select-model h6 {
    height: 3rem;
    line-height: 1.3rem;
    cursor: pointer;
}
.select-model .imgCar {
    transition: opacity 0.2s ease;
    opacity: 0.6;
}
.select-model.active .imgCar {
    opacity: 1;
}
.select-model.active h6 {
    text-decoration: underline;
    color: var(--blue-9) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
h7,
p {
    font-size: clamp(12px, 1vw, 16px);
    margin-bottom: 0px !important;
}

h1 {
    font-size: calc(1.25rem + 1.5vw) !important;
    font-weight: 600 !important;
}
h2 {
    font-size: calc(1.25rem + 0.3vw) !important;
    font-weight: 600 !important;
}
h3 {
    font-size: 28px;
    font-size: calc(1rem + 0.3vw) !important;
    font-weight: 500 !important;
}
h4
/* p */ {
    font-size: calc(0.8em + 0.3vw) !important;
    font-weight: 400 !important;
}
h5 {
    font-size: calc(0.9rem + 0.3vw) !important;
    font-size: 20px;
    font-weight: 400 !important;
}
h6 {
    font-size: 18px;
    font-weight: 400 !important;
    line-height: 1;
}
h7 {
    font-size: 17px;
    font-weight: 400 !important;
    line-height: 1;
}

span {
    font-size: clamp(14px, 0.8vw, 17px);
}

html,
body {
    font-family: 'Kanit', sans-serif;
    overflow-x: hidden;
    /* transform: scale(1);
    transform-origin: top left; */
}

.battery-danger,
.battery-danger .text-blue-custom,
.battery-danger h1,
.battery-danger h3,
.battery-danger h5,
.battery-danger h6,
.battery-danger span {
    color: var(--danger-2) !important;
}

input[type='range'].form-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;

    /* ใช้ background gradient ตามตัวแปร --_p ที่ JS จะเซ็ตให้ */
    background: linear-gradient(
        to right,
        var(--blue-6) 0%,
        var(--blue-6) var(--_p, 0%),
        var(--blue-3) var(--_p, 0%),
        var(--blue-3) 100%
    );
}

/* กรณีกลับด้าน: เติมจากขวาไปซ้าย (เปลี่ยนทิศ gradient เป็น to left) */
input[type='range'].form-range.slider-container-reverse {
    background: linear-gradient(
        to left,
        var(--blue-6) 0%,
        var(--blue-6) var(--_p, 0%),
        var(--blue-3) var(--_p, 0%),
        var(--blue-3) 100%
    );
}

/* WebKit track/thumb */
input[type='range'].form-range::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent; /* ให้เห็น gradient ของ input */
    border-radius: 999px;
}
input[type='range'].form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--slider-fill);
    margin-top: calc((6px - 18px) / 2);
}

/* Firefox: ทำ track/progress โปร่งใส ให้เห็น gradient ของ input */
input[type='range'].form-range::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 999px;
}
input[type='range'].form-range::-moz-range-progress {
    height: 6px;
    background: transparent;
    border-radius: 999px;
}

/* Edge (เก่า): กันไว้ */
input[type='range'].form-range::-ms-track {
    height: 6px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.updownbutton {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    line-height: 0.4;
    transform: translateX(-25px);
}

.updownbutton_responsive {
    transform: translateX(-25px);
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0.4;
}

@media (max-width: 992px) {
    .updownbutton_responsive {
        transform: translateX(-15px);
    }
}

.updownbutton img,
.updownbutton_img {
    width: clamp(10px, 2vw, 20px);
    height: clamp(5px, 1vw, 10px);
}

.line_default {
    background-color: var(--placeholder);
    transition: all 0.3s ease-in-out;
    height: 4px;
}
.line_active {
    background-color: var(--blue-8);
    transition: all 0.3s ease-in-out;
    height: 4px;
}

.line-hover {
    background-color: var(--blue-8);
    transition: all 0.3s ease-in-out;
}
.text-hover {
    color: var(--blue-9);
    transition: all 0.3s ease-in-out;
}

.keen-slider {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.keen-slider__slide {
    min-width: 200px; /* ความกว้างขั้นต่ำของ slide */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.imgCar {
    max-width: 100%;
    height: 110px;
    object-fit: contain;
    cursor: pointer;
}

.non-padding > * {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.inputText {
    font-size: clamp(30px, 3vw, 48px) !important;
    text-align: center !important;
    color: var(--blue-9) !important;
    width: clamp(150px, 10vw, 170px) !important;
    height: clamp(50px, 5vw, 70px);
}

.img_battery {
    height: 35px;
}

.custom-btn {
    background-color: var(--blue-9);
    color: white !important;
    width: clamp(80px, 10vw, 170px);
    height: clamp(35px, 5vw, 50px);
    font-size: clamp(16px, 2vw, 28px);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.status-success {
    background-color: var(--success-1);
    color: var(--success-2);
    width: fit-content;
    padding-inline: 30px;
    padding-block: 10px;
    border-radius: 10px;
    align-items: center;
}
.status-fail {
    background-color: var(--danger-1);
    color: var(--danger-2);
    width: fit-content;
    padding-inline: 30px;
    padding-block: 10px;
    border-radius: 10px;
    align-items: center;
}

/*------ slider ----------*/
.slider-container {
    position: relative;
    width: 100%;
}
.slider-container-reverse {
    direction: rtl;
}

.slider-container,
input[type='range'] {
    touch-action: none;
}

#customRange1,
#sliderOutbound {
    width: 100%;
    margin: 60px 0; /* ให้มีพื้นที่สำหรับ floating ทั้งบนและล่าง */
}

.floatingWrap {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* pointer-events: none; */
    /* width: 650px; */
}

@media (max-width: 2800px) {
    .floatingWrap {
        top: -170px;
    }
}

@media (max-width: 992px) {
    .floatingWrap {
        top: -125px;
    }
}

@media (max-width: 600px) {
    .floatingWrap {
        top: -100px;
    }
}

#floatingTruck {
    width: 240px;
    height: 160px;
    transform: translateX(-50%);
    transform: translateY(-30%);
}

/* @media (max-width: 600px) {
    .displayValueBox {
        margin-top: 15px !important;
    }
}

@media (max-width: 2800px) {
    .displayValueBox {
        margin-top: 15px;
    }
} */

.displayValueBox {
    align-items: center;
    /* margin-top: 20px; */
    background-color: var(--blue-7);
    color: white;
    width: clamp(110px, 15vw, 175px);
    height: clamp(35px, 5vw, 45px);
    text-align: center;
    margin-top: 15px;
}

/*------ slider ----------*/

.iconImg {
    height: 25px;
    width: auto;
}

.custom-border {
    border: solid var(--blue-7) 3px;
    width: 55%;
    margin: auto;
}

.slider-block {
    width: fit-content;
}
/* @media (max-width: 2800px) {
    .slider-block {
        width: 100%;
    }
}

@media (max-width: 798px) {
    .slider-block {
        width: fit-content;
    }
} */

@media (max-width: 2800px) {
    .display-box {
        height: clamp(150px, 20vw, 180px) !important;
    }
}

@media (max-width: 992px) {
    .display-box {
        height: auto !important;
        padding-block: 30px;
    }
}

.display-box {
    width: clamp(300px, 55vw, 600px);
    background-color: var(--blue-1);
    /* height: clamp(150px, 20vw, 180px) !important; */
    /* height: auto; */
}

.form-control {
    padding: 0px !important;
}

.hover-box {
    position: absolute;
    top: 50px;
    left: -40%;
    /* transform: translate(-50%, -50%); */
    padding: 10px 15px;
    background-color: var(--blue-1);
    color: var(--blue-9);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* display: flex; */
    display: none;
    gap: 10px;
    text-wrap: nowrap;
}

.cursor-pointer {
    cursor: pointer;
}

/*-------- table ---------*/

table {
    width: 80% !important;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0 10px;
}

thead th {
    color: var(--blue-9);
    padding: 12px;
    text-align: center;
    border-bottom: var(--blue-9) 4px solid;
    text-wrap: nowrap;
}

tbody td {
    padding: 10px 12px;
}

@media (max-width: 768px) {
    tbody td div {
        width: 150px;
    }
}

tbody tr.section-title td {
    font-weight: bold;
    color: var(--blue-9);
    border-bottom: var(--blue-9) 4px solid;
    padding: 16px 12px 8px;
}

td[colspan='4'] {
    text-align: left;
}

/* เดสก์ท็อป + โมบาย */
td .unit {
    display: inline-block;
    min-width: 3.5em;
    white-space: nowrap;
}
td.hide-unit .unit {
    visibility: hidden !important; /* ซ่อนแต่ยังจองพื้นที่ */
    pointer-events: none;
    user-select: none;
}

/* tr span {
    padding-right: 10px;
} */

/* ✅ ให้ตารางเล็กลงในจอเล็ก + เลื่อนแนวนอนได้เป็น fallback */
@media (max-width: 768px) {
    table {
        width: 100% !important;
    }

    /* ซ่อนหัวตาราง แล้วแปลงแถวเป็นการ์ด */
    thead {
        display: none;
    }

    tbody tr {
        display: block;
        margin: 12px auto;
        border: 1px solid #e9ecf2;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }

    /* แถวหัวข้อ section ให้เป็นบล็อกใหญ่คงสไตล์เดิม */
    tbody tr.section-title {
        border: none;
        background: transparent;
        margin: 20px 0 6px;
    }
    tbody tr.section-title td {
        display: block;
        border: none;
        padding: 0 4px 4px;
    }

    /* แต่ละเซลล์เป็นแถวๆ ซ้อนกัน */
    tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        /* padding: 10px 14px; */
        border-bottom: 1px dashed #e6e9ef;
    }
    tbody tr td:last-child {
        border-bottom: none;
    }

    /* คอลัมน์แรก (label) ทำพื้นหลัง ให้รู้ว่าเป็นหัวข้อแถว */
    tbody tr td:first-child {
        background: var(--blue-9);
        color: white;
        font-weight: 600;
        border-bottom: 1px solid #eef2f7;
    }

    /* คอลัมน์ค่าต่างๆ จะขึ้น label จาก data-label ที่ JS ใส่ให้ */
    table:not(#summaryOneway) tbody td:not(:first-child)::before {
        content: attr(data-label);
        font-weight: 600;
        margin-left: 13px;
        text-wrap: nowrap;
        min-width: 50px;
        text-align: start;
        font-size: clamp(14px, 1vw, 16px);

        /* ให้ label อยู่ซ้าย ค่าอยู่ขวา */
    }

    /* ปรับ span ภายในให้แสดงสวยขึ้นบนมือถือ */
    /* table:not(#summaryOneway) tbody td .value {
        margin-left: auto;
    } */
    /* tbody td .unit {
        margin-left: 6px;
        white-space: nowrap;
    } */

    td .unit {
        display: inline-block; /* ให้จองพื้นที่ได้ */
        min-width: 3.5em; /* กันตำแหน่งแกว่ง ปรับได้ตาม UI */
        white-space: nowrap;
    }
    td.hide-unit .unit {
        visibility: hidden !important; /* ซ่อนแต่ยังจองพื้นที่ */
        pointer-events: none;
        user-select: none;
    }
}

@media (max-width: 768px) {
    #summary {
        overflow-x: hidden;
    }

    /* ===== oneway: คงเป็นตารางปกติ ===== */
    table#summaryOneway {
        width: 100% !important;
        border-spacing: 0;
    }
    table#summaryOneway .section-title td {
        background: white;
        color: var(--blue-9);
    }
    table#summaryOneway thead {
        display: table-header-group;
    } /* แสดงหัวตารางตามปกติ */
    table#summaryOneway tbody tr {
        display: table-row;
        box-shadow: none;
        border-radius: 0;
        width: auto;
    }
    table#summaryOneway tbody td {
        display: table-cell;
        border-bottom: none;
    }

    table#summaryOneway tbody td:nth-child(2) {
        padding-inline: 25px;
    }
    /* หน่วยบนมือถือให้จองที่ไว้เสมอ */
    table#summaryOneway .unit {
        display: inline-block;
        min-width: 4em;
        white-space: nowrap;
    }
    table#summaryOneway td.hide-unit .unit {
        visibility: hidden !important;
    }

    table#summaryOneway tbody td .value {
        margin-left: auto;
    }
}
@media (max-width: 768px) {
    /* ===== twoway/offroad: แปลงเป็นการ์ด ===== */
    table:not(#summaryOneway) {
        width: 100% !important;
        border-spacing: 0;
    }
    table:not(#summaryOneway) thead {
        display: none;
    } /* ซ่อนหัวตาราง */

    /* ให้แต่ละแถวเป็นการ์ด */
    table:not(#summaryOneway) tbody tr {
        display: block;
        margin: 12px auto;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        width: min(640px, 92%);
    }

    /* แถวหัวข้อ section เป็นหัวการ์ด */
    table:not(#summaryOneway) tbody tr.section-title {
        box-shadow: none;
        background: transparent;
        margin: 18px auto 8px;
        padding: 0;
    }
    table:not(#summaryOneway) tbody tr.section-title td {
        border: none !important;
        padding: 0 4% 4px;
        background: #f4f4f9;
        text-align: center;
        color: var(--blue-9);
    }
    table:not(#summaryOneway) tbody tr.section-title td span {
        font-size: clamp(16px, 3vw, 20px);
    }

    /* แถวค่าปกติ: [ป้ายคอลัมน์] [ค่า + หน่วย] */
    table:not(#summaryOneway) tbody tr td.td-val {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 4%;
        text-align: left !important;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    }
    /* เซลล์แรก (label) เป็นหัวของการ์ด */
    table:not(#summaryOneway) tbody tr td.td-val:first-child,
    table:not(#summaryOneway) tbody tr td:first-child:not(.td-val) {
        display: block;
        font-weight: 600;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    /* ป้ายหัวคอลัมน์ (ขาไป/ขากลับ/ทั้งหมด) */
    table:not(#summaryOneway) .col-label {
        font-size: 14px;
        opacity: 0.7;
        margin-right: 8px;
        flex: 0 0 auto;
    }

    /* ค่า + หน่วย */
    table:not(#summaryOneway) .td-val .value,
    table:not(#summaryOneway) .td-val .unit {
        display: inline-block;
        margin: 0;
    }
    table:not(#summaryOneway) .td-val .value {
        font-weight: 600;
    }
    table:not(#summaryOneway) .td-val .unit {
        opacity: 0.8;
        margin-left: 6px;
        min-width: 3.5em; /* ✅ จองพื้นที่หน่วย */
        white-space: nowrap;
    }

    /* ✅ ซ่อนหน่วยแบบกินพื้นที่ (alignment ไม่เขย่า) */
    table:not(#summaryOneway) .td-val.hide-unit .unit {
        visibility: hidden !important;
    }

    /* sticky header สำหรับจอ md+ เท่านั้น (กันชนกับ oneway) */
    thead th {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
    }
}

.unit {
    display: inline-block;
    min-width: 3.5em;
    white-space: nowrap;
}
.unit-ghost {
    visibility: hidden;
} /* เริ่มต้นเป็นขีด → ซ่อนแต่ยังจองที่ */
td.hide-unit .unit {
    visibility: hidden !important;
} /* กรณี JS สั่งซ่อน */

/*------------------ toggle ----------------------*/

.toggle-container {
    display: inline-flex;
    width: 230px !important;
    height: fit-content;
    border: 2px solid #1e3a8a;
    border-radius: 9999px;
    overflow: hidden;
    background-color: var(--gray-2);
}

.toggle-button {
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    width: 115px !important;
    text-align: center;
    color: var(--gray-6);
}

.toggle-button.active {
    background-color: white;
    border-radius: 9999px;
    color: var(--blue-9) !important;
    font-weight: bold;
}

/*----------- select -----------*/
.custom-dropdown {
    width: 230px;
    height: 52px;
    background-color: #eef0f7;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    font-family: sans-serif;
}

.custom-dropdown-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a2d67;
    font-weight: bold;
    font-size: clamp(14px, 3vw, 24px);
}

.custom-dropdown-arrow {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 3px solid #fafafa;
}

.custom-dropdown-arrow::after {
    content: '▾';
    font-size: 30px;
    color: #0a2d67;
    transform: scaleX(1.5);
}

.dropdown-options {
    position: absolute;
    top: 110%;
    left: 0%;
    /* transform: translate(50%, -0%); */
    width: 230px;
    background-color: #eef0f7;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 100;
    max-height: clamp(150px, 20vw, 200px);
    overflow: auto;
}

.dropdown-options div {
    padding: 10px;
    text-align: center;
    color: #0a2d67;
    font-weight: bold;
    cursor: pointer;
    font-size: clamp(14px, 3vw, 18px);
}

.dropdown-options div:hover {
    background-color: #d9deeb;
}

/*-------------- checkbox --------------*/
.svg-checkbox {
    cursor: pointer;
    display: inline-block;
}

.svg-checkbox[data-checked='true'] .svg-box {
    stroke: #2ba923;
}

.svg-checkbox[data-checked='true'] .svg-check {
    fill: #2ba923;
}

.svg-checkbox[data-checked='false'] .svg-check {
    fill: none; /* ซ่อนไว้ถ้ายังไม่ติ๊ก */
}

.svg-checkbox[data-checked='false'] .svg-box {
    stroke: #ccc;
}

/*--------- Display summery ------------*/

.display-summery {
    background-color: var(--blue-9);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

/*--------- button-compare ------------*/

.button-compare {
    background-color: var(--blue-6);
    width: fit-content;
    border-radius: 15px;
    cursor: pointer;
}

.item {
    display: flex;
    align-items: center;
}

.square {
    min-width: 16px !important;
    min-height: 16px !important;
    margin-right: 8px;
}

/*---------- chart -----------*/
.chart-grid {
    display: grid;
    grid-template-columns: 0px 1fr; /* กว้างคอลัมน์ซ้าย (ปรับได้) */
    /* gap: 12px; */
    align-items: stretch; /* ซ้ายสูงเท่ากับ canvas */
    /* margin-bottom: 16px; */
    align-items: center;
}
.labels {
    display: grid;
    /* justify-items: end;  */
    font-weight: 600;
    font-size: 16px;
    text-wrap: nowrap;
    /* margin-right: 10px; */
}
.labels .label {
    display: flex;
    align-items: center; /* กลางแนวตั้งในแถว */
    justify-content: flex-end;
    /* white-space: nowrap; */

    /* overflow: hidden; */
    text-overflow: ellipsis;
}

@media (max-width: 2800px) {
    .legend_chart {
        width: 50%;
    }
}
@media (max-width: 992px) {
    .labels .label {
        justify-content: flex-start;
    }
    .legend_chart {
        width: 70%;
    }
}

@media (max-width: 740px) {
    .labels .label {
        justify-content: flex-start;
    }
    .legend_chart {
        width: 90%;
    }
}

canvas {
    width: 100% !important;
    display: block;
}

.chartOilAndElec.hidden {
    display: none !important;
}

#OnRoadOutFloatingWrap,
#OnRoadInFloatingWrap,
#OffRoadOutFloatingWrap,
#OffRoadInFloatingWrap {
    will-change: transform;
}

.model-img {
    max-height: 150px;
}

@media (max-width: 2800px) {
    .model-img {
        height: 150px;
    }
    .model-img {
        transform: translateY(-15px);
    }
}
@media (max-width: 992px) {
    .model-img {
        height: clamp(80px, 20vw, 100px) !important;
    }
}

@media (max-width: 700px) {
    .silder-block {
        width: 50vw !important; /* เล็กลงเมื่อจอแคบ */
    }
    .iconImg {
        display: none;
    }
}

.unit_slider_right {
    position: absolute;
    bottom: 45%;
}
/* มือถือ (จอเล็กกว่า 992px) */
@media (max-width: 991.98px) {
    .unit_slider_right {
        right: -80px;
    }
}

/* PC (จอใหญ่) */
@media (min-width: 992px) {
    .unit_slider_right {
        right: -100px;
    }
}

.unit_slider_left {
    position: absolute;
    bottom: 45%;
}
/* มือถือ (จอเล็กกว่า 992px) */
@media (max-width: 991.98px) {
    .unit_slider_left {
        left: -80px;
    }
}

/* PC (จอใหญ่) */
@media (min-width: 992px) {
    .unit_slider_left {
        left: -100px;
    }
}

.silder-block {
    max-width: 75vw;
}

.input_compare {
    background-color: var(--blue-1);
    height: clamp(150px, 30vw, 238px);
    width: clamp(350px, 60vw, 870px);
    padding-block: clamp(20px, 5vw, 40px);
    text-wrap: nowrap;
}

.input_compare input {
    width: clamp(80px, 13vw, 160px);
    height: clamp(30px, 3vw, 50px);
    text-align: center;
    font-size: clamp(14px, 3vw, 24px);
    background-color: transparent;
}

.input_oil {
    font-size: calc(1rem + 0.3vw) !important;
    text-wrap: nowrap !important;
}

.frame {
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
    align-items: center;
    justify-content: center;
    /* padding-inline: clamp(10px, 3vw, 65px); */
    position: relative;
    background-color: #ffffff;
    border-radius: 12px;
}

.frame .images {
    width: clamp(180px, 30vw, 243px);
    /* height: 80px; */
    aspect-ratio: 3.03;
}

.frame .div-wrapper {
    width: clamp(280px, 60vw, 500px);
    display: flex;
    height: clamp(50px, 10vw, 70px);
    align-items: center;
    gap: 10px;
    background-color: #fafafa;
    border-radius: 10px;
    border: 1px solid;
    border-color: #d2d7e4;
}

.frame input {
    background: transparent;
    padding-left: 20px;
}

/* .loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: grid;
    place-items: center;
    z-index: 2147483647; 
}
.loading-card {
    background: #fff;
    padding: 20px 28px;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
} */

/* .Input_placeholder {
    height: 97px;
    width: 100%;
} */

.spinner-border {
    color: var(--blue-9);
}

.custom_spinner .spinner-border {
    --bs-spinner-width: 1rem !important;
    --bs-spinner-height: 1rem !important;
}

.over-soft {
    color: var(--danger-2) !important;
}
input.over-soft {
    border: 1px solid var(--danger-2) !important;
}

/* .weight-block.over-soft {
    border: 2px solid var(--danger-2, #dc3545);
    border-radius: 8px;
    padding: 4px;
} */
.weight-block.over-soft h3,
.weight-block.over-soft h6,
.weight-block.over-soft h7,
.weight-block.over-soft input,
.weight-block.over-soft span {
    color: var(--danger-2, #dc3545) !important;
}
#onRoad,
#result {
    scroll-margin-top: 50px;
}

/* .alert_responsive {
    display: none;
} */
/* @media (max-width: 992px) {
    .alert_responsive {
        display: flex;
    }
} */

#travelling_timeGo {
    text-align: center !important ;
}
#travelling_timeBack {
    text-align: center !important;
}
#travelling_timeTotal {
    text-align: center !important;
}

#travelling_timeGo div {
    text-align: center !important ;
    transform: translateX(clamp(0px, 1vw, 20px));
}
#travelling_timeBack div {
    text-align: center !important;
    transform: translateX(clamp(0px, 1vw, 20px));
}
#travelling_timeTotal div {
    text-align: center !important;
    transform: translateX(clamp(0px, 1vw, 20px));
}
@media (max-width: 768px) {
    #travelling_timeGo div {
        text-align: center !important ;
        transform: translateX(0px) !important;
    }
    #travelling_timeBack div {
        text-align: center !important;
        transform: translateX(0px) !important;
    }
    #travelling_timeTotal div {
        text-align: center !important;
        transform: translateX(0px) !important;
    }
}

/* Chrome/Edge/Safari */
input[type='range'].thumb-green::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--blue-7); /* สีหัว */
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
    cursor: pointer;
}

/* Firefox */
input[type='range'].thumb-green::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--blue-7);
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
    cursor: pointer;
}

.border-xl-right {
    border-right: 2.5px solid var(--blue-9);
    transform: scaleY(1.5);
}
.border-lg-right {
    border-right: 2.5px solid var(--blue-9);
    transform: scaleY(1.5) translateX(-15px) !important;
    /* transform: translateX(-20px); */
}

@media (max-width: 2800px) {
    .border-left {
        border-left: 2.5px solid var(--blue-9);
        /* transform: scaleY(1.5); */
        display: block !important;
    }
}

@media (max-width: 1600px) {
    .border-left {
        border-left: 2.5px solid var(--blue-9);
        /* transform: scaleY(1.5); */
        display: none !important;
    }
}

/* .custom-hr {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    margin: auto;
    background-color: #083e97;
    border: 1.5px solid #083e97;
    opacity: 1 !important;
    margin-block: 100px;
}

@supports (width: 100dvw) {
    .custom-hr {
        width: 100dvw;
        margin-left: calc(50% - 50dvw);
        margin-right: calc(50% - 50dvw);
    }
} */

.custom-hr {
    border: 0;
    border-top: 4px solid #083e97;
    opacity: 0.5;
    margin-top: 80px;
    margin-bottom: 50px;

    /* กว้าง 80% ของ viewport และจัดกึ่งกลางเทียบกับ viewport */
    width: 90vw;
    margin-left: calc(50% - 45vw);
    margin-right: calc(50% - 45vw);
}

/* กันเคสที่ 1vw รวมแถบสกรอลล์ (ถ้ามี) */
@supports (width: 100dvw) {
    .custom-hr {
        width: 90dvw;
        margin-left: calc(50% - 45dvw);
        margin-right: calc(50% - 45dvw);
    }
}

@media (max-width: 2800px) {
    .is_batteryfull {
        margin-top: var(--bs-gutter-y) !important;
    }
}

@media (max-width: 992px) {
    .is_batteryfull {
        margin-top: 40px !important;
    }
}

.btnNav {
    width: clamp(100px, 12vw, 120px) !important;
    padding-block: 12px;
    /* padding-inline: 8px; */
}

@media (min-width: 1280px) {
    .w-xl-100 {
        width: 100% !important;
    }
}
@media (min-width: 768px) {
    .w-md-80 {
        width: 80% !important;
    }
}

@media (max-width: 2800px) {
    .marginChooseModel {
        margin-top: 100px !important;
    }
}
@media (max-width: 992px) {
    .marginChooseModel {
        margin-top: 0px !important;
    }
}

@media (max-width: 2800px) {
    .offRoadInterface {
        column-gap: 20px !important;
    }
}

@media (max-width: 1600px) {
    .offRoadInterface {
        column-gap: clamp(40px, 5vw, 150px) !important;
        /* column-gap: clamp(60px, 8vw, 150px) !important; */
    }
}

@media (max-width: 2800px) {
    .inputblock {
        width: 100%;
        padding-block: 10px;
    }
}

@media (max-width: 2800px) {
    .weightabs {
        bottom: 0px;
    }
}
@media (max-width: 992px) {
    .weightabs {
        bottom: -24px;
    }
}

/* @media (max-width: 992px) {
    .inputblock {
        width: 350px !important;
    }
} */

/* @media (max-width: 2800px) {
    .responsive-shadow-onRoad {
        width: 95%;
        box-shadow: none;
    }
}
@media (max-width: 992px) {
    .responsive-shadow-onRoad {
        width: clamp(300px, 50vw, 460px);
        box-shadow: var(--bs-box-shadow-lg) !important;
    }
} */

/* body.lang-en .chat-button-text {
    padding-top: 5px;
    font-size: 1.3rem !important; 
    padding-left: 4px;
    left: 0% !important;
    top: 23% !important;
} */

/* .chat-button-text {
    padding-top: 5px;
    font-size: 1.4rem !important; 
    left: 18% !important;
    top: 23% !important;
} */

/* @supports (-webkit-touch-callout: none) {
    body.lang-en .chat-button-text {
        padding-left: 4px !important;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    body.lang-en .chat-button-text {
        padding-left: 4px !important;
    }
} */

/* @-moz-document url-prefix() {
    body.lang-en .chat-button-text {
        padding-left: 0 !important; /
    }
} */

@media (max-width: 2800px) {
    .ps-100 {
        padding-left: 0px !important;
    }
}
@media (max-width: 1200px) {
    .ps-100 {
        padding-left: clamp(65px, 5vw, 80px) !important;
    }
}
@media (max-width: 992px) {
    .ps-100 {
        padding-left: 0px !important;
    }
}

@media (max-width: 2800px) {
    .pe-140 {
        padding-right: 0px !important;
    }
}
@media (max-width: 1200px) {
    .pe-140 {
        padding-right: 140px !important;
    }
}
@media (max-width: 992px) {
    .pe-140 {
        padding-right: 0px !important;
    }
}

@media (max-width: 2800px) {
    .pl-25 {
        padding-left: 32px !important;
    }
}
@media (max-width: 1200px) {
    .pl-25 {
        padding-left: 10px !important;
    }
}
@media (max-width: 992px) {
    .pl-25 {
        padding-left: 12px !important;
    }
}