@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f7f4ef;
  --surface:#ffffff;
  --text:#18352d;
  --muted:#60706b;
  --green:#21493b;
  --green-dark:#18362d;
  --gold:#b19863;
  --line:#d7ddd7;
  --shadow:0 18px 50px rgba(20, 39, 33, .12);
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
  --container:1440px;
  
  --brand:#3f6b4f;
  --brand-dark:#2a4d38;

      --soft: #eef5ec;
    --accent: #d8a95f;
/*     --shadow: 0 16px 42px rgba(32, 49, 38, .10); */
    --radius: 24px;
    --radius-sm: 18px;
    --max: 1120px;

}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg,#eef4f4 0%, #ffffff 12%, #f7f4ef 100%);
    
}
html{

    scroll-behavior:smooth;

}

a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{
  width:min(var(--container),calc(100% - 48px));
  margin:0 auto;
}


.padding-top{
  padding-top: 20px;
}
.padding-top-50{
  padding-top: 50px;
}
/****************/
/*    line oa   */
/****************/
.line-popup-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:9999;
}

.line-popup-overlay.active{

    opacity:1;
    visibility:visible;
}

.line-popup{

    position:relative;

    width:min(480px, calc(100% - 32px));

    padding:40px;

    background:#fff;

    border-radius:28px;

    text-align:center;

    box-shadow:
        0 25px 60px rgba(0,0,0,.18);
}

.line-popup h3{

    margin:0 0 14px;

    color:#17392d;

    font-size:28px;
}

.line-popup p{

    margin:0 0 24px;

    color:#66756f;

    line-height:1.8;
}

.line-popup-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:16px 28px;

    border-radius:14px;

    background:#06c755;

    color:#fff;

    font-weight:700;
}

.line-popup-btn:hover{

    background:#04b04b;
}

.line-popup-close{

    position:absolute;

    top:14px;
    right:14px;

    width:40px;
    height:40px;

    border:none;

    border-radius:50%;

    background:#f3f5f4;

    cursor:pointer;

    font-size:24px;
}


/**/
.margin-top-10px{
  margin-top: 10px;
}

.text-center {
    text-align: center;
}




/****************************************************************/

/* Logo */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:58px;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text strong{

    font-size:1.2rem;

    color:var(--primary);

}

.logo-text span{

    color:#666;

    font-size:.85rem;

}



/* Left */

.hero-content{
    position:relative;
    z-index:2;
    padding-top: 70px;
    padding-bottom: 70px;
    

}


.hero-label{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    margin-bottom:18px;

    letter-spacing:.5px;

}

.hero h1{

    font-size:clamp(2.5rem,5vw,4.5rem);

    line-height:1.08;

    font-weight:800;

    margin-bottom:22px;

}

.hero h1 span{

    display:block;

    color:var(--primary);

    margin-top:8px;

}

.hero p{

    color:#555;

    font-size:1.1rem;

    max-width:560px;

    margin-bottom:42px;

}


/* Feature */

.hero-features{

    display:flex;

    gap:28px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:14px;

}

.feature-icon{

    width:54px;

    height:54px;

/*     border-radius:50%;

    background:#eef8f1; */

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.feature-item strong{

    display:block;

    font-size:.98rem;

}

.feature-item span{

    font-size:.84rem;

    color:#666;

}

.hero-buttons{

    display:flex;

    gap:18px;

}




.btn-primary{

    background:#166534;

    color:#fff;

}

.btn-primary:hover{

    background:#14532d;

    transform:translateY(-2px);

}

.btn-outline{

    border:1px solid #166534;
    color:#166534;

   background:#fff; 

}

.btn-outline:hover{

    background:#d3e4d9;

    color:#1d2b22;

}




/*==============================
RIGHT
==============================*/
 /* 
.hero-image{
    position:relative;
}
.hero-image{
    position:relative;
    height:100%;
    overflow:hidden;
    display:flex;
    align-items:stretch;
}
.hero-shape{

    position:absolute;

    left:-260px;

    top:-8%;

    width:420px;

    height:118%;

    z-index:3;

    border-radius:50%;

    background:#fff;

}
@media (max-width:1100px){
    .hero-shape{
        display:none;
    }
}
 
 */



/******************************************************/


/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(23,54,45,.06);
}
.header-inner{
  height:108px;
  display:flex;
  align-items:center;
  gap:28px;
}
.brand{
 

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    color: #1f4137;
}


