.appbar .v-toolbar__content {
    background: linear-gradient(#fff1c2, #d6a33a, #6f430b 101.32%) !important;
}
.appbar .appbar-container .appbar-logo {
    height: 100%;
    margin-bottom: auto;
    margin-top: auto;
    max-height: 80px  !important;
}
@media only screen and (max-width: 480px) {
    .appbar .appbar-container .appbar-logo {
        max-height: 40px !important;
    }
}
.appbar-menu .menu-item{
background-image: url("https://ik.imagekit.io/vwcfjx1db/New_Button_BG%202.webp?updatedAt=1783057849219") !important;
background-color: #d8aa3f;
background-position: center  !important;
background-repeat: no-repeat !important;
background-size: 140% 140% !important;
color: #543712!important;
}
.menu-list .menu-item {
  position: relative;
  background-image: url("https://ik.imagekit.io/vwcfjx1db/BG.webp") !important;
  background-color: #d8aa3f;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 140% 140% !important;
  overflow: hidden; 
}

.menu-list .menu-item a,
.menu-list .menu-item span,
.menu-list .menu-item * {
  color: #543712 !important;
}
.div-card img {
    border-radius: 8px;
    height: 300px !important;
    width: 508px !important;
}
.swiper-slide {
    width: 500px !important;
}
@media only screen and (max-width: 480px) {
    .div-card img {
          height: 170px !important;
    }    
.swiper-slide {
    width: 300px !important;
 }
}
.page { 
  position: relative;
  background-image: url("https://ik.imagekit.io/zbssankxa/BG%20_1920x1080_.webp") !important;
  background-color: #f7e8bd;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed !important;
  min-height: 100vh;
  z-index: 1;
}
.page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(58, 36, 8, 0.42); 
  z-index: -1; 
}
.page {
  isolation: isolate;
}

.bg {
    color: #3a2408 !important;
}


/* =========================================================
   BANNER MARQUEE - FULL IMAGE / NO CROP / RESPONSIVE
   พร้อมวางใช้งาน
   ========================================================= */

/* ---------- RESET ---------- */
.banner-section,
.banner-marquee,
.banner-marquee__track,
.banner-marquee__item,
.banner-marquee__item a,
.img-banner {
    box-sizing: border-box !important;
}

/* =========================================================
   SECTION
   ========================================================= */
.banner-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* =========================================================
   MARQUEE WRAPPER
   ========================================================= */
