/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ margin:0; }
:root{
  --blue:#0970fa; --orange:#fc7801; --yellow:#ffca08;
  --ink:#162a3e; --muted:#64748b; --border:#e5e7eb; --bg:#fff;
  --nav-h:80px;      /* desktop */
  --nav-h-m:64px;    /* mobile */
  --shadow:0 10px 30px rgba(0,0,0,.08);

  /* เพิ่มใหม่ (about.css เรียกใช้) */
  --brand-blue: var(--blue);         /* สีฟ้าหลักของปุ่ม/หัวข้อ */
  --brand-yellow: var(--yellow);     /* สีเหลืองเน้น */
  --brand-orange: var(--orange);     /* สีส้มเน้น */
  --radius: 16px;                    /* มุมโค้งการ์ด/อินพุต */
  --ring: 0 0 0 4px rgba(9,112,250,.15); /* เงาโฟกัสอินพุต */
}


html{ -webkit-text-size-adjust:100%; }

body{
  font-family:"Kanit",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",sans-serif;
  color: var(--ink);       /* คงตัวแปรเดิมของชุดใหม่ */
  background: #fff;        /* คงพื้นหลังเดิมของชุดใหม่ */
  line-height: 1.6;        /* ← เพิ่มบรรทัดนี้เข้ามา */
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
.no-scroll{ overflow:hidden; }

h1{ font-family:'Kanit', sans-serif; font-weight:600; } 
h2{
  font-weight:400;
  color:#342216;
  line-height:1.45;
  font-size:30px;
  margin-bottom:.75rem;
  transform:skewX(-6deg);
}

/* กล่องครอบหัวข้อ */
.heading-box{
  max-width:90%;
  margin:0 auto;
  text-align:center;
  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal;
}

@media (max-width:640px){
  .heading-box{ max-width:95%; }
  .heading-box h2{ font-size:20px; line-height:1.4; }
}

/* คำอธิบาย */
.desc{
  color:#605E5E;
  font-size:14px;
  line-height:1.7;
  margin-bottom:1rem;
}

/* Container width = 1320px */
.container{ width:min(1320px, 92vw); margin:0 auto; }

/* ===== Header (sticky) ===== */
.site-header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:2px solid var(--border); }
.nav-wrap{
  height:var(--nav-h-m);
  display:grid; grid-template-columns: auto 1fr auto; 
  align-items:center; gap:12px;
}
.hamburger{ justify-self:start; }
.logo{ justify-self:center; }      /* มือถือโลโก้กลาง */
.actions{ justify-self:end; }      /* ไอคอนขวาสุด */

/* Logo sizes */
.logo img{ height:55px; }               /* mobile */
@media (min-width:1024px){ .logo img{ height:75px; } } /* desktop */

