/* === Global Type: IBM Plex Sans Thai (องค์กร-มินิมอล) === */
:root{
  --green:#2E7D32; --green-dark:#1B5E20; --green-light:#A5D6A7; --leaf:#81C784;
  --cream:#FAFAF5; --paper:#FFFFFF; --border:#C8E6C9; --text:#222;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

html, body { height: 100%; }

body{
  font-family: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .1px;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* สเกลน้ำหนักให้คม ชัด แต่มินิมอล */
h1, h2, h3, .section__title, .brand, .footer__title { font-weight: 700; letter-spacing: .2px; color: var(--green-dark); }
.menu__link { font-weight: 600; }
.btn { font-weight: 700; }
.stat__big, .price { font-weight: 700; }

/* ภาษา TH/EN (ถ้าหน้าไหนยังไม่มี ให้ใส่ไว้ที่ global เลย) */
.i18n { display: inline; }
html[data-lang="th"] .i18n-th { display: inline; }
html[data-lang="th"] .i18n-en { display: none; }
html[data-lang="en"] .i18n-th { display: none; }
html[data-lang="en"] .i18n-en { display: inline; }



.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.section__title{font-size:1.5rem;margin:0 0 16px;color:var(--green-dark)}
h1{font-size:2rem;margin:0 0 16px;color:var(--green-dark)}
h2{font-size:1.5rem;color:var(--green-dark)}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:800;text-decoration:none;border:2px solid transparent;transition:.2s;cursor:pointer}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{filter:brightness(0.96)}
.btn--ghost{background:#fff;color:var(--green);border-color:var(--green)}
.btn--sm{padding:10px 14px;font-size:.95rem}
.lang-toggle{position:absolute;left:-9999px}
.i18n{display:inline}
html[data-lang="th"] .i18n-th{display:inline}
html[data-lang="th"] .i18n-en{display:none}
html[data-lang="en"] .i18n-th{display:none}
html[data-lang="en"] .i18n-en{display:inline}

.lang-switch{margin-left:8px}
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:20}
.nav__bar{display:flex;align-items:center;gap:16px;height:72px}
.brand{display:flex;align-items:center;gap:10px;color:var(--green-dark);font-weight:900;text-decoration:none}
.brand__logo{display:block}
.menu{display:flex;gap:16px;margin-left:auto}
.menu__link{padding:8px 10px;border-radius:10px;color:#444;text-decoration:none;font-weight:700;white-space:nowrap}
.menu__link:hover{background:#f3fff5}
.menu__link.is-active{color:var(--green-dark)}
.nav__cta{margin-left:8px}
.menu-toggle{display:none}
.hamburger{display:none;cursor:pointer;margin-left:auto;padding:10px;border-radius:10px}
.hamburger span{display:block;width:22px;height:2px;background:#333;margin:5px 0;border-radius:2px;transition:.2s}
.drawer__overlay{position:fixed;inset:0;background:rgba(0,0,0,.2);opacity:0;visibility:hidden;pointer-events:none;transition:.2s;z-index:18}
.drawer{position:fixed;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px;padding:12px 20px 20px;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .18s ease,opacity .18s ease,visibility .18s ease;z-index:19}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.brand-mini{font-weight:900;color:var(--green-dark)}
.drawer__close{cursor:pointer;font-size:20px;line-height:1;padding:4px 8px;border-radius:8px}
.drawer__close:hover{background:#f3fff5}
.drawer__link{padding:10px 12px;border-radius:10px;text-decoration:none;color:#333;font-weight:700}
.drawer__link:hover{background:#f3fff5}
.drawer__cta{margin-top:8px}
.menu-toggle:checked ~ .drawer{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.menu-toggle:checked ~ .drawer__overlay{opacity:1;visibility:visible;pointer-events:auto}
.menu-toggle:checked ~ .nav__bar .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle:checked ~ .nav__bar .hamburger span:nth-child(2){opacity:0}
.menu-toggle:checked ~ .nav__bar .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero{padding:28px 0;background:linear-gradient(160deg,var(--leaf),var(--green))}
.hero__grid{display:grid;gap:24px;align-items:center;grid-template-columns:1.2fr 1fr}
.hero__title{margin:0 0 8px;color:#fff;line-height:1.25}
.hero__subtitle{margin:0 0 16px;color:#E3FCEB}
.hero__visual{height:260px;border-radius:16px;background:repeating-linear-gradient(45deg,#fff5,#fff5 10px,#fff3 10px,#fff3 20px);border:1px solid #ffffff55;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;box-shadow:var(--shadow)}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.stats{padding:20px 0;background:#fff;border-bottom:1px solid var(--border)}
.stats__grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.stat{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow);text-align:center}
.stat__big{font-size:1.6rem;color:var(--green-dark);font-weight:900}
.stat__label{color:#555;font-weight:700}
.cards{display:grid;gap:24px;grid-template-columns:repeat(3,1fr);margin-top:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.card__thumb{height:140px;border-radius:12px;background:var(--green-light)}
.card__title{margin:12px 0 6px;font-size:1.05rem;color:#222}
.card__text{margin:0 0 12px;color:#555;font-weight:600}
.card--price{text-align:center}
.price{font-size:1.4rem;color:#8D6E63;font-weight:900;margin:6px 0 12px}
.cta{padding:40px 0;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta__box{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cta__title{margin:0;color:var(--green-dark);font-size:1.25rem}
.footer{padding:20px 0;background:#fff}
.footer__inner{display:flex;justify-content:space-between;gap:12px;color:#555;font-weight:700}
.stepper{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.stepper__item{display:flex;align-items:center;gap:8px;color:#666;font-weight:800;white-space:nowrap}
.stepper__item .dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);display:inline-flex;align-items:center;justify-content:center;background:#fff}
.stepper__item.is-active .dot{background:var(--green);color:#fff;border-color:var(--green)}
.stepper__sep{flex:1;height:2px;background:var(--border)}
.form{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.form-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.form-grid{grid-template-columns:1fr}}
label.field-label{display:block;font-weight:800;color:#555;margin:8px 0 6px}
input[type=text],input[type=email],input[type=date],input[type=time],input[type=number],select,textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;font:inherit}
textarea{min-height:120px;resize:vertical}
.gallery-grid{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
.gallery-item{height:180px;border-radius:14px;background:var(--green-light);border:1px solid var(--border);box-shadow:var(--shadow)}
.team{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.team{grid-template-columns:1fr}}
.profile{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px;text-align:center}
.profile .avatar{height:96px;border-radius:12px;background:var(--green-light);margin-bottom:8px}
.notice{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.center{display:flex;justify-content:center;align-items:center}
@media (max-width:1180px){.menu{display:none}.nav__cta{display:none}.hamburger{display:block}}
@media (max-width:1024px){.hero__grid{grid-template-columns:1fr}}
@media (max-width:820px){.stats__grid{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:repeat(2,1fr)}.cta__box{flex-direction:column;align-items:flex-start}}
@media (max-width:520px){.stats__grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}}
/* ========== HERO visual auto-fade (เฉพาะรูปขวา) ========== */
.hero__visual{
  position: relative;
  height: 260px;               /* คงความสูงเดิมของคุณ */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ffffff55;
  box-shadow: var(--shadow);
  background: #e8f5e9;         /* เผื่อระหว่างโหลดรูป */
}

.hero__visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                   /* เริ่มโปร่งใส */
  animation: heroFade 18s infinite;
  /* เพื่อให้การเฟดเนียน */
  will-change: opacity;
}

/* ตั้งดีเลย์ให้แต่ละรูปสลับโชว์ */
.hero__visual img:nth-child(1){ animation-delay: 0s;  }
.hero__visual img:nth-child(2){ animation-delay: 6s;  }
.hero__visual img:nth-child(3){ animation-delay: 12s; }

/* วงจร: แต่ละรูปแสดง ~6s (ปรับได้โดยแก้ keyframes/เวลารวม) */
@keyframes heroFade{
  /* 0–6s (ช่วงของรูปนั้น ๆ): ค่อยๆ โผล่ -> คง -> ค่อยๆ หาย */
  0%   { opacity: 0 }
  6%   { opacity: 1 }
  28%  { opacity: 1 }
  34%  { opacity: 0 }
  /* นอกช่วงเป็น 0 เพื่อรอรอบต่อไป */
  100% { opacity: 0 }
}

/* หยุดแอนิเมชันสำหรับผู้ใช้ที่ไม่ต้องการ motion (การเข้าถึง) */
@media (prefers-reduced-motion: reduce){
  .hero__visual img{ animation: none; }
  .hero__visual img:nth-child(n+2){ display:none; } /* โชว์เฉพาะภาพแรก */
}

/* ถ้าคุณใช้ @media เดิมกำหนดความสูง hero__visual ไว้ ก็ยังใช้ต่อได้ */
@media (max-width:1024px){
  .hero__visual{ height: 220px; }
}
@media (max-width:640px){
  .hero__visual{ height: 180px; }
}
/* ===== Modal (Popup) ===== */
.modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:40; opacity:0; visibility:hidden; transition:.2s;
  pointer-events:none; /* กันรับคลิกตอนยังไม่เปิด */
}
.modal.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
}
.modal__overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  cursor:pointer;
  z-index:1;                /* ชั้นล่างกว่ากล่องสนทนา */
}
.modal__dialog{
  position:relative; z-index:2; /* อยู่เหนือ overlay */
  background:#fff; border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow);
  max-width:900px; width:92%;
  display:grid; grid-template-columns:1.2fr 1fr; gap:0;
}
.modal__media{ border-right:1px solid var(--border) }
.modal__media img{
  display:block; width:100%; height:100%; object-fit:cover;
  border-top-left-radius:16px; border-bottom-left-radius:16px;
}
.modal__body{ padding:18px }
.modal__close{
  position:absolute; top:10px; right:10px;
  border:0; background:#fff; border:1px solid var(--border);
  width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:16px;
  z-index:3;                 /* ปุ่มอยู่บนสุด */
}
.modal__close:hover{ background:#f6fff7 }

@media (max-width:820px){
  .modal__dialog{ grid-template-columns:1fr }
  .modal__media img{
    border-bottom-left-radius:0; border-top-right-radius:16px;
  }
}

body.modal-open{ overflow:hidden; }
.notice .muted{ color:#777; margin-left:6px; }

.footer__grid{
  display:grid; gap:18px;
  grid-template-columns: 1.2fr 1fr 1fr;
}
.footer__title{ margin:0 0 8px; font-weight:900; color:var(--green-dark); }
.footer__address{ font-style:normal; color:#555; }
.footer__list{ list-style:none; margin:0; padding:0; }
.footer__list li{ margin:6px 0; }
.footer__list a{ color:#333; text-decoration:none; font-weight:700; }
.footer__list a:hover{ text-decoration:underline; }
.footer__text{ margin:0 0 10px; color:#555; }
.footer__social{ display:flex; gap:10px; flex-wrap:wrap; }
.footer__social .social{
  padding:8px 10px; border:1px solid var(--border); border-radius:10px;
  text-decoration:none; font-weight:800; color:var(--green-dark); background:#fff;
}
.footer__social .social:hover{ background:#f3fff5; }
.footer__bottom{
  display:flex; justify-content:space-between; gap:12px; margin-top:16px;
  border-top:1px solid var(--border); padding-top:12px; color:#555; font-weight:700;
}
@media (max-width:820px){
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}
/* Map embed */
.map{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.map iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;      /* สูงอัตโนมัติแบบสัดส่วน 16:9 */
  min-height:260px;       /* กันจอเล็ก */
  border:0;
}
@media (max-width:640px){
  .map iframe{ aspect-ratio:4/3; min-height:220px; }
}
/* ===== Refined Footer ===== */
.footer{
  background:#fff;
  border-top:1px solid var(--border);
}
.footer__grid{
  display:grid; gap:24px; padding:24px 0;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
}
.footer__col .brand{ margin:0 0 8px; }
.footer__tagline{ margin:6px 0 0; color:#555; }
.footer__title{
  margin:0 0 10px; font-weight:900; color:var(--green-dark);
}
.footer__address{ font-style:normal; color:#555; line-height:1.5; }
.footer__list{ list-style:none; margin:0; padding:0; }
.footer__list li{ margin:6px 0; color:#444; }
.footer__list a{
  color:#2b2b2b; text-decoration:none; font-weight:700;
}
.footer__list a:hover{ text-decoration:underline; }
.footer__links li{ margin:4px 0; }
.footer__social{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.footer__social .social{
  padding:8px 12px; border:1px solid var(--border); border-radius:10px;
  text-decoration:none; font-weight:800; color:var(--green-dark);
  background:#fff; box-shadow:var(--shadow);
}
.footer__social .social:hover{ background:#f3fff5; }

.footer__bottom{
  border-top:1px solid var(--border);
  background:#fafafa;
}
.footer__bottom__inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; color:#555; font-weight:700;
}

/* Responsive */
@media (max-width:1024px){
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:640px){
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__bottom__inner{ flex-direction:column; gap:6px; align-items:flex-start; }
}
.hours__list{
  list-style:none; margin:6px 0 0; padding:0; color:#444; font-weight:700;
}
.hours__list li{
  display:flex; justify-content:space-between; gap:12px;
  padding:6px 0; border-bottom:1px dashed var(--border);
}
.hours__list li:last-child{ border-bottom:0; }
/* ทำให้ footer อยู่ล่างสุดเสมอ */
html, body { height: 100%; }                /* รองรับเบราว์เซอร์เก่า */
.site{
  min-height: 100dvh;                       /* สูงเท่า viewport */
  display: flex;
  flex-direction: column;
}
main{ flex: 1 1 auto; }                     /* ดันพื้นที่กลางให้ยืด */
.footer{ margin-top: auto; }                /* ดัน footer ไปชิดล่าง */
/* --- Remove clamp & fade globally --- */
.clamp{
  display: block !important;     /* แสดงเต็ม */
  overflow: visible !important;  /* ไม่ตัด */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  position: static !important;   /* กัน pseudo overlay เก่า */
}

.clamp::after{
  display: none !important;      /* ตัดเงาเฟด */
  content: none !important;
}

/* ถ้ามีปุ่มอ่านเพิ่มเติมจากของเก่า ไม่ใช้แล้ว */
.readmore{
  display: none !important;
}


/* ===== Testimonials slider ===== */
.tsl{ position:relative; margin-top:12px; }

.tsl__viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
  padding:16px;
  scroll-padding-inline:16px;
  -webkit-overflow-scrolling:touch;
  touch-action: pan-y;
}
.tsl__viewport::-webkit-scrollbar{ height:8px; }
.tsl__viewport::-webkit-scrollbar-thumb{
  background:var(--leaf); border-radius:8px;
}

.tsl__track{
  display:flex; gap:16px;  /* ตัวนี้ไม่ต้อง overflow */
}

.tcard{
  flex:0 0 80%;
  max-width:80%;
  scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:var(--shadow);
}
.tcard__quote{ margin:0 0 10px; color:#333; font-weight:700; line-height:1.6; }
.tcard__meta{ color:#666; font-weight:800; }

@media (min-width:820px){
  .tcard{ flex-basis:33.333%; max-width:33.333%; }
}

.tsl__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border); background:#fff; cursor:pointer;
  font-size:22px; font-weight:900; color:var(--green-dark);
  box-shadow:var(--shadow);
}
.tsl__prev{ left:-10px; }
.tsl__next{ right:-10px; }
.tsl__nav:hover{ background:#f3fff5; }
/* ===== Language Dropdown ===== */
.langdd { position: relative; }
.langdd__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:#fff; color:#1B5E20;
  font-weight:800; cursor:pointer; box-shadow:var(--shadow);
}
.langdd__btn:hover{ background:#f3fff5; }
.langdd__flag{ font-size:1.1rem; line-height:1; }
.langdd__chev{ transition:transform .15s ease; }
.langdd[data-open="true"] .langdd__chev{ transform:rotate(180deg); }

.langdd__menu{
  position:absolute; right:0; top:calc(100% + 6px);
  min-width:180px; padding:6px;
  margin:0; list-style:none; z-index:30;
  background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow);
  display:none;
}
.langdd[data-open="true"] .langdd__menu{ display:block; }

.langdd__item{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px;
  border:0; background:transparent; cursor:pointer; text-align:left;
  font-weight:800; color:#2b2b2b;
}
.langdd__item:hover, .langdd__item:focus-visible{ background:#f3fff5; outline:none; }
.langdd__flag{
  width: 18px; height: 18px; border-radius: 3px; object-fit: cover;
  display:inline-block;
}
.langdd__btn .langdd__flag{ width:20px; height:20px; }

/* แสดงอีโมจิแทนรูปกรณีโหลดรูปธงไม่สำเร็จ */
.langdd__btn.use-emoji::before{
  content: attr(data-emoji);
  font-size: 18px;
  margin-right: 8px;
}
/* ซ่อนข้อความสำหรับผู้อ่านหน้าจอ (a11y) */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ปรับสไตล์ปุ่มโซเชียลให้เป็นไอคอนอย่างเดียว */
.footer__social{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;
}
.social-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border);
  background:#fff; box-shadow:var(--shadow);
  text-decoration:none;
}
.social-icon:hover{ background:#f3fff5; }
.social-icon svg{
  width:22px; height:22px;
  display:block; color:var(--green-dark);
}

.gallery-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(4, 1fr);
}
@media (max-width:1024px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:640px){  .gallery-grid{ grid-template-columns:repeat(2, 1fr); } }

.gallery-item{
  position:relative; display:block;
  border:1px solid var(--border); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio: 4 / 3; /* ช่องภาพคงสัดส่วน */
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery-item:hover{ transform: translateY(-2px); }

.gallery-item img{
  width:100%; height:100%; display:block; object-fit:cover;
}


/* ===== Lightbox ===== */
.lb{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
}
.lb.is-open{ display:flex; }

.lb__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  border:0; cursor:zoom-out;
}

.lb__dialog{
  position:relative; z-index:1; margin:0;
  max-width:min(92vw, 1200px); max-height:min(92vh, 900px);
  display:flex; flex-direction:column; gap:8px;
  background:#0000;
}

.lb__img{
  max-width:100%; max-height:calc(92vh - 80px);
  width:auto; height:auto; object-fit:contain; display:block;
  border-radius:12px; box-shadow:var(--shadow);
  background:#fff; /* กันหน้าโหลดช้าแล้วเป็นพื้นโปร่ง */
}

.lb__cap{
  color:#fff; text-align:center; font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  min-height:1.4em;
}

.lb__close{
  position:absolute; top:-10px; right:-10px;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border); background:#fff; cursor:pointer;
  font-size:18px; font-weight:900; color:var(--green-dark);
  box-shadow:var(--shadow);
}

.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--border); background:#fff; cursor:pointer;
  font-size:26px; font-weight:900; color:var(--green-dark);
  box-shadow:var(--shadow);
}
.lb__prev{ left:-10px; }
.lb__next{ right:-10px; }
.lb__nav:hover, .lb__close:hover{ background:#f3fff5; }

@media (max-width:640px){
  .lb__prev{ left:6px; }
  .lb__next{ right:6px; }
  .lb__close{ top:6px; right:6px; }
}

/* กันฟอร์มล้นกรอบแบบครอบจักรวาล */
*, *::before, *::after { box-sizing: border-box; }

/* คอนเทนเนอร์ฟอร์ม */
.form { max-width: 760px; margin-inline: auto; }

/* วางช่องฟอร์มเป็นกริด 2 คอลัมน์บนจอใหญ่, มือถือเป็น 1 คอลัมน์ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* <-- minmax(0,1fr) สำคัญมากกันล้น */
  gap: 16px;
}
.form-grid > * { min-width: 0; } /* ให้ลูกย่อได้ */

/* ป้ายชื่อช่อง */
.field-label { display: block; margin-bottom: 6px; font-weight: 600; }

/* ช่องกรอกทุกชนิดให้ยืดไม่ล้นพ่อ */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"],
.form input[type="password"],
.form input[type="search"],
.form input[type="url"],
.form select,
.form textarea {
  width: 100%;
  max-width: 100%;
  display: block;
  padding: 12px 14px;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  line-height: 1.5;
}

/* กล่องข้อความ (textarea) */
.form textarea {
  min-height: 140px;
  resize: vertical;     /* ให้ยืดสูงได้ตามต้องการ */
  overflow: auto;       /* ถ้าข้อความเยอะค่อยมีสกอร์ล */
  word-break: break-word;
}

/* ปุ่มส่งให้เป็นปุ่มจริง ๆ ไม่เบียดกริด */
.mt-16 { margin-top: 16px; }
.btn { display: inline-block; }

/* มือถือ: เหลือคอลัมน์เดียว */
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* แผนที่ให้ตอบสนอง ไม่ดันคอนเทนเนอร์ */
.map { position: relative; width: 100%; max-width: 100%; }
.map iframe { width: 100%; height: 360px; border: 0; display: block; }

/* รายการเวลาเปิดให้ตัดคำและไม่ล้น */
.hours__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hours__list li { 
  display: grid; 
  grid-template-columns: 1fr auto; 
  align-items: center; 
  gap: 12px; 
  min-width: 0; 
}
.hours__list li > * { min-width: 0; }
.hours__list li span, .hours__list li strong { overflow-wrap: anywhere; }

/* 1) ทำแถบนำทางเป็น relative ไว้สำหรับจัดเมนูให้อยู่กลาง */
.nav__bar{
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px; /* ของเดิม */
}

/* 2) จัด .menu ให้อยู่กึ่งกลางจริง ๆ ของบาร์ */
.menu{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;           /* เผื่อบางจอ */
  gap: 16px;
}

/* 3) ด้านขวา: ให้ “จอง” ติดซ้ายของ “เปลี่ยนภาษา” แล้วทั้งคู่ชิดขวา */
.nav__cta{               /* ปุ่มจอง */
  margin-left: auto;     /* ดันกลุ่มขวาไปสุด */
  order: 98;
}
.langdd{                 /* สลับภาษา */
  order: 99;
  margin-left: 8px;      /* ระยะห่างระหว่าง จอง กับ ภาษา */
}
.hamburger{              /* ไอคอนเมนูมือถือ (ถ้ามี) */
  order: 100;
}

/* 4) มือถือ: เมนูถูกซ่อนไว้อยู่แล้ว (จากโค้ดเดิม) ไม่ต้องกึ่งกลางอะไรเพิ่ม */
@media (max-width:1180px){
  .menu{ display:none; } /* ของเดิมก็โอเค */
}
/* === Navbar: menu กลาง, 'จอง' + 'ภาษา' ชิดขวา (ทุกหน้า) === */

/* 1) ทำบาร์เป็น relative เพื่อจับ .menu มาอยู่กึ่งกลาง */
.nav__bar{
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
}

/* 2) เมนูอยู่กึ่งกลางของทั้งบาร์จริง ๆ */
.nav__bar .menu{
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  margin-left: 0 !important;   /* กันกฏเก่าที่เคยดันไปขวา */
}

/* 3) ฝั่งขวา: จอง (ซ้าย) ติด ภาษา (ขวา) แล้วชิดขอบขวา */
.nav__bar .nav__cta{            /* ปุ่มจอง */
  margin-left: auto;            /* ดันกลุ่มขวาไปสุด */
  order: 98;
}
.nav__bar .langdd{              /* ปุ่มเปลี่ยนภาษา */
  order: 99;
  margin-left: 8px;             /* เว้นระยะระหว่าง จอง ↔ ภาษา */
}
.nav__bar .hamburger{           /* ไอคอนเมนูมือถือ */
  order: 100;
  margin-left: 8px;
}

/* 4) บนมือถือ: ซ่อน .menu ตามเดิม แต่ "จอง+ภาษา" ยังต้องแสดง */
@media (max-width:1180px){
  .nav__bar .menu{ display: none !important; }
  .nav__bar .nav__cta{ display: inline-flex !important; }
  .nav__bar .langdd  { display: inline-flex !important; }
}
/* === Fix ให้ 'จอง' อยู่ซ้ายของ 'ภาษา' และทั้งคู่ชิดขวาเสมอ ทุกหน้า === */

/* จัดเมนูกลาง */
.nav__bar{
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 72px;
}
.nav__bar .menu{
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  margin-left: 0 !important;
}

/* ปกติ: ดันกลุ่มขวาด้วยปุ่ม 'จอง' แล้วให้ 'ภาษา' ชิดขวาต่อจากจอง */
.nav__bar .nav__cta{
  margin-left: auto;        /* ดันกลุ่มขวา */
  order: 98;
}
.nav__bar .langdd{
  order: 99;
  margin-left: 8px;         /* ระยะห่าง จอง ↔ ภาษา */
}

/* ถ้าหน้านั้นไม่มีปุ่มจอง หรือถูกซ่อนอยู่ ให้ดัน 'ภาษา' เองไปชิดขวา */
.nav__bar:not(:has(.nav__cta)) .langdd{
  margin-left: auto;
}

/* มือถือ: ซ่อนเมนู แต่ให้จอง+ภาษาแสดงและเรียงติดกันชิดขวา */
@media (max-width:1180px){
  .nav__bar .menu{ display: none !important; }
  .nav__bar .nav__cta{ display: inline-flex !important; }
  .nav__bar .langdd  { display: inline-flex !important; }
}


/* ซ่อนลิงก์ Policy เฉพาะในเมนู drawer (มือถือ) */
.drawer a[href$="policy.html"]{ display:none !important; }
/* ซ่อนในเมนูหลักเดสก์ท็อปด้วย */
.menu a[href$="policy.html"]{ display:none !important; }


/* พื้นหลังแบบรูป + ไล่เฉด คลุมให้ตัวอักษรอ่านชัด */
.cta--bg{
  position: relative;
  padding: 56px 0; /* สูงกำลังดีสำหรับแถบ CTA */
  color: #fff;
  /* ไล่เฉดทับ + รูป */
  background:
    linear-gradient(160deg, rgba(0,0,0,.25), rgba(0,0,0,.45)),
    url('cta-bg.jpg') center / cover no-repeat;
}

/* ให้หัวข้อ CTA และปุ่มคอนทราสต์ดี */
.cta--bg .cta__title{ color:#fff; }
.cta--bg .btn--primary{
  background: #1B5E20;
  border-color: #1B5E20;
}
.cta--bg .btn--primary:hover{ filter: brightness(.96); }

/* รองรับจอเล็ก (ยังคงอ่านง่าย) */
@media (max-width:640px){
  .cta--bg{ padding: 40px 0; }
}



/* เดิม .hero มีกราเดียนต์สีเขียว เปลี่ยนเป็นพื้นหลังรูป + เลเยอร์ให้ตัวอักษรอ่านง่าย */
.hero{
  position: relative;
  padding: 28px 0;
  background: none; /* ตัดกราเดียนต์เดิมออก */
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  /* ใส่รูปของคุณแทน hero-bg.jpg */
  background-image:
    linear-gradient(160deg, rgba(0,0,0,.20), rgba(0,0,0,.40)), /* ฟิล์มทับให้อ่านง่าย */
    url("bg1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.hero > .container{ position: relative; z-index: 1; } /* ยกข้อความให้อยู่เหนือรูป */



/* สถิติเพิ่มรูปต่อช่อง */
.stat--photo{
  position: relative;
  color:#fff;                     /* ตัวอักษรขาวอ่านชัด */
  border:0;                       /* ตัดกรอบเดิม */
  overflow:hidden;
  isolation:isolate;              /* กัน overlay ทับเงา */
}
.stat--photo::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bg) center/cover no-repeat;  /* รับรูปจาก inline style */
  z-index:-2;
  transform:scale(1.02);          /* กันขอบขาวเวลา cover */
}
.stat--photo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
  z-index:-1;
}
.stat--photo .stat__big{ color:#fff; }
.stat--photo .stat__label{ color:#f1f1f1; }

/* ถ้าอยากให้มุมโค้ง/เงาเหมือนเดิม */
.stat--photo{
  border-radius:16px;
  box-shadow:var(--shadow);
}


:root{ --bg-alpha:.06; --bg-grid:26px; --bg-leaf:180px; }

body{
  background:
    radial-gradient(rgba(27,94,32,var(--bg-alpha)) 1px, transparent 1px) 0 0/var(--bg-grid) var(--bg-grid),
    url("bg-leaf.svg") 0 0/var(--bg-leaf) var(--bg-leaf),
    var(--cream);
  background-attachment: fixed, fixed, scroll;
}

/* พื้นผิวสีขาวให้มีลายธรรมชาติ */
.section,.card,.notice,.form,.stat,.profile,.footer,.cta,.stats{
  background:
    linear-gradient(var(--paper-white), var(--paper-white)), /* ชั้นสีขาวโปร่ง */
    var(--paper-bg);                                         /* ลายจุด + ใบไม้ */
  background-blend-mode: normal;   /* ให้อ่านง่าย */
}

@media (prefers-reduced-motion: reduce){
  body{ background-attachment: scroll,scroll,scroll; }
}
@media (max-width:640px){
  :root{ --bg-alpha:.045; --bg-grid:22px; --bg-leaf:140px; }
}
:root{
  --paper-white: rgba(255,255,255,.96);   /* ความทึบของพื้นขาว */
  --paper-grid: 24px;                     /* ระยะจุดกริด */
  --paper-ink: rgba(27,94,32,.06);        /* ความเข้มของลายจุด */
  --paper-leaf-size: 160px;               /* ขนาดใบไม้ */
  --paper-bg:
    radial-gradient(var(--paper-ink) 1px, transparent 1px) 0 0/var(--paper-grid) var(--paper-grid),
    url("bg-leaf.svg") 0 0/var(--paper-leaf-size) var(--paper-leaf-size);
}



/* === Paper pattern variables === */
:root{
  --paper-white: rgba(255,255,255,.96);
  --paper-ink: rgba(27,94,32,.06);
  --paper-grid: 24px;
  --paper-leaf-size: 160px;
  /* ⬇️ ปรับ path ให้ตรงตามที่วางไฟล์จริง */
  --paper-bg:
    radial-gradient(var(--paper-ink) 1px, transparent 1px)
      0 0/var(--paper-grid) var(--paper-grid),
    url("bg-leaf.svg") 0 0/var(--paper-leaf-size) var(--paper-leaf-size);
}

/* === ใส่ลายให้พื้นขาวของทุกกล่อง === */
.section,
.card,
.notice,
.form,
.stat,
.profile,
.footer,
.cta,
.stats{
  /* ใช้ background (ไม่ใช่ background-color) และใส่ !important กันโดนทับ */
  background:
    linear-gradient(var(--paper-white), var(--paper-white)),
    var(--paper-bg) !important;
  background-blend-mode: normal;
}



.section{ background:
  linear-gradient(var(--paper-white), var(--paper-white)),
  var(--paper-bg) !important; }


  /* === เปลี่ยนพื้นขาวให้เป็นพื้นหลังรูป (ทุกกล่อง) === */
/* ตั้งค่ารูปส่วนกลางครั้งเดียว */
:root{
  /* ใช้รูปของคุณเองแทนไฟล์นี้ */
  --section-bg-img: url("bg-leaf.svg");
  /* ความทึบของชั้นสีขาวที่ทับรูป (อ่านง่ายขึ้น) */
  --section-bg-tint: .88;
}

/* กลุ่มที่เมื่อก่อนเป็นพื้นขาว */
.section,
.stats,
.cta,
.footer,
.card,
.notice,
.form,
.stat:not(.stat--photo), /* กันชนกับการ์ดที่เป็นรูปอยู่แล้ว */
.profile {
  /* รูป + ฟิล์มขาวบาง ๆ เพื่อให้อ่านตัวหนังสือชัด */
  background:
    linear-gradient(
      rgba(255,255,255,var(--section-bg-tint)),
      rgba(255,255,255,var(--section-bg-tint))
    ),
    var(--section-bg-img) center / cover no-repeat !important;
}

/* ถ้าอยากใช้ลายแบบ tile (ประหยัดไฟล์) ให้ใส่ class .paper-tiling */
.paper-tiling{
  --section-bg-img: url("bg-leaf.svg"); /* ขนาดเล็ก 200~400px */
  background:
    linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),
    var(--section-bg-img) 0 0 / 320px auto repeat;
}

/* ปรับทึบ/สว่างต่อกล่องได้ด้วยตัวแปรต่อกล่อง */
.section[data-tint="light"]{ --section-bg-tint:.75; }
.section[data-tint="solid"]{ --section-bg-tint:.95; }

/* มือถือไม่ใช้ cover-fixed เพื่อความลื่น */
@media (max-width:640px){
  .section,
  .stats,
  .cta,
  .footer,
  .card,
  .notice,
  .form,
  .stat:not(.stat--photo),
  .profile{
    background-attachment: scroll;
  }
}


/* === Make hero text area transparent === */
.hero__copy{
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* สีตัวอักษรและเงาให้อ่านง่ายบนภาพ */
.hero__title,
.hero__subtitle{
  color: #fff; /* ขาวชัดบนภาพ */
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

/* ปรับปุ่มให้ชัดขึ้นบนพื้นหลังรูป (ถ้าจำเป็น) */
.hero__actions .btn--ghost{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(2px);
}

/* ถ้าพื้นหลังยังมืด/สว่างไป จูนโอเวอร์เลย์ของ hero ได้ที่นี่ */
.hero::before{
  /* เพิ่ม/ลดความทึบของชั้นทับเพื่อคอนทราสต์ข้อความ */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.25)),
    url('assets/your-hero-bg.jpg') center/cover no-repeat;
}
/* === Boost hero buttons === */
.hero__actions .btn{
  border-radius: 14px;
  padding: 12px 20px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* ปุ่มหลักให้มีมิติขึ้น */
.hero__actions .btn--primary{
  background: var(--green);
  border: 2px solid var(--green);
  color:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 0 0 0 rgba(165,214,167,.0);
}
.hero__actions .btn--primary:hover{
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 10px 24px rgba(46,125,50,.35);
  transform: translateY(-1px);
}
.hero__actions .btn--primary:active{ transform: translateY(0); }

/* ปุ่มรอง (เดิมดูจืด) → ทำให้สว่าง คอนทราสต์ชัด และ hover เติมสีเขียว */
.hero__actions .btn--ghost{
  background: rgba(255,255,255,.94);
  color: var(--green-dark);
  border: 2px solid var(--green);
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__actions .btn--ghost:hover{
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 10px 24px rgba(46,125,50,.35);
  transform: translateY(-1px);
}
.hero__actions .btn--ghost:active{ transform: translateY(0); }

/* โฟกัสดีขึ้นสำหรับคีย์บอร์ด */
.hero__actions .btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--leaf);
}

/* ลดแอนิเมชันถ้าผู้ใช้ไม่ต้องการ */
@media (prefers-reduced-motion: reduce){
  .hero__actions .btn{ transition: none; }
}

/* === CTA: make it pop === */
.cta--bg{
  position: relative;
  isolation: isolate;
  padding-block: 28px; /* มีพื้นที่หายใจ */
}

/* ใส่รูป/เลเยอร์เข้มหลัง CTA (ไม่ชนเนื้อหาหน้าอื่น) */
.cta--bg::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,.25)),
    url('assets/cta-bg.jpg') center/cover no-repeat fixed; /* เปลี่ยนเป็นรูปของคุณ */
  filter: saturate(1.05);
}

/* กล่อง CTA แบบ glass + เส้นนำสายตาสีเขียว */
.cta__box{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 18px 18px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  position:relative;
}
.cta__box::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:8px;
  background: linear-gradient(var(--leaf), var(--green));
  border-top-left-radius:16px; border-bottom-left-radius:16px;
}

/* ข้อความให้คมชัดบนพื้นหลัง */
.cta__title{
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  margin:0;
}

/* ปุ่มให้เด่นและบาลานซ์กับ “จองเลย” ด้านบน */
.cta__box .btn{
  border-radius: 14px;
  padding: 12px 20px;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cta__box .btn.btn--primary{
  background: var(--green);
  border: 2px solid var(--green);
  color:#fff;
  box-shadow: 0 8px 20px rgba(46,125,50,.35);
}
.cta__box .btn.btn--primary:hover{
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 12px 28px rgba(27,94,32,.45);
  transform: translateY(-1px);
}
.cta__box .btn.btn--primary:active{ transform: translateY(0); }

/* เวอร์ชันจอเล็ก: ซ้อนเป็นคอลัมน์ */
@media (max-width: 640px){
  .cta__box{ flex-direction: column; align-items: stretch; gap:12px; padding:16px; }
  .cta__box .btn{ width:100%; text-align:center; }
}


/* 1) ปิดโอเวอร์เลย์แถบเทาของ CTA (ต้นเหตุแปลกตา) */
.cta--bg::before{
  content: none !important;
}

/* 2) ทำกล่อง CTA แบบ glass ใสพอดี ไม่ทึบ/เทาเกิน */
.cta__box{
  background: rgba(255,255,255,.82) !important;   /* ใสกำลังดี */
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 16px;
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

/* 3) แต่งหัวข้อให้คม ไม่เป็นเงาฟุ้ง */
.cta__title{
  color:#1b1b1b;                 /* ดำอมเทาอ่านง่ายบนกล่องใส */
  text-shadow: 0 1px 6px rgba(0,0,0,.25); /* ลดเงา */
  margin: 0;
}

/* 4) ปุ่มให้บาลานซ์ ไม่เด้งเกิน */
.cta__box .btn.btn--primary{
  border-radius: 14px;
  background: var(--green);
  border: 2px solid var(--green);
  color:#fff;
  box-shadow: 0 8px 18px rgba(46,125,50,.32);
}
.cta__box .btn.btn--primary:hover{
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 12px 26px rgba(27,94,32,.4);
}

/* 5) ล้างพื้นหลัง section ถ้ายังมีสี/เทาอยู่ */
#booking.section, .cta--bg{
  background: transparent !important;
}

/* 6) ถ้าเคยใส่แถบสีเขียวนำสายตาไว้ที่ .cta__box::before แล้วไม่อยากให้โผล่ */
.cta__box::before{
  display: none !important;      /* เอาออกเพื่อความเรียบ */
}



/* ===== Paper presets (ทำให้พื้นขาวมีมิติ) ===== */
:root{
  --paper-0:#ffffff;
  --paper-1:#f7f9f5;         /* โทนอ่อน */
  --paper-2:#eef3ec;         /* โทนเข้มขึ้นนิด */
  --paper-ink:#1f2a1f;
}

/* กล่อง/section พื้นขาวมาตรฐาน */
.paper{
  position: relative;
  isolation: isolate;
  background: var(--paper-0);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(0,0,0,.08);
}

/* 1) แบ่งเฉดบน→ล่าง (ไม่เข้มทั้งผืน) */
.paper--split{
  background:
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.02) 55%, rgba(0,0,0,.04) 100%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1));
}

/* 2) มีแถบกลางนุ่ม ๆ (กลางเข้มนิด ๆ) */
.paper--band{
  background:
    radial-gradient(120% 60% at 50% 50%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.02) 55%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1));
}

/* 3) วงรีกึ่งกลาง (เข้มนิด ๆ ให้ดูมีลึก) */
.paper--spot{
  background:
    radial-gradient(80% 55% at 50% 45%, rgba(0,0,0,.06) 0%, rgba(0,0,0,.015) 60%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, var(--paper-0), var(--paper-2));
}

/* เส้นแบ่งนวล ๆ ระหว่างบล็อก (ถ้าอยากแยกส่วน) */
.paper--divider::after{
  content:"";
  position:absolute; left:24px; right:24px; top:50%;
  height:1px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.08), rgba(0,0,0,0));
  opacity:.45;
  pointer-events:none;
}

/* ปรับข้อความบนพื้นกระดาษให้คม */
.paper .section__title,
.paper p{ color: var(--paper-ink); }

/* ถ้ากล่องอยู่บนรูป/วิดีโอ ให้เพิ่ม glass เบา ๆ */
.paper--glass{
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.84));
  backdrop-filter: blur(6px) saturate(1.02);
  -webkit-backdrop-filter: blur(6px) saturate(1.02);
}



/* ===== Green-tinted papers (กลิ่นเขียวตามแบรนด์) ===== */
/* ไล่เฉดแนวนอนบาง ๆ ด้านบน → ล่าง */
.paper--tint-split{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--leaf) 12%, transparent) 0%,
      color-mix(in oklab, var(--green-light) 10%, transparent) 50%,
      color-mix(in oklab, var(--green) 8%, transparent) 100%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1));
}

/* วงรีกลางเขียวอ่อน ให้รู้สึกมี “ลมหายใจ” ตรงกลาง */
.paper--tint-spot{
  background:
    radial-gradient(85% 60% at 50% 48%,
      color-mix(in oklab, var(--leaf) 14%, transparent) 0%,
      color-mix(in oklab, var(--green-light) 8%, transparent) 55%,
      transparent 75%),
    linear-gradient(180deg, var(--paper-0), var(--paper-2));
}

/* แถบกลางนุ่ม ๆ โทนเขียว (เหมาะกับพื้นที่ยาว) */
.paper--tint-band{
  background:
    radial-gradient(140% 70% at 50% 50%,
      color-mix(in oklab, var(--green) 10%, transparent) 0%,
      color-mix(in oklab, var(--leaf) 6%, transparent) 55%,
      transparent 70%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1));
}

/* เส้นขอบ/เงาให้ไปทางเขียวเบา ๆ */
.paper--tint-border{
  border-color: color-mix(in oklab, var(--green) 20%, rgba(0,0,0,.06));
  box-shadow:
    0 10px 32px color-mix(in oklab, var(--green) 18%, rgba(0,0,0,.08));
}

/* ถ้าอยู่บนรูป: เติม glass + เขียวจาง ๆ เพื่อคอนทราสต์ */
.paper--tint-glass{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, #fff 88%, var(--green-light) 6%),
      color-mix(in oklab, #fff 84%, var(--leaf) 6%));
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}
/* ===== Green-tinted papers (พื้นขาวกลิ่นเขียว) ===== */
:root{
  /* ถ้ายังไม่มีตัวแปรสีพวกนี้ ให้ตั้งสำรองไว้ก่อน */
  --green: #2e7d32;
  --green-light: #66bb6a;
  --leaf: #5fa463;

  --paper-0:#ffffff;
  --paper-1:#f7f9f5;
  --paper-2:#eef3ec;
}

.paper{
  position: relative;
  isolation: isolate;
  background: var(--paper-0);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(0,0,0,.08);
}

/* ไล่เฉดแนวตั้งจาง ๆ */
.paper--tint-split{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--leaf) 12%, transparent) 0%,
      color-mix(in oklab, var(--green-light) 10%, transparent) 50%,
      color-mix(in oklab, var(--green) 8%, transparent) 100%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1));
}

/* วงรีกลางนุ่ม ๆ โทนเขียว */
.paper--tint-spot{
  background:
    radial-gradient(85% 60% at 50% 48%,
      color-mix(in oklab, var(--leaf) 14%, transparent) 0%,
      color-mix(in oklab, var(--green-light) 8%, transparent) 55%,
      transparent 75%),
    linear-gradient(180deg, var(--paper-0), var(--paper-2));
}

/* แถบกลางยาว ๆ โทนเขียว */
.paper--tint-band{
  background:
    radial-gradient(140% 70% at 50% 50%,
      color-mix(in oklab, var(--green) 10%, transparent) 0%,
      color-mix(in oklab, var(--leaf) 6%, transparent) 55%,
      transparent 70%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1));
}

/* ขอบ/เงาเอียงไปทางเขียวเบา ๆ */
.paper--tint-border{
  border-color: color-mix(in oklab, var(--green) 20%, rgba(0,0,0,.06));
  box-shadow: 0 10px 32px color-mix(in oklab, var(--green) 18%, rgba(0,0,0,.08));
}

/* สำหรับกล่องบนพื้นหลังรูป */
.paper--tint-glass{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, #fff 88%, var(--green-light) 6%),
      color-mix(in oklab, #fff 84%, var(--leaf) 6%));
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}

/* Fallback ถ้าเบราว์เซอร์ไม่รองรับ color-mix (เอาออกได้ถ้าไม่ต้องการ) */
@supports not (background: color-mix(in oklab, red 10%, transparent)) {
  .paper--tint-split{ background:
    linear-gradient(180deg, rgba(95,164,99,.12) 0%, rgba(102,187,106,.10) 50%, rgba(46,125,50,.08) 100%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1)); }
  .paper--tint-spot{ background:
    radial-gradient(85% 60% at 50% 48%, rgba(95,164,99,.14) 0%, rgba(102,187,106,.08) 55%, transparent 75%),
    linear-gradient(180deg, var(--paper-0), var(--paper-2)); }
  .paper--tint-band{ background:
    radial-gradient(140% 70% at 50% 50%, rgba(46,125,50,.10) 0%, rgba(95,164,99,.06) 55%, transparent 70%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1)); }
  .paper--tint-border{ border-color: rgba(46,125,50,.2); box-shadow: 0 10px 32px rgba(46,125,50,.18); }
  .paper--tint-glass{ background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.86)); }
}


/* ======================= FIX PACK (drop-in) ======================= */

/* 0) ตัวแปรหลัก (สำรอง ถ้ายังไม่มี) */
:root{
  --green:#2E7D32; --green-dark:#1B5E20; --green-light:#A5D6A7; --leaf:#81C784;
  --paper-0:#ffffff; --paper-1:#f7f9f5; --paper-2:#eef3ec;
  --paper-white: rgba(255,255,255,.96);
  --paper-ink: rgba(27,94,32,.06);
  --paper-grid: 24px;
  --paper-leaf-size: 160px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --paper-bg:
    radial-gradient(var(--paper-ink) 1px, transparent 1px)
      0 0/var(--paper-grid) var(--paper-grid),
    url("bg-leaf.svg") 0 0/var(--paper-leaf-size) var(--paper-leaf-size);
}

/* 1) Paper base – ใช้ลาย “กระดาษ” กับ .paper เท่านั้น เพื่อไม่ชนของเดิม */
.paper{
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(0,0,0,.08);
  background:
    linear-gradient(var(--paper-white), var(--paper-white)),
    var(--paper-bg) !important;  /* บังคับทับของเดิม */
  background-blend-mode: normal;
}

/* 1.1) มิติพื้นขาวแบบเทาอ่อน */
.paper--split{
  background:
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.02) 55%, rgba(0,0,0,.04) 100%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1)) !important;
}
.paper--band{
  background:
    radial-gradient(120% 60% at 50% 50%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.02) 55%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1)) !important;
}
.paper--spot{
  background:
    radial-gradient(80% 55% at 50% 45%, rgba(0,0,0,.06) 0%, rgba(0,0,0,.015) 60%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, var(--paper-0), var(--paper-2)) !important;
}
/* บนพื้นรูป: glass นิด ๆ */
.paper--glass{
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.84)) !important;
  backdrop-filter: blur(6px) saturate(1.02);
  -webkit-backdrop-filter: blur(6px) saturate(1.02);
}

