/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · TNH-ECAEB7B82022 */
/* หน้าแรกส่วนท้าย: สมัคร STAFF + แบบฟอร์มขออนุญาตเข้าอุทยาน (js/30-home.js) */
.hx-wrap{display:flex;flex-direction:column;gap:14px;margin-top:22px}

/* ---------- สมัคร STAFF: การ์ดรูปทีมงานจริง ---------- */
.hx-staff{position:relative;display:block;min-height:150px;border-radius:22px;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;
  border:1px solid rgba(250,204,21,.28);box-shadow:0 14px 32px rgba(0,0,0,.38);transition:transform .18s ease,border-color .18s ease}
.hx-staff-bg{position:absolute;inset:0;z-index:-2;background:#0b2a22 url('../team.jpg') 100% 6%/auto 190% no-repeat}
.hx-staff::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(3,14,12,.96) 0%,rgba(3,14,12,.86) 46%,rgba(3,14,12,.25) 78%,rgba(3,14,12,.05) 100%),
             linear-gradient(0deg,rgba(3,14,12,.55),transparent 55%)}
.hx-staff-x{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:64%;padding:18px 18px 16px}
.hx-staff-x small{font-size:10.5px;letter-spacing:2px;font-weight:800;color:#facc15}
.hx-staff-x b{font-size:20px;font-weight:800;line-height:1.2;margin-top:2px}
.hx-staff-x>span{font-size:12px;line-height:1.45;color:#cbd5d1}
.hx-cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 14px;border-radius:999px;font-style:normal;font-size:13px;font-weight:800;
  color:#241a00;background:linear-gradient(135deg,#fde047,#f59e0b);box-shadow:0 6px 16px rgba(245,158,11,.35)}
.hx-cta em{font-style:normal;font-size:16px;line-height:1}
.hx-staff:active{transform:scale(.985)}

/* ---------- แบบฟอร์มขออนุญาต: กล่องเดียว 2 อุทยานเคียงกัน ---------- */
.hx-permit{padding:14px;border-radius:22px;background:linear-gradient(180deg,rgba(8,30,24,.82),rgba(4,18,15,.9));
  border:1px solid rgba(52,211,153,.22);box-shadow:0 14px 32px rgba(0,0,0,.32)}
.hx-permit-hd{display:flex;align-items:center;gap:11px;margin:2px 2px 12px}
.hx-permit-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.3)}
.hx-permit-ic svg{width:21px;height:21px;fill:none;stroke:#6ee7b7;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hx-permit-hd b{display:block;font-size:15px;font-weight:800;color:#f1f5f9}
.hx-permit-hd small{display:block;font-size:11px;color:#94a3a0;margin-top:1px}
.hx-permit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hx-pm{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:132px;padding:12px;border-radius:16px;overflow:hidden;isolation:isolate;
  text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.12);transition:transform .18s ease,border-color .18s ease}
.hx-pm-bg{position:absolute;inset:0;z-index:-2;background:#0d3a2f center/cover no-repeat}
.hx-pm::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,12,10,.05) 20%,rgba(2,12,10,.88) 100%)}
.hx-pm-tag{position:absolute;top:10px;left:10px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;color:#d1fae5;
  background:rgba(4,20,16,.62);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hx-pm b{font-size:17px;font-weight:800;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.hx-pm-go{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;font-weight:800;color:#6ee7b7}
.hx-pm-go em{font-style:normal;font-size:15px;line-height:1}
.hx-pm:active{transform:scale(.97);border-color:rgba(110,231,183,.5)}

@media (hover:hover){
  .hx-staff:hover{transform:translateY(-2px);border-color:rgba(250,204,21,.5)}
  .hx-pm:hover{transform:translateY(-2px);border-color:rgba(110,231,183,.45)}
}
@media (min-width:900px){
  .hx-wrap{flex-direction:row;align-items:stretch}
  .hx-staff,.hx-permit{flex:1}
  .hx-staff{min-height:auto}
}