.species-hero {
    position: relative;
    background: 
      linear-gradient(90deg, rgb(0 14 6 / 72%) 0%, rgba(20, 32, 25, .45) 100%, rgba(20, 32, 25, .18) 100%, rgba(20, 32, 25, .10) 100%), 
      url(../images/greenfencethai/asset/ต้นมะฮอกกานี/bg-ต้นมะฮอกกานี.webp);

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.bg-text-hero {
    position: relative;
    /* left: 40px; */
    /* bottom: 40px; */
 /*    top: 80px;
    z-index: 3;
    width: min(900px, calc(100% - 80px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); */
    background: rgba(255, 255, 255, .7);
    background: rgba(230, 255, 231, .5);
    
    border-radius: 18px;
/*     overflow: hidden; */
    /* box-shadow: 0 14px 36px rgba(0, 0, 0, .08); */
    backdrop-filter: blur(10px);
    padding:20px;
    margin-top: 50px;
}

.species-hero-grid {
    padding-left: 20px;
    padding-right: 20px;
}

 
#spacing{
  scroll-margin-top:150px;
}
 

.definition-box {
  max-width: 900px;
  margin: auto;
}
.note-box{
  text-align: center;
  max-width: 900px;
  margin: auto;
}
.tip-box{
  text-align: center;
  max-width: 900px;
  margin: auto;
}
.quick-answer-box{
  text-align: center;
  max-width: 900px;
  margin: auto;
}

.feature-grid-3col{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
 



.species-hero-content h1{
  color:#ffffff;
  text-shadow: 0 3px 18px rgb(0 0 0 / 100%);
}
.species-hero-content p {
    background-color: #092a1f;
    padding: 30px;
    border-radius: 10px;
    color: #ffffff;
}
.breadcrumb a {
  color:#ffffff;
}
.current-page {
  color:#ffffff;
}
.species-breadcrumb span:last-child {
  color:#ffffff;  
}



/* overrides */
.detail-card .padding{
    padding: 34px;
    padding-top: 10px;
}


/* ==========================================
   ขนาดไทรเกาหลีในกระถาง
   Auto-fit Responsive
========================================== */
.size-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.species-size .size-grid{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 360px), 1fr)
        );
    gap:28px;
    align-items:stretch;
}


/* การ์ด */

.species-size .size-card{
    display:flex;
    flex-direction:column;
    height:100%;

    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.species-size .size-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow);
    border-color:#d7ecd8;
}


/* รูปภาพ */

.species-size .size-card img{
    width:100%;
    aspect-ratio:4 / 5;

    object-fit:cover;
    object-position:center;

    background:#f3f5f4;
}


/* เนื้อหาในการ์ด */

.species-size .size-card .body{
    display:flex;
    flex-direction:column;
    flex:1;

    padding:28px;
}

.species-size .size-card h3{
    margin:0 0 14px;
    color:var(--primary);
}

.species-size .size-card p{
    margin:0 0 16px;
}

.species-size .size-card strong{
    display:block;

    margin:4px 0 20px;
    padding:14px 16px;

    border-radius:14px;
    background:var(--primary-light);
    color:var(--primary-dark);

    line-height:1.7;
}


/* ดันลิงก์ไว้ล่างสุดของการ์ด */

.species-size .size-card a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:auto;

    color:var(--primary);
    font-weight:700;
}

.species-size .size-card a:hover{
    color:var(--primary-dark);
}


/* ตาราง */

.species-size .table-wrapper{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}


/* CTA */

.species-size .cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.species-size .cta > div{
    flex:1;
}

.species-size .cta .btn{
    flex:none;
}


/* ==========================================
   Tablet
========================================== */

@media(max-width:991px){

    .species-size .size-grid{
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(min(100%, 300px), 1fr)
            );

        gap:22px;
    }

    .species-size .cta{
        align-items:flex-start;
        flex-direction:column;
    }

}


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

@media(max-width:640px){

    .species-size .size-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .species-size .size-card{
        border-radius:20px;
    }

    .species-size .size-card img{
        aspect-ratio:1 / 1;
    }

    .species-size .size-card .body{
        padding:22px;
    }

    .species-size .cta{
        padding:22px;
    }

    .species-size .cta .btn{
        width:100%;
    }

}

/* overrides */
.answer-box {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--shadow);
    max-width: none;
    margin: auto;
}