::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}

::-webkit-scrollbar-thumb {
    background: slategray;
}

::-webkit-scrollbar-track {
    background: #b8c0c8;
}

body {
    /* scrollbar-face-color: slategray; */
    /* scrollbar-track-color: #b8c0c8; */
}


/* body {
    height: 3000px;
    width: 3000px;
} */

.title-oil {
    font-family: 'db_helvethaica_x65_med';
    font-size: 43px;
    color: #000;
    text-align: center;
    margin: 50px 0px;
}

.text1 {
    /* font-family: 'db_helvethaica_x65_med'; */
    font-size: 20px;
    color: #000;
    text-align: center;
    margin: 50px 0px;
}

.warpper {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'db_helvethaica_x55_regular';
    font-size: 30px;
    font-weight: bold;
}

/* หน้าจอขนาดกลาง เช่น tablet */
@media (max-width: 1024px) {
    .warpper {
        font-size: 20px;
        align-items: center;
         display: flex;
    flex-direction: column;
    font-family: 'db_helvethaica_x55_regular';
    font-weight: bold;
    }
    .back-button-container {
 text-align: left;
  margin-top: -40px; /* ขยับขึ้นใกล้แบนเนอร์ */
  position: relative;
  z-index: 10;
}

.gallery-cell.is-selected {
  filter: none;
}

/* ตัวเลข/overlay */
.gallery-cell:before {
  display: block;
  text-align: center;
  line-height: 1;           /* ให้ line-height เป็น 1 เพื่อความ responsive */
  font-size: 8vw;           /* ขนาดตามความกว้างหน้าจอ */
  color: white;
}
img {
    max-width: 90%;
    height: auto;
    vertical-align: top;
    display: block;
    /*    image-rendering: -moz-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;*/
}

}

/* หน้าจอขนาดเล็ก เช่น มือถือ */
@media (max-width: 768px) {
    /* .warpper {
        font-size: 20px;
        align-items: center;
           display: flex;
    flex-direction: column;
    font-family: 'db_helvethaica_x55_regular';
    font-weight: bold;
    } */
     /* .warpper {
    display: flex;
    align-items: center; 
    justify-content: center; 
    gap: 20px; 
    font-family: 'db_helvethaica_x55_regular';
    font-size: 20px;
    font-weight: bold;
} */

    .warpper {
       display: flex;
    flex-direction: row; 
    align-items: center;
    font-family: 'db_helvethaica_x55_regular';
    font-size: 30px;
    font-weight: bold;
}

.warpper .radio {
    display: inline-block; /* ให้ radio อยู่แนวนอน */
}

/* .warpper .tabs {
    display: flex; 
    gap: 10px;
} */

.warpper .tab {
    cursor: pointer;
}
.back-button-container {
 text-align: left;
  margin-top: -40px; /* ขยับขึ้นใกล้แบนเนอร์ */
  position: relative;
  z-index: 10;
}

.gallery-cell.is-selected {
  filter: none;
}

/* ตัวเลข/overlay */
.gallery-cell:before {
  display: block;
  text-align: center;
  line-height: 1;           /* ให้ line-height เป็น 1 เพื่อความ responsive */
  font-size: 8vw;           /* ขนาดตามความกว้างหน้าจอ */
  color: white;
}

}

/* หน้าจอมือถือขนาดเล็กมาก */
@media (max-width: 480px) {
    /* .warpper {
        font-size: 16px;
        align-items: center;
           display: flex;
    flex-direction: column;
    font-family: 'db_helvethaica_x55_regular';
    font-weight: bold;
    } */
     /* .warpper {
    display: flex;
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
    gap: 20px;
    font-family: 'db_helvethaica_x55_regular';
    font-size: 20px;
    font-weight: bold;
} */

.warpper .radio {
    display: inline-block; /* ให้ radio อยู่แนวนอน */
}

/* .warpper .tabs {
    display: flex;
    gap: 10px;
} */

/* .warpper .tab {
    cursor: pointer;
} */
.back-button-container {
 text-align: left;
  margin-top: -40px; /* ขยับขึ้นใกล้แบนเนอร์ */
  position: relative;
  z-index: 10;
}

.gallery-cell.is-selected {
  filter: none;
}

/* ตัวเลข/overlay */
.gallery-cell:before {
  display: block;
  text-align: center;
  line-height: 1;           /* ให้ line-height เป็น 1 เพื่อความ responsive */
  font-size: 8vw;           /* ขนาดตามความกว้างหน้าจอ */
  color: white;
}

}
.warpperHT {
    display: flex;
    flex-direction: column;
    align-items: normal;
    font-family: 'db_helvethaica_x55_regular';
    font-size: 30px;
    font-weight: bold;
}


.tabSAE {
    cursor: pointer;
    padding: 10px 20px;
    margin: 0px 10px;
    background: #000;
    display: inline-block;
    color: #fff;
    border-radius: 5px;
    /* box-shadow: 0 0.5rem 0.8rem #00000080; */
    /* width: 215px; */
    /* text-align: center; */
    font-size: 23px;
}

.panels {
    background: #fffffff6;
    /* box-shadow: 0 2rem 2rem #00000080; */
    /* min-height: 200px; */
    width: 100%;
    /* max-width: 500px; */
    border-radius: 3px;
    overflow: hidden;
    padding: 20px;
}

.panel {
    display: none;
    animation: fadein .8s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.panel-title {
    font-size: 1.5em;
    font-weight: bold
}

.radio {
    display: none;
}

#one:checked~.panels #one-panel,
#two:checked~.panels #two-panel,
#three:checked~.panels #three-panel {
    display: block
}

#one:checked~.tabs #one-tab,
#two:checked~.tabs #two-tab,
#three:checked~.tabs #three-tab {
    background: #96865f;
    color: white;
    /* border-top: 3px solid #000; */
}

.typePro .Itype {
    opacity: 0;
}

.typePro:hover .Itype {
    opacity: 1;
    transition: 1s;
}

a .bor {
    /* border: 5px #b0f114 solid; */
    /* border-image: url(../../images/product/boder.png) 25 25 round; */
}

.bor {
    margin-top: 5%;
    margin-bottom: 5%;
}

.textRro {
    margin-bottom: 15% !important;
    font-size: 20px !important;
    font-weight: bold;
    text-align: center;
    
}

.point {
    padding: 5px 10px;
    cursor: pointer;
}

a:hover .point {
    border-radius: 10px;
    background-color: #f3f3f3;
    transition: 1s;
    color: #00984d;
}

.subText {
    font-size: 20px;
    font-weight: bold;
    font-family: 'db_helvethaica_x55_regular';
}