/* 1.2) ไล่เฉด “โทนเขียวแบรนด์” */
.paper--tint-split{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--leaf) 12%, transparent) 0%,
      color-mix(in oklab, var(--green-light) 10%, transparent) 50%,
      color-mix(in oklab, var(--green) 8%, transparent) 100%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1)) !important;
}
.paper--tint-spot{
  background:
    radial-gradient(85% 60% at 50% 48%,
      color-mix(in oklab, var(--leaf) 14%, transparent) 0%,
      color-mix(in oklab, var(--green-light) 8%, transparent) 55%,
      transparent 75%),
    linear-gradient(180deg, var(--paper-0), var(--paper-2)) !important;
}
.paper--tint-band{
  background:
    radial-gradient(140% 70% at 50% 50%,
      color-mix(in oklab, var(--green) 10%, transparent) 0%,
      color-mix(in oklab, var(--leaf) 6%, transparent) 55%,
      transparent 70%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1)) !important;
}
.paper--tint-border{
  border-color: color-mix(in oklab, var(--green) 20%, rgba(0,0,0,.06)) !important;
  box-shadow: 0 10px 32px color-mix(in oklab, var(--green) 18%, rgba(0,0,0,.08)) !important;
}
.paper--tint-glass{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, #fff 88%, var(--green-light) 6%),
      color-mix(in oklab, #fff 84%, var(--leaf) 6%)) !important;
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
}
/* fallback ถ้า color-mix ไม่รองรับ */
@supports not (background: color-mix(in oklab, red 10%, transparent)) {
  .paper--tint-split{ background:
    linear-gradient(180deg, rgba(95,164,99,.12) 0%, rgba(102,187,106,.10) 50%, rgba(46,125,50,.08) 100%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1)) !important; }
  .paper--tint-spot{ background:
    radial-gradient(85% 60% at 50% 48%, rgba(95,164,99,.14) 0%, rgba(102,187,106,.08) 55%, transparent 75%),
    linear-gradient(180deg, var(--paper-0), var(--paper-2)) !important; }
  .paper--tint-band{ background:
    radial-gradient(140% 70% at 50% 50%, rgba(46,125,50,.10) 0%, rgba(95,164,99,.06) 55%, transparent 70%),
    linear-gradient(180deg, var(--paper-0), var(--paper-1)) !important; }
  .paper--tint-border{ border-color: rgba(46,125,50,.2) !important; box-shadow: 0 10px 32px rgba(46,125,50,.18) !important; }
  .paper--tint-glass{ background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.86)) !important; }
}

