
*{box-sizing:border-box}body{margin:0;font-family:Arial,'Noto Sans Thai',sans-serif;color:#3c2a20;background:#fffaf5}a{text-decoration:none;color:inherit}.top{background:#2f1b12;color:#fff;padding:8px 5%;font-size:14px}.nav{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 2px 14px #0001;padding:14px 5%;display:flex;align-items:center;justify-content:space-between}.logo{height:55px;max-width:190px;object-fit:contain}.links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.links a{padding:10px 13px;border-radius:22px;font-weight:600}.links a:hover,.links .active{background:#7a4a2b;color:#fff}.hero{min-height:430px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center;position:relative}.hero:before{content:'';position:absolute;inset:0;background:#1e100b66}.hero-content{position:relative;color:#fff;padding:30px}.hero h1{font-size:48px;margin:0 0 12px}.hero p{font-size:20px}.btn{display:inline-block;background:#9a6038;color:white;padding:12px 24px;border-radius:25px;border:0;cursor:pointer}.section{max-width:1100px;margin:auto;padding:65px 5%}.section h2{text-align:center;font-size:34px;margin:0 0 12px}.lead{text-align:center;max-width:750px;margin:0 auto 35px;line-height:1.8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 20px #00000012}.card img{width:100%;height:210px;object-fit:cover}.card-body{padding:18px}.price{font-weight:bold;color:#8b542f;font-size:19px}.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.two img{width:100%;max-height:430px;object-fit:cover;border-radius:18px}.form{max-width:650px;margin:auto;background:#fff;padding:28px;border-radius:16px;box-shadow:0 4px 20px #0001}.form input,.form textarea,.form select{width:100%;padding:12px;margin:7px 0 15px;border:1px solid #ddd;border-radius:8px}.footer{background:#2f1b12;color:#fff;padding:35px 5%;text-align:center}.admin{max-width:1000px;margin:30px auto;padding:0 20px}.adminbox{background:#fff;padding:24px;border-radius:14px;margin-bottom:20px;box-shadow:0 3px 18px #0001}.admin nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.admin nav a{padding:9px 13px;background:#eee;border-radius:8px}.notice{padding:12px;background:#f4e4d5;border-left:4px solid #9a6038;margin:20px 0}.product-row{display:grid;grid-template-columns:1fr 1fr 2fr 1fr auto;gap:10px;align-items:center;margin-bottom:10px}.product-row input{margin:0}.thumb{width:65px;height:50px;object-fit:cover;border-radius:5px}@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.hero h1{font-size:34px}.links{display:none}.product-row{grid-template-columns:1fr 1fr;}.product-row .thumb{grid-row:span 2}}@media(max-width:500px){.grid{grid-template-columns:1fr}.nav{padding:10px 4%}.logo{height:45px}.hero-video-panel,.hero-beans-panel{height:82vw;min-height:300px}.hero-video-title{font-size:32px}.hero-beans-content h2{font-size:30px;margin-bottom:45px}.knowledge-grid{grid-template-columns:1fr}}

/* Homepage hero: two-panel layout matching the supplied reference */
.hero-split{width:100%;height:660px;display:grid;grid-template-columns:65% 35%;overflow:hidden;background:#b9b3b0}
.hero-video-panel,.hero-beans-panel{position:relative;min-width:0;height:100%;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-video-panel:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.06);pointer-events:none}
.hero-video-title{position:absolute;z-index:3;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#2a1009;font-size:48px;font-weight:500;letter-spacing:.01em;text-shadow:0 1px 2px rgba(255,255,255,.12)}
.hero-video-fallback{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center}
.hero-beans-panel{background-image:url('../assets/images/bg1.jpg');background-size:cover;background-position:center}
.hero-beans-overlay{position:absolute;inset:0;background:rgba(0,0,0,.18)}
.hero-beans-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:30px}
.hero-beans-content h2{font-size:46px;line-height:1.25;font-weight:500;margin:0 0 100px;text-shadow:0 2px 5px rgba(0,0,0,.3)}
.hero-beans-content .btn{font-size:15px;padding:10px 24px;background:#9a6038;border-radius:25px}
.hero-beans-content .btn:hover{background:#7a4a2b}
.knowledge-grid{grid-template-columns:repeat(4,1fr)}.knowledge-card{min-height:210px}.knowledge-icon{font-size:38px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;max-width:900px;margin:auto}.contact-card{text-align:center}.contact-qr{width:220px;height:220px;object-fit:contain;display:block;margin:10px auto}.adminbox small{display:block;color:#777;margin:-8px 0 15px}.knowledge-edit{padding:15px 0;border-top:1px solid #eee;margin-top:15px}@media(max-width:1100px){.hero-split{height:560px;grid-template-columns:62% 38%}.hero-video-title{font-size:42px}.hero-beans-content h2{font-size:36px;margin-bottom:70px}.knowledge-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.hero-split{height:auto;grid-template-columns:1fr}.hero-video-panel,.hero-beans-panel{height:62vw;min-height:360px;max-height:600px}.hero-video-title{font-size:38px}.hero-beans-content h2{font-size:34px;margin-bottom:55px}.knowledge-grid,.contact-grid{grid-template-columns:1fr 1fr}}

.knowledge-card>a{display:block}.knowledge-card img{width:100%;height:210px;object-fit:cover}.knowledge-card .btn{margin-top:8px}.knowledge-more{font-size:14px;padding:9px 17px}.knowledge-detail{max-width:900px}.knowledge-detail h2{margin-bottom:25px}.knowledge-detail-image{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:18px;margin:0 auto 28px}.knowledge-detail-content{background:#fff;padding:28px;border-radius:16px;box-shadow:0 4px 20px #00000012;line-height:2;font-size:17px;white-space:normal}.knowledge-detail>p:first-child{text-align:left;margin-bottom:20px}