.banner-marquee {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

/* =========================================================
   TRACK
   ========================================================= */
.banner-marquee__track {
    display: flex !important;
    flex-wrap: nowrap !important;

    align-items: flex-start !important;

    width: max-content !important;
    min-width: 100% !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    will-change: transform !important;
}

/* =========================================================
   BANNER ITEM
   Desktop
   ประมาณ 4 ภาพต่อพื้นที่ Content
   ========================================================= */
.banner-marquee__item {
    position: relative !important;

    flex: 0 0 auto !important;

    /* ปรับขนาด Banner Desktop ตรงนี้ */
    width: clamp(
        280px,
        calc((100vw - 240px - 50px) / 4),
        430px
    ) !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: transparent !important;
}

/* =========================================================
   LINK
   ========================================================= */
.banner-marquee__item > a {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 0 !important;

    overflow: visible !important;
}

/* =========================================================
   IMAGE
   สำคัญ: ไม่ตัดรูป
   ========================================================= */
.banner-marquee__item .img-banner,
.img-banner {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

    /* ไม่ Crop รูป */
    object-fit: contain !important;
    object-position: center center !important;

    /* ห้ามระบบอื่นยืดรูป */
    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

/* =========================================================
   Desktop ใหญ่
   1440px+
   ========================================================= */
@media screen and (min-width: 1440px) {

    .banner-marquee__track {
        gap: 10px !important;
    }

    .banner-marquee__item {
        width: clamp(
            300px,
            calc((100vw - 240px - 50px) / 4),
            450px
        ) !important;
    }
}


/* =========================================================
   Notebook / Desktop เล็ก
   ========================================================= */
@media screen and (max-width: 1366px) {

    .banner-marquee__item {
        width: clamp(
            260px,
            calc((100vw - 220px - 40px) / 3.5),
            370px
        ) !important;
    }
}


/* =========================================================
   Tablet Landscape
   ========================================================= */
@media screen and (max-width: 1024px) {

    .banner-marquee__track {
        gap: 8px !important;
    }

    .banner-marquee__item {
        width: 34vw !important;
    }

    .banner-marquee__item .img-banner,
    .img-banner {
        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
    }
}


/* =========================================================
   Tablet
   ========================================================= */
@media screen and (max-width: 768px) {

    .banner-section {
        width: 100% !important;
        overflow: hidden !important;
    }

    .banner-marquee {
        width: 100% !important;
    }

    .banner-marquee__track {
        gap: 7px !important;
    }

    /* เห็นประมาณ 2 ภาพนิดๆ */
    .banner-marquee__item {
        width: 48vw !important;
    }

    .banner-marquee__item > a {
        width: 100% !important;
        height: auto !important;
    }

    .banner-marquee__item .img-banner,
    .img-banner {
        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
        object-position: center !important;
    }
}


/* =========================================================
   Mobile
   ========================================================= */
@media screen and (max-width: 576px) {

    .banner-section {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    .banner-marquee {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .banner-marquee__track {
        gap: 6px !important;

        align-items: flex-start !important;
    }

    /* เห็น Banner หลักเกือบเต็มจอ
       และเห็นภาพถัดไปนิดหนึ่ง */
    .banner-marquee__item {
        width: 88vw !important;

        flex: 0 0 88vw !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .banner-marquee__item > a {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .banner-marquee__item .img-banner,
    .img-banner {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: center center !important;

        aspect-ratio: auto !important;
    }
}


/* =========================================================
   Mobile จอเล็ก
   ========================================================= */
@media screen and (max-width: 390px) {

    .banner-marquee__track {
        gap: 5px !important;
    }

    .banner-marquee__item {
        width: 92vw !important;
        flex-basis: 92vw !important;
    }
}


/* =========================================================
   ป้องกัน CSS จากระบบเดิมมาตัดรูป
   ========================================================= */
.banner-section img,
.banner-marquee img,
.banner-marquee__item img {
    height: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    clip-path: none !important;

    transform-origin: center !important;
}


/* =========================================================
   ป้องกัน Container บังคับความกว้าง Banner
   ========================================================= */
.banner-section > .banner-marquee {
    width: 100% !important;
    max-width: none !important;
}


/* ===== WePlay VVIP — สมัครสมาชิก: น้ำตาลเข้ม ตัวอักษรทอง (เด่นสุดบนแถบทอง) ===== */
.v-application .appbar .appbar-container .appbar-auth [data-track="open_dialog_signup"].v-btn {
  background: linear-gradient(180deg, #5a3a10 0%, #3a2408 55%, #241503 100%) !important;
  border: 1px solid #f3d27a !important;
  border-radius: 8px !important;
  color: #ffe7a3 !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 231, 163, 0.35),
    0 2px 6px rgba(58, 36, 8, 0.45) !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
}
.v-application .appbar .appbar-container .appbar-auth [data-track="open_dialog_signup"].v-btn:hover {
  background: linear-gradient(180deg, #6e4815 0%, #4a2f0b 55%, #2e1b05 100%) !important;
  color: #fff3cc !important;
  box-shadow: inset 0 1px 0 rgba(255, 231, 163, 0.45),
    0 3px 10px rgba(58, 36, 8, 0.6) !important;
}
.v-application .appbar .appbar-container .appbar-auth [data-track="open_dialog_signup"].v-btn:active {
  background: linear-gradient(180deg, #241503 0%, #3a2408 100%) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45) !important;
}

/* ===== เข้าสู่ระบบ: ครีมแบบเดียวกับปุ่มเมนู ตัวอักษรน้ำตาล ===== */
.v-application .appbar .appbar-container .appbar-auth [data-track="open_dialog_signin"].v-btn {
  background: linear-gradient(180deg, #fffaf0 0%, #f6e7c3 100%) !important;
  border: 1px solid #b8861f !important;
  border-radius: 8px !important;
  color: #543712 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(58, 36, 8, 0.25) !important;
  transition: background 0.18s ease !important;
}
.v-application .appbar .appbar-container .appbar-auth [data-track="open_dialog_signin"].v-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #fbefd2 100%) !important;
}
.v-application .appbar .appbar-container .appbar-auth [data-track="open_dialog_signin"].v-btn:active {
  background: #efdcae !important;
}

/* ===== ใช้ร่วมกัน ===== */
.v-application .appbar .appbar-container .appbar-auth [data-track^="open_dialog_sign"].v-btn::before {
  opacity: 0 !important;
}
.v-application .appbar .appbar-container .appbar-auth [data-track^="open_dialog_sign"].v-btn:focus-visible {
  outline: 2px solid #3a2408 !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  .v-application .appbar .appbar-container .appbar-auth [data-track^="open_dialog_sign"].v-btn {
    transition: none !important;
  }
}