.appbar-top .appbar-logo{
max-height: 80px !important;
}
@media only screen and (max-width: 420px) {
    .appbar .appbar-container .appbar-logo{
        max-height: 32px !important;
    }
}
.bottom-nav .menu-item.active .text {
    color: #ffffff !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 .appbar-container.main .appbar-bottom {
background: #660022 !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 {
 background-image: url("https://ik.imagekit.io/vwcfjx1db/BG%20_1920x1080_.jpg") !important;
  background-color: #0A0004;
   background-position: center top;
  background-repeat: no-repeat;
background-attachment: fixed !important;
}
.menu-list .menu-item{
background-image: url("https://ik.imagekit.io/vwcfjx1db/pigauto99-button.webp") !important;
background-color: #FF007F;
background-position: center  !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.appbar .appbar-container .appbar-menu .menu-item {
background-image: url("https://ik.imagekit.io/vwcfjx1db/New_Button_BG%202.png") !important;
background-color: #bf0876;
background-position: center  !important;
}
.bg { color: #c61450!important; }
.ahrefok {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* =========================================================
   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;
}

/* ===== ปุ่มสมัครสมาชิก แถบบน — ธีมทอง ===== */
.v-application .appbar-auth .btn-signup,
.v-application .appbar-auth [data-track="open_dialog_signup"] {
  background: linear-gradient(
    180deg,
    #fff2bf 0%,
    #ffe7b9 28%,
    #f8dc9d 58%,
    #ebbd67 100%
  ) !important;
  border: 1px solid #d9a63f !important;
  color: #6d1217 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  letter-spacing: normal !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(140, 95, 20, 0.25), 0 2px 6px rgba(0, 0, 0, 0.18) !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
}

.v-application .appbar-auth .btn-signup::before,
.v-application .appbar-auth [data-track="open_dialog_signup"]::before {
  opacity: 0 !important;
}

.v-application .appbar-auth .btn-signup:hover,
.v-application .appbar-auth [data-track="open_dialog_signup"]:hover {
  background: linear-gradient(
    180deg,
    #fff8d8 0%,
    #ffeec9 28%,
    #fbe6ad 58%,
    #f1c87a 100%
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 3px 10px rgba(0, 0, 0, 0.24) !important;
}

.v-application .appbar-auth .btn-signup:active,
.v-application .appbar-auth [data-track="open_dialog_signup"]:active {
  background: linear-gradient(180deg, #ebbd67 0%, #f8dc9d 100%) !important;
  box-shadow: inset 0 2px 5px rgba(90, 60, 10, 0.3) !important;
}


/* ===== ปุ่มเข้าสู่ระบบ แถบบน — แดงเข้มขอบทอง ===== */
.v-application .appbar-auth .btn-signin,
.v-application .appbar-auth [data-track="open_dialog_signin"] {
  background: linear-gradient(180deg, #6b1029 0%, #4e0a1d 100%) !important;
  border: 1px solid #d9a63f !important;
  color: #f3dca4 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  letter-spacing: normal !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
}

.v-application .appbar-auth .btn-signin::before,
.v-application .appbar-auth [data-track="open_dialog_signin"]::before {
  opacity: 0 !important;
}

.v-application .appbar-auth .btn-signin:hover,
.v-application .appbar-auth [data-track="open_dialog_signin"]:hover {
  background: linear-gradient(180deg, #7d1531 0%, #5d0d24 100%) !important;
  border-color: #f0c877 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

.v-application .appbar-auth .btn-signin:active,
.v-application .appbar-auth [data-track="open_dialog_signin"]:active {
  background: linear-gradient(180deg, #4e0a1d 0%, #6b1029 100%) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35) !important;
}