/*
Custom Css
*/
.detail-short {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

.btn-detail-more:hover {
    text-decoration: underline;
}

#promotionDetailModal .modal-content {
    border-radius: 15px;
}

#promotionDetailModal .modal-header {
    padding: 1.5rem;
}

#promotionDetailModal .modal-body {
    padding: 0 1.5rem 1.5rem;
}

.close{
    background: #000;
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 6px 15px;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: background 0.2s ease;
}
.glassmorphism-navbar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1030;
    padding-bottom: 0px;
    padding-top: 0px;
    background: #1e1e1e;
    /* backdrop-filter: blur(20px); */
    /* transition: all 0.3s ease; */
    /* background: linear-gradient(to right, rgb(28 28 28 / 67%), #000000a6, rgb(28 28 28 / 59%)); */
}

.membership-card {
    width: 50%;
    max-width: 400px;
    aspect-ratio: 1.586;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* เพิ่มส่วนนี้ */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.membership-card .pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.membership-card > *:not(.pattern) {
    position: relative;
    z-index: 2;
}
.membership-card:hover {
    transform: translateY(-5px) rotateX(5deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background-color: unset;
    border-bottom: none;
}

.logo1 {
    width: 50px;
    height: 50px;
    /* background: linear-gradient(45deg, #333, #666); */
    /* border-radius: 50%; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
}
/* 
.card-type {
    background: linear-gradient(45deg, #FFD700, #FFA500);
    color: #333;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
} */
.card-type {
    color: #333;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Standard */
.card-type.standard {
    background: #ffffff; /* silver-gray */
}

/* Silver */
.card-type.silver {
    background: linear-gradient(45deg, #C0C0C0, #A9A9A9);
}

/* Gold */
.card-type.gold {
    background: linear-gradient(45deg, #FFD700, #FFA500);
}

/* Platinum */
.card-type.platinum {
    background: linear-gradient(45deg, #E5E4E2, #C0C0C0);
}

/* ELITE */
.card-type.elite {
    background: linear-gradient(45deg, #000000, #434343);
    color: #fff;
}
.member-name {
    font-size: 12px;
    font-weight: bold;
    color: rgb(0, 0, 0);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.member-id {
    font-size: 14px;
    color: #000000;
    margin-bottom: 15px;
    font-family: 'Prompt', monospace;
    letter-spacing: 1px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: auto;
    background-color: unset;
    border-bottom: none;
    padding-left: 0px;
    padding-right: 0px;

}

.expiry-date {
    font-size: 12px;
    color: #666;
}

.valid-thru {
    font-size: 10px;
    color: #000000;
    margin-bottom: 2px;
}

.date {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    font-family: 'Prompt', monospace;
}

.chip {
    width: 35px;
    height: 28px;
    background: linear-gradient(45deg, #DAA520, #FFD700);
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;
}

.chip::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: linear-gradient(135deg, #B8860B, #DAA520);
    border-radius: 2px;
}

.pattern {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 70%, transparent 100%);
    border-radius: 50%;
}

.barcode {
    width: 80px;
    height: 20px;
    background: repeating-linear-gradient(90deg, #ffffff 0px, #333 2px, transparent 2px, #d8cfcf00 4px);
    border-radius: 2px;
    opacity: 0.8;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .membership-card {
        width: 90%;
        min-height: 200px;
        padding: 15px;
    }

    .member-name {
        font-size: 20px;
        letter-spacing: 1px;
    }

    .member-id {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .membership-card {
        width: 100%;
        min-height: 180px;
        padding: 12px;
    }

    .member-name {
        font-size: 18px;
    }

    .member-id {
        font-size: 12px;
    }

    .card-type {
        font-size: 10px;
        padding: 4px 8px;
    }
}


.progress-container {
    /* width: 500px; */
    position: relative;
    padding: 0 30px;
    /* เว้นระยะซ้าย-ขวาให้ progress เริ่มก่อนวงกลมแรก */
}

/* เส้นเทา (พื้นหลัง) */
.progress-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    transform: translateY(-50%);
}

/* เส้นเหลือง (progress) */
.progress-bar {
    position: absolute;
    top: 50%;
    left: 0;
    height: 20px;
    background: #ffff56bf;
    border-radius: 10px;
    transform: translateY(-50%);
    width: 0;
    transition: width 0.4s ease;
}

/* วงกลม */
.steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #545454;
    border: 2px solid #636464;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    transition: background 0.3s, border-color 0.3s;
}

.step.done {
    background: yellow;
    /* border-color: #000; */
    color: black;
}

.step.done::before {
    content: "✔";
    font-size: 20px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
    background: #1818156e;
    color: #FFF;
}

.container-tab {
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 50px 40px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0px 4px 16px rgb(0 0 0 / 10%), 0px 8px 12px rgb(16 14 14 / 10%), 0px 16px 56px rgba(254, 205, 211, 0.1);
}

.container-tab .topic {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
}

/* .content-tab input {
    display: none;
} */
.hidden-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.content-tab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Desktop Layout */
.content-tab .list {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 25%;
    margin-right: 50px;
    border-right: groove;
}

.content-tab .list label {
    cursor: pointer;
    height: 60px;
    line-height: 60px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
    padding-left: 25px;
    transition: all 0.5s ease;
    z-index: 10;
    position: relative;
}

.content-tab .slider {
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
    width: 100%;
    border-radius: 12px;
    transition: all 0.5s ease;
    background: #FFFF7C;
    z-index: 1;
}
/* ================== Tabs Colors ================== */
#home:checked~.list label.home,
#blog:checked~.list label.blog,
#help:checked~.list label.help,
#history:checked~.list label.history,
#code:checked~.list label.code,
#about:checked~.list label.about {
    color: #22272C;
}

/* ================== Desktop slider positions ================== */
#home:checked~.list .slider { top: 0; }
#blog:checked~.list .slider { top: 60px; }
#help:checked~.list .slider { top: 120px; }
#history:checked~.list .slider { top: 180px; }
#code:checked~.list .slider { top: 240px; }
#about:checked~.list .slider { top: 300px; }

/* ================== Text Content ================== */
.content-tab .text-content-tab { width: 80%; color: rgba(0, 0, 0, 0.7); }
.content-tab .text { display: none; }
.content-tab .text .title { color: black; font-size: 25px; margin-bottom: 10px; font-weight: 500; }
.container-tab .text p { text-align: justify; line-height: 1.6; color: black; }
.content-tab .text-content-tab .home { display: block; }

/* Show selected tab */
#home:checked~.text-content-tab .home,
#blog:checked~.text-content-tab .blog,
#help:checked~.text-content-tab .help,
#history:checked~.text-content-tab .history,
#code:checked~.text-content-tab .code,
#about:checked~.text-content-tab .about {
    display: block;
}

/* Hide home when other tabs are selected */
#blog:checked~.text-content-tab .home,
#help:checked~.text-content-tab .home,
#history:checked~.text-content-tab .home,
#code:checked~.text-content-tab .home,
#about:checked~.text-content-tab .home {
    display: none;
}

/* Hover color */
.content-tab .list label:hover { color: #000000; }

/* ================== Responsive: Tablet & Mobile ================== */
@media screen and (max-width: 768px) {
    .container-tab { padding: 20px 15px; }
    .container-tab .topic { font-size: 12px; margin-bottom: 20px; }
    .content-tab { flex-direction: column; }
    .content-tab .list {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
        flex-direction: column;
        border-radius: 12px;
        padding: 10px;
        border-right: none;
    }
    .content-tab .list label {
        position: relative;
        height: 50px;
        line-height: 50px;
        font-size: 16px !important;
        font-weight: 500;
        padding: 0 20px;
        margin-bottom: 8px;
        text-align: left;
        border-radius: 8px;
        display: flex;
        align-items: center;
        width: 100%;
        background: transparent;
        transition: all 0.3s ease;
    }
    .content-tab .list label:last-of-type { margin-bottom: 0; }
    .content-tab .slider {
        height: 50px;
        border-radius: 8px;
        transition: all 0.4s ease;
        width: calc(100% - 20px);
        left: 10px;
    }

    /* Mobile slider positions */
    #home:checked~.list .slider { top: 10px; }
    #blog:checked~.list .slider { top: calc(10px + 58px); }
    #help:checked~.list .slider { top: calc(10px + 116px); }
    #history:checked~.list .slider { top: calc(10px + 174px); }
    #code:checked~.list .slider { top: calc(10px + 232px); }
    #about:checked~.list .slider { top: calc(10px + 290px); }

    .content-tab .text-content-tab { width: 100%; }
    .content-tab .text .title { font-size: 22px !important; }
    .container-tab .text p { font-size: 15px; }
}

/* ================== Small Mobile <= 480px ================== */
@media screen and (max-width: 480px) {
    .vv { text-align: center !important; }
    .container-tab { padding: 15px 10px; }
    .container-tab .topic { font-size: 20px; }
    .content-tab .list { padding: 8px; }
    .content-tab .list label {
        font-size: 14px;
        height: 45px;
        line-height: 45px;
        padding: 0 15px;
        margin-bottom: 6px;
    }
    .content-tab .slider {
        height: 45px;
        width: calc(100% - 16px);
        left: 8px;
    }

    /* Small mobile slider positions */
    #home:checked~.list .slider { top: 8px; }
    #blog:checked~.list .slider { top: calc(8px + 51px); }
    #help:checked~.list .slider { top: calc(8px + 102px); }
    #history:checked~.list .slider { top: calc(8px + 153px); }
    #code:checked~.list .slider { top: calc(8px + 204px); }
    #about:checked~.list .slider { top: calc(8px + 255px); }

    .content-tab .text  { font-size: 12px; }
    .container-tab .text p { font-size: 14px; }
}

/* ================== Extra Small <= 360px ================== */
@media screen and (max-width: 360px) {
    .content-tab .list label {
        font-size: 13px;
        height: 42px;
        line-height: 42px;
        padding: 0 12px;
        margin-bottom: 5px;
    }
    .content-tab .slider { height: 42px; }

    /* Extra small slider positions */
    #home:checked~.list .slider { top: 8px; }
    #blog:checked~.list .slider { top: calc(8px + 47px); }
    #help:checked~.list .slider { top: calc(8px + 94px); }
    #history:checked~.list .slider { top: calc(8px + 141px); }
    #code:checked~.list .slider { top: calc(8px + 188px); }
    #about:checked~.list .slider { top: calc(8px + 235px); }
}




#template-mo-zay-hero-carousel {
    width: 100%;
    overflow: hidden;
}

.carousel-img-wrapper {
    width: 100%;
    position: relative;
    padding-bottom: 32.25%; /* 600/1920 = 31.25% */
    overflow: hidden;
    background-color: #ffffff;
}

.carousel-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: initial;
    object-position: center;
}

@media (max-width: 992px) {
    .carousel-img-wrapper {
        padding-bottom: 30%;
    }
}


@media (max-width: 768px) {
    .carousel-img-wrapper {
        /* padding-bottom: 100%; */
        /* height: 100px; */
    }
}

@media (max-width: 576px) {
    .carousel-img-wrapper {
        padding-bottom: 50.25%;
    }
}

/* coupon */

.custom {
  background-color: #f3f7fe;
  color: #3b82f6;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  width: 100px;
  height: 45px;
  transition: 0.3s;
}

.custom:hover {
  background-color: #3b82f6;
  box-shadow: 0 0 0 5px #3b83f65f;
  color: #fff;
}

/* ปุ่มแก้ไข */
.edit-btn {
  background-color: #f3f7fe;
  color: #1d4ed8;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  width: 110px;
  height: 45px;
  transition: 0.3s;
}
.edit-btn:hover {
  background-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 0 0 5px #1d4ed85a;
}

/* ปุ่มบันทึก */
.save-btn {
  background-color: #e8f7ed;
  color: #15803d;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  width: 110px;
  height: 45px;
  transition: 0.3s;
}
.save-btn:hover {
  background-color: #15803d;
  color: #fff;
  box-shadow: 0 0 0 5px #15803d5a;
}

/* ปุ่มยกเลิก */
.cancel-btn {
  background-color: #fde7e7;
  color: #b91c1c;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  width: 110px;
  height: 45px;
  transition: 0.3s;
}
.cancel-btn:hover {
  background-color: #b91c1c;
  color: #fff;
  box-shadow: 0 0 0 5px #b91c1c5a;
}

/* ปุ่ม Login */
.login-btn {
  background-color: #f2e8ff;
  color: #6b21a8;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  width: 110px;
  height: 45px;
  transition: 0.3s;
}
.login-btn:hover {
  background-color: #6b21a8;
  color: #fff;
  box-shadow: 0 0 0 5px #6b21a85a;
}

@media screen and (max-width: 767px) {
    div.dt-container div.dt-layout-row:not(.dt-layout-table) {
        display: flex  !important;
    }
    div.dt-container .dt-search input{
        width: 140px !important;
    }
}