@font-face {
  font-family: 'THSarabunNew';
  src: url('../fonts/THSarabunNew.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'THSarabunNew';
  src: url('../fonts/THSarabunNew Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'THSarabunNew';
  src: url('../fonts/THSarabunNew Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'THSarabunNew';
  src: url('../fonts/THSarabunNew BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

:root{
  --brand:#ff7a00; /* orange accent per Sabuyburi docs */
  --dark:#0f172a;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-alt:#f8fafc;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'THSarabunNew', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans Thai', sans-serif;
  font-size: 20px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
}

.container{width:min(1120px, 92vw); margin:0 auto;}
.section{padding:64px 0;}
.grid{display:grid; gap:24px}
.btn{display:inline-block; padding:12px 20px; border-radius:12px; text-decoration:none; font-weight:700}
.btn-primary{background:var(--brand); color:#fff; box-shadow: var(--shadow)}
.btn-outline{border:2px solid var(--brand); color:var(--brand)}

header.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8);
  backdrop-filter: blur(8px); border-bottom:1px solid #eee;
}
.nav .container{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; font-size:24px}
.brand-badge{width:36px; height:36px; border-radius:10px; background:var(--brand)}

.hero{
  position:relative; min-height:70vh; display:grid; place-items:center;
  color:#fff; text-align:center;
  background: #000 url('../img/hero-aerial.jpg') center/cover no-repeat;
}
.hero::after{
  content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.35));
}
.hero-inner{position:relative; z-index:1; padding:36px; max-width:880px}
.hero h1{font-size:56px; line-height:1.05; margin:0 0 8px}
.hero p.lead{font-size:26px; opacity:.95; margin:0 0 24px}

.badges{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.badge{background:rgba(255,255,255,.15); color:#fff; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.25); font-weight:700}

.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.card img{width:100%; height:220px; object-fit:cover}
.card-body{padding:16px 16px 18px}
.card h3{margin:0 0 6px; font-size:28px}
.price{display:flex; align-items:baseline; gap:8px; margin-top:6px}
.price .num{font-size:30px; font-weight:700; color:var(--brand)}
.price .note{color:var(--muted)}

.rooms .grid{grid-template-columns: repeat(3, 1fr)}
@media(max-width:960px){ .rooms .grid{grid-template-columns: 1fr 1fr} }
@media(max-width:640px){ .rooms .grid{grid-template-columns: 1fr} }

.feature-list{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
@media(max-width:900px){ .feature-list{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .feature-list{grid-template-columns:1fr} }
.feature{padding:16px; border:1px dashed #e5e7eb; border-radius:12px; background:var(--bg-alt)}
.feature h4{margin:0 0 6px; font-size:24px}

.gallery{display:grid; grid-template-columns: 2fr 1fr; gap:16px}
.gallery img{width:100%; height:100%; object-fit:cover; border-radius:12px}
.gallery .col{display:grid; gap:16px}
@media(max-width:900px){ .gallery{grid-template-columns:1fr} }

.notice{background:#fff7ed; border:1px solid #ffedd5; padding:16px; border-radius:12px}

footer{background:var(--dark); color:#cbd5e1; padding:36px 0; margin-top:32px}
footer a{color:#fff; text-decoration:none}

.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; box-shadow:var(--shadow)}
.table th, .table td{padding:10px 14px; border-bottom:1px solid #eee; background:#fff}
.table th{background:#f3f4f6; text-align:left; font-weight:700}
.table tr:last-child td{border-bottom:none}

.map-embed{width:100%; border:0; height:360px; border-radius:12px; box-shadow:var(--shadow)}

.form{display:grid; gap:12px}
.form input, .form select, .form textarea{
  width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px; font-size:18px
}
.form .row{display:grid; gap:12px; grid-template-columns: repeat(3,1fr)}
@media(max-width:860px){ .form .row{grid-template-columns:1fr} }
.form .actions{display:flex; gap:12px; flex-wrap:wrap}

/* 🔹 ซ่อนลูกศรขึ้น-ลงใน input type=number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield; /* สำหรับ Firefox */
}

/* 🚫 ห้ามพิมพ์เองในช่องจำนวน (ให้ใช้ปุ่ม + - เท่านั้น) */
.room-qty {
  pointer-events: none;      /* ปิดการโต้ตอบโดยตรง */
  user-select: none;         /* กันกดเลือกข้อความในช่อง */
  background-color: #fff;    /* ให้ดูเหมือนปกติ */
  color: #000;
}