@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url("./reset.css");

:root {
    scroll-behavior: unset;
    --font-family: "Kanit", sans-serif;
    --font--sarabun:"Sarabun", sans-serif;
    --body-font-size: 1em;
    --over-font-size: 4em;
    --h1-font-size: 3.2em;
    /* 64px -> 4em */
    --h2-font-size: 2.5em;
    /* 48px -> 3em */
    --h3-font-size: 2em;
    /* 40px -> 2.5em */
    --h4-font-size: 1.8em;
    /* 36px -> 2.25em */
    --h5-font-size: 1.5em;
    /* 32px -> 2em */
    --h6-font-size: 1.25em;
    /* 24px -> 1.5em */

    --font-size-btn: 1em;
    --font-size-small: 0.875em;

    --clr-body: #242424;
    --clr-primary: #d8a847;
    --clr-primary-2: #64c5c1;
    --clr-green-light: #e0f3f3;
    --clr-grey-light: #F2F2F2;
    --clr-grey: #757575;
    --clr-white: #ffffff;
    --clr-dark-grey: #5a5a5a;
    --clr-dark: #1d1d1d;
    --clr-gold: #af842b;
    --clr-gd-primary: linear-gradient(233.21deg, #369da0 0%, #64c5c1 100%);
    --clr-gd-green2: linear-gradient(99.54deg, #369da0 1.74%, #64c5c1 103.31%);
    --clr-thumb-title-hover: #64c5c1;
    --clr-bullet: #369da0;
    --clr-line: #e4e4e4;
    --space-container: 1320px;
    --clr-pagination: #369da0;
    --input-bg-grey: #f3f3f3;
    --small-sm: 0.6em;
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.311253 0.275003C0.711659 -0.105383 1.34462 -0.0891535 1.725 0.311253L8.41471 7.35305L1.68775 13.726C1.28681 14.1058 0.653881 14.0887 0.27405 13.6877C-0.105781 13.2868 -0.088675 12.6539 0.312258 12.274L5.5853 7.27854L0.275003 1.68875C-0.105383 1.28835 -0.0891532 0.655388 0.311253 0.275003Z' fill='%23636363'/%3E%3C/svg%3E%0A");
}

.subhospital {
    --clr-primary: #006f6b;
    --clr-primary-2: #268982;

    /* --clr-thumb-title-hover:#AF842B; */
    --clr-bullet: linear-gradient(91.43deg, #af842b -6.34%, #eebd7c 99.19%);
    --clr-gd-primary: linear-gradient(90deg,
            rgba(0, 111, 107, 1) 0%,
            rgba(98, 196, 180, 1) 100%);
    --clr-gd-green2: linear-gradient(91.43deg, #006f6b -6.34%, #62c4b4 99.19%);
    --clr-pagination: #af842b;
}

.btn-check:focus+.btn,
.btn:focus {
    box-shadow: none;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: none !important;
    outline-offset: 0;
}

.btn-check:active+.btn-light:focus,
.btn-check:checked+.btn-light:focus,
.btn-light.active:focus,
.btn-light:active:focus,
.show>.btn-light.dropdown-toggle:focus {
    box-shadow: none;
}

body {
    transition: none;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    font-family: var(--font-family);
    line-height: 1.4;
    color: var(--clr-body);
    font-size: var(--body-font-size);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

.menuClick {
    overflow: hidden;
}

body.open-popup {
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--clr-body);
    outline: none;
    text-decoration: none;
    transition: all ease 0.5s;
    cursor: pointer;
}

.f-1em,
.f-1em button,
.f-1em a {
    font-size: 1em !important;
}

a:hover {
    text-decoration: none;
    color: var(--clr-body);
}

a:focus {
    outline: none;
    box-shadow: none;
}

img {
    max-width: 100%;
}

select {
    -webkit-appearance: none;
}

.wrapper {
    float: left;
    width: 100%;
    overflow: hidden;
    position: relative;
}

section {
    float: left;
    width: 100%;
    position: relative;
}

.fw {
    width: 100%;
    float: left;
}

.pd {
    padding: 50px 0;
}

.pd-80 {
    padding: 4em 0;
}

.pt-80 {
    padding-top: 4em;
}

.pd-100{
    padding: 100px 0;
}
.space-150 {
    padding-top: 7.5em;
}

.box {
    float: left;
    width: 100%;
    position: relative;
}

.ele {
    left: 50%;
    top: 50%;
    position: absolute;
}

.zindex-1 {
    z-index: 1;
}

.zindex-2 {
    z-index: 2;
}

.radius {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.container-1360 {
    max-width: 1360px;
}

.loadpage {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center center #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content {
    font-size: 1em;
    width: 100%;
    float: left;
}
.content p{font-family: var(--font--sarabun);}
.content-sarabun p{font-family: var(--font--sarabun);}
.content-all-sarabun *{font-family: var(--font--sarabun) !important;}
.modal-product-detail  .content *{font-family: var(--font--sarabun);}
.modal-product-detail .content h1,.modal-product-detail .content h2,.modal-product-detail .content h3,.modal-product-detail .content h4,.modal-product-detail .content h5,.modal-product-detail .content h6,.modal-product-detail .content .h1,.modal-product-detail .content .h2,.modal-product-detail .content .h3,.modal-product-detail .content .h4,.modal-product-detail .content .h5,.modal-product-detail .content .h6,.modal-product-detail .h7{font-family: var(--font-family);}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.h7{font-family: var(--font-family);}
hr.short {
    width: 90px;
    height: 2px;
    opacity: 1;
}

.content.text-center hr.short {
    margin-left: auto;
    margin-right: auto;
}

.breadcrumb-item {
    color: var(--clr-dark-grey);
}

.breadcrumb-item.active {
    color: var(--clr-primary);
}

.content .over-size,
.over-size{font-size: var(--over-font-size);}

.content h1,
.content .h1,
h1,
.h1 {
    font-size: var(--h1-font-size);
    font-weight: 500;
    line-height: 1.2;
    font-family: var(--font-family);
}

.content h2,
.content .h2,
h2,
.h2 {
    font-size: var(--h2-font-size);
    font-weight: 500;
    line-height: 1.2;
    font-family: var(--font-family);
}

.content h3,
.content .h3,
h3,
.h3 {
    font-size: var(--h3-font-size);
    font-weight: 500;
    line-height: 1.2;
    font-family: var(--font-family);
}

.content h4,
.content .h4,
h4,
.h4 {
    font-size: var(--h4-font-size);
    font-weight: 500;
    line-height: 1.2;
    font-family: var(--font-family);
}

.content h5,
.content .h5,
h5,
.h5 {
    font-size: var(--h5-font-size);
    font-weight: 500;
    line-height: 1.2;
    font-family: var(--font-family);
}

.content h6,
.content .h6,
h6,
.h6 {
    font-size: var(--h6-font-size);
    font-weight: 500;
    font-family: var(--font-family);
}

.content .h7,
.h7 {
    font-size: 1.125em;
    font-weight: 500;
    font-family: var(--font-family);
}

.content.p-18 p {
    font-size: 1.125em;
    font-weight: 300;
}

small,
.t-small {
    font-size: var(--font-size-small);
}

.content ul,
.content ol {
    padding-left: 25px;
}

.content ul li {
    position: relative;
}

.content ul li::before {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    top: 10px;
    left: -12px;
    background-color: var(--clr-dark-grey);
    border-radius: 100px;
}

.content ul.list-custom-1,ul.list-custom-1{padding-left: 50px;}
.content ul.list-custom-1 li::before, ul.list-custom-1 li::before {
    content: "";
    background-color:transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='22' viewBox='0 0 20 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 8.40193C20.5 9.55663 20.5 12.4434 18.5 13.5981L5 21.3923C3 22.547 0.499999 21.1036 0.499999 18.7942L0.5 3.20577C0.5 0.896366 3 -0.547006 5 0.607694L18.5 8.40193Z' fill='%23E6B571'/%3E%3C/svg%3E%0A");
    width: 1.875em;
    height: 1.875em;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: -50px;
    border-radius: 0;
}


.t-bold,
b,
strong {
    font-weight: 600 !important;
}
.t-sarabun{font-family: var(--font--sarabun) !important;}
.t-md {
    font-weight: 500;
}

.t-regular {
    font-weight: 400 !important;
}

.t-light {
    font-weight: 300 !important;
}

.small-sm {
    font-size: var(--small-sm);
}

/* ////// BTN ///// */
.btn-icon>span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-clr-gold.btn-text {
    color: var(--clr-gold);
}

.btn-text {
    padding: 0;
}

button.btn.btn-text.btn-link.px-0.fw.btn-dark:hover {
    background-color: transparent !important;
    border: 0;
}
.invert-color,
.invert-color a:not(.btn) {
    color: var(--clr-white);
}

.invert-color hr {
    background-color: #fff;
}

.clr-primary {
    color: var(--clr-primary);
}

.clr-primary-2 {
    color: var(--clr-primary-2);
}

.clr-grey {
    color: var(--clr-grey);
}

.clr-dark-grey {
    color: var(--clr-dark-grey);
}

a.clr-dark-grey:hover {
    color: var(--clr-primary);
}

.clr-dark {
    color: var(--clr-dark);
}

.clr-white {
    color: var(--clr-white);
}

.bg-clr-primary {
    background-color: var(--clr-primary);
}
.bg-clr-transparent{background-color: transparent !important;}
.bg-clr-grey {
    background-color: var(--clr-grey);
}

.bg-clr-gold {
    background-color: var(--clr-gold);
}

.bg-clr-white {
    background-color: var(--clr-white);
}
.bg-clr-grey-light{
    background-color: var(--clr-grey-light);
}
.bg-clr-grey-light-2{
    background-color: #F2F2F2;
}
.bg-clr-green-light {
    background-color: var(--clr-green-light);
}

.bg-clr-dark {
    background-color: var(--clr-dark);
}

.bg-gd-clr-primary {
    background: var(--clr-gd-primary);
}

.white-space-nowrap {
    white-space: nowrap;
}

.btn {
    border-radius: 5px;
    padding: 0.4em 2em;
    font-weight: 500;
    font-size: var(--font-size-btn);
    transition: all ease 0.4s;
}

.btn-large {
    font-size: var(--h6-font-size);
}

.btn-underline {
    text-decoration: underline;
}

.btn-clr-primary {
    border: 2px solid var(--clr-primary);
    background-color: var(--clr-primary);
    color: var(--clr-body);
}
.btn-clr-primary svg{
    fill: var(--clr-body);
}

.btn-clr-primary:hover {
    background-color: var(--clr-white);
    color: var(--clr-primary);
}


.btn-clr-primary:hover svg {
    fill: var(--clr-primary);
}

.btn-clr-grey {
    border: 2px solid var(--clr-grey);
    background-color: var(--clr-grey);
}

.btn-clr-grey:hover {
    background-color: var(--clr-white);
}

.btn-clr-light {
    border: 2px solid var(--clr-white);
    background-color: var(--clr-white);
    color: var(--clr-primary);
}

.btn-clr-light:hover {
    background-color: var(--clr-primary);
    color: var(--clr-white);
}

.btn-clr-light.btn-text {
    background-color: transparent;
    border: 0;
    color: var(--clr-white);
}

/* BTN OUTLINE */
.btn-clr-primary.btn-outline {
    background-color: transparent;
    color: var(--clr-primary);
}

.btn-clr-primary.btn-outline:hover {
    background-color: var(--clr-primary);
    color: var(--clr-white);
}

.card-link.btn-clr-primary.btn-outline:hover {
    background-color: transparent;
    color: var(--clr-primary);
}
.btn-clr-primary.btn-outline svg{
    fill: var(--clr-primary);
}

.btn-clr-primary.btn-outline:hover svg{
    fill: var(--clr-white);
}



.btn-clr-grey-light.btn-outline {
    background-color: transparent;
    color: var(--clr-grey);
    border-color: var(--clr-grey);
}

.btn-clr-grey-light.btn-outline:hover {
    background-color: var(--clr-grey-light);
    color: var(--clr-body);
    border-color: var(--clr-grey);
}

.card-link.btn-clr-grey-light.btn-outline:hover {
    background-color: transparent;
    color: var(--clr-grey);
}
.btn-clr-grey-light.btn-outline svg{
    fill: var(--clr-grey);
}

.btn-clr-grey-light.btn-outline:hover svg{
    fill: var(--clr-body);
}

.select2-results{font-family: var(--font--sarabun);}


.btn-clr-primary.btn-text {
    background-color: transparent;
    border: 0;
    color: var(--clr-primary);
}

.btn-clr-primary.btn-text.btn-icon svg {
    fill: var(--clr-primary);
}

.btn-clr-primary.btn-text:hover {
    color: var(--clr-body);
}

.btn-clr-primary.btn-text.btn-icon:hover svg {
    fill: var(--clr-body);
}

.btn-clr-light.btn-outline {
    background-color: transparent;
    color: var(--clr-white);
}

.btn-clr-light.btn-outline.btn-icon svg {
    fill: var(--clr-white);
}

.btn-clr-light.btn-outline:hover {
    background-color: var(--clr-white);
    color: var(--clr-body);
}

.btn-clr-light.btn-outline.btn-icon:hover svg {
    fill: var(--clr-body);
}

.bg-clr-gold.btn-outline {
    background-color: transparent;
    color: var(--clr-gold);
    border-color: var(--clr-gold);
}

.bg-clr-gold.btn-outline:hover {
    background-color: var(--clr-gold);
    color: var(--clr-white);
}

/* ///////// input //////// */
form label {
    color: var(--clr-dark-grey);
}

.form-floating>.form-control,
.form-control,
input {
    background-color: var(--input-bg-grey);
    border-radius: 5px;
    border: 1px solid #C4C4C4;
    color: var(--clr-dark-grey);
    padding: 6px 20px;
}

.form-floating>.form-control,
.form-control,
input::placeholder {
    color: var(--clr-dark-grey);
    font-size: 1em;
}

textarea.form-control {
    border-radius: 8px;
}
footer{background-color: #232323;}

form .bootstrap-select>.dropdown-toggle {
    background-color: var(--input-bg-grey);
    border-radius: 100px;
    border: 1px solid #f3f3f3;
    color: var(--clr-dark-grey);
    padding: 8px 20px;
    font-size: 1rem !important;
    font-weight: 400;
}

.form-control[type="file"] {
    padding-left: 0;
}
.form-control[type="file"]::-webkit-file-upload-button {
    padding:8px 20px;
    background-color: #C4C4C4;
    color: #fff;
    height: 100%;
}

.rounded-15{border-radius: 15px;}
/* header */

.header {
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background-color: var(--clr-dark);
    z-index: 99;
}
.header ul li a.active,.header ul li a:hover{color: var(--clr-primary);}
a.has-sub{position: relative;padding-right: 25px;}
a.has-sub::before{
    content:url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.0003 4.00019C1.13191 3.99943 1.26237 4.02466 1.38421 4.07442C1.50605 4.12419 1.61686 4.19751 1.7103 4.29019L6.2903 8.88019C6.38327 8.97391 6.49387 9.04831 6.61573 9.09908C6.73759 9.14984 6.86829 9.17598 7.0003 9.17598C7.13231 9.17598 7.26302 9.14984 7.38488 9.09908C7.50674 9.04831 7.61734 8.97391 7.7103 8.88019L12.2903 4.29019C12.4786 4.10189 12.734 3.9961 13.0003 3.9961C13.2666 3.9961 13.522 4.10189 13.7103 4.29019C13.8986 4.4785 14.0044 4.73389 14.0044 5.00019C14.0044 5.13205 13.9784 5.26262 13.928 5.38444C13.8775 5.50626 13.8035 5.61695 13.7103 5.71019L9.1203 10.2902C8.55036 10.8377 7.79066 11.1436 7.0003 11.1436C6.20995 11.1436 5.45024 10.8377 4.8803 10.2902L0.290305 5.71019C0.196577 5.61723 0.12218 5.50663 0.0714116 5.38477C0.0206428 5.26291 -0.00549455 5.1322 -0.00549453 5.00019C-0.00549452 4.86818 0.0206428 4.73748 0.0714117 4.61562C0.122181 4.49376 0.196577 4.38316 0.290305 4.29019C0.383745 4.19751 0.494559 4.12419 0.616397 4.07442C0.738234 4.02466 0.868697 3.99943 1.0003 4.00019Z' fill='white'/%3E%3C/svg%3E%0A");
    position: absolute;
    top: 4px;
    right: 0;
    width: 15px;
    height: 16px;
}
a.has-sub:hover:before{
    content: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.0003 4.00019C1.13191 3.99943 1.26237 4.02466 1.38421 4.07442C1.50605 4.12419 1.61686 4.19751 1.7103 4.29019L6.2903 8.88019C6.38327 8.97391 6.49387 9.04831 6.61573 9.09908C6.73759 9.14984 6.86829 9.17598 7.0003 9.17598C7.13231 9.17598 7.26302 9.14984 7.38488 9.09908C7.50674 9.04831 7.61734 8.97391 7.7103 8.88019L12.2903 4.29019C12.4786 4.10189 12.734 3.9961 13.0003 3.9961C13.2666 3.9961 13.522 4.10189 13.7103 4.29019C13.8986 4.4785 14.0044 4.73389 14.0044 5.00019C14.0044 5.13205 13.9784 5.26262 13.928 5.38444C13.8775 5.50626 13.8035 5.61695 13.7103 5.71019L9.1203 10.2902C8.55036 10.8377 7.79066 11.1436 7.0003 11.1436C6.20995 11.1436 5.45024 10.8377 4.8803 10.2902L0.290305 5.71019C0.196577 5.61723 0.12218 5.50663 0.0714116 5.38477C0.0206428 5.26291 -0.00549455 5.1322 -0.00549453 5.00019C-0.00549452 4.86818 0.0206428 4.73748 0.0714117 4.61562C0.122181 4.49376 0.196577 4.38316 0.290305 4.29019C0.383745 4.19751 0.494559 4.12419 0.616397 4.07442C0.738234 4.02466 0.868697 3.99943 1.0003 4.00019Z' fill='%23E6B571'/%3E%3C/svg%3E%0A");
}
a.has-sub.active::before{
    content: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.9998 10.9998C12.8682 11.0006 12.7377 10.9753 12.6159 10.9256C12.4941 10.8758 12.3833 10.8025 12.2898 10.7098L7.70982 6.11981C7.61686 6.02609 7.50626 5.95169 7.3844 5.90092C7.26254 5.85015 7.13183 5.82402 6.99982 5.82402C6.86781 5.82402 6.7371 5.85015 6.61524 5.90092C6.49338 5.95169 6.38278 6.02609 6.28982 6.11981L1.70982 10.7098C1.52152 10.8981 1.26612 11.0039 0.999819 11.0039C0.733518 11.0039 0.478123 10.8981 0.289819 10.7098C0.101516 10.5215 -0.00427246 10.2661 -0.00427246 9.99981C-0.00427246 9.86795 0.0216994 9.73738 0.0721598 9.61556C0.12262 9.49374 0.196581 9.38305 0.289819 9.28981L4.87982 4.70982C5.44976 4.16225 6.20946 3.85645 6.99982 3.85645C7.79018 3.85645 8.54988 4.16225 9.11982 4.70982L13.7098 9.28981C13.8035 9.38277 13.8779 9.49337 13.9287 9.61523C13.9795 9.73709 14.0056 9.86779 14.0056 9.99981C14.0056 10.1318 13.9795 10.2625 13.9287 10.3844C13.8779 10.5062 13.8035 10.6168 13.7098 10.7098C13.6164 10.8025 13.5056 10.8758 13.3837 10.9256C13.2619 10.9753 13.1314 11.0006 12.9998 10.9998Z' fill='%23E6B571'/%3E%3C/svg%3E%0A");
}
.outer-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 50px;
    max-width: 1820px;
    margin: 0 auto;
    max-height: 85px;
}

.item-header-center ul {
    display: flex;
    gap: 28px;
}

.item-header-center>ul>li>a {
    color: var(--clr-white);
}

.item-header-r ul {
    display: flex;
    gap: 15px;
    align-items: center;
}

.outer-sub-menu {
    position: fixed;
    width: 100%;
    height: auto;
    top: 85px;
    left: 0;
    float: left;
    background-color: #fff;
    box-shadow: 0px 0 16px -4px rgb(12 12 13 / 10%);
    display: none;
}

.inner-sub-menu{width: 100%;display: flex;gap: 20px;padding: 40px 0;}
.inner-sub-menu > ul{flex-direction: column;gap: 0;width: 25%;}
.inner-sub-menu > ul > li a{padding: 5px 10px;width: 100%;float: left;}
.inner-sub-menu > ul > li a:hover{color: var(--clr-primary);}
.form-control:focus {
    box-shadow: none;
}

/* OUTER */
.outer {
    width: 100%;
    padding: 10px 60px;
    max-width: 1820px;
    margin: 0 auto;
}

/* FILTER SEARCH */
.sec-search {
    border-top: 1px solid #32302b;
}

.filter-lists {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
    /* width: calc(100% - (5vw + 160px)); */
}
.filter-lists .select2-container{max-width: 200px;height: auto;}

.filter-lists .select2-container--default .select2-selection--single,.filter-lists .select2-container--default .select2-selection--multiple{
    background: transparent;
    color: var(--clr-white);
    padding: 0.6em 2em 0.6em 1em;
    height: auto;
    border: 1px solid #fff;
  
}

.filter-lists  .select2-container--default .select2-selection--single .select2-selection__rendered,.filter-lists  .select2-container--default .select2-selection--multiple .select2-selection__rendered{  color: #fff;}
.filter-lists  .select2-container--default .select2-selection--single .select2-selection__placeholder,.filter-lists  .select2-container--default .select2-search--inline .select2-search__field, .select2-selection__placeholder,.filter-lists  .select2-container--default .select2-search--inline .select2-search__field::placeholder{color: #fff;}
.bootstrap-select>.dropdown-toggle:after {
    position: absolute;
    margin: 0;
    right: 1em;
}
.filter-lists .select2-container--default .select2-selection--multiple .select2-selection__rendered li{margin: 0;}
.filter-lists .select2-container--default .select2-selection--multiple .select2-selection__rendered{vertical-align: middle;display: flex;gap: 5px;}
.filter-lists .select2-container .select2-search--inline .select2-search__field{margin-top: 0;}
.filter-lists .btn{padding: 0.6em 2em 0.6em 2em;}
.filter-lists  .select2-selection.select2-selection--multiple:after{position: absolute;}
.filter-lists  .select2-container--default .select2-selection--single .select2-selection__arrow b{
    border: 0;
    margin: 0;
    width: 14px;
    height: 8px;
    left: -3px;
    top: 50%;
    transform: translateY(-50%);
    content: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.0003 0.000194538C1.13191 -0.000566342 1.26237 0.0246592 1.38421 0.0744237C1.50605 0.124188 1.61686 0.197513 1.7103 0.290194L6.2903 4.88019C6.38327 4.97391 6.49387 5.04831 6.61573 5.09908C6.73759 5.14984 6.86829 5.17598 7.0003 5.17598C7.13231 5.17598 7.26302 5.14984 7.38488 5.09908C7.50674 5.04831 7.61734 4.97391 7.7103 4.88019L12.2903 0.290195C12.4786 0.101892 12.734 -0.00389569 13.0003 -0.00389567C13.2666 -0.00389564 13.522 0.101892 13.7103 0.290195C13.8986 0.478498 14.0044 0.733893 14.0044 1.00019C14.0044 1.13205 13.9784 1.26262 13.928 1.38444C13.8775 1.50626 13.8035 1.61695 13.7103 1.71019L9.1203 6.29018C8.55036 6.83775 7.79066 7.14355 7.0003 7.14355C6.20995 7.14355 5.45024 6.83775 4.8803 6.29018L0.290305 1.71019C0.196576 1.61723 0.12218 1.50663 0.0714116 1.38477C0.020643 1.26291 -0.00549455 1.1322 -0.00549453 1.00019C-0.00549452 0.868181 0.020643 0.737475 0.0714117 0.615616C0.12218 0.493757 0.196576 0.383157 0.290305 0.290194C0.383745 0.197513 0.494559 0.124188 0.616397 0.0744236C0.738234 0.0246591 0.868697 -0.000566365 1.0003 0.000194538Z' fill='white'/%3E%3C/svg%3E%0A");
}
.filter-lists  .select2-selection.select2-selection--multiple:after{
    border: 0;
    margin: 0;
    width: 14px;
    height: 8px;
    right: 7px;
    top: 31%;
    transform: translateY(-50%);
    content: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.0003 0.000194538C1.13191 -0.000566342 1.26237 0.0246592 1.38421 0.0744237C1.50605 0.124188 1.61686 0.197513 1.7103 0.290194L6.2903 4.88019C6.38327 4.97391 6.49387 5.04831 6.61573 5.09908C6.73759 5.14984 6.86829 5.17598 7.0003 5.17598C7.13231 5.17598 7.26302 5.14984 7.38488 5.09908C7.50674 5.04831 7.61734 4.97391 7.7103 4.88019L12.2903 0.290195C12.4786 0.101892 12.734 -0.00389569 13.0003 -0.00389567C13.2666 -0.00389564 13.522 0.101892 13.7103 0.290195C13.8986 0.478498 14.0044 0.733893 14.0044 1.00019C14.0044 1.13205 13.9784 1.26262 13.928 1.38444C13.8775 1.50626 13.8035 1.61695 13.7103 1.71019L9.1203 6.29018C8.55036 6.83775 7.79066 7.14355 7.0003 7.14355C6.20995 7.14355 5.45024 6.83775 4.8803 6.29018L0.290305 1.71019C0.196576 1.61723 0.12218 1.50663 0.0714116 1.38477C0.020643 1.26291 -0.00549455 1.1322 -0.00549453 1.00019C-0.00549452 0.868181 0.020643 0.737475 0.0714117 0.615616C0.12218 0.493757 0.196576 0.383157 0.290305 0.290194C0.383745 0.197513 0.494559 0.124188 0.616397 0.0744236C0.738234 0.0246591 0.868697 -0.000566365 1.0003 0.000194538Z' fill='white'/%3E%3C/svg%3E%0A");
}
.filter-lists  .select2-selection.select2-selection--multiple{position: relative;}

.filter-lists .input-group {
    max-width: 300px;
    min-width: 300px;
    border: 1px solid var(--clr-white);
    border-radius: 5px;
}


.filter-lists .input-group input {
    background-color: transparent;
    border: 0;
    color: var(--clr-white);
    padding: 0.6em 2em 0.6em 1em;
}

.filter-lists .input-group input::placeholder {
    color: var(--clr-white);
}

.filter-lists .input-group .input-group-text {
    background-color: transparent;
    border: 0;
}

.filter-flex-cont {
    display: flex;
    justify-content: space-between;
    gap: 5vw;
}

.sh-card {
    box-shadow: 0px 0 16px -4px rgb(12 12 13 / 10%);
}

.card-product {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
}
.card-product .card-body .item-cont * {font-family: var(--font--sarabun);}

.card-product .card-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    float: left;
}

.card-product .card-image .swiper-slide img {
    width: 100%;
    float: left;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.card-status {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    z-index: 16;
}

.status-reserved {
    background-color: rgba(229, 181, 113, 0.8);
}

.status-sold {
    background-color: rgba(50, 48, 43, 0.8);
}

.status-sold .item-h {
    color: var(--clr-white);
}

.card-status .item-h {
    font-size: 2.5em;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    font-weight: 500;
}

button.btn-fav {
    background: transparent;
    border: 0;
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
}

button.btn-fav svg {
    fill: var(--clr-white);
}

button.btn-fav.active svg {
    fill: #d4323f;
}

.swiper-card {
    width: 100%;
    float: left;
}

.tag-card {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 3px 20px;
    background-color: var(--clr-primary);
    border-radius: 100px;
    z-index: 2;
    color: #212529;
}

.card-product .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    width: auto;
    background-color: rgb(0 0 0 / 25%);
    border-radius: 100px;
    position: absolute;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 5px;
    bottom: 10px;
}

.card-product .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    background-color: #d9d9d9;
    margin: 0 !important;
    opacity: 1;
}

.card-product .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 7px;
    height: 7px;
    background-color: var(--clr-white);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

.card .item-top {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 8px;
    gap: 1em;
}

.card .item-top .item-price {
    width: calc(100% - (20px + 1em));
    color: var(--clr-primary);
    font-size: 1.25em;
    font-weight: 500;
}

.card .item-top .icon-share {
    width: 20px;
    height: auto;
}

.card .card-body {
    padding: 0.625em 1.25em 0.9375em;
}

.text-2-line {
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mb-sm-8px {
    margin-bottom: 8px;
}

.grid-2-2 {
    --gap: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.grid-2-2>* {
    width: calc(50% - (var(--gap) / 2));
}

.grid-4 {
    --gap: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.grid-4>* {
    width: calc(60% / 3);
}

.primary-pagination ul.pagination {
    justify-content: center;
}

.page-link:focus {
    box-shadow: none;
}

.primary-pagination .page-link {
    color: var(--clr-primary);
    border: 1px solid #b9b9b9;
    border-right: 0;
    border-left: 0;
    background-color: transparent;
}

.primary-pagination .page-item:first-child .page-link {
    border: 1px solid #b9b9b9;
    color: var(--clr-body);
}

.primary-pagination .page-item:last-child .page-link {
    border: 1px solid #b9b9b9;
    color: var(--clr-body);
}

.primary-pagination .page-item:not(:first-child, :last-child) .page-link:hover,
.primary-pagination .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--clr-primary);
    border: 1px solid var(--clr-primary);
    border-right: 0;
    border-left: 0;
}

.content.list-none ul li:before {
    display: none;
}

/* BANNER */

.hero-banner {}

.hero-banner .img-main {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
}

.inner-banner-cont {
    width: 100%;
    float: left;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 100%;
}


.pagination-primary .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    width: auto;
    background-color: rgb(0 0 0 / 25%);
    border-radius: 100px;
    position: absolute;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 5px 10px;
    bottom: 100px;
}

.pagination-primary .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #d9d9d9;
    margin: 0 !important;
    opacity: 1;
}

.pagination-primary .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 15px;
    height: 15px;
    background-color: var(--clr-white);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

/* HOME SEARCH */
.box-main-search {
    position: relative;
    z-index: 2;
    margin-top: -41px;
}

.wrap-search {
    display: flex;
    background-color: var(--clr-primary);
    padding: 4px;
    border-radius: 120px;
    gap: 4px;
}

.item-search-select {
    width: 85%;
    display: flex;
    align-items: center;
    background-color: var(--clr-white);
    border-radius: 120px 0 0 120px;
    padding: 10px 20px;
    gap: 20px;
}

/* .item-search-select .dropdown.bootstrap-select:first-child {
    margin-right: -20px;
} */
.item-search-select .select2-container--default{width: calc(60% / 3) !important;float: left;}
.item-search-select .input-group{width: 40%;}
.item-search-select .select2-container--default .select2-selection--single {
    background-color: var(--clr-white);
    padding: 15px 18px  15px 0;
    border: 0;
    border-right: 2px solid #c4c4c4;
    border-radius: 0;
    height: auto;
}
.select2-container--default .select2-search--dropdown .select2-search__field{background-color: var(--clr-white);}
.select2-dropdown {
    border: 0;
    border-radius: 15px;
    box-shadow: 0px 0 16px -4px rgb(12 12 13 / 10%);
    padding: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height: 100%;}

.item-search-select input.form-control {
    padding: 15px 20px;
    border: 0;
    background-color: var(--clr-white);
    /* border-right: 2px solid #C4C4C4; */
}

.item-search-select .input-group-text {
    border: 0;
    background-color: transparent;
    padding: 0.375rem calc(1.875em - 10px) 0.375rem 1.875em;
}

.item-search-action {
    width: 15%;
}

.item-search-action .btn {
    width: 100%;
    height: 100%;
    border-radius: 0 120px 120px 0;
}

.item-search-action .btn:hover {
    border-color: var(--clr-white);
}

.is-invalid {
    border-color: #dc3545;
}

.error-message {
    font-size: 14px;
    margin-top: 5px;
}

.search-results, .search-results-area{
    border: 1px solid #ccc;
    padding: 0;
    overflow-y: auto;
    position: absolute;
    background-color: white;
    width: 100%;
    z-index: 98;
    top: calc(100% + 10px);
    border-radius: 15px;
    overflow: hidden;
}

.search-results-inner, .search-results-area-inner {
    width: 100%;
    float: left;
    padding: 10px 0;
}

.search-results .dropdown-header {
    padding: 0.5rem 20px;
}

.search-results a.dropdown-item {
    padding: 0.625em 20px;
    border-bottom: 1px solid #d7d7d7;
    white-space: normal;
}

.search-results a.dropdown-item:hover {
    background-color: rgba(229, 181, 113, 0.5);
}

.search-results .search-results-inner::-webkit-scrollbar {
    width: 16px;
}

/* Track */
.search-results .search-results-inner::-webkit-scrollbar-track {
    background: #d9d9d9;
}

.search-results .search-results-inner::-webkit-scrollbar-thumb {
    background: #d8a847;
}

.search-results .search-results-inner::-webkit-scrollbar-thumb:hover {
    background: #d8a847;
}

.accordion-title.h6 {
    padding: 10px;
    width: 100%;
    background: #f8e9d5;
    border-radius: 10px;
    cursor: pointer;
}

.accordion-title.bg-clr-primary {
    background-color: var(--clr-primary);
}

.box-accordion svg {
    transform: rotate(-90deg);
}

.box-accordion.active svg {
    transform: rotate(0);
}

.accordion-body {
    width: 100%;
    float: left;
    padding: 0;
    display: none;
}

.group-btn-swiper {
    display: flex;
    gap: 20px;
}

.group-btn-swiper .swiper-button {
    position: relative;
    margin: 0;
    top: auto;
    left: 0;
    bottom: auto;
    right: auto;
    padding: 5px;
    width: 48px;
    height: 48px;
    background-color: var(--clr-primary);
    border: 1px solid var(--clr-primary);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-btn-swiper .swiper-button svg {
    fill: var(--clr-white);
    width: 15px;
    height: 15px;
}

.group-btn-swiper .swiper-button-next.swiper-button-disabled,
.group-btn-swiper .swiper-button-prev.swiper-button-disabled {
    background-color: #fff;
    border: 1px solid #d9d9d9;
    opacity: 1;
}

.group-btn-swiper .swiper-button-next.swiper-button-disabled svg,
.group-btn-swiper .swiper-button-prev.swiper-button-disabled svg {
    fill: #979797;
}

.modal-product-detail .btn-icon.f-start > span{align-items: flex-start;}
.modal-product-detail .btn-icon.f-start > span svg{position: relative;top: 3px;}
.modal-product-detail .modal-content {
    border: 0;
    border-radius: 0;
}

.custom-modal-dialog.container {
    padding: 0;
}

.modal-product-detail .btn-close {
    background: none;
    width: auto;
    height: auto;
    opacity: 1;
    margin: 0;
}
.modal-product-detail .btn-close:focus{box-shadow: none;}
.modal-product-detail .btn-detail-fav svg {
    stroke: #979797;
}

.modal-product-detail .btn-detail-fav.active svg {
    fill: #d4323f;
    stroke: #d4323f;
}

.modal-product-detail .modal-header {
    border-bottom: 0;
}



.modal-product-detail .modal-body {
    padding: 1em 30px 1em;
}

.modal-product-detail .item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* aspect-ratio: 2 / 1.5; */
}

.modal-product-detail .item img {
    object-fit: cover;
    aspect-ratio: 2 / 1.5;
    width: 100%;float: left;
    height: 100%;
}

.modal-product-detail .grid-container {
    gap: 10px;
    border-radius: 15px;
    overflow: hidden;
}

@media (min-width: 767px) {
    .modal-product-detail .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 10px;
        border-radius: 15px;
        overflow: hidden;
    }
    .modal-product-detail .item-1 {
        grid-column: span 2;
        grid-row: span 2;
    }

    .modal-product-detail .item-2 {
        grid-column: 3;
        grid-row: 1;
    }

    .modal-product-detail .item-3 {
        grid-column: 4;
        grid-row: 1;
    }

    .modal-product-detail .item-4 {
        grid-column: 3;
        grid-row: 2;
    }

    .modal-product-detail .item-5 {
        grid-column: 4;
        grid-row: 2;
    }
}

.modal-product-detail .box-contact-card {
    padding: 30px 20px;
    width: 100%;
    border-radius: 20px;
    border: 1px solid #d9d9d9;
    background-color: var(--clr-white);
    box-shadow: 0px 0 16px -4px rgb(12 12 13 / 10%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-direction: column;
    text-align: center;
    position: sticky;
    top: 140px;
}

.modal-product-detail .box-contact-card a,.modal-product-detail .box-contact-card button{min-width: 220px;}
.modal-product-detail hr,hr.fw {
    background-color: #f2f2f2;
    margin: 20px 0;
    opacity: 1;
}

.open-list-gallery{cursor: pointer;}
.tooltip{z-index: 1101;}

.group-select-location {
    display: flex;
    gap: 15px;
}

.dropdown-toggle::after {
    content: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.00592 0.00410079C1.13753 0.00333991 1.26799 0.0285654 1.38983 0.0783299C1.51166 0.128094 1.62248 0.201419 1.71592 0.2941L6.29592 4.88409C6.38888 4.97782 6.49948 5.05221 6.62134 5.10298C6.7432 5.15375 6.87391 5.17989 7.00592 5.17989C7.13793 5.17989 7.26864 5.15375 7.3905 5.10298C7.51235 5.05221 7.62296 4.97782 7.71592 4.88409L12.2959 0.294101C12.4842 0.105798 12.7396 1.0559e-05 13.0059 1.05823e-05C13.2722 1.06056e-05 13.5276 0.105798 13.7159 0.294101C13.9042 0.482405 14.01 0.737799 14.01 1.0041C14.01 1.13596 13.984 1.26653 13.9336 1.38835C13.8831 1.51017 13.8092 1.62086 13.7159 1.7141L9.12592 6.29409C8.55598 6.84165 7.79627 7.14746 7.00592 7.14746C6.21556 7.14746 5.45586 6.84165 4.88592 6.29409L0.29592 1.7141C0.202191 1.62113 0.127796 1.51053 0.0770269 1.38867C0.0262582 1.26682 0.000120688 1.13611 0.0001207 1.0041C0.000120712 0.872087 0.0262583 0.741382 0.0770269 0.619523C0.127796 0.497664 0.202192 0.387063 0.29592 0.2941C0.38936 0.201419 0.500174 0.128094 0.622012 0.0783298C0.743849 0.0285654 0.874312 0.00333988 1.00592 0.00410079Z' fill='%23CBCBCB'/%3E%3C/svg%3E%0A");
    border: 0 !important;
}

.group-select-location .bootstrap-select>.dropdown-toggle {
    padding-left: 10px;
    background-color: #f9f9f9;
    border: 1px solid #cbcbcb;
    font-weight: 400;
}

.list-tag {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.list-tag>* {
    padding: 3px 20px;
    background-color: rgba(229, 181, 113, 0.3);
    border-radius: 100px;
    z-index: 2;
}

.acc-inner-head {
    padding: 10px;
    margin: 20px 0;
    width: 100%;
    background: #f2f2f2;
    border-radius: 5px;
    color: var(--clr-primary);
}

.box-loan-calculator {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    box-shadow: 0px 9px 16px rgba(12, 12, 13, 0.05);
    border-radius: 15px;
    padding: 20px 20px 40px 20px;
}

.inner-calculator {
    padding: 18px 12px 0 12px;
}

.inner-calculator.inner-calculator-r {
    background: #f2f2f2;
    border-radius: 15px;

    height: 100%;
}

.inner-calculator input {
    background: #f9f9f9;
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    color: var(--clr-primary);
    border-right: 0;
}

.inner-calculator .form-control:focus {
    color: var(--clr-primary);
    outline: 0;
    box-shadow: none;
    background: #f9f9f9;
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    border-right: 0;
}

.inner-calculator .input-group-text {
    background: #f9f9f9;
    border: 1px solid #c4c4c4;
    border-left: 0;
}


.group-select-location .bootstrap-select .dropdown-menu li a{
    white-space: normal;
}
.group-select-location  .dropdown-menu{width: 100%;max-height: 400px;}

.group-select-location .bootstrap-select .dropdown-menu li {
    position: relative;
    border-bottom: 1px solid #D7D7D7;
}
.group-select-location  .dropdown-item:focus,.group-select-location  .dropdown-item:hover {
    background-color: rgba(229, 181, 113, 0.25);
}
.group-select-location .dropdown-item.active, .dropdown-item:active {
    color: #000;
    text-decoration: none;
    background-color: rgba(229, 181, 113, 0.25);
}


.card-df{border-radius: 15px;border: 1px solid #E6E6E6;overflow: hidden;height: 100%;}
.card-df .card-image img,.card-df .card-image .video-player{aspect-ratio: 4/3;width: 100%;object-fit: cover;float: left;}
.card-df .card-body{display: flex;flex-direction: column;gap: 10px;padding: 0.625em 1.25em calc(0.9375em + 35px);}
.card-df .card-title{font-weight: 600;line-height: 1.5;}
.card-df .card-title,.card-df small,.card-df p,.card-df a{font-family: var(--font--sarabun);}
.text-2-line{
    overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; 
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

.text-3-line{
    overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3; 
           line-clamp: 3; 
   -webkit-box-orient: vertical;
}


.btn-view-more {
    position: absolute;
    bottom: 10px;
    left: 20px;
}
.tabs {
    display: flex;
    gap: 30px;
    cursor: pointer;
    padding-bottom: 10px;
    width: 100%;
    float: left;
    border-bottom: 1px solid #DEDEDE;
    overflow: hidden;
    overflow-x: scroll;
}
.tabs::-webkit-scrollbar {
    display: none;
  }
  .tabs {
    -ms-overflow-style: none; 
    scrollbar-width: none; 
  }

.tab {
    white-space: nowrap;
}
.tab.active {
    color: var(--clr-primary);
}
/* สไตล์ของ Tab Content */
.tab-content {
    display: none;
    margin-top: 30px;
}
.tab-content.active {
    display: block;
}



.contain{display: flex;width: 100%;gap: 20px;}
.contain-reverse{flex-direction: row-reverse;}
.cont-haft{width: 50%;}
.img-haft{width: 50%;border-radius: 15px;overflow: hidden;}
.img-haft img{width: 100%;float: left;border-radius: 15px;overflow: hidden;}

.blog-detail-img {width: 100%;float: left;border-radius: 15px;overflow: hidden;position: relative;}
.blog-detail-img img{width: 100%;float: left;}
.thumb-card-icon{width: 100%;
    float: left;
    background-color: var(--clr-white);   
    box-shadow: 0px 9px 16px -4px rgba(12, 12, 13, 0.1);
    border-radius: 15px;
    overflow: hidden;
    border: 4px solid transparent;
    margin: 20px 0;
    padding: 20px;
}
.thumb-card-icon .thumb-img img{aspect-ratio: 16/9;object-fit: contain;}

.thumb-card-icon.active,.thumb-card-icon:hover{border: 4px solid var(--clr-primary);}

section.pd.sec-type-to-action .swiper-pagination {
    position: relative;
    background: #E4E4E4;
    height: 10px;
    width: 35%;
    border-radius: 100px;
    overflow: hidden;
    margin-top: 10px;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: var(--clr-primary);border-radius: 100px;}


.thumb-on-img{position: relative;border-radius: 15px;overflow: hidden;}
.thumb-on-img .thumb-img{position: relative;width: 100%;float: left;}
.thumb-on-img .thumb-img img{width: 100%;float: left;}
.thumb-on-img .thumb-img::before{content: "";background-color: rgba(0, 0, 0, 0.25);position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.thumb-on-img .thumb-body{position: absolute;top: 0;left: 0;z-index: 1;padding: 4.375em;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;}
.thumb-prefix{
    letter-spacing: 0.32em;
}

.group-cont-thumb{width: 100%;float: left;}
.inner-group-btn {
    display: flex;
    gap: 16px;
}
.group-btn-incard{width: 100%;float: left;display: flex;flex-direction: column;gap: 15px;align-items: flex-start;}
.inner-group-btn  .swiper-button{width: 48px;height: 48px;background-color: var(--clr-white);border-radius: 100px;overflow: hidden;top: auto;bottom: auto;left: auto;right: auto;margin: 0;}
.inner-group-btn  .swiper-button svg{fill: #000;width: auto;height: 15.8px;}
/* 979797 */

.sec-who-are-we{padding: 60px 0 0 0;}
.sec-who-are-we .img-haft{overflow: visible;}
.sec-who-are-we .cont-haft{padding:3.75em 5em;}
.sec-who-are-we  .contain{gap: 0;}
.sec-who-are-we  .img-haft img {
    margin-top: -7em;
    height: calc(100% + 7em);
    object-fit: cover;
    object-position: center;
}
.sec-who-are-we ul *{font-family: var(--font--sarabun);}
.card-profile{display: flex;align-items: center;width: 100%;float: left;gap: 15px;}
.card-profile img{width: 60px;height: 60px;border-radius: 100px;}

.sec-review .card{
    border: 0;
    padding: 30px 20px 50px 20px;
    box-shadow: 0px 0 16px -4px rgb(12 12 13 / 10%);height: 100%;
}
.sec-review .card .card-body{padding: 0;}
.sec-review  .swiper-slide{height: auto;}
.box-cont-review{width: 100%;float: left;position: relative;padding:0;}
.box-cont-review .card *{font-family: var(--font--sarabun);}
.swiper-review {
    padding: 20px;
    width: 100%;
}

img.abs-quotes {
    position: absolute;
    width: 4.375em;
    left: -4.375em;
    top: -30px;
}

img.abs-quotes-2 {
    position: absolute;
    width: 4.375em;
    right: -4.375em;
    bottom: 30px;
}

.sec-review{
    background-color: #F2F2F2;
}
.swiper-review .swiper-pagination{
    position: relative;
    width: 40%;
    margin: 30px auto 0;
    height: 10px;
    border-radius: 100px;
    background-color: #E4E4E4;
    overflow: hidden;
}

.tag{position: absolute;}
.sec-list-hl .pagination-primary .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{bottom: 20px;}
.sec-list-blog-hl .tag {
    position: absolute;
    top: 40px;
    left: 40px;
    background-color: var(--clr-dark);
    border-radius: 100px;
    padding: 4px 19px;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: #fff;
    text-align: center;
}
.sec-list-blog-hl .tag span{position: relative;left: 3px;}
.sec-list-blog-hl .thumb-on-img .thumb-body{padding: 2.5em;}
.sec-list-blog-hl .thumb-on-img .thumb-body{    justify-content: end;}

.sec-list-blog-hl .thumb-on-img .thumb-img img{aspect-ratio: 1.24;object-fit: cover;}
.play-button{position: absolute;z-index: 1;width: 5em;height: 5em;top: 50%;left: 50%;transform: translate(-50% , -50%); transition: transform 0.3s ease, background-color 0.3s ease;}
.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1); 
    cursor: pointer;
  }
.aspect-ratio-2-1{aspect-ratio: 2 / 1;}
  .thumb.thumb-on-img.playing:hover .pause-button{visibility: visible; opacity: 1;pointer-events: all;}
.pause-button{opacity: 0;visibility: hidden;pointer-events: none; position: absolute;z-index: 1;width: 5em;height: 5em;top: 50%;left: 50%;transform: translate(-50% , -50%); transition: all 0.3s ease, background-color 0.3s ease;display: flex;align-items: center;justify-content: center;    background: #ffffff4d;
    border-radius: 100px;
}
.pause-button:hover {
    transform: translate(-50%, -50%) scale(1.1); 
    cursor: pointer;
  }
.pagination-primary.pagination-relative {width: 100%;float: left;margin-top: 50px;}
.pagination-primary.pagination-relative .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {

    margin: 0 auto;
    gap: 20px;
    padding: 5px 10px;
    bottom: 0;
    justify-content: center;
    float: none;
}
.sec-contact iframe{width: 100%;}
.sec-contact-home .content-sarabun * {font-family: var(--font--sarabun);}
.list-social a{width: 45px;height: 45px;border: 1px solid var(--clr-primary);display: flex;align-items: center;justify-content: center;border-radius: 100px;}

.list-social .d-flex{gap: 20px;}

.sec-form .select2-container .select2-selection--single{height: auto;}
.sec-form span.select2-selection.select2-selection--single {
    background-color: var(--input-bg-grey);
    border-radius: 5px;
    border: 1px solid #C4C4C4;
    color: var(--clr-dark-grey);
    padding: 8px 20px;
}
.sec-form .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 1.5;padding-left: 0;}

.inner-form form{background-color: var(--clr-white);border-radius: 15px ;border: 1px solid #D9D9D9;box-shadow: 0px 0 16px -4px rgb(12 12 13 / 10%);padding: 2.5em;}


.search-dealer {
    width: 80%;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 10px;
}
.tab-form {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    width: 240px;
}
.tab-form button.btn {
    background: var(--clr-primary);
}
.tab-form button.btn {
    background: #F0C991;
    width: 50%;
   border-radius: 0;
}
.tab-form button.btn.active {
    background: var(--clr-primary);
}
.group-search-dealer.filter-lists {width: 100%;flex-wrap: nowrap;}
.group-search-dealer.filter-lists  .input-group{border: 1px solid #E6E6E6;width: calc(100% - (240px + 200px));max-width: 100%;}
.btn-search{width: 200px;}

/* เปลี่ยนสีของ placeholder */
.group-search-dealer.filter-lists input::placeholder {
    color: #000;
}

.group-body{display: flex;gap: 10px;padding-top: 20px;}
.group-body .card-body{padding: 0;}
.card-body-icon{width: auto;display: flex;gap: 10px;}
.card-body-icon a.btn-rounded{width: 38px;height: 38px;border: 1px solid #EFEFEF;justify-content: center;align-items: center;border-radius: 100px;padding: 0;display: flex;}
.card-body-icon a.btn-rounded svg{fill: #979797;}
.card-body-icon a.btn-rounded:hover{background-color: var(--clr-primary);border-color: var(--clr-primary);}
.card-body-icon a.btn-rounded:hover svg{fill: #fff;}

.section.box-main-search{z-index: 2;}

.sec-profile .tab-form{flex-direction: column;gap: 0;width: 100%;}
.sec-profile .tab-form button{width: 100%;background-color: transparent;border-radius: 0;border: 0;border-bottom: 1px solid #E6E6E6;font-size: 1.375em;padding: 12px 5px;max-width: 100%;font-weight: 300;}
.sec-profile .tab-form button svg{fill: #000;}
.sec-profile .tab-form button.active{background-color: transparent;color: var(--clr-primary);}
.sec-profile .tab-form button.active svg{fill: var(--clr-primary);}

/* ซ่อน checkbox เริ่มต้น */
.custom-checkbox{padding-left: 0;}
.custom-checkbox input[type="checkbox"] {
    display: none;
  }
  
  /* สไตล์ของกล่อง checkbox */
  .custom-checkbox label {
    display: inline-flex;
    cursor: pointer;
    position: relative;
    gap: 10px;
  }
  
  /* สร้างกรอบ checkbox */
  .custom-checkbox label::before {
    content: '';
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
    margin-right: 10px;
    background-color: white;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .custom-checkbox label > span{padding-left:40px;}
  
  .custom-checkbox label span{width: calc(100% - 42px);}
  /* เปลี่ยนสีพื้นหลังและไอคอนเมื่อ checkbox ถูกเลือก */
  .custom-checkbox input[type="checkbox"]:checked + label::before {
    background-color: #F9F9F9; /* เปลี่ยนสีพื้นหลัง */
    border-color: #C4C4C4;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23d8a847'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 8px;
  }

  
@media (min-width: 767px) {
    .card.card-product.sh-card.card-hoz {
        display: flex;
        flex-direction: row;
    }
    .card.card-product.sh-card.card-hoz .card-image{width: 280px;}
}

.card.card-product.sh-card.card-hoz .card-image img{width: 100%;float: left;height: 100%;object-fit: cover;}
.profile-viewer{display: flex;align-items: center;gap: 20px;padding:20px 30px;}
.box-preview {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 100px;
    overflow: hidden;
    border: 5px solid #D5D6D4;
}
.box-preview img{aspect-ratio: 1;object-fit: cover;}

.box-profile{width: 100%;float: left;border-bottom: 2px solid #000;padding-bottom: 20px;margin-bottom: 20px;}
.box-profile .box-preview{width: 100px;height: 100px;margin-bottom: 20px; border: 3px solid #D5D6D4;}

button.btn-text{border: 0;outline: 0;padding: 0;background-color: transparent;}

.header-icon{width: 100%;display: flex;justify-content: space-between;}
.header-icon h2{width: calc(100% - 75px);}


.box-lang {
    position: relative;
}
.inner-lang {
    position: absolute;
    background: #fff;
    border-radius: 5px;
    top: calc(100% + 5px);
    width: calc(100% + 20px);
    left: 0;
    box-shadow: 0px 0 16px -4px rgb(12 12 13 / 10%);
    overflow: hidden;
    display: none;
}
.item-lang{width: 100%;float: left;}
.item-lang a{
    width: 100%;
    padding:5px 10px !important;
    text-align: center;
    float: left;
    border-radius: 0 !important;
}
.item-lang a:hover{background-color: var(--clr-grey-light);color: #000 !important;}
.item-lang{border-bottom: 1px solid #f2f2f2;}
.inner-lang a{color: #000;}

.modal-backdrop-second.show {
    z-index: 1099;
}

#openModalShare {
    z-index: 1100;
}


#otpModal input {width: 46px;height: 60px;padding: 0;}
.select2-results__option{padding: 7px 15px;}
.select2-results__option:hover {
    background-color: #f6f6f6;
    
}
.select2-dropdown{padding: 0;}



.slide-track  .slider img {
    width: 100px;
    height: 100px;
  }
  
  .slide-track {
    width: 100%;
    display: flex;
    flex-wrap: nowrap !important;
    gap: 3em;
    overflow: hidden;
  }
  
  .slide-track  .slider {
   height: auto;
  }


  .more-photos{display: none !important;}
  .view-all-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000085;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
[data-bs-toggle] {
    cursor: pointer;
}


.form-step-main .search-keyword-location{border-right: 0;}
.form-step-main input,.form-step-main textarea,.search-location input.form-control ,.form-step-main .select2-container--default .select2-selection--single{background-color: #fff;border-color: #e2e8f0;}
.search-location .input-group-text{background-color: #fff;border-color: #e2e8f0; border-left: 0;}
.box-progress{height: 4px;background-color: #e2e8f0;overflow: hidden;}
.box-progress > div{width: 100%;background-color: var(--clr-primary);position: absolute;top: 0;left: 0;height: 100%;transform: translateX(-75%);}
.btn-back.hide{opacity: 0;visibility: hidden;pointer-events: none;}
.btn-send.hide,.current-step-5 .btn-next.hide{display: none;}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}
.form-step-main  .select2-container .select2-selection--single{height: auto;}
.form-step-main span.select2-selection__rendered{
    padding: 4px 20px;
}

.inner-step-result {
    padding: 1rem;
    background-color: rgb(241 245 249 / 50%);
}
.txt-sm-color{color: rgb(100 116 139);}
.source-of-awareness .custom-checkbox label::before {
    min-width: 20px;
    min-height: 20px;
    width: 20px;
    height: 20px;
    margin-right: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.source-of-awareness .custom-checkbox label{width: 100%;align-items: center;}
.source-of-awareness .custom-checkbox label > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 30px;
}
.source-of-awareness .custom-checkbox label > span > span {
    width: calc(100% - 32px);
}
.source-of-awareness  .custom-checkbox input[type="checkbox"] + label::before {
    border-color: #d8a847;
    
}
.source-of-awareness  .custom-checkbox input[type="checkbox"]:checked + label::before {
    background-color: #d8a847;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23FFFFFF'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
}
.source-of-awareness  .custom-checkbox  svg{    height: 21px;
    width: auto;}

    .select-checkbox-list-filter {
        position: relative;
        width: calc(60% / 3);
    }

    .checkbox-list-placeholder{
        background-color: var(--clr-white);
        padding:15px 28px 15px 0;
        border: 0;
        border-right: 2px solid #c4c4c4;
        border-radius: 0;
        height: auto;
        position: relative;
        color: #9e9e9e;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    .group-checkbox-list-filter {
        position: absolute;
        width: 100%;
        top: 100%;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0px 0 16px -4px rgb(12 12 13 / 10%);
        padding: 20px 15px 5px 15px;
        display: none;
        z-index: 999;
        min-width: 220px;
    }
    .select-checkbox-list-filter  .list-group-item{border: 0;}
    .select-checkbox-list-filter  .list-group-item input{display: none;}
    .select-checkbox-list-filter .list-group-item{
        position: relative;
        display: block;
        padding: 0;
        color: #212529;
        text-decoration: none;
        background-color: transparent;
        border: 0
    }
    .select-checkbox-list-filter  .checkbox-list-filter-head ,.select-checkbox-list-filter .list-group-item span{
        position: relative;
        display: block;
        padding: 7px 15px;
        color: #212529;
        text-decoration: none;
        background-color: #fff;
        border: 0;
        margin-top: 3px;
        cursor: pointer;
    }
    .select-checkbox-list-filter .list-group-item span:hover{background-color: #f6f6f6;}
    .select-checkbox-list-filter  .checkbox-list-filter-head{padding: 7px 8px;font-weight: 500;}
    .list-group-item input[type="checkbox"]:checked + span{background-color: var(--clr-primary);color: #fff;}


    .select-checkbox-list-filter .select-filter-arrow {
        height: 100%;
        position: absolute;
        top: 1px;
        right: 1px;
        width: 20px;
    }
    .select-checkbox-list-filter .select-filter-arrow b {
        border-color: #8492a6 transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        height: 0;
        left: 50%;
        margin-left: -12px;
        margin-top: -2px;
        position: absolute;
        top: 50%;
        width: 0;
    }

    .checkbox-list-filter-search {
        padding: 15px 20px 20px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
        border-radius: 15px;
        border: 1px solid #E4E4E4;
        background: #fff;
        margin-top: 15px;
    }
    .checkbox-list-filter-search .checkbox-item{display: flex;width: 100%;gap: 5px;margin-top:15px;flex-wrap: wrap;justify-content: center;}
   
    .filter-tag b {
       width: 14px;
       height: 14px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
    }
    .filter-tag b svg{ width: 16px;height: 16px;}

    button.clear-filter-btn {
        border: 0;
        background: transparent;
        text-decoration: underline;
        
    }
    button.clear-filter-btn > span{gap: 5px; align-items: center;}

    .price-swap{display: none;}
    .price-swap.active{display: block;}
    .list-tag-card{position: absolute; top: 9px; left: 9px; border-radius: 100px; z-index: 2;display: flex;gap: 10px;}
    .list-tag-card .tag-card{position: relative;top: auto;left: auto;cursor: pointer;}
    .list-tag-card .tag-card:hover{background-color: #e9c796;}

    .outer.filter-flex-cont  .select-checkbox-list-filter{width: auto;}
    .outer.filter-flex-cont .checkbox-list-placeholder {
        padding: 15px 38px 15px 18px;
        background-color: transparent;
        border: 1px solid #fff;
        border-radius: 5px;
        color: #fff;
        /* min-width: 220px; */
    }
    .outer.filter-flex-cont .group-checkbox-list-filter{border-radius: 9px; top: calc(100% + 5px);}
    .outer.filter-flex-cont .select-checkbox-list-filter .select-filter-arrow b {
        display: none;
    }
    .outer.filter-flex-cont .select-checkbox-list-filter .select-filter-arrow{display: flex;align-items: center;justify-content: center;top: 0; right: 5px;}
    .outer.filter-flex-cont .select-checkbox-list-filter .select-filter-arrow::before{
        border: 0;
        margin: 0;
        content: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.0003 0.000194538C1.13191 -0.000566342 1.26237 0.0246592 1.38421 0.0744237C1.50605 0.124188 1.61686 0.197513 1.7103 0.290194L6.2903 4.88019C6.38327 4.97391 6.49387 5.04831 6.61573 5.09908C6.73759 5.14984 6.86829 5.17598 7.0003 5.17598C7.13231 5.17598 7.26302 5.14984 7.38488 5.09908C7.50674 5.04831 7.61734 4.97391 7.7103 4.88019L12.2903 0.290195C12.4786 0.101892 12.734 -0.00389569 13.0003 -0.00389567C13.2666 -0.00389564 13.522 0.101892 13.7103 0.290195C13.8986 0.478498 14.0044 0.733893 14.0044 1.00019C14.0044 1.13205 13.9784 1.26262 13.928 1.38444C13.8775 1.50626 13.8035 1.61695 13.7103 1.71019L9.1203 6.29018C8.55036 6.83775 7.79066 7.14355 7.0003 7.14355C6.20995 7.14355 5.45024 6.83775 4.8803 6.29018L0.290305 1.71019C0.196576 1.61723 0.12218 1.50663 0.0714116 1.38477C0.020643 1.26291 -0.00549455 1.1322 -0.00549453 1.00019C-0.00549452 0.868181 0.020643 0.737475 0.0714117 0.615616C0.12218 0.493757 0.196576 0.383157 0.290305 0.290194C0.383745 0.197513 0.494559 0.124188 0.616397 0.0744236C0.738234 0.0246591 0.868697 -0.000566365 1.0003 0.000194538Z' fill='white'/%3E%3C/svg%3E%0A");
    }
    .card.card-product .item-cont .btn-icon > span {align-items: flex-start;}
    .card.card-product .item-cont .btn-icon > span > span {width: calc(100% - 20px);}
    .outer.filter-flex-cont   .filter-lists{align-items: normal;}
    .outer .checkbox-list-filter-search{padding: 0 60px 15px;margin-top: 0;}
    .outer .checkbox-list-filter-search .checkbox-item{}
    /* .outer .checkbox-list-filter-search button.clear-filter-btn{color: #fff;} */
    /* .outer .checkbox-list-filter-search button.clear-filter-btn svg path{fill: #fff !important;} */
    .outer.is-outer .checkbox-list-filter-search button.clear-filter-btn{color: #000;}
    .btn-clear-search{color: var(--clr-primary);text-decoration: underline;  align-content: center;}
    .btn-clear-search:hover{color: #fff;}
    .modal-sticky {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 44;
        background: #fff;
        width: 100%;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
    }
    .sticky-galley{
        position: sticky;
        top: 0;
        z-index: 78;
        left: 0;
        display: none;
        
    }
    .modal-sticky ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        border-top: 1px solid rgb(209, 209, 213);
    }
    .modal-sticky ul li a{padding: 15px 40px 10px;float: left;border-bottom: 4px solid transparent;}
    .modal-sticky ul li.active a{border-bottom: 4px solid var(--clr-primary);color: var(--clr-primary);}


    .modal-product-detail .popup-gallery  .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        overflow: hidden;
        border-radius: 0;
    }
    
    .modal-product-detail .popup-gallery .item {
        text-align: center;
    }
    
    /* กำหนดให้ item แรกของทุกกลุ่มเป็น 100% */
    .modal-product-detail .popup-gallery .item:first-of-type,
    .modal-product-detail .popup-gallery .item:nth-of-type(4),
    .modal-product-detail .popup-gallery .item:nth-child(3n+4) {
        grid-column: span 2;
    }

    .popup-gallery {
        position: absolute;
        z-index: 77;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        padding: 0 30px 1em;
        max-width: 100%;
        overflow: hidden;
        overflow-y: scroll;
        display: none;
    }
    .sticky-galley{background-color: #fff;}

    .popup-gallery::-webkit-scrollbar {
        display: none;
      }
      
      /* Hide scrollbar for IE, Edge and Firefox */
    .popup-gallery {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
      }




      /* SELECT CHECKBOX */
      :root{
        --bg-clr-theme:#FFA921;
      }
      .theme-1{
        --bg-clr-theme:#A5601F;
      }
      .theme-2{
        --bg-clr-theme:#F29102;
      }
      .theme-3{
        --bg-clr-theme:#FFA921;
      }
      .checkbox-list-filter-search .filter-tag {
        align-items: center;
        background: var(--bg-clr-theme);
        border: 1px solid var(--bg-clr-theme);
        border-radius: 16px;
        color: var(--clr-white);
        display: flex;
        min-height: 32px;
        justify-content: center;
        padding: 0 15px;
        position: relative;
        width: auto;
        font-size: 1em;
        font-weight: 500;
        gap: 5px;
    }
    .outer-group-checkbox-list-filter{
        width: 100%;
        float: left;
        max-height: 220px;
        overflow: hidden;
        overflow-y: scroll;
        max-height: 220px;
    }

    .checkbox-list-search {
        display: flex;
        width: 100%;
        float: left;
        position: relative;
        margin-bottom: 10px;
    }
    .checkbox-list-search input{width: 100%;}
    .checkbox-list-search  span{
        position: absolute;
        right: 10px;
        top: 4px;
        width: 20px;
        height: auto;
    }

    .action-group-checkbox-list-filter {
        width: 100%;
        float: left;
    }
    .action-group-checkbox-list-filter button{width: 100%;border: 0;background-color: transparent;padding: 10px 15px;}
    /* .action-group-checkbox-list-filter button > span{justify-content: center;} */
    .action-group-checkbox-list-filter button > span > span{text-decoration: underline;color: var(--clr-primary);}
    .theme-checkbox.select-checkbox-list-filter .list-group-item span::before {
        content: "";
        width: 20px;
        height: 20px;
        border: 1px solid #C4C4C4;
        border-radius: 5px;
        position: absolute;
        z-index: 1;
        top: 8px;
        left: 0;
    }
    .theme-checkbox.select-checkbox-list-filter .list-group-item span{padding-left: 30px;}
    .theme-checkbox.select-checkbox-list-filter .list-group-item span:hover{background-color: transparent;color: #000;}
    .theme-checkbox .group-checkbox-list-filter{min-width: 250px;}
    .list-group-item input[type="checkbox"]:checked + span{background-color: transparent;color: #000;}
    .theme-checkbox.select-checkbox-list-filter .list-group-item input[type="checkbox"]:checked + span::before{
        background-color: var(--clr-primary);
        background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.74486 8.26756L1.4368 4.87298C1.27851 4.71059 1.06385 4.61937 0.84002 4.61937C0.616193 4.61937 0.40153 4.71059 0.243237 4.87298C0.0849912 5.03541 -0.00390625 5.25569 -0.00390625 5.48537C-0.00390625 5.71506 0.0849912 5.93533 0.243237 6.09777L3.55129 9.49235C3.70807 9.65329 3.89421 9.78096 4.09907 9.86806C4.30394 9.95517 4.52353 10 4.74528 10C4.96704 10 5.18662 9.95517 5.39149 9.86806C5.59636 9.78096 5.7825 9.65329 5.93927 9.49235L13.749 1.4784C13.9072 1.31596 13.9961 1.09568 13.9961 0.866001C13.9961 0.63632 13.9072 0.416041 13.749 0.253607V0.253607C13.5907 0.0912225 13.376 0 13.1522 0C12.9283 0 12.7137 0.0912225 12.5554 0.253607L4.74486 8.26756Z' fill='white'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px 8px;
        border-color: var(--clr-primary);
    }

    span.cont-item {
        min-width: 23px;
        min-height: 23px;
        width: 23px;
        height: 23px;
        background: var(--bg-clr-theme);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        color: #fff;
        font-weight: 500;
        font-size: 0.8em;
    }


    .search-dropdown-menu, .search-dropdown-menu-area{
        width: 100%;
        float: left;
        position: relative;
        padding: 1rem 20px;
    }

     .search-dropdown-menu input, .search-dropdown-menu-area input{width: 100%;}
     .search-dropdown-menu span, .search-dropdown-menu-area span{
        position: absolute;
        right: 30px;
        top: 21px;
        width: 20px;
        height: auto;
    }
    
    .group-input-2-2 {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        justify-content: space-between;
    }
    .group-input-2-2 .quantity{width: calc(50% - 27px);}
    .group-input-2-2 span{font-weight: 500;}
    .form-check.custom-check input{display: none;}
    .form-check.custom-check{position: relative;padding-left: 30px;cursor: pointer;}
    .form-check.custom-check label{width: 100%;cursor: pointer;}
    .form-check.custom-check label::before {
        content: "";
        width: 20px;
        height: 20px;
        border: 1px solid #C4C4C4;
        border-radius: 5px;
        position: absolute;
        z-index: 1;
        top: 1px;
        left: 0;
    }
    .form-check.custom-check label:hover::before{border-color: var(--clr-primary);} 
    .theme-checkbox.select-checkbox-list-filter .list-group-item span:hover::before{border-color: var(--clr-primary);} 
    .form-check.custom-check input[type="checkbox"]:checked + label::before{
        background-color: var(--clr-primary);
        background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.74486 8.26756L1.4368 4.87298C1.27851 4.71059 1.06385 4.61937 0.84002 4.61937C0.616193 4.61937 0.40153 4.71059 0.243237 4.87298C0.0849912 5.03541 -0.00390625 5.25569 -0.00390625 5.48537C-0.00390625 5.71506 0.0849912 5.93533 0.243237 6.09777L3.55129 9.49235C3.70807 9.65329 3.89421 9.78096 4.09907 9.86806C4.30394 9.95517 4.52353 10 4.74528 10C4.96704 10 5.18662 9.95517 5.39149 9.86806C5.59636 9.78096 5.7825 9.65329 5.93927 9.49235L13.749 1.4784C13.9072 1.31596 13.9961 1.09568 13.9961 0.866001C13.9961 0.63632 13.9072 0.416041 13.749 0.253607V0.253607C13.5907 0.0912225 13.376 0 13.1522 0C12.9283 0 12.7137 0.0912225 12.5554 0.253607L4.74486 8.26756Z' fill='white'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px 8px;
        border-color: var(--clr-primary);
    }

    #filterModal .btn-check:active+.btn-outline-success,
    #filterModal .btn-check:checked+.btn-outline-success,
    #filterModal .btn-outline-success.active,
    #filterModal .btn-outline-success.dropdown-toggle.show,
    #filterModal .btn-outline-success:active,
    #filterModal .btn-check:active+.btn-outline-danger,
    #filterModal .btn-check:checked+.btn-outline-danger,
    #filterModal .btn-outline-danger.active,
    #filterModal .btn-outline-danger.dropdown-toggle.show,
    #filterModal .btn-outline-danger:active{background-color: var(--clr-primary);color: #fff;}

    #filterModal .btn-outline-success:hover ,#filterModal .btn-outline-danger:hover{
        color: #fff;
        background-color: var(--clr-primary);
        border-color: var(--clr-primary);
    }

    #filterModal .btn-outline-success, #filterModal .btn-outline-danger {
        color:  var(--clr-primary);
        border-color:  var(--clr-primary);
    }
    #filterModal .select2-container .select2-selection--single{height: auto;border-color: #C4C4C4;background-color: #F9F9F9;}
    #filterModal  .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #979797;
        line-height: normal;
        padding: 6px 20px;
    }
    #filterModal  .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: #f6f6f6;
    }

    #filterModal  .form-switch .form-check-input{height: 30px;}
    #filterModal   .form-switch .form-check-input {
        width: 4em;
    }
    #filterModal  .form-check-input:checked {
        background-color: var(--clr-primary);
        border-color: var(--clr-primary);
    }
    
    #filterModal .form-switch .form-check-input:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    }
    #filterModal  .form-check-input:focus {
        border-color: var(--clr-primary);
        outline: 0;
        box-shadow: none;
    }

    #filterModal  .checkbox-list-filter-search{padding: 0;margin: 0;border: 0;}
    #filterModal .checkbox-list-filter-search .filter-tag{font-size: 0.5em;}
    #filterModal  .checkbox-list-filter-search .checkbox-item{justify-content: flex-start;}
    #filterModal .filter-tag b svg {
        width: 10px;
        height: 10px;
    }
    .quantity {
        position: relative;
      }
      
      .quantity  input[type=number]::-webkit-inner-spin-button,
      .quantity  input[type=number]::-webkit-outer-spin-button
      {
        -webkit-appearance: none;
        margin: 0;
      }
      
      .quantity  input[type=number]
      {
        -moz-appearance: textfield;
      }
      
      .quantity input {
        width: 100%;
        line-height: 1.65;
        float: left;
        display: block;
        padding-left: 20px;
      }
      
      .quantity input:focus {
        outline: 0;
      }
      
      .quantity-nav {
        float: left;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 20px;
        border-left: 1px solid #C4C4C4;
        display: flex;
        flex-direction: column;
    }
      
    .quantity-button {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50%;
        width: 18px;
    }
      
      .quantity-button.quantity-up {
      }
      
      .quantity-button.quantity-down {
      }


      .select-check-default.select-checkbox-list-filter{width: 100%;}
      .select-check-default .checkbox-list-placeholder{background-color: var(--input-bg-grey); border-radius: 5px; border: 1px solid #C4C4C4; color: var(--clr-dark-grey); padding: 8px 28px 8px 20px;}
      .box-sale-type{display: flex;gap: 20px;}
      .item-sale-type{width: auto;display: flex;}
      .item-sale-type p, .item-sale-type span{color: #fff;white-space: nowrap;}
      .item-sale-type .group-input-2-2 .quantity{width: 160px;}
      .wrap-sale-type{border-top: 1px solid #32302B;}

      .rate-star{display: flex;width: 100%;gap:15px;}
      .rate-star svg{fill: var(--clr-white);}
      .rate-star[data-rate="1"] svg:nth-child(1) {
        fill: var(--clr-primary);
    }
    
    .rate-star[data-rate="2"] svg:nth-child(1),
    .rate-star[data-rate="2"] svg:nth-child(2) {
        fill: var(--clr-primary);
    }
    
    .rate-star[data-rate="3"] svg:nth-child(1),
    .rate-star[data-rate="3"] svg:nth-child(2),
    .rate-star[data-rate="3"] svg:nth-child(3) {
        fill: var(--clr-primary);
    }
    
    .rate-star[data-rate="4"] svg:nth-child(1),
    .rate-star[data-rate="4"] svg:nth-child(2),
    .rate-star[data-rate="4"] svg:nth-child(3),
    .rate-star[data-rate="4"] svg:nth-child(4) {
        fill: var(--clr-primary);
    }
    
    .rate-star[data-rate="5"] svg {
        fill: var(--clr-primary);
    }
    .box-about-review {padding-bottom: 40px;}
    .box-about-review .card  {border-radius: 15px;overflow: hidden;}
    .box-about-review .card .card-body{display: flex;flex-direction: column;justify-content: space-between;height: 100%;gap: 20px;}
    .box-about-review .card  img{height: 100%;object-fit: cover;}
    .progress{height: 10px;}
    .progress-bar{background-color: var(--clr-primary);}
    .box-about-review .swiper-button{width: 45px;height: 45px;background-color: #d8a847;border-radius: 100px;}
    .box-about-review .swiper-button svg{fill: #fff;width: 15px;height: 15px;}
    .box-about-review  .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
        width: auto;
        background-color: rgb(0 0 0 / 25%);
        border-radius: 100px;
        position: absolute;
        margin: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 5px;
        bottom: 0;
    }
    
    .box-about-review  .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background-color: #d9d9d9;
        margin: 0 !important;
        opacity: 1;
    }
    .box-about-review  .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 15px;
        height: 15px;
        background-color: var(--clr-white);
    }
    
    .card-img-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        padding: 1rem;
        border-radius: 0;
        height: 100%;
        background: linear-gradient(180deg, rgba(12, 12, 13, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
        display: flex;
        align-items: flex-end;
    }


    .aspect-ratio-1{aspect-ratio: 1;object-fit: cover;}
    .thumb-hoz{width: 100%;float: left; display: flex;padding: 10px;gap: 10px;border-radius: 15px;overflow: hidden;box-shadow: 0px 9px 16px -4px rgba(12, 12, 13, 0.05);box-shadow: 0px 9px 16px -4px rgba(12, 12, 13, 0.05);}
    .thumb-hoz .thumb-image{border-radius: 15px;overflow: hidden;width: 35%;}
    .thumb-hoz .thumb-body{display: flex;flex-direction: column;justify-content: space-between;gap: 10px;width: 65%;}
    .thumb-hoz .thumb-body .thumb-footer{display: flex;gap: 10px;justify-content: space-between;font-size: 0.7em;}
    .thumb-hoz .thumb-body .thumb-footer .btn-icon{width: 50%;}
    .thumb-hoz .thumb-body .thumb-footer .btn-icon svg{width: 15px;height: auto;}
    .kv-human {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .group-btn-search {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: start;
        justify-content: center;
        gap: 20px;
        height: 100%;
    }
    .group-btn-search a {
       
        border-radius: 100px;
        font-size: var(--h6-font-size);
    }

    .search-knowledge{width: 100%;float: left;}
    .box-search-knowledge {
        display: flex;
        border-radius: 100px;
        width: 100%;
        justify-content: center;
        margin-bottom: 60px;
    }
    .inner-earch-knowledge{width: auto;display: flex;background-color: #fff;border-radius: 100px;}
    .box-search-knowledge-inner {
        width: 400px;
        position: relative;
        height: 50px;
    }
    .box-search-knowledge-inner > input{border: 0;width: 100%;padding-right: 30px;background-color: #fff;height: 100%;border-radius: 100px 0 0 100px;}
    .box-search-knowledge-inner > span{position: absolute;right: 10px;top: 0;height: 100%;display: flex;align-items: center;}
    .inner-earch-knowledge button{background-color: var(--clr-primary);border: 0;height: 100%; border-radius:  0 100px 100px 0;}

    .group-btn-search .btn-clr-primary.btn-outline.active{background-color: var(--clr-primary); color: var(--clr-white);}
    
    .min-h-auto{min-height: auto !important;}
    .checkbox-list-placeholder{white-space: nowrap;}
@media (max-width: 1860px) {
    .filter-lists{flex-wrap: wrap;}

    .filter-lists .input-group{max-width: 380px;}
}

@media (max-width: 1500px) {
    
    @media (min-width: 1359px) {
        /* body{font-size: 0.9em;} */
        .outer{padding: 10px 30px;}
        .container {
            max-width: 1050px;
        }
        .hero-banner .container {max-width: 1320px;}
        .item-search-select{gap: 1em;}
        .item-search-select input.form-control{padding: 0.9375em 1em;}
        .item-search-action {
            width: 15%;
        }
        .select-checkbox-list-filter {
            width: calc(70% / 3);
        }
    }
    .sec-who-are-we .img-haft img {
        margin-top: -5.5em;
        height: calc(100% + 5.5em);
    }
  
    
}
@media (max-width: 1439px) {
    .filter-lists .input-group {
        width: calc(45% - 16px);
        max-width: 100%;
        min-width: auto;
    }
    
    .outer.filter-flex-cont .select-checkbox-list-filter{width: calc((55% / 3) - ((16px * 2) / 3) );}

}

@media (max-width: 1399px) {
    :root {
        --space-container: 1140px;
    }
    /* .filter-lists > * {
        flex: 4 0 20%;
    }
    .filter-lists .input-group {
        max-width: 100%;
        min-width: auto;
        width: 30%;
    } */

    .filter-lists .input-group{width: calc(50% - (16px / 2));}
    
    .outer.filter-flex-cont .select-checkbox-list-filter{width: calc((50% / 2) - (16px) );}


}

@media (max-width: 1199px) {
    :root {
        --space-container: 960px;
        /* --h1-font-size: 3em; */
    }
    .accordion-title.h6 {
        padding: 20px 15px;
    }

    .modal-product-detail .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows: auto;
        width: 100%;
      }
      
      .modal-product-detail .item-1:nth-child(1) {
        grid-column: span 2; /* ให้ไอเท็มแรกกว้าง 2 คอลัมน์ */
      }
      
      .modal-product-detail .item {
        text-align: center;
        font-weight: bold;
      }

    .travel-info.grid-2-2 .grid-2-2 {
        width: 100%;
    }
    .custom-modal-dialog.container{padding: 0;}
    .grid-md-2{row-gap: 20px;}
    .grid-md-2>* {
        width: calc(100% / 2);
    }

    .filter-lists{width: 100%;}
    .filter-flex-cont{flex-direction: column; gap: 20px;}
    .outer{padding: 20px 50px;}


    /* HEADER */
    .outer-header{padding: 10px 20px;}
    .menu-m{color: #fff;font-weight: 500;cursor: pointer;}
    .item-header.item-header-center {
        position: fixed;
        width: 100%;
        height: calc(100% - 80px);
        top: 80px;
        left: 0;
        background: #1d1d1d;
        padding: 20px;
        border-top: 1px solid #C4C4C4;
        display: none;
        overflow: hidden;
        overflow-y: scroll;
    }
    .item-header.item-header-center::-webkit-scrollbar {
        display: none;
      }
      
    .item-header.item-header-center {
        -ms-overflow-style: none;  
        scrollbar-width: none;  /* Firefox */
      }
    .item-header-center ul {
        flex-direction: column;
        justify-content: center;
        gap: 8px;
    }

    .outer-sub-menu {
        position: relative;
        top: 0;
        background: transparent;
    }
    .outer-sub-menu .container{max-width: 100%;}
    .inner-sub-menu{flex-direction: column;}
    .inner-sub-menu{padding:10px 0;}
    .inner-sub-menu > ul > li a{color: #fff;}
    .item-header-center>ul>li>a{width: 100%;float: left;padding: 10px 0 ;}
    .outer-sub-menu ul {
        border-bottom: 1px solid #C4C4C4;
        width: 100%;
        padding-bottom: 20px;
    }

    .filter-lists .input-group {
        max-width: 100%; 
        min-width: 50%;
    }

    .outer.filter-flex-cont .input-group,.outer.filter-flex-cont .select-checkbox-list-filter{width: calc(50% - (16px / 2));min-width: auto;}
}

@media (max-width: 991px) {
    :root {
        --space-container: 720px;
    }

    .search-dealer{width: 100%;}
    .group-search-dealer.filter-lists{flex-direction: column;}
    .tab-form{width: 100%;}
    .group-search-dealer.filter-lists .input-group{width: 100%;}
    .group-search-dealer.filter-lists .filter-lists .btn{width: 100%;}

    .item-search-action .btn{padding: 0.3em 1em;}

    .item-search-select .select2-container--default .select2-selection--single{    padding: 15px 0;}
    .item-search-select{gap: 0;}
    .item-search-action .btn{padding: 0.3em 1em;}
    .thumb-on-img .thumb-img img{aspect-ratio: 1;object-fit: cover;}

    .item-search-select {
        width: 100%;
        flex-direction: column;
    }
    .wrap-search{border-radius: 20px;flex-direction: column;}
    .item-search-select{border-radius: 15px;}
    .item-search-select .select2-container--default{width: 100% !important;}
    .select-checkbox-list-filter{width: 100%;}
    .item-search-select .select2-container--default .select2-selection--single,.checkbox-list-placeholder{border-right:0 ; border-bottom: 2px solid #c4c4c4;padding: 15px 0;font-size: 1rem;}
    .checkbox-list-placeholder{padding: 15px 28px 15px  8px;}
    .item-search-select .input-group{width: 100%;}
    .item-search-select .btn{padding: 20px;}
    .item-search-action {
        width: 100%;
    }
    .item-search-select input.form-control{padding-left: 8px;}
    .item-search-select .input-group-text{padding-right: 10px;}


    .box-sale-type{flex-wrap: wrap;}
    .item-sale-type p {
        width: 80px;
    }
    .item-sale-type  .group-input-2-2{width: calc(100% - (80px + 1rem));}
    .item-sale-type .group-input-2-2 .quantity {
        width: calc(50% - 15px);
    }

    .sec-knowledge .card-img{aspect-ratio: 1;object-fit: cover;}

    .group-btn-search a {
        font-size: 1em;
    }
    .kv-human img {
        width: 30%;
    }
}

@media (max-width: 767px) {
    .inner-calculator:not(.inner-calculator-r){padding: 0;}

    .contain{flex-direction: column;}
    .contain-reverse{flex-direction: column;}
    .contain > *{width: 100%;}
    .sec-who-are-we .cont-haft {
        padding: 20px;
    }

    .thumb-on-img .thumb-body{padding: 2.375em 2.375em 4.375em 2.375em ;}


  
    .select2-container{font-size: 1rem;}
    .item-search-action .btn{padding: 20px;border-radius: 10px 10px 15px 15px;}
    section.pd.sec-type-to-action .swiper-pagination{width: 100%;}

    .pagination-primary .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 10px;height: 10px;}
    .pagination-primary .swiper-pagination-bullet{width: 8px;height: 8px;}
    .pagination-primary .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{gap: 10px;}
    img.abs-quotes{left: 0;top: -40px;}
    img.abs-quotes-2{right: 0;bottom: 0;}


    .outer{padding: 20px;}
    .filter-lists .input-group{max-width: 100%;width: 100%;}
    .filter-lists .select2-container{max-width: calc(50% - (16px / 2));}
    .filter-lists .btn{width: calc(50% - (16px / 2));font-size: 1rem;}

    .sec-profile .tab-form {
        flex-direction: row;
        gap: 30px;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;
        width: 100%;
        border-bottom: 1px solid #E6E6E6;
    }
    .sec-profile .tab-form::-webkit-scrollbar {
        display: none;
      }
      
      /* Hide scrollbar for IE, Edge and Firefox */
      .sec-profile .tab-form {
        -ms-overflow-style: none;  
        scrollbar-width: none;  /* Firefox */
      }
    .sec-profile .tab-form button {
        white-space: nowrap;
    }
    .sec-profile .tab-form button{border: 0;}

    .swiper-type-action{overflow: visible;}
    .header-icon{flex-direction: column;gap: 5px;}
    .header-icon h2{width: 100%;}
    .header-icon  .btn-icon>span{justify-content: flex-end;}

    .filter-lists > * {
        flex: 4 0 calc(50% - (16px / 2));
    }

    .group-btn-search{gap: 10px;}
    .group-btn-search a {
        font-size: 14px;
    }
    .box-search-knowledge-inner{height: 40px;width: 300px;}
}

@media (max-width: 575px) {
    /* :root {
        --body-font-size: 0.9em;
    } */

    .sec-list-blog-hl .thumb-on-img .thumb-body{padding: 1.5em;}

    .profile-viewer{flex-direction: column;justify-content: center;text-align: center;}
    .modal-sticky{overflow: hidden;overflow-x: scroll;}
    .modal-sticky ul li a{padding: 15px 20px 10px;white-space: nowrap;}
    .modal-sticky ul {
        justify-content: flex-start;
    }
    .modal-sticky::-webkit-scrollbar {
        display: none;
      }
      
    .modal-sticky {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
      }

      .item-sale-type p {width: 100%;}
      .item-sale-type{flex-direction: column;}
      .item-sale-type .group-input-2-2{width: 100%;}
      .filter-lists > * {
        flex: 1 0 100%;
    }

    .filter-lists .btn{flex: 2 0 calc(50% - (16px / 2));}

    .kv-human{flex-direction: column;gap: 10px;}
    .kv-human img{order: 3;  width: 70%;margin: 0 auto;}
}

@media (max-width: 415px) {
    /* :root {
        --body-font-size: 0.8em;
    } */
}




@media (min-width: 576px) {
    .modal-dialog.container {
        max-width: 95vw;
    }
}

@media (min-width: 768px) {
    .modal-dialog.container {
        max-width: 95vw;
    }
}


@media (min-width: 992px) {
    .modal-dialog.container {
        max-width: 95vw;
    }

    .inner-form{padding: 0 4vw;}
}

@media (min-width: 1200px) {
    .modal-dialog.container {
        max-width: 1140px;
    }
    .menu-m{display: none;}
}


@media (min-width: 1400px) {
    .modal-dialog.container {
        max-width: 1320px;
    }
}


@media (min-width: 1600px) {
    .modal-dialog.container {
        max-width: 1500px;
    }
}



/* @media (min-width: 576px) {
    .modal-dialog.container{
        max-width: 540px;
    }
}
 */

 .video-player{
    width: 100%;
    aspect-ratio: 1.24;
    object-fit: cover;
 }

 .select2-container--open .select2-dropdown {
    z-index: 1100; /* สูงกว่า z-index ของ Modal */
}


.slider-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.slider {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
}

.slide {
  flex: 0 0 auto;
  width: 200px;
  margin: 0 10px;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}

.slider-wrapper:hover .slider {
  animation-play-state: paused;
}

.video-blog-detail{
    width: 100%;
}

.knowledge-highlight{
    height: 260px;
    object-fit: cover;
}

.filter-lists .input-group .search-dropdown-menu input,
.filter-lists .input-group .search-dropdown-menu-area input{
    background-color: var(--input-bg-grey) ;
    border-radius: 5px;
    border: 1px solid #C4C4C4 ;
    color: var(--clr-dark-grey) ;
    padding: 6px 20px ;
}

/* .embed-container {
    width: 100%;
    max-width: 500px;
    height: 100%;
    margin: 0 auto;
  } */
  
  .swiper-review .swiper-wrapper .swiper-slide iframe {
    width: 100%;
    border: none;
    margin-right: 30px;
    min-height: 100%;
  }