.temp {
    font-size: 25px;
    font-family: 'db_helvethaica_x75_bd';
}

.tempH {
    font-size: 36px;
    color: #00984d;
    border-bottom: 1px black solid;
    line-height: 1;
    margin: 3% 0%;
}

a {
    cursor: pointer !important;
}

.fa-facebook {
    color: rgb(59, 89, 152);
    font-size: 35px;
    padding: 3%;
}

.fa-line {
    color: #00b800;
    font-size: 35px;
    padding: 3%;
}

.fa-share-alt {
    color: darkgrey;
    font-size: 35px;
    padding: 3%;
}

.fa-download {
    color: white;
    font-size: 20px;
    padding: 3%;
}

.textdownload {
    color: white;
    font-size: 20px;
    padding: 3%;
    font-family: 'db_helvethaica_x55_regular';
}

ol,
ul {
    padding-left: 0;
}


/* // Small devices (landscape phones, 576px and up) */

@media (max-width: 576px) {
    .H-group {
        font-family: 'db_helvethaica_x55_regular';
        font-size: 38px;
        color: #00682d;
        text-align: center;
    }
    .detail {
        font-family: 'db_helvethaica_x45_li';
        font-size: 30px;
        color: #7b7b7b;
        text-align: center;
        /* line-height: 17px; */
        line-height: 32px;
        margin-bottom: 20px;
    }
    /* .tab {
        cursor: pointer;
        padding: 10px 20px;
        margin: 0px 10px;
        background: #000;
        display: inline-block;
        color: #fff;
        border-radius: 5px;
        text-align: center;
        font-size: 22px;
    } */
         .tab {
        cursor: pointer;
        padding: 10px 20px;
        /* margin: 0px 10px; */
        background: #000;
        display: inline-block;
        color: #fff;
        border-radius: 5px;
        /* box-shadow: 0 0.5rem 0.8rem #00000080; */
        /* width: 215px; */
        text-align: center;
        font-size: 22px;
    }
    
.gallery-cell.is-selected {
  filter: none;
}

/* ตัวเลข/overlay */
.gallery-cell:before {
  display: block;
  text-align: center;
  line-height: 1;           /* ให้ line-height เป็น 1 เพื่อความ responsive */
  font-size: 8vw;           /* ขนาดตามความกว้างหน้าจอ */
  color: white;
}

}


/* // Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
    .H-group {
        font-family: 'db_helvethaica_x55_regular';
        font-size: 38px;
        color: #00682d;
        text-align: center;
    }
    .detail {
        font-family: 'db_helvethaica_x45_li';
        font-size: 30px;
        color: #7b7b7b;
        text-align: center;
        /* line-height: 17px; */
        line-height: 32px;
        margin-bottom: 20px;
    }
    .tab {
        cursor: pointer;
        padding: 10px 20px;
        margin: 0px 10px;
        background: #000;
        display: inline-block;
        color: #fff;
        border-radius: 5px;
        /* box-shadow: 0 0.5rem 0.8rem #00000080; */
        /* width: 215px; */
        text-align: center;
        font-size: 22px;
    }
}


/* // Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .H-group {
        font-family: 'db_helvethaica_x55_regular';
        font-size: 38px;
        color: #00682d;
        text-align: left;
    }
    .detail {
        font-family: 'db_helvethaica_x45_li';
        font-size: 30px;
        color: #7b7b7b;
        text-align: left;
        /* line-height: 17px; */
        line-height: 32px;
        margin-bottom: 20px;
    }
    .tab {
        cursor: pointer;
        padding: 10px 20px;
        margin: 0px 10px;
        background: #000;
        display: inline-block;
        color: #fff;
        border-radius: 5px;
        /* box-shadow: 0 0.5rem 0.8rem #00000080; */
        width: 215px;
        text-align: center;
        font-size: 28px;
    }
}


/* // Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    .H-group {
        font-family: 'db_helvethaica_x55_regular';
        font-size: 38px;
        color: #00682d;
        text-align: center;
    }
    .detail {
        font-family: 'db_helvethaica_x45_li';
        font-size: 29px;
        color: #7b7b7b;
        text-align: left;
        /* line-height: 17px; */
        line-height: 32px;
        margin-bottom: 20px;
    }
    .tab {
        cursor: pointer;
        padding: 10px 20px;
        margin: 0px 10px;
        background: #000;
        display: inline-block;
        color: #fff;
        border-radius: 5px;
        /* box-shadow: 0 0.5rem 0.8rem #00000080; */
        width: 215px;
        text-align: center;
        font-size: 28px;
    }

    .parallelogram{
        width: 350px; /* Set your desired width */
        background-color: orange; /* Set your desired background color */
        -webkit-shape-outside: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        shape-outside: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        padding: 50px;
      }
