/* ============================================================
   CBI — ลูกเล่นหน้าแรก (ปุ่ม, แถบเลื่อน, Hero, สินค้า)
   แนวคิด: "นุ่มและเด้ง" แบบโฟม EVA — ปุ่มยุบเมื่อกด และเด้งกลับ
   ============================================================ */
:root {
  --cbi-forest: #16493e;
  --cbi-deep: #0e3a30;
  --cbi-leaf: #2f7a5c;
  --cbi-mist: #eef4f1;
  --cbi-gold: #d9a441;
  --cbi-spring: cubic-bezier(.34, 1.56, .64, 1);
  --cbi-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ข้อความไทย: ให้ตัดบรรทัดระหว่างวลี ไม่ตัดกลางคำ */
.cbi-phrase { display: inline-block; }

/* ---------- แถบความคืบหน้าการเลื่อนหน้า ---------- */
.cbi-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 1100;
  pointer-events: none;
  background: linear-gradient(90deg, var(--cbi-forest), var(--cbi-leaf) 70%, var(--cbi-gold));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

/* ============================================================
   ปุ่มระบบเดียวกันทั้งหน้า (.cbi-btn)
   หน้าตาเดียวกับปุ่ม "อ่านเพิ่มเติม" เดิมของเว็บ: กรอบเขียวมน → เติมสีเมื่อชี้
   ลูกเล่น: สีไหลเข้าจากจุดที่เมาส์เข้า, ปุ่มเอนตามเมาส์, กดแล้วยุบแบบโฟม
   ============================================================ */
.cbi-btn {
  --mx: 0px;
  --my: 0px;
  --press: 1;
  --x: 50%;
  --y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  border: 2px solid var(--cbi-forest);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--cbi-forest) !important;
  font-family: "IBM Plex Sans Thai Looped", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate(var(--mx), var(--my)) scale(var(--press));
  transition: transform .45s var(--cbi-spring), color .35s var(--cbi-ease), box-shadow .35s var(--cbi-ease);
}
.cbi-btn__fill {
  position: absolute;
  z-index: -1;
  left: var(--x);
  top: var(--y);
  width: 260%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cbi-leaf) 0%, var(--cbi-forest) 45%, var(--cbi-deep) 100%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .6s var(--cbi-ease);
  pointer-events: none;
}
.cbi-btn__icon {
  font-size: 1.15em;
  line-height: 1;
  display: inline-block;
  transition: transform .45s var(--cbi-spring);
}
.cbi-btn:hover,
.cbi-btn:focus-visible {
  color: #fff !important;
  box-shadow: 0 12px 26px -10px rgba(22, 73, 62, .55);
}
.cbi-btn:hover .cbi-btn__fill,
.cbi-btn:focus-visible .cbi-btn__fill { transform: translate(-50%, -50%) scale(1); }
.cbi-btn:hover .cbi-btn__icon { animation: cbi-hop .7s var(--cbi-spring); }
.cbi-btn:active { --press: .94; transition-duration: .12s; }
.cbi-btn:focus-visible { outline: 3px solid var(--cbi-gold); outline-offset: 3px; }