/* Icons / buttons */
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.icon-btn:hover{ background:#f6f8fb; }
.icon-link{ display:inline-flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; }
.icon-link:hover{ background:#f6f8fb; }
.hide-sm{ display:none; }

/* burger <-> close */
.ic-close{ display:none; }
.hamburger[aria-expanded="true"] .ic-burger{ display:none; }
.hamburger[aria-expanded="true"] .ic-close{ display:block; }

.actions{ display:flex; align-items:center; gap:16px; justify-self:end; }
.cart{ position:relative; color:var(--orange); }
.badge{ position:absolute; top:-6px; right:-6px; background:var(--orange); color:#fff; font-size:12px; line-height:1; padding:2px 6px; border-radius:999px; }

/* Desktop nav */
.primary-nav{ display:none; }
.nav{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:16px; }
.nav > li > a,
.nav > li > .with-sub{
  position: relative; z-index: 0;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px;                 /* ← ล็อกความสูงเท่ากันทุกปุ่ม */
  padding: 0 14px;              /* ← ล็อกระยะข้าง เท่ากันทุกสถานะ */
  border-radius: 999px;
}

/* วาดพื้นหลังด้วย pseudo-element (ไม่ทำให้ปุ่มขยาย) */
.nav > li > a,
.nav > li > .with-sub{
  position: relative; z-index: 0;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 14px;
  border-radius: 999px; font-weight: 400;
}
.nav > li > a::before,
.nav > li > .with-sub::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 999px; background: transparent;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.nav > li > a:hover::before,
.nav > li > .with-sub:hover::before{ background:#f6f8fb; }
.nav > li > a.is-active::before,
.nav > li > .with-sub.is-active::before{
  background: var(--blue); box-shadow: 0 6px 18px rgba(9,112,250,.18);
}
.nav > li > a.is-active,
.nav > li > .with-sub.is-active{ color:#fff; }


/* Dropdown (desktop) */
.has-sub{ position:relative; }
/* Dropdown (desktop): โผล่แน่ ๆ เมื่อ hover/focus */
/* ป้องกันโดนตัด */
.nav-wrap, .primary-nav { overflow: visible; }
.primary-nav { position: relative; z-index: 1102; }

/* กล่อง dropdown: ไม่เว้นช่องว่าง, ใช้ fade/slide แทน */
.dropdown{
  position: absolute;
  top: 100%;               /* <-- เดิม calc(100% + 10px) ตัดออก */
  left: 0;
  min-width: 210px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 1103;

  /* แทนที่จะ display:none -> ใช้ transition */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s .15s;
}

.has-sub:hover .dropdown,
.has-sub:focus-within .dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.dropdown a{ display:block; padding:10px 12px; border-radius:8px; }
.dropdown a:hover{ background:#f6f8fb; }

/* Drawer (mobile) */
.drawer{
  position:fixed; left:12px; top:calc(var(--nav-h-m) + 8px);
  width:84vw; max-width:420px; background:#fff;
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  transform:translateX(calc(-100% - 12px)); transition:transform .22s ease; z-index:1001;
  padding:12px 14px; max-height:calc(100vh - var(--nav-h-m) - 24px); overflow:auto;
}
.drawer[aria-hidden="false"]{ transform:translateX(0); }
.backdrop{ position:fixed; left:0; right:0; top:var(--nav-h-m); bottom:0; background:rgba(0,0,0,.35); z-index:1000; }

.m-nav{ list-style:none; margin:0; padding:0; }
.m-nav > li > a, .m-sub-btn{ display:flex; align-items:center; justify-content:space-between; padding:12px 10px; border-radius:10px; font:inherit; }
.m-nav > li > a.is-active{ background:#eef4ff; color:var(--blue); }
.m-nav > li > a:hover, .m-sub-btn:hover{ background:#f6f8fb; }
.m-sub-btn{ border:0; background:transparent; cursor:pointer; width:100%; text-align:left; }
.m-sub{ list-style:none; margin:6px 0 0; padding-left:10px; }
.m-sub a{ display:block; padding:10px; border-radius:8px; }
.m-sub a:hover{ background:#f6f8fb; }

/* Desktop layout switch */
@media (min-width:1024px){
  .nav-wrap{ height:var(--nav-h); grid-template-columns:auto 1fr auto; }
  .logo{ justify-self:start; }   /* เดสก์ท็อปโลโก้ชิดซ้าย */
  .hamburger{ display:none; }
  .primary-nav{ display:block; }
  .hide-sm{ display:inline; }
}

/* ทำให้เปลี่ยนสภาพนุ่ม ๆ */
.site-header{
  transition: background-color .18s ease, backdrop-filter .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* สถานะขณะเลื่อน: โปร่ง + เบลอเล็กน้อย + เงาอ่อน */
.site-header.is-glass{
  background: rgba(255,255,255,.72);   /* โปร่งลงจากเดิม */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border-bottom-color: rgba(229,231,235,.6);
}


.hide-sm{ display:none; }
@media (min-width:1024px){
  .hide-sm{ display:inline; }
}

 /* Banner Style */

/* ===== Page Hero (ใช้ได้ทุกหน้า) ===== */
.page-hero{
  position: relative;
  height: min(92vh, 860px);
  min-height: 800px;
  overflow: hidden;
  margin-top: 20px;
}

/* รองรับทั้ง <img> เดี่ยว และ <picture> */
.page-hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit: contain;    /* เห็นรูปครบ */
  background:#fff;
  padding:0 40px;         /* ขอบซ้าย-ขวาในเดสก์ท็อป */
  box-sizing:border-box;
}

/* มือถือ: ใช้ “แบนเนอร์ภาพเดี่ยว” ไม่สไลด์ */
@media (max-width: 767.98px){
  .page-hero{
    height:auto;          /* ปล่อยสูงตามรูป */
    min-height:unset;
    margin-top:12px;
  }
  .page-hero img{
    height:auto;          /* ให้รูปปรับสัดส่วนเอง */
    object-fit: contain;
    padding:0 8px;        /* ลดขอบให้เข้ากับจอมือถือ */
  }
}