/* 
      .diagonal-left {
        width: 100px;
        height: 100px;
        background-color: #deadee;
        transform: skewX(30deg);
        transform-origin: top;
        margin: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .diagonal {
        width: 350px;
        height: 100px;
        background-color: rgba(225, 212, 212, 0.911);
        transform: skewX(30deg);
        transform-origin: top;
        margin: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .diagonal>span {
        transform: skewX(-30deg);
        color: white;
      }

    

      .diagonal-right-shadow {
        position: relative;
        display: block;
        margin: 20px auto;
        padding: 20px 60px;
        font-size: 22px;
        font-weight: bold;
        color: black;
        background-color: rgba(225, 212, 212, 0.911);
        text-align: center;
        transform: skewX(-20deg);
        border-left: 20px solid black;
        border-right: 20px solid black;
        width: fit-content;
        max-width: 90%; 
        box-sizing: border-box;
    } */

       .diagonal-left {
        width: 100px;
        height: 100px;
        background-color: #deadee;
        transform: skewX(30deg);
        transform-origin: top;
        margin: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .diagonal {
        width: 350px;
        height: 100px;
        background-color: rgba(225, 212, 212, 0.911);
        transform: skewX(30deg);
        transform-origin: top;
        margin: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .diagonal>span {
        transform: skewX(-30deg);
        color: white;
      }

    

      .diagonal-right-shadow {
        position: relative;
        display: block;
        margin: 20px auto;
        padding: 20px 60px;
        font-size: 22px;
        font-weight: bold;
        color: black;
        background-color: rgba(225, 212, 212, 0.911);
        text-align: center;
        transform: skewX(-20deg);
        border-left: 20px solid black;
        border-right: 20px solid black;
        width: fit-content;
        max-width: 90%; 
        box-sizing: border-box;
    }
      .diagonal-right-shadow span {
        transform: skewX(20deg); /* ต้องเป็น +20deg เพื่อ counter -20deg */
        display: inline-block;
        line-height: 1.4;
        text-align: center;
        width: 100%;
        transform-origin: center center;
        white-space: normal;
        word-wrap: break-word;
        font-size: 25px;
        font-family: "db_helvethaica_x55_regular";
    }
  }

     /* สำหรับ zoom 125% (120dpi) */
        @media screen and (min-resolution: 120dpi) {
           .diagonal-right-shadow {
        font-size: 1rem;
        padding: 0.75rem 2rem;
        max-width: 80%;
        border-left: 0.75rem solid black;
        border-right: 0.75rem solid black;
        transform-origin: center center;
        white-space: normal;

          position: relative;
        display: block;
        margin: 20px auto;       
        font-weight: bold;
        color: black;
        background-color: rgba(225, 212, 212, 0.911);
        text-align: center;
        transform: skewX(-20deg);      
        width: fit-content;    
        box-sizing: border-box;
    }
    
    .diagonal-right-shadow span {
        transform: skewX(20deg); /* ต้องเป็น +20deg เพื่อ counter -20deg */
        display: inline-block;
        line-height: 1.4;
        text-align: center;
        width: 100%;
        transform-origin: center center;
        white-space: normal;
        word-wrap: break-word;
        font-size: 25px;
        font-family: "db_helvethaica_x55_regular";
    }
        }

        /* สำหรับ zoom 150% (144dpi) */
        @media screen and (min-resolution: 144dpi) {
           .diagonal-right-shadow {
        font-size: 1rem;
        padding: 0.75rem 2rem;
        max-width: 80%;
        border-left: 0.75rem solid black;
        border-right: 0.75rem solid black;
        transform-origin: center center;
        white-space: normal;

          position: relative;
        display: block;
        margin: 20px auto;       
        font-weight: bold;
        color: black;
        background-color: rgba(225, 212, 212, 0.911);
        text-align: center;
        transform: skewX(-20deg);      
        width: fit-content;    
        box-sizing: border-box;
    }
    
    .diagonal-right-shadow span {
        transform: skewX(20deg); /* ต้องเป็น +20deg เพื่อ counter -20deg */
        display: inline-block;
        line-height: 1.4;
        text-align: center;
        width: 100%;
        transform-origin: center center;
        white-space: normal;
        word-wrap: break-word;
        font-size: 25px;
        font-family: "db_helvethaica_x55_regular";
    }
        }

        /* สำหรับ zoom 175% (168dpi) */
        @media screen and (min-resolution: 168dpi) {
           .diagonal-right-shadow {
        font-size: 1rem;
        padding: 0.75rem 2rem;
        max-width: 80%;
        border-left: 0.75rem solid black;
        border-right: 0.75rem solid black;
        transform-origin: center center;
        white-space: normal;


        position: relative;
        display: block;
        margin: 20px auto;       
        font-weight: bold;
        color: black;
        background-color: rgba(225, 212, 212, 0.911);
        text-align: center;
        transform: skewX(-20deg);      
        width: fit-content;    
        box-sizing: border-box;
    }
    
    .diagonal-right-shadow span {
        transform: skewX(20deg); /* ต้องเป็น +20deg เพื่อ counter -20deg */
        display: inline-block;
        line-height: 1.4;
        text-align: center;
        width: 100%;
        transform-origin: center center;
        white-space: normal;
        word-wrap: break-word;
        font-size: 25px;
        font-family: "db_helvethaica_x55_regular";
    }
        }

        /* สำหรับ zoom 200% (192dpi) */
        @media screen and (min-resolution: 192dpi) {
          .diagonal-right-shadow {
        font-size: 1rem;
        padding: 0.75rem 2rem;
        max-width: 80%;
        border-left: 0.75rem solid black;
        border-right: 0.75rem solid black;
        transform-origin: center center;
        white-space: normal;

          position: relative;
        display: block;
        margin: 20px auto;       
        font-weight: bold;
        color: black;
        background-color: rgba(225, 212, 212, 0.911);
        text-align: center;
        transform: skewX(-20deg);      
        width: fit-content;    
        box-sizing: border-box;
    }
    
    .diagonal-right-shadow span {
        transform: skewX(20deg); /* ต้องเป็น +20deg เพื่อ counter -20deg */
        display: inline-block;
        line-height: 1.4;
        text-align: center;
        width: 100%;
        transform-origin: center center;
        white-space: normal;
        word-wrap: break-word;
        font-size: 25px;
        font-family: "db_helvethaica_x55_regular";
    }
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
          .diagonal-right-shadow {
        font-size: 1rem;
        padding: 0.75rem 2rem;
        max-width: 80%;
        border-left: 0.75rem solid black;
        border-right: 0.75rem solid black;
        transform-origin: center center;
        white-space: normal;

          position: relative;
        display: block;
        margin: 20px auto;       
        font-weight: bold;
        color: black;
        background-color: rgba(225, 212, 212, 0.911);
        text-align: center;
        transform: skewX(-20deg);      
        width: fit-content;    
        box-sizing: border-box;
    }
    
    .diagonal-right-shadow span {
        transform: skewX(20deg); /* ต้องเป็น +20deg เพื่อ counter -20deg */
        display: inline-block;
        line-height: 1.4;
        text-align: center;
        width: 100%;
        transform-origin: center center;
        white-space: normal;
        word-wrap: break-word;
        font-size: 25px;
        font-family: "db_helvethaica_x55_regular";
    }
    img {
    max-width: 90%;
    height: auto;
    vertical-align: top;
    display: block;
    /*    image-rendering: -moz-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;*/
}
        }

/* เพิ่มใน CSS zoom media queries */
@media screen and (min-resolution: 120dpi) {
    .diagonal-right-shadow {
        font-size: 1rem;
        padding: 0.75rem 2rem;
        max-width: 80%;
        border-left: 0.75rem solid black;
        border-right: 0.75rem solid black;
        transform-origin: center center; /* เพิ่ม */
        white-space: normal; /* เพิ่ม */
    }
    
    /* เพิ่ม span selector */
    .diagonal-right-shadow span {
        transform: skewX(20deg); /* ต้องมี counter-transform */
        display: inline-block;
        line-height: 1.4;
        text-align: center;
        width: 100%;
        transform-origin: center center;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 25px;
        font-family: "db_helvethaica_x55_regular";
    }
}


    .highlighted {
        color: red;
        transform: none;
        border-left: none;
        border-right: none;
        display: block;
        text-align: center;
        margin: 0 auto;
        width: fit-content;
    }

    /* button {
        background-color: #a99b7e;
        color: white;
  
        padding: 12px 40px;
        cursor: pointer;
        border-radius: 25px;
        font-size: 16px;
        transition: all 0.3s ease;
        margin: 20px;
        font-family: 'db_helvethaica_x55_regular';
    } */

    button:hover {
        background-color: gray;
        color: black;
    }

    #fullText {
        margin: 0 20px;
        text-align: justify;
        line-height: 1.6;
        font-family: 'db_helvethaica_x55_regular';
        font-size: 24px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .diagonal-right-shadow {
            padding: 15px 30px;
            font-size: 18px;
            transform: skewX(-20deg);
        }

        button {
            padding: 10px 20px;
            font-size: 14px;

             background-color: #a99b7e;
            color: white;
            /* border: 4px solid gray; */
            cursor: pointer;
            border-radius: 25px;
            transition: all 0.3s ease;
            margin: 20px;
            font-family: 'db_helvethaica_x55_regular';
        }
        img {
    max-width: 90%;
    height: auto;
    vertical-align: top;
    display: block;
    /*    image-rendering: -moz-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;*/
}
    }

    @media (max-width: 480px) {
        .diagonal-right-shadow {
            padding: 10px 15px;
            font-size: 16px;
            transform: skewX(-20deg);
            border-left: 10px solid black;
            border-right: 10px solid black;
        }
img {
    max-width: 90%;
    height: auto;
    vertical-align: top;
    display: block;
    /*    image-rendering: -moz-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;*/
}
        button {
            padding: 8px 16px;
            font-size: 12px;
        }

        #fullText {
            margin: 0 10px;
        }
    }
    


