/* Core styles (same as previous smooth version) */
:root{--primary:#ff6b6b;--accent:#6c5ce7;--bg:#ffffff;--ink:#1a1a1a;--muted:#6b7280;--card:#ffffff}
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:"Sarabun",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block} a{color:var(--accent);text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;border:0;cursor:pointer;transition:.2s}
.btn:hover{opacity:.9;transform:translateY(-1px)} .btn.outline{background:transparent;border:2px solid var(--accent);color:var(--accent)} .btn.sm{padding:6px 10px;font-size:14px}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:#fff}
.site-header .topbar{position:sticky;top:0;z-index:1300;background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;max-height:140px;overflow:hidden;transition:max-height .35s ease, padding .35s ease, opacity .35s ease, transform .35s ease}
.site-header .topbar .container{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 16px}
.site-header .brand{flex:1 1 auto;min-width:0}
.site-header .brand .logo{display:flex;align-items:center;gap:4px;color:#fff;font-weight:800;font-size:20px;white-space:normal}
.site-header .brand .tagline{font-size:12px;opacity:.9;color:#fff;line-height:1.2;margin-top:2px}
.nav-toggle{background:#fff;color:var(--accent);border:0;border-radius:10px;padding:8px 10px;font-weight:700;display:none}
.mainnav{background:#fff;border-bottom:1px solid #eee;position:sticky;top:48px;z-index:1000;transition: top .35s ease, box-shadow .35s ease}
.mainnav .menu{display:flex;gap:18px;list-style:none;margin:0;padding:12px 0;align-items:center}
.mainnav .menu li a{color:var(--ink);font-weight:600}

/* dropdown base */
.mainnav .menu li.has-sub{position:relative}
.mainnav .submenu{position:absolute;top:100%;left:0;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:10px 8px;list-style:none;display:none;min-width:260px;z-index:1200}
.mainnav .submenu li a{display:block;padding:8px 12px;border-radius:8px;color:var(--ink);font-weight:600}
.mainnav .submenu li a:hover{background:#f6f6f6}
.sub-toggle{background:transparent;border:0;font:inherit;color:var(--ink);font-weight:700;cursor:pointer}

/* ✅ show only direct child submenu (สำคัญมากสำหรับเมนูซ้อน) */
.has-sub:hover > .submenu{display:block}

/* ✅ 2nd-level submenu (flyout to the right) */
.mainnav .submenu li.has-sub{position:relative}
.mainnav .submenu li.has-sub > a:after{
  content:"›";
  float:right;
  opacity:.6;
  margin-left:10px;
}
.mainnav .submenu li.has-sub > .submenu{
  top:0;
  left:100%;
  margin-left:8px;
  display:none;
  min-width:260px;
  z-index:1300;
}
.mainnav .submenu li.has-sub:hover > .submenu{display:block}

/* Contact visibility */
.site-header .topbar .contact-mini .btn{background:rgba(255,255,255,0.22);border:2px solid #fff;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.site-header .topbar .contact-mini .btn:hover{background:rgba(255,255,255,0.32)}
.site-header .topbar .contact-mini .btn.outline{background:rgba(255,255,255,0.22);border-color:#fff;color:#fff}
.site-header .topbar .contact-mini{display:flex;gap:10px;align-items:center}

/* Shrink-on-scroll: show only menu row (smooth) */
.site-header.shrink .topbar{max-height:0;padding:0;opacity:0;transform:translateY(-10px)}
.site-header.shrink .mainnav{top:0;box-shadow:0 8px 24px rgba(0,0,0,.08)}

/* Hero */
.hero{position:relative;min-height:60vh;display:grid;place-items:center;color:#fff;border-radius:0 0 30px 30px;overflow:hidden;margin-bottom:24px}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.5))}
.hero .content{position:relative;z-index:2;text-align:center;padding:24px}
.hero h1{font-size:40px;margin:0 0 8px;font-weight:800}
.hero p{opacity:.95}

/* Slider */
.slider{position:absolute;inset:0;z-index:1}
.slider .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
.slider .slide.active{opacity:1}
.slider .dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:5}
.slider .dots button{width:10px;height:10px;border-radius:999px;border:0;background:#fff;opacity:.6}
.slider .dots button.active{opacity:1}

/* Sections & cards */
.section{padding:30px 0} .section h2{font-size:28px;margin:0 0 10px}
.grid{display:grid;gap:16px}
.grid.cards{align-items:stretch} /* ✅ ทำให้ item ในแถวสูงเท่ากัน */
.cards{grid-template-columns:repeat(4,1fr)}

/* ✅ การ์ดให้สูงเท่ากัน + ดันปุ่มไปชิดล่าง */
.card{
  background:var(--card);
  border:1px solid #eee;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
  display:flex;
  flex-direction:column;
  height:100%;
}

/* ✅ รูปสินค้าให้เท่ากันทุกใบ + contain */
.card > img{
  width:100%;
  height:180px;
  object-fit:contain;
  background:#fff;
  padding:10px;
}

.card .p{
  padding:12px;
  display:flex;
  flex-direction:column;
  flex:1;
}

/* ✅ กันชื่อยาวทำให้บางใบสูงกว่า (จำกัด 2 บรรทัด) */
.card h3{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.25;
  min-height:2.5em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.price{font-weight:800;color:var(--primary)}

/* ✅ ปุ่มอยู่ล่างสุดเสมอ และระยะห่างสวย */
.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:12px;
}

/* Footer */
.site-footer{margin-top:40px;background:#111;color:#ddd}
.site-footer .grid{grid-template-columns:2fr 1fr 1fr;padding:24px 16px}
.site-footer h4{margin:0 0 10px;color:#fff}
.site-footer .linklist{list-style:none;margin:0;padding:0} .site-footer .linklist li{margin:6px 0}
.site-footer .copyright{text-align:center;padding:12px;border-top:1px solid #222;font-size:14px;color:#aaa}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.revealed{opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width:980px){ .cards{grid-template-columns:repeat(3,1fr)} .site-footer .grid{grid-template-columns:1fr 1fr} }
@media (max-width:720px){
  .cards{grid-template-columns:repeat(2,1fr)} .nav-toggle{display:block} .mainnav{display:none;top:0}
  .mainnav.open{display:block} .mainnav .menu{flex-direction:column;align-items:flex-start}

  /* ✅ จำกัดให้ “ปิด hover” เฉพาะเมนูหลักด้านบน */
  .menu > li.has-sub:hover > .submenu{display:none}
  .menu > li.has-sub > .submenu{position:static;border:0;box-shadow:none;padding:0;margin-left:8px;display:none}
  .menu > li.has-sub.open > .submenu{display:block}

  /* ✅ เมนูซ้อนชั้น 2 ให้แสดงเป็นรายการเยื้อง (มือถือไม่มี hover) */
  .submenu li.has-sub > .submenu{
    position:static;
    border:0;
    box-shadow:none;
    padding:0;
    margin:6px 0 0 12px;
    display:block;
  }
  .submenu li.has-sub > a:after{display:none}

  .hero h1{font-size:28px}
}
@media (max-width:460px){ .cards{grid-template-columns:1fr} }

/* Floating contact widget (bottom-right) */
.contact-fab{position:fixed;right:22px;bottom:22px;z-index:2000}
.fab-btn{height:48px;min-width:120px;border-radius:999px;background:var(--accent);color:#fff;border:0;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:16px;padding:0 16px;cursor:pointer}
.fab-menu{position:absolute;right:0;bottom:60px;display:none;flex-direction:column;gap:10px}
.contact-fab.open .fab-menu{display:flex}
.fab-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border:2px solid var(--accent);color:var(--accent);border-radius:999px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.fab-item .icon{font-size:18px;line-height:0}

.site-header .brand .logo img{margin:0;padding:0;display:inline-block}