/* 2) HERO slideshow – ปรับเป็น 5 รูป */
.hero__visual img{ animation: heroFade 30s infinite !important; }
.hero__visual img:nth-child(1){ animation-delay: 0s !important;  }
.hero__visual img:nth-child(2){ animation-delay: 6s !important;  }
.hero__visual img:nth-child(3){ animation-delay: 12s !important; }
.hero__visual img:nth-child(4){ animation-delay: 18s !important; }
.hero__visual img:nth-child(5){ animation-delay: 24s !important; }
@keyframes heroFade{
  0%{opacity:0} 6%{opacity:1} 28%{opacity:1} 34%{opacity:0} 100%{opacity:0}
}

/* 3) HERO ข้อความโปร่งใส + อ่านชัด */
.hero__copy{ background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
.hero__title, .hero__subtitle{ color:#fff !important; text-shadow:0 2px 12px rgba(0,0,0,.55) !important; }

/* 4) CTA – ใช้เวอร์ชัน clean glass อย่างเดียว (ปิด ::before เก่า) */
.cta--bg::before{ content: none !important; }
.cta__box{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(8px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}
.cta__title{ color:#1b1b1b !important; text-shadow:0 1px 6px rgba(0,0,0,.25) !important; }
.cta__box .btn.btn--primary{
  border-radius:14px !important; background:var(--green) !important; border:2px solid var(--green) !important; color:#fff !important;
  box-shadow:0 8px 18px rgba(46,125,50,.32) !important;
}
.cta__box .btn.btn--primary:hover{
  background:var(--green-dark) !important; border-color:var(--green-dark) !important;
  box-shadow:0 12px 26px rgba(27,94,32,.4) !important;
}

/* 5) Navbar – ใช้ชุดเดียวให้เสถียร */
.nav__bar{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  height: 72px !important;
}
.nav__bar .menu{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 16px !important;
  margin-left: 0 !important;
}
.nav__bar .nav__cta{ margin-left: auto !important; order: 98 !important; }
.nav__bar .langdd{ order: 99 !important; margin-left: 8px !important; }
.nav__bar .hamburger{ order: 100 !important; margin-left: 8px !important; }
.nav__bar:not(:has(.nav__cta)) .langdd{ margin-left: auto !important; }
@media (max-width:1180px){
  .nav__bar .menu{ display: none !important; }
  .nav__bar .nav__cta{ display: inline-flex !important; }
  .nav__bar .langdd{ display: inline-flex !important; }
}

/* ===================== END FIX PACK ===================== */


/* ===== Fix: ทำข้อความในคอมเมนต์ให้อ่านชัด ===== */

/* กล่องสไลด์เป็นพื้นขาวทึบขึ้นนิด */
#testimonials .tsl__viewport{
  background: rgba(255,255,255,.98) !important;
  border-color: rgba(0,0,0,.06) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* การ์ดรีวิวให้ขาวทึบ + เงานุ่ม */
#testimonials .tcard{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.06) !important;
}

/* ตัวหนังสือ: เข้มขึ้นและอ่านง่าย */
#testimonials .tcard__quote{
  color:#1e2a1f !important;     /* เขียวเข้มอมดำ */
  line-height:1.7;
  font-weight:700;
  text-shadow:none;
}
#testimonials .tcard__meta{
  color:#404a43 !important;     /* เมตา (ชื่อ-ประเทศ) ให้เข้มขึ้น */
  font-weight:800;
}

/* ป้องกันกรณีมีสไตล์อื่นไปลดความทึบของข้อความ */
#testimonials .tcard__quote .i18n,
#testimonials .tcard__meta .i18n{
  opacity:1 !important;
}