.back-button-container {
 text-align: left;
  margin-top: -40px; /* ขยับขึ้นใกล้แบนเนอร์ */
  position: relative;
  z-index: 10;
}

/* #backButton {
  margin: 0;
} */

#backButton {
  display: block; /* ต้องแสดงตลอด */
  font-family: 'db_helvethaica_x75_bd', sans-serif;
  font-size: 22px;       /* ขนาดตัวอักษร */
  width: 120px;          /* กำหนดความกว้างปุ่ม */
  height: 40px;          /* ความสูงปุ่ม */
  line-height: 40px;     /* จัดข้อความกึ่งกลางแนวตั้ง */
  padding: 0 10px;       /* ระยะห่างด้านใน */
  box-sizing: border-box;
  text-align: center;    /* จัดข้อความกึ่งกลางแนวนอน */

  background-color: #a99b7e;
  color: #fff;
  border: none;
  border-radius: 25px;
  cursor: pointer;

  /* ตำแหน่งลอย */
  position: fixed;
  top: 120px;     /* ระยะห่างจากบน */
  right: 20px;    /* ระยะห่างจากซ้าย */
  z-index: 9999; /* กันไม่ให้โดน element อื่นบัง */
}

@media (max-width: 2486px) {
/* Responsive gallery */

.gallery-cell.is-selected {
  filter: none;
}

/* ตัวเลข/overlay */
.gallery-cell:before {
  display: block;
  text-align: center;
  line-height: 1;           /* ให้ line-height เป็น 1 เพื่อความ responsive */
  font-size: 8vw;           /* ขนาดตามความกว้างหน้าจอ */
  color: white;
}

img {
    max-width: 90%;
    height: auto;
    vertical-align: top;
    display: block;
    /*    image-rendering: -moz-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;*/
}
}



  /* .container-promotion {
      margin: 0;
      padding: 0;
  } */

  /* .promotion-first {
      margin: 0;
      padding: 0;
      margin-top: 70px;
   
  } */

  .promotion-first {
      margin: 0;
      padding: 0;
      
  }
  /* .gallery {
     width: 100%;

  height: 332px;
  overflow: hidden;
  position: relative;
    margin-left: calc(-50vw + 50%);
   
  } */
  .promotion-first {
       display: block;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      position: relative;
  }

.gallery {
     width: 100%;
  height: 415px; /* กำหนดสูงเท่าขนาด banner */
  overflow: hidden;
  position: relative;
  }

  
/* mobile (max-width: 768px) */
@media (max-width: 768px) {
  #backButton {
    font-size: 12px;
    width: 90px;
    height: 32px;
    font-family: 'db_helvethaica_x75_bd', sans-serif;
    box-sizing: border-box;
    overflow: hidden;
    top: 22%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none;
    vertical-align: middle;
  }
    .promotion-first {
       display: block;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      position: relative;
  }

.gallery {
     width: 100%;
  height: 415px; /* กำหนดสูงเท่าขนาด banner */
  overflow: hidden;
  position: relative;
  }

}
@media (max-width: 867) {
  img {
    max-width: 90%;
    height: auto;
    vertical-align: top;
    display: block;
    /*    image-rendering: -moz-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;*/
}
  .promotion-first {
       display: block;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      position: relative;
  }

.gallery {
     width: 100%;
  height: 415px; /* กำหนดสูงเท่าขนาด banner */
  overflow: hidden;
  position: relative;
  }

}
/* small mobile (max-width: 480px) */
@media (max-width: 480px) {
  #backButton {
    font-size: 10px;
    width: 75px;
    height: 28px;
    font-family: 'db_helvethaica_x75_bd', sans-serif;
    box-sizing: border-box;
    overflow: hidden;
    top: 16%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none;
    vertical-align: middle;
  }
    .promotion-first {
       display: block;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      position: relative;
  }
 .gallery-cell {
    filter: none !important;
    brightness: 1 !important;
    padding-top: 0 !important;

        width: 26%;
    height: 33.3vw;
  
    overflow: hidden;
    
   
  display: block;     /* ตัดช่องว่างด้านล่างรูป */
  object-fit: cover;  /* ครอบเต็มไม่ให้ภาพยืด (ถ้าสัดส่วนไม่ตรง) */
  }
  
  .gallery-cell.is-selected {
    filter: none !important;
  }
.gallery {
     width: 100%;
  height: 415px; /* กำหนดสูงเท่าขนาด banner */
  overflow: hidden;
  position: relative;
  }
  img {
        width: 50%;
        max-width: 50%;
        height: auto;
        object-fit: contain;
         display: block;       /* ทำให้ img เป็น block */
        margin: 0 auto;       /* จัดกลางแนวนอน */
    }
  /* จัดให้อยู่กึ่งกลางด้านล่าง */
  .flickity-page-dots {
    bottom: 338px;                /* ระยะจากขอบล่างแบนเนอร์ */
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    display: flex;
    justify-content: center;
    width: 50%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* สไตล์จุด */
  .flickity-page-dots .dot {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
    text-indent: -9999px;   /* กันไม่ให้แสดง text/เลข */
    overflow: hidden;
    outline: none !important;  /* 🔹 ปิดเส้นดำตอนคลิก */
    border: none;              /* 🔹 ป้องกันขอบ */
  }

  /* จุดที่ active */
  .flickity-page-dots .dot.is-selected {
    background: #a99b7e;   /* สีตอนเลือก */
    opacity: 1;
    transform: scale(1.2);
    outline: none !important;  /* 🔹 ลบเส้นสีดำตอน active */
  }



  .flickity-page-dots .dot:focus {
    outline: none !important;      /* 🔹 ลบเส้นสีดำตอนคลิก */
    box-shadow: none !important;   /* 🔹 ลบเงาที่อาจเกิดขึ้น */
  }

  /* ลบเส้นสีดำจากแบนเนอร์และลิงก์ทั้งหมด */
  .gallery-cell img:focus,
  .gallery-cell:focus,
  .flickity-viewport:focus,
  .js-flickity:focus,
  a:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}