.brand-logo{
  height:50px;
  width:auto;
}

.nav-toggle{display:none}

.nav{
  flex:1;
  display:flex;
  justify-content:center;
  gap:30px;
  font-size:16px;
  color:#20342f;
  white-space:nowrap;
}
.nav a:hover{color:var(--green)}

.header-actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex:none;
}
.phone{
  display:flex;
  align-items:center;
  gap:8px;
  color:#1f3f35;
  font-weight:600;
  font-size:16px;
}
.phone-icon{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  color:var(--green);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:0 20px;
  border-radius:14px;
  font-weight:700;
  font-size:16px;
  transition:.2s ease;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn-dark-hero{
  background:var(--green-dark);
  color:#fff;
}
.btn-dark-hero:hover{background:#1b4035}
.btn-outline-hero{
  background:#fff;
  border-color:#9ca9a3;
  color:#214b3d;
}
.btn-outline-hero:hover{border-color:#74837e}
.btn-line{
  background:var(--green);
  color:#fff;
  min-width:250px;
}
.line-dot{
  width:28px;
  height:28px;
  border-radius:999px;
  background:#fff;
  color:#1d3f33;
  display:inline-grid;
  place-items:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
}
.btn-ico{font-size:18px;line-height:1}

/* Mobile burger */
.nav-burger{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(23,54,45,.14);
  border-radius:12px;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex-direction:column;
  cursor:pointer;
}
.nav-burger span{
  width:18px;
  height:2px;
  background:var(--green);
  border-radius:999px;
}

/* Hero */
.hero{
  position:relative;
  min-height:820px;
  background:
    linear-gradient(
      90deg,
      rgba(247,244,239,.96) 0%,
      rgba(247,244,239,.84) 24%,
      rgba(247,244,239,.28) 46%,
      rgba(247,244,239,0) 64%
    ),
    url("../images/greenfencethai/asset/background-hero.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  left:-12%;
  top:80px;
  width:520px;
  height:520px;
  background:radial-gradient(circle, rgba(255,255,255,.82) 0%, rgba(255,255,255,.2) 34%, rgba(255,255,255,0) 70%);
  filter:blur(10px);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  min-height:820px;
}
.hero-copy{
  position:relative;
  z-index:2;
  width:min(640px,100%);
  padding:110px 0 0 40px;
}
.hero-copy h1{
  margin:0 0 18px;
  font-size:clamp(54px,5.1vw,54px);
  line-height:1.20;
  letter-spacing:-.045em;
  font-weight:800;
  color:#24463d;
}
.hero-copy h1 span{
  color:var(--gold);
}
.hero-copy p{
  margin:0 0 28px;
  max-width:640px;
  font-size:19px;
  line-height:1.8;
  color:#586862;
}
.brand-tagline{
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.30em;
  color: #5b6a63;
  white-space: nowrap;
}
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.hero-actions .btn{
  min-width:224px;
}

/* Feature strip */
.feature-strip{
  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);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(0,0,0,.08);
  backdrop-filter:blur(10px);
}
.feature-item{
  min-height:128px;
  padding:20px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-right:1px solid rgba(33,75,61,.10);
}
.feature-item:last-child{
  border-right:none;
}
.feature-icon{
 /* width:34px;*/
  height:34px; 
  flex:none;
  color:#1f3f35;
}
.feature-text{
  min-width:0;
}
.feature-text b{
  display:block;
  font-size:15px;
  line-height:1.25;
  font-weight:800;
  color:#20342f;
  margin:0 0 6px;
}
.feature-text span{
  display:block;
  font-size:13px;
  line-height:1.55;
  color:#6c7470;
}

/* Popular */
/* .popular{
  padding:26px 0 0;
}
.popular-inner{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  align-items:start;
}
.popular-side{
  padding-top:42px;
}
.popular-side h2{
  margin:0 0 16px;
  font-size:28px;
  line-height:1.1;
  letter-spacing:-.03em;
  color:#20342f;
}
.popular-side a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:#203c34;
}
.popular-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.tree-card{
  position:relative;
  min-height:226px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 26px rgba(16, 32, 26, .12);
  background:#44614d;
}
.tree-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.tree-mask{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.72) 100%);
}
.tree-info{
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
  color:#fff;
}
.tree-info h3{
  margin:0 0 4px;
  font-size:18px;
  line-height:1.2;
  font-weight:700;
}
.tree-info span{
  font-size:13px;
  opacity:.92;
}

 */
  
 

/* Responsive */
@media (max-width: 1200px){
  .nav{display:none}
  .nav-burger{display:flex}
  .hero{
    min-height:auto;
    padding-bottom:24px;
  }
  .hero-inner{
    min-height:auto;
    padding-bottom:0;
  }
  .hero-copy{
    padding:84px 0 20px;
    max-width:none;
  }
  .feature-strip{
    position:static;
    width:100%;
    margin:24px 0 0;
  }
  .popular-inner{
    grid-template-columns:1fr;
  }
  .popular-side{
    padding-top:0;
  }
  .popular-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .feature-strip,
  .band-inner{
    grid-template-columns:repeat(2,1fr);
  }
  .feature-item:nth-child(2),
  .feature-item:nth-child(4),
  .band-item:nth-child(2),
  .band-item:nth-child(4){
    border-right:none;
  }
}

@media (max-width: 1024px){
  .header-inner{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
  }

 .feature-strip{
    grid-template-columns:repeat(2,1fr);
  }
  

  .nav-burger{
    position: absolute;
    top: 14px;
    right: 0;
    margin: 0;
    display: flex;
    z-index: 20;
  }

  .header-actions{
    width: 100%;
    order: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
  }
 
  .nav{
   display: none;
    position: absolute;
    top: 70px;
    right: 0;
    z-index: 19;

    width: min(380px, calc(100vw - 24px));
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(23,54,45,.08);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(0,0,0,.10);

    padding: 14px 16px;
    flex-direction: column;
    gap: 12px; 

    
  }

/*   .nav{
      display:none;

      position:absolute;

      top:100%;
      margin-top:30px;

      right:0;

      width:min(420px, calc(100vw - 24px));

      max-height:80vh;
        overflow-y:auto;   
       scroll-behavior:auto; 
      overflow-x:hidden;

      background:rgba(255,255,255,.98);

      border:1px solid rgba(23,54,45,.08);
      border-radius:24px;

      box-shadow:0 14px 36px rgba(0,0,0,.10);

      padding:20px;

      flex-direction:column;
      gap:12px;


  }
 */
  .nav-toggle:checked ~ .nav{
    display: flex;
  }

/*   .brand-tagline{
    font-size: 8px;
    letter-spacing: 0.22em;
  } */
}


/* ===========================
   Mobile
=========================== */
@media (max-width:576px){
.feature-strip{
    grid-template-columns:repeat(2,1fr);
  }
  
}
/* ===========================
   Small Mobile
=========================== */
@media (max-width:420px){
.feature-strip{
    grid-template-columns:repeat(1,1fr);
  }
}

 
/*******************/
/*   พันธุ์ไม้ /trees  */
/*******************/



   
 
    .section,
    .cta,
    .note{
      background:rgba(255,255,255,.84);
      backdrop-filter:blur(10px);
      border:1px solid rgba(217,226,216,.9);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .hero-tree{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:22px;
      padding:30px;
      align-items:stretch;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 14px;
      border-radius:999px;
      background:var(--soft);
      color:var(--brand-dark);
      font-weight:700;
      font-size:.94rem;
      margin-bottom:16px;
    }
    .title{
      margin:0 0 12px;
      font-size:clamp(2rem, 4vw, 3.4rem);
      line-height:1.12;
      letter-spacing:-.03em;
      color:var(--brand-dark);
    }
    .lead{
      margin:0;
      color:var(--muted);
      font-size:1.06rem;
      max-width:64ch;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:22px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:13px 18px;
      border-radius:999px;
      font-weight:800;
      border:1px solid transparent;
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .btn:hover{transform:translateY(-1px)}
/*     .btn.primary{
      background:linear-gradient(135deg, var(--brand), var(--brand-dark));
      color:#fff;
      box-shadow:0 12px 24px rgba(63,107,79,.22);
    }   */
    .btn.primary{
      background:linear-gradient(135deg, var(--brand), var(--brand-dark));
      color:#fff;
      box-shadow:none;
    }
    .btn.secondary{
      background:#fff;
      border-color:var(--line);
      color:var(--brand-dark);
    }
    .visual{
      border-radius:22px;
      border:1px solid var(--line);
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(63,107,79,.08), rgba(63,107,79,.03)),
        #f5f8f3;
      min-height:280px;
      display:grid;
      place-items:center;
     /*  padding:20px; */
      text-align:center;
    }
    .tree-dot{
      width:96px;
      height:96px;
      border-radius:50%;
      background:radial-gradient(circle at 30% 30%, #dfe9db, #8db391 72%, #607d64);
      margin:0 auto 14px;
      box-shadow:inset 0 0 0 8px rgba(255,255,255,.34);
    }
    .visual strong{display:block;color:var(--brand-dark);font-size:1.12rem;margin-bottom:8px}
    .visual p{margin:0;color:var(--muted)}
    .quickfacts{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
      margin-top:16px;
    }
    .fact{
      padding:16px;
      border:1px solid var(--line);
      border-radius:18px;
      background:linear-gradient(180deg,#fff,#fbfcfa);
    }
    .fact span{display:block;color:var(--muted);font-size:.88rem;margin-bottom:6px}
    .fact strong{display:block;color:var(--text);font-size:1.02rem}
    .section{
      padding:28px;
      margin-top:22px;
    }
    .section h2{
      margin:0 0 12px;
      font-size:1.68rem;
      line-height:1.2;
      color:var(--brand-dark);
      letter-spacing:-.02em;
    }
    .section p.desc{margin:0 0 18px;color:var(--muted)}
    .grid2{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    .card{
      background:linear-gradient(180deg,#fff,#fbfcfa);
      border:1px solid var(--line);
      border-radius:18px;
      padding:18px;
    }
    .card h3{margin:0 0 10px;color:var(--brand-dark);font-size:1.05rem}
    .list{margin:0;padding-left:18px}
    .list li{margin:8px 0}
    .table-wrap{
      overflow-x:auto;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
    }
    table{
      width:100%;
      min-width:700px;
      border-collapse:collapse;
    }
    th,td{
      padding:14px 16px;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align:top;
    }
    th{
      background:#f1f6ef;
      color:var(--brand-dark);
      font-weight:800;
    }
    .note{
      padding:18px;
      margin-top:14px;
      background:linear-gradient(135deg, rgba(63,107,79,.10), rgba(216,169,95,.12));
      border:1px solid rgba(63,107,79,.16);
      color:var(--brand-dark);
      font-weight:700;
    }
    .faq details{
      background:#fff;
      border:1px solid var(--line);
      border-radius:16px;
      overflow:hidden;
    }
    .faq details + details{margin-top:12px}
    .faq summary{
      list-style:none;
      cursor:pointer;
      padding:16px 18px;
      font-weight:800;
      color:var(--brand-dark);
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq .ans{
      padding:0 18px 18px;
      color:var(--muted);
    }
    .cta{
      margin-top:22px;
      padding:24px 28px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .cta h3{margin:0 0 6px;font-size:1.3rem;color:var(--brand-dark)}
    .cta p{margin:0;color:var(--muted)}
    .links{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px;
      margin-top:18px;
    }
    .link-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      padding:18px;
    }
    .link-card strong{display:block;margin-bottom:8px;color:var(--brand-dark)}
    .link-card a{display:inline-block;margin-top:8px;color:var(--brand);font-weight:800}
    @media (max-width:960px){
      .hero-tree,.grid2,.links,.quickfacts,.cta{grid-template-columns:1fr}
      .hero-tree,.section,.cta{padding:22px}
      .cta{align-items:flex-start;flex-direction:column}
    }
    @media (max-width:640px){
      .wrap{width:min(calc(100% - 20px), var(--max));padding-top:12px}
      .hero-tree,.section,.cta{border-radius:20px}
      .title{font-size:1.9rem}
      .lead{font-size:1rem}
      .btn{width:100%}
    }


    /****************************/
    /*    menu         */
    /****************************/
    .nav-toggle { display: none; }

    .nav-burger {
      display: none;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fff;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-direction: column;
      gap: 5px;
      flex-shrink: 0;
    }

    .nav-burger span {
      width: 18px;
      height: 2px;
      background: var(--brand-dark);
      border-radius: 999px;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav > a,
    .dropbtn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 11px 14px;
      border-radius: 999px;
      font-size: 0.98rem;
      font-weight: 700;
      color: var(--brand-dark);
      transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
      white-space: nowrap;
    }

    .nav > a:hover,
    .dropbtn:hover,
    .drop:hover .dropbtn {
      background: var(--soft);
      color: var(--brand);
      transform: translateY(-1px);
    }

    .drop {
      position: relative;
    }

    .dropbtn::after {
      content: "▾";
      font-size: 0.75rem;
      opacity: 0.8;
      margin-top: -1px;
    }

    .dropdown {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      min-width: 320px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: 10px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
      z-index: 999;
    }

    .drop:hover .dropdown,
    .drop:focus-within .dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .dropdown-grid {
      display: grid;
      gap: 8px;
    }

    .dropdown-title {
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 6px 10px 2px;
    }

    .dropdown a {
      
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 12px;
      border-radius: 14px;
      font-weight: 700;
      color: var(--text);
      background: #fff;
      border: 1px solid transparent;
    
      /*
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 14px;
      font-weight: 700;
      color: var(--text);
      background: #fff;
      border: 1px solid transparent;
      */
    }



    .dropdown a:hover {
      background: #f4f8f3;
      border-color: #dbe6d9;
      color: var(--brand-dark);
    }

    .dropdown small {
      color: var(--muted);
      font-weight: 600;
    }

    .badge-current {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 8px;
      border-radius: 999px;
      background: var(--soft);
      color: var(--brand-dark);
      font-size: 0.72rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .nav .btn-line {
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      color: #fff;
      box-shadow: 0 10px 20px rgba(63, 107, 79, 0.18);
    }

    .nav .btn-line:hover {
      background: linear-gradient(135deg, #49795a, #244131);
      color: #fff;
    }

    .line-dot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.18);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.04em;
    }

    /* Mobile */
    @media (max-width: 980px) {
      .nav-burger { display: inline-flex; }

      .nav {
        position: absolute;
        /* top: calc(100% + 12px); */
        /* left: 0; */
        right: 0;
        display: grid;
        gap: 8px;
        padding: 14px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--line);
        border-radius: 20px;
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
      }

      .nav-toggle:checked ~ .nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .nav > a,
      .dropbtn {
        width: 100%;
        justify-content: space-between;
        border: 1px solid var(--line);
        background: #fff;
      }

      .drop { width: 100%; }

      .dropdown {
        position: static;
        min-width: 100%;
        margin-top: 8px;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        display: none;
      }

      .drop:hover .dropdown,
      .drop:focus-within .dropdown {
        display: block;
      }
    }

    @media (max-width: 640px) {
      .container {
        width: min(calc(100% - 20px), var(--container));
      }

      .brand-tagline { display: none; }
      .brand-name { font-size: 1rem; }
      .nav > a,
      .dropbtn { font-size: 0.95rem; padding: 12px 14px; }
      .dropdown { min-width: 100%; }
    }

 

    .section.related-content h3 {
      margin: 0 0 16px;
      font-size: 1.25rem;
      line-height: 1.4;
    }

    .section.related-content a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 10px 10px 0;
      padding: 10px 14px;
      border: 1px solid #d9e2d5;
      border-radius: 999px;
      background: #f8fbf7;
      color: #21412c;
      text-decoration: none;
      font-size: 0.95rem;
      line-height: 1.2;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }

    .section.related-content a:hover {
      background: #eaf4e6;
      border-color: #b9d3b0;
      transform: translateY(-1px);
    }

    .section.recommended-species .links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
      margin-top: 16px;
    }



    .section.recommended-species .link-card {
      padding: 18px;
      border: 1px solid #e1e7dd;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    }

    .section.recommended-species .link-card h3 {
      margin: 0 0 10px;
      font-size: 1.05rem;
    }

    .section.recommended-species .link-card h3 a {
      color: #16311f;
      text-decoration: none;
    }

    .section.recommended-species .link-card h3 a:hover {
      text-decoration: underline;
    }

    .section.recommended-species .link-card p {
      margin: 0;
      color: #4b5b4f;
      line-height: 1.7;
      font-size: 0.96rem;
    }


 
/***********************/
/* header menu เพิ่มเติม */
/***********************/
/* header menu*/


/* ===== Dropdown ===== */
/* =========================
   DROPDOWN
========================= */



/**/
/* ==========================================
   PREMIUM FAQ
   HOMEPAGE FAQ
   ========================================== */
/* ==========================================
   FAQ SECTION
========================================== */

.faq{

    padding:100px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf8 100%
        );
}

/* ==========================================
   FAQ LIST
========================================== */

.faq details{

    background:#fff;

    border:1px solid rgba(24,54,45,.08);

    border-radius:22px;

    margin-bottom:18px;

    overflow:hidden;

    box-shadow:
        0 8px 25px rgba(20,39,33,.04);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.faq details:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 35px rgba(20,39,33,.08);
}

/* ==========================================
   SUMMARY
========================================== */

.faq summary{

    position:relative;

    padding:24px 70px 24px 28px;

    cursor:pointer;

    list-style:none;

    font-size:1.1rem;

    font-weight:700;

    color:#17392d;

    transition:.25s ease;
}

.faq summary::-webkit-details-marker{

    display:none;
}

/* ==========================================
   PLUS ICON
========================================== */

.faq summary::after{

    content:"+";

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    width:36px;

    height:36px;

    border-radius:50%;

    background:#eef5ef;

    color:#21493b;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.4rem;

    font-weight:400;

    transition:.3s ease;
}

.faq details[open] summary::after{

    content:"−";

    background:#21493b;

    color:#fff;
}

/* ==========================================
   CONTENT
========================================== */

.faq details p{

    margin:0;

    padding:
        0 28px 28px;

    color:#66756f;

    line-height:1.9;

    font-size:1rem;
}

/* ==========================================
   OPEN STATE
========================================== */

.faq details[open]{

    border-color:
        rgba(33,73,59,.18);
}

.faq details[open] summary{

    color:#21493b;
}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:767px){

    .faq{

        padding:90px 0;
    }

    .faq summary{

        font-size:1rem;

        padding:
            20px 60px 20px 20px;
    }

    .faq details p{

        padding:
            0 20px 20px;
    }

}

.faq-grid{
  display:grid;
  gap:14px;
}

.faq-grid details{
  background:#fff;
  border:1px solid #e8ece8;
  border-radius:18px;
  padding:18px;
}


.faq details{

    position:relative;
}

.faq details::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #21493b,
            #5b8d78
        );

    opacity:0;

    transition:.3s;
}

.faq details[open]::before{

    opacity:1;
}



/* ================================ */
/* ==================================
    Breadcrumb
================================== */
/* ================================ */

.breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;

    font-size:14px;

    font-weight:600;

    color:#708078;
}

.breadcrumb a{

    color:#5f6f67;

    transition:.25s;

    position:relative;
}

.species-breadcrumb a:hover{

    color:#2e6a45;
}

.species-breadcrumb span{

    color:#a8b2ac;
}

/* current page */

.species-breadcrumb span:last-child{

    color:#2e6a45;

    font-weight:700;
}
.current-page {
    border-bottom: #9aaf76;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
}


/* eyebrow */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(107, 143, 91, .10);
    color: var(--accent-dark);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 18px;
}
 



/***************************/
/* 
effect ปุ่ม  

ปุ่มลอยขึ้น
มีแสงวิ่งผ่าน
ดู Premium มากขึ้น

*/
/***************************/
/* ปุ่ม*/
.btn{
    position:relative;
    overflow:hidden;

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease,
        background .35s ease;
}

.btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transition:left .65s ease;
}