/* ปุ่มเลื่อนให้เด่นขึ้นเล็กน้อย */
#testimonials .tsl__nav{
  background:#fff !important;
  border-color: rgba(0,0,0,.06) !important;
  color: var(--green-dark) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
#testimonials .tsl__nav:hover{ background:#f3fff5 !important; }
/* ทำหัวข้อในส่วน Testimonials ชัดขึ้น */
#testimonials .section__title{
  color:#16311f !important;      /* เขียวเข้มอมดำ */
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:none;               /* ตัดเงาฟุ้ง */
}
/* ===== Testimonials uses brand palette (ชัดขึ้น) ===== */
#testimonials{
  /* ดึงจากตัวแปรแบรนด์ แล้วเร่งความเข้มด้วย color-mix */
  --bg1: color-mix(in oklab, var(--leaf) 22%, #fff);
  --bg2: color-mix(in oklab, var(--green-light) 28%, #fff);
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%) !important;
  border-top: 1px solid color-mix(in oklab, var(--green) 30%, #0000);
  border-bottom: 1px solid color-mix(in oklab, var(--green) 30%, #0000);
}

/* กล่องสไลด์ให้คมบนพื้นหลังเขียว (ยังใช้สีแบรนด์เดิม) */
#testimonials .tsl__viewport{
  background:#fff !important;
  border-color: color-mix(in oklab, var(--green) 24%, #0000);
  box-shadow: 0 12px 28px color-mix(in oklab, var(--green) 22%, rgba(0,0,0,.16));
}

/* ตัวอักษรให้คอนทราสต์ขึ้น */
#testimonials .section__title{ color: var(--green-dark); font-weight:900; }
#testimonials .tcard__quote{ color:#1b1b1b; font-weight:700; }
#testimonials .tcard__meta{ color: color-mix(in oklab, var(--green-dark) 60%, #333); }

/* Fallback ถ้าเบราว์เซอร์ไม่รองรับ color-mix */
@supports not (color: color-mix(in oklab, red 50%, white)){
  #testimonials{
    background: linear-gradient(180deg, #e7f2ea 0%, #dceddf 100%) !important;
    border-top:1px solid #a5d6a7;
    border-bottom:1px solid #a5d6a7;
  }
  #testimonials .tsl__viewport{
    border-color:#9ccc9c;
    box-shadow:0 12px 28px rgba(46,125,50,.18);
  }
}
/* === Bold & Readability Boost (วางท้ายไฟล์) === */

/* ใช้เส้นขอบตัวหนังสือบาง ๆ เวลาวางบนรูป */
:root{
  --text-stroke: .6px;
  --text-stroke-color: rgba(0,0,0,.35);
}

/* หนักขึ้นทั่ว ๆ ไป */
h1, h2, h3,
.section__title,
.brand,
.footer__title{
  font-weight: 900;            /* หนักสุดของฟอนต์ (เบราว์เซอร์จะซินธ์ถ้าไม่มีน้ำหนักนี้) */
  letter-spacing: .2px;
}

.menu__link,
.btn,
.stat__big,
.price,
.tcard__quote,
.tcard__meta{
  font-weight: 800;            /* ปุ่ม/เมนู/สถิติ/รีวิวให้เด่นขึ้น */
}

/* ข้อความบนพื้น "รูป" ให้หนา + มีสโตรกอ่านชัด */
.hero__title,
.hero__subtitle,
.stat--photo .stat__big,
.stat--photo .stat__label{
  -webkit-text-stroke: var(--text-stroke) var(--text-stroke-color);
  text-shadow:
    0 2px 10px rgba(0,0,0,.35),   /* เงาฟุ้งนุ่มช่วยคอนทราสต์ */
    0 1px 2px rgba(0,0,0,.25);
}

/* หัวข้อในส่วน Testimonials ให้หนาและคอนทราสต์ชัด */
#testimonials .section__title{
  font-weight: 900;
  color: var(--green-dark);
}

