:root{--brown:#6b4a2f;--brown-dark:#4a3320;--cream:#faf6f0;--orange:#e8842c;--text:#2d2419;--muted:#7a6a58;--line:#e5dccf}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,'Leelawadee UI',sans-serif;color:var(--text);background:var(--cream);line-height:1.7}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:var(--orange);text-decoration:none}
header{background:#fff;border-bottom:3px solid var(--orange);position:sticky;top:0;z-index:50;box-shadow:0 1px 8px rgba(0,0,0,.06)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:1100px;margin:0 auto;flex-wrap:wrap;gap:8px}
.logo{font-size:1.4rem;font-weight:800;color:var(--brown-dark)}
.logo span{color:var(--orange)}
.tel-btn{background:var(--orange);color:#fff;padding:8px 16px;border-radius:24px;font-weight:700;white-space:nowrap}
nav{background:var(--brown-dark)}
nav ul{display:flex;list-style:none;max-width:1100px;margin:0 auto;padding:0 20px;flex-wrap:wrap}
nav a{display:block;color:#f0e7da;padding:11px 15px;font-size:.93rem}
nav a:hover,nav a.on{background:var(--brown);color:#fff}
.crumb{max-width:1100px;margin:0 auto;padding:10px 20px;font-size:.88rem;color:var(--muted)}
.hero-cat{background:linear-gradient(135deg,var(--brown-dark),var(--brown));color:#fff;padding:40px 20px;text-align:center}
.hero-cat h1{font-size:clamp(1.4rem,3.4vw,2.1rem);margin-bottom:10px}
.hero-cat p{max-width:760px;margin:0 auto;color:#eaddcd}
.hero-cat strong{color:#ffc37e}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding:38px 0}
figure{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.18s}
figure:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(107,74,47,.16)}
figure img{width:100%;height:290px;object-fit:cover;display:block;cursor:zoom-in}
figcaption{padding:16px 18px}
figcaption b{color:var(--brown-dark);font-size:1.04rem;display:block;margin-bottom:5px}
figcaption p{font-size:.89rem;color:var(--muted)}
.spec{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 30px;margin-bottom:30px}
.spec h2{color:var(--brown-dark);font-size:1.25rem;margin-bottom:14px}
.spec ul{padding-left:20px;color:var(--muted)}
.spec li{margin-bottom:8px}
.spec b{color:var(--text)}
.cta-box{text-align:center;background:#fff;border:2px dashed var(--orange);border-radius:14px;padding:24px;margin-bottom:50px}
.cta-box b{color:var(--brown-dark);font-size:1.06rem}
.cta-box p{color:var(--muted);margin:8px 0 16px}
.cta-box a{background:#06c755;color:#fff;padding:12px 28px;border-radius:26px;font-weight:700;display:inline-block}
.line-float{position:fixed;right:18px;bottom:18px;z-index:150;background:#06c755;color:#fff;font-weight:700;padding:12px 20px;border-radius:50px;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.line-float:hover{color:#fff;background:#05b34c}
footer{background:var(--brown-dark);color:#cbb99f;text-align:center;padding:22px;font-size:.85rem}
footer a{color:#ffc37e}
@media(max-width:600px){figure img{height:230px}}