.btn:hover{
    transform:
        translateY(-4px)
        scale(1.02);

    box-shadow:
        0 18px 35px rgba(0,0,0,.15);
}

.btn:hover::before{
    left:130%;
}
/* 
.btn-primary{

    background:
        linear-gradient(
            135deg,
            #5d7f4d,
            #89aa71
        );

    box-shadow:
        0 12px 30px rgba(107,143,91,.25);

}

.btn-primary:hover{

    box-shadow:
        0 22px 45px rgba(107,143,91,.35);

    transform:
        translateY(-5px)
        scale(1.03);
}
 */

/*  Catalog Card Hover */
.tree-card{

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

.tree-card:hover{

    transform:
        translateY(-10px);

    border-color:
        rgba(107,143,91,.25);

    box-shadow:
        0 30px 60px rgba(43,59,39,.16);
}
/*Zoom รูป*/
.tree-card img{

    transition:
        transform .6s ease;
}

.tree-card:hover img{

    transform:scale(1.06);
}
/*Hero Image Hover*/
.hero-image{

    transition:
        transform 1.2s ease;
}

.hero-card:hover .hero-image{

    transform:scale(1.04);
}

/*Price Row Effect*/
.price-row{

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

.price-row:hover{

    transform:translateX(8px);

    border-color:
        rgba(107,143,91,.25);

    box-shadow:
        0 16px 35px rgba(43,59,39,.12);
}

/* Floating Card Premium*/
.floating-card{

    backdrop-filter:blur(18px);

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 20px 50px rgba(0,0,0,.15);
}

.floating-card:hover{

    transform:translateY(-4px);

    transition:.3s ease;
}


/* menu */
/* Current Page */
.nav a.current-page{

/*     background:linear-gradient(
        135deg,
        #5d7f4d,
        #89aa71
    );

    color:#fff; */

    border-radius:999px;

    font-weight:700;

    box-shadow:
        0 1px 20px rgba(93,127,77,.22);

}

.nav a.current-page:hover{

    color: #65864e;

    transform:translateY(-2px);

}



 /**/
/*==================================================
    Topic Navigation
==================================================*/

.topic-nav{

 

    padding:28px 32px;

    background:#f9fbfa;

    border:1px solid #e4ebe6;

    border-radius:18px;

    box-shadow:
        0 6px 20px rgba(20,40,25,.04);

   overflow:hidden;

}

/*----------------------------------
Title
----------------------------------*/

.topic-nav-title{

    margin:0 0 22px;

    font-size:1.15rem;

    font-weight:700;

    color:var(--primary);

    letter-spacing:-.02em;

}

/*----------------------------------
Main Menu
----------------------------------*/

.topic-nav-list{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:0;

    margin:0;

    padding:0;

    list-style:none;

}

.topic-nav-list li{

    display:flex;

    align-items:center;

}

.topic-nav-list li:not(:last-child)::after{

    content:"•";

    margin:0 14px;

    color:#cfd8d2;

}

.topic-nav-list a{

    position:relative;

    display:inline-block;

    color:#4e5d56;

    text-decoration:none;

    font-size:1rem;

    font-weight:600;

    transition:
        color .25s ease;

}

.topic-nav-list a:hover{

    color:var(--primary);

}

.topic-nav-list a.active{

    color:var(--primary);

}

.topic-nav-list a.active::after{

    content:"";

    position:absolute;

    left:12%;

    bottom:-8px;

    width:76%;

    height:3px;

    border-radius:999px;

    background:var(--primary);

}

/*==================================================
    Divider
==================================================*/

.topic-nav-divider{

    margin:28px 0 22px;

    border:0;

    border-top:1px solid #e8efea;

}

/*==================================================
    Subtitle
==================================================*/

/* .topic-nav-subtitle{

    margin-bottom:16px;

    font-size:.82rem;

    font-weight:700;

    color:#7b8781;

    text-transform:uppercase;

    letter-spacing:.12em;

}
*/
.topic-nav-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin:0 0 14px;

    padding:6px 14px;

    border-radius:999px;

    background:#eaf4ed;

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.05em;

}


/*==================================================
    Price Menu
==================================================*/

.topic-nav-price{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    margin:0;

    padding:0;

    list-style:none;

}

.topic-nav-price li{

    margin:0;

}

.topic-nav-price a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:82px;

    padding:8px 16px;

    border-radius:999px;

    border:1px solid #dbe6de;

    background:#fff;

    color:#66736d;

    text-decoration:none;

    font-size:.92rem;

    font-weight:500;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;

}