/* ตัวรีวิวให้หนาขึ้น (แต่ยังคม) */
#testimonials .tcard__quote{
  font-weight: 800;
  color: #162218;              /* เขียวเข้มอมดำ อ่านง่ายกว่าเทา */
}
#testimonials .tcard__meta{
  font-weight: 800;
  color: #2a3a2e;
}

/* ปุ่มให้ตัวหนาและเด่นขึ้นอีกนิด */
.btn{
  font-weight: 900;
}
.btn--primary{
  box-shadow: 0 8px 18px rgba(46,125,50,.26);
}
.btn--primary:hover{
  box-shadow: 0 12px 26px rgba(27,94,32,.36);
}

/* ถ้าข้อความหนาเกินบนจอเล็ก ลดสโตรกลงนิดนึง */
@media (max-width:640px){
  :root{ --text-stroke: .45px; }
}



/* === Accent cards: เขียวเข้ม + กรอบไล่สี + พื้นมีมิติ === */
.card--accent{
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--green-light) 10%, #fff) 0%,
      #fff 28%),
    #fff;
  border: 1px solid color-mix(in oklab, var(--green) 26%, #0000);
  box-shadow:
    0 10px 28px rgba(0,0,0,.10),
    0 2px 0 rgba(46,125,50,.06) inset;
}