/* .img-modal-big {
  max-width: 200% !important;  
  max-height: 200vh !important; 
} */
.img-modal-big {
  max-width: 90% !important;  
  max-height: 90vh !important; 
}
.modal-lg-custom {
  max-width: 90% !important;   /* กรอบ modal กว้างขึ้น */
}

.modal-lg-custom img {
  max-width: 40%;
  max-height: 200vh;            /* สูงสุดไม่เกินความสูงจอ */
  display: block;
  margin: auto;
}


/* ปรับ modal ให้ใหญ่ขึ้น */
.modal-dialog {
  max-width: 600px; /* กำหนดความกว้างของกรอบ modal */
  text-align: center;
}
.modal-body img {
  width: 566px;         /* กำหนดความกว้าง */
  height:  566px;        /* กำหนดความสูงให้เท่ากัน */
  object-fit: contain;  /* แสดงภาพเต็มในกรอบโดยไม่บิด */
  display: block;
  margin: 0 auto;       /* จัดให้อยู่ตรงกลาง */
}

/* ปรับ modal สำหรับมือถือให้อยู่ตรงกลางจอ */
@media (max-width: 768px) {
  .modal-dialog {
    max-width: 90% !important;
    margin: 0 !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999;
  }
  
  .modal-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none;
    border-radius: 8px;
  }
  
  .modal-body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    margin: 0 !important;
  }
  
  /* .modal-body img {
    width: 500px !important;
    height: 500px !important;
    max-width: 500px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
  } */
  .modal-body img {
  width: 500px;         /* กำหนดความกว้าง */
  height:  500px;        /* กำหนดความสูงให้เท่ากัน */
  object-fit: contain;  /* แสดงภาพเต็มในกรอบโดยไม่บิด */
  display: block;
  margin: 0 auto;       /* จัดให้อยู่ตรงกลาง */
}
}

.detail {
    text-align: center;
}
.Itype {
    display: block;
    margin: 10px auto; /* กึ่งกลางรูปไอคอน */
}



/*slide-banner--//////////////////////////////////////////////////////////////////////////*/

#slide-zone .owl-dots {
    display: block !important;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    z-index: 99;
    transform: translate(-50%, 0);
}


.headbar-top {
  z-index: 300;
  width: 100%;
  padding: 3rem .5rem;
  background: #FFF;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

#logo img {
  max-height: 90px;
  width: auto;
  height: auto;
  vertical-align: middle;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* =========================
   Desktop Menu
========================= */
nav#menudesktop ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  position: relative;
}

nav#menudesktop ul li {
  position: relative;
}

nav#menudesktop ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  background-color: #a99b7e;
  color: white !important;
  border-radius: 15px;
  transition: background-color 0.3s, color 0.3s;
}

/* nav#menudesktop ul li a:hover,
nav#menudesktop ul li a.active {
  background-color: #7b6246 !important;
  color: #fff !important;
  align-items: center;
} */
/* Hover */
nav#menudesktop ul li a:hover {
  background-color: #7b6246;
  color: #fff;
}

/* Active */
nav#menudesktop ul li a.active {
  background-color: #7b6246 !important;
  color: #fff !important;
}

/* Submenu */
nav#menudesktop ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #8d7f63;
  border-radius: 12px;
  z-index: 999;
}

nav#menudesktop ul li:hover > ul {
  display: block;
}

nav#menudesktop ul ul li a {
  font-size: 25px;
  padding: 6px 12px;
  white-space: nowrap;
  border-radius: 12px;
  text-align: left;
}

nav#menudesktop ul ul li:hover > a {
  background: #aaa;
  color: #fff;
}

/* Submenu of submenu */
nav#menudesktop ul ul ul {
  left: 100%;
  top: 0;
}
@media (max-width: 576px){
/* =========================
   Mobile Header & Hamburger
========================= */
.mobile-header {
  position: relative;
  height: 60px;
  display: flex;
    align-items: center;  /* จัดแนวตั้งให้ตรงกัน */
    /* justify-content: space-between;  */
    justify-content: flex-start;
    /* hamburger ซ้าย โลโก้กลาง */
    padding: 0 20px; /* ระยะขอบซ้ายขวา */
  
}

#hamburger {
  width: 30px;
  height: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
    z-index: 10001;

}

#hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease;
}


/* Hamburger open effect */
#hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
}
#hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Logo position in mobile header */
.mobile-header #logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* =========================
   Mobile Menu
========================= */

.mobile-menu .has-submenu.active::after {
  transform: rotate(90deg);
}


/* Submenu of submenu */
#menumobile ul ul ul {
  margin-left: 15px;
  background-color: #ffffff;
}

}
@media (min-width: 768px) {
/* =========================
   Mobile Header & Hamburger
========================= */
.mobile-header {
  position: relative;
  height: 60px;
  display: flex;
    align-items: center;  /* จัดแนวตั้งให้ตรงกัน */
    /* justify-content: space-between;  */
    justify-content: flex-start;
    /* hamburger ซ้าย โลโก้กลาง */
    padding: 0 20px; /* ระยะขอบซ้ายขวา */
  
}

#hamburger {
  width: 30px;
  height: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
    z-index: 10001;
right: 260px;
}

#hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease;
}


/* Hamburger open effect */
#hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
}
#hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Logo position in mobile header */
.mobile-header #logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* =========================
   Mobile Menu
========================= */

.mobile-menu .has-submenu.active::after {
  transform: rotate(90deg);
}


/* Submenu of submenu */
#menumobile ul ul ul {
  margin-left: 15px;
  background-color: #ffffff;
}

}
@media (min-width: 375px) {
/* =========================
   Mobile Header & Hamburger
========================= */
.mobile-header {
  position: relative;
  height: 60px;
  display: flex;
    align-items: center;  /* จัดแนวตั้งให้ตรงกัน */
    /* justify-content: space-between;  */
    justify-content: flex-start;
    /* hamburger ซ้าย โลโก้กลาง */
    padding: 0 20px; /* ระยะขอบซ้ายขวา */
  
}

#hamburger {
  width: 30px;
  height: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
    z-index: 10001;
right: 260px;
}

#hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease;
}


/* Hamburger open effect */
#hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
}
#hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Logo position in mobile header */
.mobile-header #logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* =========================
   Mobile Menu
========================= */

.mobile-menu .has-submenu.active::after {
  transform: rotate(90deg);
}


/* Submenu of submenu */
#menumobile ul ul ul {
  margin-left: 15px;
  background-color: #ffffff;
}

}


@media (min-width: 414px) {
/* =========================
   Mobile Header & Hamburger
========================= */
.mobile-header {
  position: relative;
  height: 60px;
  display: flex;
    align-items: center;  /* จัดแนวตั้งให้ตรงกัน */
    /* justify-content: space-between;  */
    justify-content: flex-start;
    /* hamburger ซ้าย โลโก้กลาง */
    padding: 0 20px; /* ระยะขอบซ้ายขวา */
  
}

#hamburger {
  width: 30px;
  height: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
    z-index: 10001;
right: 260px;
}

#hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease;
}


/* Hamburger open effect */
#hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
}
#hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Logo position in mobile header */
.mobile-header #logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* =========================
   Mobile Menu
========================= */

.mobile-menu .has-submenu.active::after {
  transform: rotate(90deg);
}


/* Submenu of submenu */
#menumobile ul ul ul {
  margin-left: 15px;
  background-color: #ffffff;
}

}


@media (min-width: 480px) {
/* =========================
   Mobile Header & Hamburger
========================= */
.mobile-header {
  position: relative;
  height: 60px;
  display: flex;
    align-items: center;  /* จัดแนวตั้งให้ตรงกัน */
    /* justify-content: space-between;  */
    justify-content: flex-start;
    /* hamburger ซ้าย โลโก้กลาง */
    padding: 0 20px; /* ระยะขอบซ้ายขวา */
  
}

#hamburger {
  width: 30px;
  height: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
    z-index: 10001;
right: 260px;
}

#hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease;
}


/* Hamburger open effect */
#hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
}
#hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Logo position in mobile header */
.mobile-header #logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* =========================
   Mobile Menu
========================= */

.mobile-menu .has-submenu.active::after {
  transform: rotate(90deg);
}


/* Submenu of submenu */
#menumobile ul ul ul {
  margin-left: 15px;
  background-color: #ffffff;
}

}
@media (min-width: 320px){
/* =========================
   Mobile Header & Hamburger
========================= */
.mobile-header {
  position: relative;
  height: 60px;
  display: flex;
    align-items: center;  /* จัดแนวตั้งให้ตรงกัน */
    /* justify-content: space-between;  */
    justify-content: flex-start;
    /* hamburger ซ้าย โลโก้กลาง */
    padding: 0 20px; /* ระยะขอบซ้ายขวา */
  
}

#hamburger {
  width: 30px;
  height: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
    z-index: 10001;

}

#hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease;
}


/* Hamburger open effect */
#hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
}
#hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Logo position in mobile header */
.mobile-header #logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* =========================
   Mobile Menu
========================= */

.mobile-menu .has-submenu.active::after {
  transform: rotate(90deg);
}


/* Submenu of submenu */
#menumobile ul ul ul {
  margin-left: 15px;
  background-color: #ffffff;
}
}
/* =========================
   Mobile Header & Hamburger
========================= */
.mobile-header {
  position: relative;
  height: 60px;
  display: flex;
    align-items: center;  /* จัดแนวตั้งให้ตรงกัน */
    /* justify-content: space-between;  */
    justify-content: flex-start;
    /* hamburger ซ้าย โลโก้กลาง */
    padding: 0 20px; /* ระยะขอบซ้ายขวา */
  
}

/* #hamburger {
  width: 30px;
  height: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
    z-index: 10001;
} */

/* #hamburger {
  width: 2rem;     
  height: 1.5rem;  
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  z-index: 10001;
} */


/* #hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease;
} */


/* Hamburger open effect */
/* #hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
}
#hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
} */

/* Logo position in mobile header */
.mobile-header #logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* =========================
   Mobile Menu
========================= */

.mobile-menu .has-submenu.active::after {
  transform: rotate(90deg);
}


/* Submenu of submenu */
#menumobile ul ul ul {
  margin-left: 15px;
  background-color: #ffffff;
}

/* =========================
   Page Content Padding
========================= */
.container-product-detail {
  padding-top: 100px; /* ความสูงของ header */
}

    .header #menumobile ul li {
        width: 100%;
        height: 60px;
        text-align: center;
        font-family: 'db_helvethaica_x65_med';
        font-size: 21px;
        /* color: #fff; */
        line-height: 60px;
        list-style: none;
         color: #000; /* ตัวอักษรสีดำ */
    background: #fff; /* พื้นหลังสีขาว */
    /* border-bottom: 1px solid #ddd;  */
    /* เส้นคั่นบางๆ */

    z-index: 300;
    padding: 1rem .5rem;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}

/* Submenu arrow สำหรับ mobile เท่านั้น */
/* .mobile-menu .has-submenu::after {
  content: "›"; 
  display: inline-block; 
  float: right; 
  transition: transform 0.3s ease;
  font-size: 18px;
  font-weight: bold;
  color: #000;
} */

/* Submenu */
.submenu { display: none; padding-left: 15px; }
.submenu.open { display: block; }