/* ไอคอนกระโดดเบา ๆ ตอนชี้ */
@keyframes cbi-hop {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-5px) rotate(-10deg); }
  65% { transform: translateY(1px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0); }
}
/* ไอคอนลูกศรลงสำหรับปุ่มเลื่อนหน้า */
.cbi-btn--down:hover .cbi-btn__icon { animation: cbi-drop .8s var(--cbi-spring); }
@keyframes cbi-drop {
  0% { transform: translateY(0); }
  40% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

.cbi-btn--lg { padding: 16px 34px; font-size: 16px; }
.cbi-btn--sm { padding: 9px 18px; font-size: 13.5px; gap: 7px; border-width: 1.5px; }

/* ปุ่มร้านค้าออนไลน์ในเมนู: ขนาดเท่ารายการเมนูอื่น */
.navmenu .cbi-btn.cbi-nav-shop,
.navmenu .cbi-btn.cbi-nav-shop:focus {
  padding: 8px 18px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cbi-forest) !important;
  background: rgba(255, 255, 255, .55);
  justify-content: center;
}
.navmenu .cbi-btn.cbi-nav-shop:hover,
.navmenu li:hover > .cbi-btn.cbi-nav-shop {
  color: #fff !important;
  background: rgba(255, 255, 255, .55);
}
/* ล้างสไตล์ไอคอนของเมนูเทมเพลต (วงกลมเทาสำหรับลูกศร dropdown) */
.navmenu .cbi-btn.cbi-nav-shop i,
.navmenu .cbi-btn.cbi-nav-shop:focus i,
.navmenu .cbi-btn.cbi-nav-shop i:hover {
  margin: 0;
  width: auto;
  height: auto;
  font-size: 15px;
  line-height: 1;
  border-radius: 0;
  background: none;
  color: inherit;
}
.navmenu .cbi-btn.cbi-nav-shop:hover,
.navmenu .cbi-btn.cbi-nav-shop:active { color: #fff !important; }
.navmenu .cbi-nav-shop-short { display: none; }

@media (min-width: 1200px) {
  .header .logo { flex-shrink: 0; }
  .header .logo img { max-height: 52px; }
  .navmenu li { margin-left: 3px; }
  .navmenu a, .navmenu a:focus { padding: 8px 12px; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .header .logo img { max-height: 44px; }
  .navmenu li { margin-left: 2px; }
  .navmenu a, .navmenu a:focus { padding: 8px 10px; font-size: 13px; }
  .navmenu .cbi-btn.cbi-nav-shop, .navmenu .cbi-btn.cbi-nav-shop:focus { padding: 7px 14px; margin-left: 6px; font-size: 13px; }
  .navmenu .cbi-nav-shop-full { display: none; }
  .navmenu .cbi-nav-shop-short { display: inline; }
}
/* เมนูมือถือ: ปุ่มเต็มกว้าง กดง่าย */
@media (max-width: 1199px) {
  .navmenu .cbi-btn.cbi-nav-shop,
  .navmenu .cbi-btn.cbi-nav-shop:focus {
    display: flex;
    margin: 14px 20px 8px;
    padding: 14px 20px;
    font-size: 15px;
  }
}

/* ============================================================
   Header: ติดด้านบนตลอด, เป็นกระจกฝ้าและย่อขนาดลงเมื่อเลื่อนหน้า
   ============================================================ */
.header {
  transition: background-color .4s var(--cbi-ease), padding .4s var(--cbi-ease),
              box-shadow .4s var(--cbi-ease);
}
.scrolled .header {
  --background-color: rgba(255, 255, 255, .8);
  padding: 10px 0;
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
          backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 10px 30px -20px rgba(14, 58, 48, .55);
}
.header .logo img { transition: max-height .4s var(--cbi-ease), transform .5s var(--cbi-spring); }
.header .logo:hover img { transform: translateY(-1px) scale(1.02); }
.scrolled .header .logo img { max-height: 42px; }
/* เมนูเดสก์ท็อป: ชี้แล้วเป็นแคปซูลสีอ่อน ส่วนที่กำลังอยู่ยังเป็นสีเขียวเข้มเหมือนเดิม */
@media (min-width: 1200px) {
  .navmenu li:hover > a:not(.cbi-btn):not(.active) {
    background-color: rgba(22, 73, 62, .09);
    color: var(--cbi-forest);
  }
  .navmenu .dropdown ul { transform: translateY(8px); }
  .navmenu .dropdown:hover > ul { transform: translateY(0); }
}

/* ============================================================
   Hero: หัวข้อเผยทีละบรรทัดตอนเปิดหน้า + พื้นหลังขยับตามเมาส์
   ============================================================ */
.cbi-hero-title .cbi-line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
}
.cbi-hero-title .cbi-line > span {
  display: block;
  transform: translateY(105%);
  animation: cbi-rise 1s var(--cbi-ease) forwards;
}
.cbi-hero-title .cbi-line:nth-child(2) > span { animation-delay: .14s; }
.cbi-hero-sub { opacity: 0; animation: cbi-fade-up .9s var(--cbi-ease) .45s forwards; }
.cbi-hero-cta { opacity: 0; animation: cbi-fade-up .9s var(--cbi-ease) .65s forwards; }
@keyframes cbi-rise { to { transform: translateY(0); } }
@keyframes cbi-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.hero .cbi-parallax { transition: transform .9s var(--cbi-ease); will-change: transform; }

/* ============================================================
   สินค้า: แสงวิ่งผ่านรูปและซูมนุ่ม ๆ ตอนชี้
   ============================================================ */
.Product .Product-item > img {
  transition: transform .8s var(--cbi-ease), filter .5s;
}
.Product .Product-item::after {
  content: "";
  position: absolute;
  inset: 0 12px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (hover: hover) {
  .Product .Product-item:hover > img { transform: scale(1.06); }
  .Product .Product-item:hover::after { transform: translateX(120%); transition: transform 1s var(--cbi-ease); }
}

/* ---------- ลดการเคลื่อนไหวตามการตั้งค่าเครื่อง ---------- */
@media (prefers-reduced-motion: reduce) {
  .cbi-progress { display: none; }
  .header, .header .logo img { transition: none !important; }
  .cbi-btn, .cbi-btn *, .cbi-hero-title .cbi-line > span, .cbi-hero-sub, .cbi-hero-cta,
  .Product .Product-item > img, .Product .Product-item::after {
    animation: none !important;
    transition: none !important;
  }
  .cbi-hero-title .cbi-line > span { transform: none; }
  .cbi-hero-sub, .cbi-hero-cta { opacity: 1; }
  .cbi-btn { transform: none; }
}