/* กรอบไล่สีรอบการ์ด (สวยแต่ไม่แรงเกิน) */
.card--accent::before{
  content:"";
  position:absolute; inset:0; padding:2px; border-radius:16px;
  background: linear-gradient(135deg, #0f3f19, #1B5E20, #2E7D32, #66BB6A);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;     /* ทำให้เป็น “ขอบ” */
  pointer-events:none;
  opacity:.9;
}

/* แถบหัวไล่สีด้านบน (นำสายตาและเพิ่มคอนทราสต์) */
.card--accent::after{
  content:"";
  position:absolute; left:12px; right:12px; top:12px; height:6px;
  border-radius:6px;
  background: linear-gradient(90deg, #0f3f19, #1B5E20 35%, #2E7D32 70%, #66BB6A);
  opacity:.95;
}

/* ตัวหนังสือในการ์ดให้เข้มขึ้นอ่านง่าย */
.card--accent .card__title{ color:#18361f; font-weight:900; }
.card--accent .card__text { color:#2e3b31; font-weight:700; }

/* ปุ่มในการ์ดให้เข้มและเด้งขึ้น */
.card--accent .btn--primary{
  background:#1B5E20; border-color:#1B5E20;
  box-shadow:0 8px 18px rgba(27,94,32,.28);
}
.card--accent .btn--primary:hover{
  background:#104a16; border-color:#104a16;
  box-shadow:0 12px 26px rgba(16,74,22,.38);
}

/* โฮเวอร์ยกการ์ดนิดหน่อย */
.card--accent:hover{ transform: translateY(-2px); transition:transform .18s, box-shadow .18s; }
.card--accent:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.14); }

/* ราคา: ทำตัวเลขให้เข้มขึ้น */
.card--accent .price{ color:#1B5E20; font-weight:900; }
/* === Reuse the 'testimonials' look for any section === */
/* พื้นหลังไล่สีเขียว + เส้นขอบจาง ๆ แบบ #testimonials */
.section--brand{
  /* ใช้พาเล็ตเดียวกับ testimonials */
  --bg1: color-mix(in oklab, var(--leaf) 22%, #fff);
  --bg2: color-mix(in oklab, var(--green-light) 28%, #fff);

  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%) !important;
  border-top: 1px solid color-mix(in oklab, var(--green) 30%, #0000);
  border-bottom: 1px solid color-mix(in oklab, var(--green) 30%, #0000);
  padding-block: 56px; /* เผื่อให้ดูโปร่ง */
}

/* การ์ดภายในให้เป็นพื้นขาวคม มีเงา เหมือนใน testimonials */
.section--brand .card{
  background:#fff !important;
  border:1px solid color-mix(in oklab, var(--green) 24%, #0000);
  border-radius:16px;
  box-shadow:0 12px 28px color-mix(in oklab, var(--green) 22%, rgba(0,0,0,.16));
}

/* ตัวอักษรให้คอนทราสต์ดีขึ้น */
.section--brand .section__title{ color: var(--green-dark); font-weight:900; }
.section--brand .card__title{ color:#1b2d20; font-weight:800; }
.section--brand .card__text{ color:#2e3b31; font-weight:700; }
.section--brand .price{ color:#1B5E20; font-weight:900; }
.section--brand .btn--primary{
  background:#1B5E20; border-color:#1B5E20;
  box-shadow:0 8px 18px rgba(27,94,32,.28);
}
.section--brand .btn--primary:hover{
  background:#104a16; border-color:#104a16;
  box-shadow:0 12px 26px rgba(16,74,22,.38);
}

/* เวอร์ชันเข้มขึ้นเล็กน้อย (ถ้าอยากใช้) */
.section--brand--dark{
  --bg1: color-mix(in oklab, var(--leaf) 32%, #f6fff8);
  --bg2: color-mix(in oklab, var(--green-light) 40%, #f6fff8);
}

/* Fallback เมื่อเบราว์เซอร์ไม่รองรับ color-mix */
@supports not (color: color-mix(in oklab, red 50%, white)){
  .section--brand{
    background: linear-gradient(180deg, #e7f2ea 0%, #dceddf 100%) !important;
    border-top:1px solid #a5d6a7; border-bottom:1px solid #a5d6a7;
  }
  .section--brand .card{ border-color:#9ccc9c; box-shadow:0 12px 28px rgba(46,125,50,.18); }
}
/* โทนสีลายให้ลึกขึ้น (ใช้กับใบไม้/คลื่น/จุด/ทแยง) */
.pattern--deep   { --pat-opacity:.28; }
.pattern--brand  { --pat-img: var(--pat-img); filter: saturate(1.1); } /* ดันสีเล็กน้อย */
.pattern--mix    { mix-blend-mode: multiply; }  /* ทำให้สีเขียวกลืนพื้นเข้มขึ้น */

/* โทนสีกลางคืน/ป่าเข้ม */
:root{
  --pattern-ink: rgba(27,94,32,.10);
}
.pattern--leaf::after,
.pattern--waves::after,
.pattern--dots::after,
.pattern--weave::after{
  /* ถ้าอยากปรับสีรวม ให้ใช้ตัวแปรนี้แทนตรงใน SVG/gradient */
  filter: contrast(1.05) saturate(1.05);
}
/* === Global roundness & soft borders (override) === */
:root{
  --radius: 16px;          /* เปลี่ยนเลขนี้ครั้งเดียวทั้งเว็บ */
  --radius-lg: 18px;
  --line: rgba(0,0,0,.06); /* สีเส้นคั่น/เส้นขอบหลัก */
}

/* กลุ่มกล่องหลักให้ขอบมนเหมือนกัน */
.nav,
.drawer,
.drawer__overlay,
.cta__box,
.footer,
.section,
.stats,
.stat,
.card,
.tcard,
.tsl__viewport,
.notice,
.form,
.profile,
.hero__copy {
  border-radius: var(--radius) !important;
  overflow: hidden; /* กันลูกหลุดมุมมน */
}

/* การ์ด/รูปภายในการ์ด/สถิติให้ตามมุมพ่อ */
.card__thumb,
.profile .avatar,
.stat--photo,
.stat--photo::before,
.hero__visual,
.hero__visual img,
.map,
.map iframe,
.gallery-item,
.gallery-item img,
.tsl__viewport,
.lb__img,
.modal__dialog,
.modal__media img {
  border-radius: inherit !important;
}

/* ปุ่มให้มนมากขึ้นเล็กน้อย */
.btn { border-radius: var(--radius) !important; }
.btn--sm { border-radius: calc(var(--radius) - 2px) !important; }

/* อินพุตและ select/textarea มนเหมือนกัน */
input[type=text], input[type=email], input[type=date], input[type=time],
input[type=number], input[type=tel], input[type=password],
input[type=search], input[type=url], select, textarea {
  border-radius: var(--radius) !important;
}

/* เมนูมือถือ/ฮีโร่/แกลเลอรี */
.hamburger,
.tsl__nav,
.lb__nav,
.lb__close {
  border-radius: var(--radius) !important;
}

/* ===== เส้นคั่น/เส้นขอบให้เนียน บาง สีอ่อน ===== */

/* เส้นคั่นในพื้นที่ต่าง ๆ */
.footer__bottom,
.cta,
.stats,
.section,
.form,
.notice {
  border: 1px solid var(--line) !important;
}

/* เส้นคั่นรายการเวลา/ลิสต์ (เหลือเส้นเฉพาะที่จำเป็น) */
.hours__list li{
  border-bottom: 1px dashed color-mix(in oklab, var(--line) 80%, transparent) !important;
}
.hours__list li:last-child{ border-bottom: 0 !important; }

/* กรอบการ์ด/สไลด์/รีวิวให้บางลง */
.card,
.tcard,
.tsl__viewport,
.stat,
.profile,
.form,
.notice {
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.08); /* เงานุ่มแทนเส้นหนา */
}

/* เส้นคั่นหัวท้าย section (ไม่ลากสุดขอบด้วย padding optical) */
.section{
  padding-block: 56px;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--line) 100%, transparent),
    inset 0 -1px 0 color-mix(in oklab, var(--line) 100%, transparent);
}

/* แถบล่างของฟุตเตอร์ให้บางและโค้ง */
.footer__bottom{
  border-top: 1px solid var(--line) !important;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* เส้นแบ่งใน nav/drawer เบาลง */
.nav{ border: 1px solid var(--line) !important; }
.drawer{ border-bottom: 1px solid var(--line) !important; }

/* เส้นไกด์ในสเต็ปเปอร์/องค์ประกอบจิ๋ว */
.stepper__item .dot{ border-radius: 999px; border-color: var(--line) !important; }
.stepper__sep{ background: var(--line) !important; }

/* ปุ่มลูกศรสไลด์/ไลท์บ็อกซ์ – เงานุ่ม ไม่แข็ง */
.tsl__nav, .lb__nav, .lb__close{
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;
}

/* กล่อง CTA/hero glass ให้มนขึ้นและคอนทราสต์พอดี */
.cta__box{
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: var(--radius-lg) !important;
}

/* ถ้าการ์ด accent/รูปแบบพิเศษมี ::before/::after ให้เคารพมุมพ่อ */
.card--accent::before,
.card--accent::after{
  border-radius: inherit !important;
}

/* กันกรณีบางบล็อกโดนระบุ border-radius ตายตัวไว้ก่อนหน้า */
* { border-radius: inherit; }
:root{ --radius: 20px; --radius-lg: 22px; }  /* ตัวอย่างมนขึ้น */

/* ===== Testimonials Readability Upgrade (drop-in) ===== */
#testimonials .tsl__viewport{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.06) !important;
  border-radius:16px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.10) !important;
  padding:16px !important;
}

/* การ์ดคอมเมนต์ให้อ่านง่ายขึ้น */
#testimonials .tcard{
  position:relative;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.06) !important;
  border-radius:16px !important;     /* ขอบมน */
  box-shadow:0 8px 18px rgba(0,0,0,.06) !important;
  padding:18px 18px 16px 22px !important;
  line-height:1.75;
  transition:transform .15s ease, box-shadow .15s ease;
}
#testimonials .tcard:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.10) !important;
}

/* ใส่เครื่องหมายคำพูดเปิดจาง ๆ เป็นไกด์สายตา */
#testimonials .tcard::before{
  content:"“";
  position:absolute; left:12px; top:6px;
  font-size:44px; line-height:1;
  color: var(--green-dark);
  opacity:.10; pointer-events:none;
}

/* เนื้อคอมเมนต์ให้คมและใหญ่ขึ้นเล็กน้อย */
#testimonials .tcard__quote{
  margin:8px 0 10px !important;
  font-size:1.05rem;               /* ใหญ่ขึ้นนิด */
  font-weight:800;                 /* หนาชัด */
  color:#162218 !important;        /* เขียวเข้มอมดำ */
  text-shadow:none !important;     /* ตัดเงาฟุ้ง */
}

/* เมตา (ชื่อ-ประเทศ) ให้จัดวางอ่านง่าย และคอนทราสต์ดี */
#testimonials .tcard__meta{
  display:flex; align-items:center; gap:10px;
  margin-top:8px;
  font-weight:800;
  color:#2a3a2e !important;
  opacity:.95;
}

/* เส้นคั่นนุ่ม ๆ ระหว่างคอมเมนต์หลายบรรทัด (ถ้าต้องการ) */
#testimonials .tcard + .tcard{
  box-shadow:
    0 -1px 0 rgba(0,0,0,.04) inset,
    0  8px 18px rgba(0,0,0,.06);
}

/* ปุ่มเลื่อนให้เห็นชัด แต่ยังมินิมอล */
#testimonials .tsl__nav{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.06) !important;
  color:var(--green-dark) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.10) !important;
  border-radius:12px !important;   /* ขอบมน */
}
#testimonials .tsl__nav:hover{ background:#f3fff5 !important; }

/* จอเล็ก: การ์ดอ่านง่ายและแตะได้ถนัด */
@media (max-width:640px){
  #testimonials .tcard{ padding:16px 16px 14px 20px !important; font-size:1rem; }
}
/* === Force rounded hero visual (all browsers + iOS) === */
.hero__visual{
  --hero-radius: 16px;
  border-radius: var(--hero-radius) !important;
  overflow: hidden !important;
  isolation: isolate;                 /* กันเลเยอร์อื่นมาทับขอบ */
  position: relative;                 /* เผื่อโดนรีเซ็ต */
}

/* ให้รูปด้านในเคารพมุมคอนเทนเนอร์ */
.hero__visual img{
  border-radius: inherit !important;
  display: block;
}

/* กันเคส Safari/iOS บางรุ่นที่ยังเห็นเหลี่ยมมุม */
@supports (-webkit-touch-callout: none) {
  .hero__visual{
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}

/* ถ้าอยากเพิ่มความมนมากขึ้นก็ปรับตัวแปรนี้จุดเดียวได้ */
@media (max-width:640px){
  .hero__visual{ --hero-radius: 14px; }
}
/* === Footer Contrast Fix (force readable) === */
.footer{
  background: rgba(255,255,255,.96) !important; /* ขาวเกือบทึบ */
  backdrop-filter: blur(0px) !important;        /* ไม่ต้องเบลอแล้ว */
  -webkit-backdrop-filter: blur(0px) !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 16px !important;               /* มุมมนตามธีม */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  background-image: none !important;            /* ตัดลาย/แพทเทิร์นที่เคยซ้อน */
}

/* ชั้นล่างสุดของ footer ให้เป็นพื้นทึบเช่นกัน */
.footer__bottom{
  background: #ffffff !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
}

/* สีตัวอักษรให้เข้มขึ้นทุกบล็อกใน footer */
.footer__grid,
.footer__bottom__inner,
.footer__col,
.footer__text,
.footer__address,
.footer__list,
.footer__links{
  color: #1e2a22 !important;
}

/* หัวข้อและแบรนด์ให้เข้มชัด */
.footer__title,
.footer .brand,
.footer .brand .brand__text{
  color: #16311f !important;
  text-shadow: none !important;
  font-weight: 900;
}

/* ลิงก์ใน footer: สีเข้ม, hover/focus คอนทราสต์ดี */
.footer a{
  color: #1B5E20 !important;
  text-decoration: none;
  font-weight: 800;
}
.footer a:hover,
.footer a:focus-visible{
  color: #0f3f19 !important;
  text-decoration: underline;
  outline: none;
}

/* รายการเวลา/ที่อยู่ให้ตัดคำได้ และไม่จาง */
.footer__address,
.footer__list li{
  color: #2b2b2b !important;
  overflow-wrap: anywhere;
}

/* ไอคอนโซเชียลให้ตัดกับพื้นหลัง */
.footer .social-icon{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.footer .social-icon svg{ color:#1B5E20 !important; }
.footer .social-icon:hover{ background:#f3fff5 !important; }

/* กันเคสที่ section/paper ไปทับพื้นหลัง footer */
.footer.paper,
.footer.paper--split,
.footer.paper--tint-*,        /* จับทุกคลาส tint ถ้ามี */
.footer.pattern,
.footer.section{
  background: #fff !important;
  background-image: none !important;
}

/* มุมมนภาพโลโก้ (ถ้าต้องการให้ไปในธีมเดียวกัน) */
.footer .brand__logo{
  border-radius: 10px;
}
/* === Footer tagline contrast fix === */
.footer__tagline{
  color:#16311f !important;     /* เขียวเข้มอมดำ อ่านชัด */
  font-weight: 800 !important;  /* หนาขึ้น */
  text-shadow: none !important; /* ตัดเงาฟุ้ง */
  opacity: 1 !important;        /* กันถูกลดความทึบจากสไตล์อื่น */
}

/* กันเคสที่ span.i18n ถูกทำให้จาง */
.footer__tagline .i18n{ opacity:1 !important; }

/* ถ้าพื้นหลัง footer โปร่งจนทำให้ดูจาง ให้ทึบขึ้นนิด */
.footer{
  background: rgba(255,255,255,.96) !important;
  background-image: none !important; /* ตัดลายทับที่อาจทำให้ลายตา */
}
/* === Language dropdown hard reset & layout === */
.langdd{ position:relative; z-index:25; display:inline-flex; margin-left:8px; }
.langdd__btn{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:#fff; color:#1B5E20;
  font-weight:800; cursor:pointer; box-shadow:var(--shadow);
}
.langdd__btn:hover{ background:#f3fff5; }
.langdd__chev{ transition:transform .15s ease; }
.langdd[data-open="true"] .langdd__chev{ transform:rotate(180deg); }

.langdd__flag{ width:20px; height:20px; border-radius:3px; object-fit:cover; display:inline-block; }

.langdd__menu{
  position:absolute; right:0; top:calc(100% + 6px);
  min-width:180px; padding:6px; margin:0; list-style:none;
  background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow);
  display:none; z-index:30;
}
.langdd[data-open="true"] .langdd__menu{ display:block; }

.langdd__item{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px; border:0; background:transparent;
  cursor:pointer; text-align:left; font-weight:800; color:#2b2b2b;
}
.langdd__item:hover, .langdd__item:focus-visible{ background:#f3fff5; outline:none; }

/* จัดตำแหน่งฝั่งขวาให้ “จอง” อยู่ก่อน แล้วปุ่มภาษาอยู่ถัดไป ติดขวา */
.nav__bar{ position:relative; display:flex; align-items:center; gap:16px; height:72px; }
.nav__bar .menu{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:16px; margin-left:0;
}
.nav__bar .nav__cta{ margin-left:auto; order:98; }
.nav__bar .langdd{ order:99; }

/* มือถือ: ซ่อนเมนูกลาง แต่ยังให้ จอง + ภาษา แสดงเรียงชิดขวา */
@media (max-width:1180px){
  .nav__bar .menu{ display:none !important; }
  .nav__bar .nav__cta, .nav__bar .langdd{ display:inline-flex !important; }
}
/* === FIX: Language dropdown ถูกตัดโดย navbar === */
.nav,
.nav__bar{
  overflow: visible !important;   /* อย่าตัดสิ่งที่ยื่นออก (เช่นเมนูภาษา) */
}

/* ให้ปุ่ม/เมนูภาษาอยู่ชั้นบนสุดเหนือของใน .nav */
.langdd{ position: relative; z-index: 60; }   /* สูงกว่าเนื้อหาอื่นในแถบ */
.langdd__btn{ position: relative; z-index: 61; }

.langdd__menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);          /* เว้นจากปุ่มลงมา */
  z-index: 999;                   /* ลอยเหนือทุกอย่างใน header */
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  border-radius: 12px;
}

/* กันเคสที่เราเคยใส่ “ขอบมน + overflow:hidden” แบบครอบคลุมไว้ก่อนหน้า */
.nav,
.drawer,
.footer,
.section{
  /* ถ้าตรงไหนจำเป็นต้องมน ให้ใส่แค่ border-radius; ไม่ใช้ overflow:hidden กับแถบเมนู */
  border-radius: var(--radius);
}
/* === Testimonials – Premium Clean Card === */
#testimonials{ padding-block: 54px; }

/* กล่องสไลด์ */
#testimonials .tsl__viewport{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.08) !important;
  padding: 22px !important;
}
#testimonials .tsl__track{ gap: 22px; }

/* การ์ดคอมเมนต์: กรอบไล่สีบาง ๆ + เงานุ่ม */
#testimonials .tcard{
  position: relative;
  flex: 0 0 420px; max-width: 100%;
  background: linear-gradient(180deg,#fff, #fdfefe) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  border-radius: 18px !important;
  padding: 22px 24px 20px !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.06),
    0 1px 0 rgba(46,125,50,.06) inset !important;
  line-height: 1.8;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
/* กรอบไล่สีรอบการ์ด (บางและหรู) */
#testimonials .tcard::after{
  content:"";
  position:absolute; inset:0; padding:1.5px; border-radius:18px;
  background: linear-gradient(135deg,#0f3f19,#1B5E20 35%,#2E7D32 70%,#A5D6A7);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; opacity:.45;
}
/* เครื่องหมายคำพูดเปิดสวย ๆ */
#testimonials .tcard::before{
  content:"“";
  position:absolute; left:14px; top:6px;
  font-size:56px; line-height:1;
  color:#1B5E20; opacity:.08;
}

/* โฮเวอร์ยกการ์ดเบา ๆ */
#testimonials .tcard:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.10) !important;
}

/* เนื้อคอมเมนต์: ตัวใหญ่ขึ้น + จัดคอลัมน์สวย */
#testimonials .tcard__quote{
  margin: 10px 0 12px !important;
  font-size: 1.08rem;
  font-weight: 800;
  color: #162218 !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
}

