h2 , h3 {
color: #2b4d22 !important;
}
h1.ql-align-center  span {
color: #2b4d22 !important;
}
h2.ql-align-center  {
color: #2b4d22 !important;
}
p.ql-align-center {
color: #2b4d22 !important;
}
h1 > span{
color: #2b4d22 !important;
}
h2 > span{
color: #2b4d22 !important;
}
p >  span {
color: #2b4d22 !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: 57px !important;
    }
}

.appbar .v-toolbar__content {
    /* ปรับ Gradient ให้เป็นโทนเขียว #2b4d22 ไล่ไปหาเขียวเข้มจัด */
    background: linear-gradient(358deg, #2b4d22 0, #111e0e 101.32%) !important;
}
.appbar-menu .menu-item{
background-image: url("https://ik.imagekit.io/vwcfjx1db/DB_Button_BG%202.png") !important;
background-color: #cccccc;
background-position: center  !important;
background-repeat: no-repeat !important;
}

.sidebar {
    background: #2b4d22 !important;
}
.menu-list .menu-item{
background-image: url("https://ik.imagekit.io/vwcfjx1db/DB_Button_BG.png") !important;
background-color: #cccccc;
background-position: center  !important;
background-repeat: no-repeat !important;
background-size: cover !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/DB%20BG%20_1920x1080_.webp") !important;
  background-color: #cccccc;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover; 
  background-attachment: fixed !important;
  min-height: 100vh;
}
@media only screen and (max-width: 480px) {
  .page {
    background-image: none !important; 
    background-color: #2b4d22 !important; 
    background-attachment: scroll !important;
    background-size: auto !important; 
    min-height: 100vh; 
  }
}


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