:root{--primary:#0a6cff;--dark:#0f1e3d;--text:#1a1a2e;--text2:#5a6178;--border:#e6e9f0;--bg:#f7f9fc;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--text);background:#fff;line-height:1.5;}
a{color:inherit;text-decoration:none;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
header.site{background:var(--dark);color:#fff;padding:16px 0;}
header.site .container{display:flex;align-items:center;justify-content:space-between;}
header.site .logo{font-size:20px;font-weight:800;color:#fff;}
header.site nav a{color:#cdd6ea;margin-left:28px;font-weight:600;font-size:14.5px;}
header.site nav a:hover{color:#fff;}
.hero{background:linear-gradient(135deg,var(--dark) 0%,#1c3d7a 100%);color:#fff;padding:64px 0 100px;text-align:center;}
.hero h1{font-size:38px;font-weight:800;margin-bottom:12px;}
.hero p{color:#cdd6ea;font-size:17px;margin-bottom:32px;}
.search-box{background:#fff;border-radius:14px;padding:20px;max-width:920px;margin:0 auto;box-shadow:0 20px 50px rgba(0,0,0,.25);display:flex;gap:12px;flex-wrap:wrap;}
.search-box input{flex:1 1 160px;border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:14.5px;color:var(--text);}
.search-box button{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:12px 28px;font-weight:700;font-size:15px;cursor:pointer;}
.search-box button:hover{background:#0857d1;}
section.content{padding:56px 0;}
section.content h2{font-size:26px;font-weight:800;margin-bottom:24px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px;}
.card{border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:box-shadow .2s;background:#fff;}
.card:hover{box-shadow:0 12px 30px rgba(15,30,61,.12);}
.card img{width:100%;height:170px;object-fit:cover;background:#eef1f7;}
.card .body{padding:16px;}
.card h3{font-size:16.5px;margin-bottom:4px;}
.card .meta{color:var(--text2);font-size:13.5px;margin-bottom:10px;}
.card .price{font-weight:800;color:var(--primary);font-size:17px;}
.card .price span{font-weight:500;color:var(--text2);font-size:12.5px;}
.empty{text-align:center;padding:48px 20px;color:var(--text2);border:1px dashed var(--border);border-radius:14px;}
footer.site{background:var(--dark);color:#9fb0d1;padding:32px 0;text-align:center;font-size:13.5px;margin-top:40px;}
.btn{display:inline-block;background:var(--primary);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-weight:700;font-size:15px;cursor:pointer;}
.btn:hover{background:#0857d1;}
.btn-block{width:100%;text-align:center;}
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;}
@media(max-width:860px){.detail-grid{grid-template-columns:1fr;}}
.detail-hero{width:100%;height:340px;object-fit:cover;border-radius:14px;background:#eef1f7;margin-bottom:20px;}
.room-row,.pkg-summary{border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.booking-panel{border:1px solid var(--border);border-radius:14px;padding:22px;position:sticky;top:20px;height:fit-content;}
.booking-panel label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin:12px 0 4px;}
.booking-panel input{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:14.5px;}
.pay-method{display:flex;gap:10px;margin-top:10px;}
.pay-method button{flex:1;border:1px solid var(--border);background:#fff;border-radius:10px;padding:12px;font-weight:700;cursor:pointer;}
.pay-method button.active{border-color:var(--primary);background:#eef4ff;color:var(--primary);}
.msg-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;font-size:14px;margin-top:12px;}
.msg-ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;border-radius:8px;padding:10px 14px;font-size:14px;margin-top:12px;}

@media(max-width:640px){
  header.site .container{flex-direction:column;gap:10px;align-items:flex-start;}
  header.site nav a{margin-left:0;margin-right:18px;}
  .hero{padding:40px 0 60px;}
  .hero h1{font-size:27px;}
  .hero p{font-size:15px;margin-bottom:22px;}
  .search-box{flex-direction:column;padding:16px;}
  .search-box input,.search-box button{width:100%;}
  section.content{padding:36px 0;}
  section.content h2{font-size:21px;}
  .grid{grid-template-columns:1fr;}
  .room-row,.pkg-summary{flex-direction:column;align-items:flex-start;}
  .booking-panel{position:static;}
}