.topic-nav-price a:hover{

    color:var(--primary);

    border-color:var(--primary);

    background:#f4faf6;

}

.topic-nav-price a.active{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

    box-shadow:0 4px 14px rgba(42,112,68,.18);

}

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

@media(max-width:991px){

    .topic-nav{

        padding:24px;

    }

}

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

@media(max-width:768px){

    .topic-nav{

        margin:36px 0;

        padding:20px;

        border-radius:14px;

    }

    .topic-nav-title{

        margin-bottom:18px;

        font-size:1.05rem;

    }

   .topic-nav-list,
  .topic-nav-price{
 
/*     display:flex;
    flex-wrap:nowrap;
    width:max-content;
    min-width:max-content; */

        display:flex;
    flex-wrap:wrap;
    gap:12px 18px;


    }


    .topic-nav-list::-webkit-scrollbar,
    .topic-nav-price::-webkit-scrollbar{

        display:none;

    }

    .topic-nav-list li,
    .topic-nav-price li{

        flex:0 0 auto;

    }

    .topic-nav-divider{

        margin:22px 0 18px;

    }

 
}

.topic-nav-price-wrap{

    margin-top:26px;

    padding:18px 22px 20px;

    background:linear-gradient(
        180deg,
        #f8fbf9 0%,
        #f3f8f5 100%
    );

    border:1px solid #dfe9e3;

    border-radius:16px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);

}
#topic-nav{
    scroll-margin-top:120px;
}


.topic-nav-scroll{

    overflow-x:auto;
    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    margin:0 -20px;
    padding:0 20px;


 

}
 


.topic-nav-scroll::-webkit-scrollbar{

    display:none;

}

.topic-nav-list a,
.topic-nav-price a{

    white-space:nowrap;

}


/**/
section.species-related .related-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}