/* แถบชื่อ + ประเทศ + ดาว ให้สแกนง่าย */
#testimonials .tcard__meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top: 6px;
  font-weight: 800;
  color:#2a3a2e !important;
}

/* ดาวรีวิว (ถ้าต้องการให้แสดงทุกใบโดยไม่แก้ HTML) */
#testimonials .tcard__meta::after{
  content:"★★★★★";
  letter-spacing: 1px;
  font-size: .95rem;
  color:#1B5E20; opacity:.9;
}

/* ปุ่มเลื่อน: โค้งนุ่ม ดูคลีน */
#testimonials .tsl__nav{
  width:44px; height:44px;
  border-radius: 14px !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.06) !important;
  color:#1B5E20 !important;
  box-shadow:0 6px 16px rgba(0,0,0,.10) !important;
}
#testimonials .tsl__nav:hover{ background:#f3fff5 !important; }

/* หัวข้อส่วนนี้ให้เด่นแบบแบรนด์ */
#testimonials .section__title{
  color:#16311f !important;
  font-weight: 900;
  letter-spacing:.2px;
  margin-bottom: 18px;
}

/* จอเล็ก: การ์ดกว้างกำลังพอดีเลื่อนอ่านสบาย */
@media (max-width:640px){
  #testimonials .tcard{ flex-basis: 88%; }
  #testimonials .tcard__quote{ font-size: 1.02rem; }
}
/* === Button System: clean & consistent ============================== */
:root{
  --btn-radius: 16px;
  --btn-shadow: 0 8px 18px rgba(0,0,0,.12);
  --btn-shadow-hover: 0 12px 26px rgba(0,0,0,.18);
}

.btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px !important;
  min-height:44px;
  border-radius:var(--btn-radius) !important;
  border:2px solid transparent;
  background:#fff;
  color:var(--green-dark);
  font-weight:800 !important;
  line-height:1;
  text-decoration:none !important;
  cursor:pointer;
  box-shadow: var(--btn-shadow);
  transition: transform .15s ease, box-shadow .15s ease,
              background-color .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover{ transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
.btn:active{ transform: translateY(0); box-shadow: var(--btn-shadow); }

/* Keyboard focus ring ที่อ่านง่ายทุกพื้นหลัง */
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--leaf),
    var(--btn-shadow);
}

/* — Variants — */
.btn--primary{
  background: var(--green) !important;
  border-color: var(--green) !important;
  color:#fff !important;
}
.btn--primary:hover{ background: var(--green-dark) !important; border-color: var(--green-dark) !important; }

.btn--ghost{
  background:#fff !important;
  color: var(--green-dark) !important;
  border-color: var(--green) !important;
}
.btn--ghost:hover{ background: var(--green) !important; color:#fff !important; }

/* เส้นบางเรียบ */
.btn--outline{
  background:#fff !important;
  color: var(--green-dark) !important;
  border-color: rgba(0,0,0,.12) !important;
}
.btn--outline:hover{ border-color: var(--green) !important; }

/* ขนาด */
.btn--sm{ padding:10px 14px !important; min-height:38px; font-size:.95rem; }
.btn--lg{ padding:14px 22px !important; min-height:48px; font-size:1.05rem; }

/* ปุ่มเฉพาะไอคอน (เช่นลูกศรสไลด์) */
.btn--icon{
  width:44px; height:44px; padding:0 !important;
  border-radius:14px !important;
}

/* ไอคอนในปุ่ม (ถ้ามี <svg> หรือ <i>) */
.btn svg, .btn .icon{ width:1.1em; height:1.1em; display:block; }

/* Disabled ทั้งปุ่มและลิงก์ที่ทำเป็นปุ่ม */
.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"]{
  opacity:.55; cursor:not-allowed; transform:none !important;
  box-shadow:none !important;
}

/* — Context fixes — */
/* ให้ปุ่มใน hero/cta/การ์ดหน้าตาเหมือนกัน */
.hero__actions .btn,
.cta__box .btn,
.card .btn{ border-radius:var(--btn-radius) !important; }

/* ปุ่ม “จองเลย” ใน navbar ให้ขนาดเท่ามาตรฐาน */
.nav__cta.btn,
.nav__bar .btn{ min-height:40px; padding:10px 16px !important; }

/* ปุ่มลูกศรของสไลด์/ไลต์บ็อกซ์ ใช้สไตล์ icon button เดียวกัน */
.tsl__nav, .lb__nav, .lb__close{
  composes: btn btn--icon from global;      /* ถ้าไม่รองรับ composes ให้คัดลอกสไตล์ btn--icon ด้านบน */
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  color: var(--green-dark) !important;
}
/* === Fix: ปุ่มลูกศรซ้ายโดนบังใน #testimonials === */
#testimonials .tsl{ overflow: visible; }

#testimonials .tsl__viewport{
  position: relative;
  padding-inline: 48px;     /* เผื่อที่สำหรับปุ่มทั้งสองข้าง */
  overflow-x: auto;
}

#testimonials .tsl__nav{
  z-index: 5;               /* ลอยเหนือกรอบ/เงา */
  pointer-events: auto;
}

#testimonials .tsl__prev{ left: 12px; }   /* อย่าให้ค่าติดลบ  (-10px) */
#testimonials .tsl__next{ right: 12px; }

/* ถ้าปุ่มยังถูกไส้กรอก container บัง ให้เปิดการมองเห็น */
#testimonials .container{ overflow: visible; }