.mobile-menu { width: 300px; background: #fff; border:1px solid #ccc; }
.mobile-menu ul { list-style: none; margin:0; padding:0; }
.mobile-menu li { position: relative; }
.mobile-menu li a {
  display: block;
  /* padding: 10px 15px; */
  text-decoration: none;
  color: #000;
  /* border-bottom: 1px solid #ddd; */
  position: relative;
}
.mobile-menu li.has-submenu > a::after {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.mobile-menu li.has-submenu.active > a::after {
  transform: translateY(-50%) rotate(90deg);
}
.submenu { display: none; padding-left: 15px; background:#f9f9f9; z-index: 1000; }
.submenu li a { color: #333; }
.submenu.open { display: block; }


/* ซ่อน mobile menu ตอนเริ่มต้น */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: auto;
  transform: translateX(-100%); /* เลื่อนออกไปนอกจอ */
  transition: transform 0.3s ease;
  z-index: 9999;
}

/* เมื่อกด hamburger ให้โชว์ */
.mobile-menu.show {
  transform: translateX(0);
}


/* เพิ่มใน style.css */
@media (max-width: 768px) {
    /* CSS สำหรับ tablet/mobile */
    #one:checked~.panels #one-panel,
#two:checked~.panels #two-panel,
#three:checked~.panels #three-panel {
    display: block
}

#one:checked~.tabs #one-tab,
#two:checked~.tabs #two-tab,
#three:checked~.tabs #three-tab {
    background: #96865f;
    color: white;
    /* border-top: 3px solid #000; */
}
}

@media (max-width: 480px) {
    /* CSS สำหรับ mobile เล็ก */
    #one:checked~.panels #one-panel,
#two:checked~.panels #two-panel,
#three:checked~.panels #three-panel {
    display: block
}

#one:checked~.tabs #one-tab,
#two:checked~.tabs #two-tab,
#three:checked~.tabs #three-tab {
    background: #96865f;
    color: white;
    /* border-top: 3px solid #000; */
}
}
/* CSS เฉพาะสำหรับ tabs และรายการสินค้าบนมือถือ */
@media (max-width: 768px) {
    /* tabs อยู่บรรทัดเดียวกัน */
    /* .warpper .tabs {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
     */
         .tab {
        cursor: pointer;
        padding: 10px 20px;
        margin: 0px 10px;
        background: #000;
        display: inline-block;
        color: #fff;
        border-radius: 5px;
        /* box-shadow: 0 0.5rem 0.8rem #00000080; */
        /* width: 215px; */
        text-align: center;
        font-size: 22px;
    }
    
     #one:checked~.tabs #one-tab,
#two:checked~.tabs #two-tab,
#three:checked~.tabs #three-tab {
    background: #96865f;
    color: white;
    /* border-top: 3px solid #000; */
}

.panels {
    background: #fffffff6;
    /* box-shadow: 0 2rem 2rem #00000080; */
    /* min-height: 200px; */
    width: 100%;
    /* max-width: 500px; */
    border-radius: 3px;
    overflow: hidden;
    padding: 20px;
}
    .warpper .tab {
        flex: 1 !important;
        max-width: 45% !important;
        text-align: center !important;
        margin: 5px !important;
        font-size: 14px !important;
        padding: 8px 10px !important;
    }
    
    /* รายการสินค้าเรียงลงมา */
    .panels .row {
        flex-direction: column !important;
    }
    
    .panels .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
}
/* แก้ไขความห่างระหว่างรูปใหญ่กับรูปเล็กในมุมมองมือถือ - เฉพาะหน้า GL-5 */
@media (max-width: 768px) {
    /* ลดความห่างระหว่างรูปใหญ่กับ thumbnail carousel */
    .product-main-img {
        margin-bottom: 8px !important;
    }
    
    /* ลดความห่างของ thumbnail carousel container */
    .col-md-12[style*="position: relative"] {
        margin-top: 5px !important;
        padding-top: 0 !important;
    }
    
    /* ลดความห่างของ thumbnail-carousel */
    .thumbnail-carousel {
        padding: 0 25px !important;
        margin-top: 0 !important;
    }
    
    /* ลดความห่างของ thumbnail-slide */
    .thumbnail-slide {
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ลดความห่างของ thumb-item */
    .thumb-item {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ลดความห่างของ product-thumb */
    .product-thumb {
        margin: 0 !important;
        padding: 2px !important;
    }
    
    /* ลดระยะห่างระหว่าง col-md-3 และ col-md-5 ในหน้า GL-5 */
    .row.justify-content-center.temp .col-md-3 {
        margin-bottom: 15px !important;
        padding-bottom: 0 !important;
    }
    
    .row.justify-content-center.temp .col-md-5 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* ลดความห่างของ row หลัก */
    .row.justify-content-center.temp {
        margin-top: 0.5% !important;
        margin-bottom: 10px !important;
    }
    
    /* ปรับ carousel button position */
    .carousel-btn {
        top: 40% !important;
        padding: 8px 6px !important;
    }
    
    /* ลดความห่างของ col-md-12 ภายใน col-md-3 */
    .col-md-3 .col-md-12 {
        margin-bottom: 5px !important;
        padding-bottom: 0 !important;
    }
}

/* สำหรับมือถือขนาดเล็ก */
@media (max-width: 480px) {
    .product-main-img {
        margin-bottom: 5px !important;
    }
    
    .thumbnail-carousel {
        padding: 0 20px !important;
    }
    
    .thumbnail-slide {
        gap: 5px !important;
    }
    
    .thumb-item {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .product-thumb {
        margin: 0 !important;
        padding: 1px !important;
    }
    
    /* ลดระยะห่างมากขึ้นสำหรับมือถือเล็ก */
    .row.justify-content-center.temp .col-md-3 {
        margin-bottom: 10px !important;
    }
    
    .carousel-btn {
        padding: 6px 4px !important;
        font-size: 14px !important;
    }
}

/* CSS เฉพาะสำหรับ tabs และรายการสินค้าบนมือถือ - specificity สูง */
@media (max-width: 768px) {
    /* tabs อยู่บรรทัดเดียวกัน */
    .container .row .col-md-12 .warpper .tabs {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    
    .container .row .col-md-12 .warpper .tab {
        flex: 1 !important;
        max-width: 45% !important;
        text-align: center !important;
        margin: 5px !important;
        font-size: 14px !important;
        padding: 8px 10px !important;
    }
    
    /* รายการสินค้าเรียงลงมา */
    .container .row .col-md-12 .warpper .panels .row {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .container .row .col-md-12 .warpper .panels .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        flex: none !important;
    }
    
    .container .row .col-md-12 .warpper .panels .row.justify-content-center {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* ปรับขนาดตัวหนังสือให้ใหญ่ขึ้นสำหรับหน้า promotion */
    .promotion-second h1 {
        font-size: 40px !important;
        line-height: 1.2 !important;
    }
    
    .promotion-second h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    .promotion-second p {
        font-size: 22px !important;
        line-height: 1.4 !important;
    }
}
/* CSS บังคับสำหรับมือถือ - ใช้ class เฉพาะ */
@media (max-width: 768px) {
    .mobile-product-row {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .mobile-product-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        flex: none !important;
    }
    
    /* ปรับ tabs และ panels ให้อยู่คนละแถวในมือถือ */
    .warpper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .warpper .tabs {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }
    
    .warpper .panels {
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    /* ซ่อน radio buttons สำหรับมือถือ */
    .warpper .radio {
        display: none !important;
    }
    
    /* ปรับขนาดรูปเล็ก (thumbnail) สำหรับมือถือเท่านั้น */
    .product-thumb {
        width: 500px !important;
        height: 500px !important;
    }
      .product-thumb1 {
        width: 500px !important;
        height: 500px !important;
    }
    
    /* ปรับ modal รูปฉลากให้ responsive สำหรับมือถือทุกรุ่น */
    .modal-dialog {
        max-width: 98% !important;
        width: 98% !important;
        margin: 0.5rem auto !important;
    }
    
    .modal-content {
        border-radius: 8px !important;
    }
    
    .modal-body {
        padding: 10px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    /* รูปใน modal สำหรับ img-square เท่านั้น */
    .modal-body .img-square {
        width: 500px !important;
        height: 500px !important;
        max-width: 500px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* รูปใน modal สำหรับ img-fluid เท่านั้น */
    .modal-body .img-fluid {
        width: 100% !important;
        max-width: 450px !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
    /* รูปใน modal สำหรับ img-squareฉลาก เท่านั้น */
    .modal-body .img-square1 {
        width: 350px !important;
        height: 350px !important;
        max-width: 350px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
}

/* Red Bar Footer - Booster Section */
.red-bar-footer {
    background-color: #d32f2f;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.promo-text {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.promo-text .highlight {
    color: #ffeb3b;
    font-size: 28px;
}

.products {
    display: flex;
    gap: 30px;
    align-items: center;
}

.product-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-card .label {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: bold;
}

.product-card img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain;
    margin-bottom: 5px;
}

.product-card .code {
    font-size: 12px;
    color: #ffeb3b;
    font-weight: bold;
}

/* Responsive สำหรับมือถือ */
@media (max-width: 768px) {
    .red-bar-footer {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    
    .promo-text {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .promo-text .highlight {
        font-size: 24px;
    }
    
    .products {
        gap: 20px;
    }
    
    .product-card img {
        width: 50px !important;
        height: 50px !important;
    }
    
    .product-card .label {
        font-size: 12px;
    }
    
    .product-card .code {
        font-size: 10px;
    }
}

/* Booster Button Style */
.booster-button {
    background-color: #ffeb3b;
    color: #333;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
    margin-bottom: 8px;
    pointer-events: none;
}

@media (max-width: 768px) {
    .booster-button {
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 15px;
    }
}
/* Update Booster Button Border */
.booster-button {
    border: 2px solid white !important;
}

@media (max-width: 768px) {
    .booster-button {
        border: 2px solid white !important;
    }
}
/* Promo Text Yellow with Black Border */
.promo-text {
    color: #ffeb3b !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.promo-text .highlight {
    color: #ffeb3b !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}
/* Code Button Style */
.code-button {
    background-color: #00984d;
    color: white;
    border: 2px solid white;
    border-radius: 15px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 768px) {
    .code-button {
        font-size: 10px;
        padding: 4px 8px;
        border-radius: 12px;
    }
}
/* Code Button Text Color */
.code-button {
    color: #000 !important;
}
/* 5 Section Layout */
.red-bar-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.section-1, .section-2, .section-3, .section-4, .section-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-2 img, .section-4 img {
    width: 60px !important;
    height: 110px !important;
}

.section-3 img, .section-5 img {
    width: 50px !important;
    height: 50px !important;
    margin: 5px 0 !important;
}

@media (max-width: 768px) {
    .red-bar-footer {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .section-2 img, .section-4 img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .section-3 img, .section-5 img {
        width: 35px !important;
        height: 35px !important;
    }
    .section-3, .section-5 {
    gap: 0px !important;
}
}
/* Ultra tight layout */
.red-bar-footer {
    gap: 2px !important;
    padding: 15px 10px !important;
}

.section-1, .section-2, .section-3, .section-4, .section-5 {
    margin: 0 !important;
    padding: 0 2px !important;
}

.booster-button {
    margin-bottom: 0 !important;
}

.code-button {
    margin-top: 0 !important;
}
/* Terms text styling */
.red-bar-footer {
    flex-direction: column !important;
}

.main-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px !important;
}

.terms-text {
    font-size: 15px !important;
    color: white !important;
    text-align: center !important;
    margin-top: 10px !important;
    padding: 0 10px !important;
    line-height: 1.3 !important;
}
/* Free and Booster text styling */
.section-1 .highlight, .section-1 .booster-text {
    font-size: 28px !important;
    color: #ffeb3b !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}
/* Add gap between buttons in section-3 and section-5 */
.section-3, .section-5 {
    gap: 3px !important;
}

.section-3 .booster-button, .section-5 .booster-button {
    margin-bottom: 4px !important;
}

.section-3 .code-button, .section-5 .code-button {
    margin-top: 4px !important;
}
/* Increase section-1 size */
.section-1 {
    font-size: 36px !important;
}

.section-1 .highlight {
    font-size: 40px !important;
}
/* Make section-1 even bigger */
.section-1 {
    font-size: 48px !important;
}

.section-1 .highlight {
    font-size: 56px !important;
}

/* Increase section-1 size */
.section-4 {
    font-size: 36px !important;
}

.section-4 .highlight {
    font-size: 40px !important;
}
/* Make section-1 even bigger */


.section-4 .highlight {
    font-size: 56px !important;
}
.section-4 .highlight, .section-1 .booster-text {
    font-size: 28px !important;
    color: #ffeb3b !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}
/* Add margin top to red-bar-footer */
.red-bar-footer {
    margin-top: 30px !important;
}
/* Bigger buttons in section-3 and section-5 */
.section-3 .booster-button, .section-5 .booster-button {
     padding: 10px 16px !important;
    font-size: 16px !important;
    border-radius: 20px !important;
}

.section-3 .code-button, .section-5 .code-button {
    padding: 10px 16px !important;
    font-size: 16px !important;
    border-radius: 20px !important;
}
/* Equal button sizes in section-3 and section-5 */
.section-3 .booster-button, .section-5 .booster-button {
    width: 140px !important;
    height: 40px !important;
    padding: 10px 16px !important;
    font-size: 16px !important;
    border-radius: 20px !important;
}

.section-3 .code-button, .section-5 .code-button {
    width: 140px !important;
    height: 50px !important;
    padding: 10px 16px !important;
    font-size: 16px !important;
    border-radius: 20px !important;
}
/* Center text vertically in buttons */
.section-3 .booster-button, .section-5 .booster-button,
.section-3 .code-button, .section-5 .code-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
/* Make ฟรี!! even bigger */
.section-1 .highlight {
    font-size: 72px !important;
}
/* Make ฟรี!! bold */
.section-1 .highlight {
    font-weight: bold !important;
}
/* Make Booster in section-4 bigger and bold */
.section-4 .highlight {
    font-size: 48px !important;
    font-weight: bold !important;
}