@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--main:#0e7569;--main-dark:#0a5a51;--accent:#ff7a29;--accent-dark:#e8631a;--ink:#1d2b29;--muted:#6b7d7a;--bg:#f4f8f7;--line:#e2ebe9}
*{font-family:'Be Vietnam Pro',system-ui,sans-serif}
body{color:var(--ink);background:#fff}
a{text-decoration:none;color:var(--main)}
.btn-main{background:var(--main);color:#fff;border:none}.btn-main:hover{background:var(--main-dark);color:#fff}
.btn-accent{background:var(--accent);color:#fff;border:none;font-weight:600}.btn-accent:hover{background:var(--accent-dark);color:#fff}
.text-main{color:var(--main)!important}.bg-main{background:var(--main)!important}.bg-soft{background:var(--bg)}
.topbar{background:var(--main-dark);color:#d9efec;font-size:.82rem}
.navbar-brand{font-weight:800;font-size:1.35rem;color:var(--main-dark)!important}
.navbar-brand span{color:var(--accent)}
.nav-link{font-weight:500;color:var(--ink)!important}.nav-link:hover,.nav-link.active{color:var(--main)!important}
.hero{background:linear-gradient(120deg,rgba(10,90,81,.93),rgba(14,117,105,.82)),url('https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=1600&q=80&auto=format&fit=crop') center/cover;padding:72px 0 84px;color:#fff}
.hero h1{font-weight:800;line-height:1.2}
.search-box{background:#fff;border-radius:16px;padding:18px;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.stat-num{font-size:1.7rem;font-weight:800}
.room-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.2s;height:100%;background:#fff}
.room-card:hover{box-shadow:0 12px 30px rgba(14,117,105,.15);transform:translateY(-3px)}
.room-card img.thumb{height:190px;width:100%;object-fit:cover}
.price{color:var(--accent-dark);font-weight:800;font-size:1.15rem}
.badge-type{background:#e6f4f1;color:var(--main-dark);font-weight:600}
.badge-avail{background:#e9f9ee;color:#177245}
.fav-btn{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:#fff;border:none;box-shadow:0 2px 8px rgba(0,0,0,.18);color:#c3cfcc;font-size:1.05rem}
.fav-btn.active{color:#e63950}
.chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.83rem;margin:0 6px 8px 0;background:#fff;cursor:pointer}
.chip.active{background:var(--main);color:#fff;border-color:var(--main)}
.area-card{border:1px solid var(--line);border-radius:14px;padding:18px;height:100%;background:#fff;transition:.2s;display:block;color:var(--ink)}
.area-card:hover{border-color:var(--main);box-shadow:0 8px 22px rgba(14,117,105,.12);color:var(--ink)}
.step-icon,.why-icon{width:56px;height:56px;border-radius:16px;background:#e6f4f1;color:var(--main);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:12px}
.filter-box{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff;position:sticky;top:86px}
.form-check-input:checked{background-color:var(--main);border-color:var(--main)}
.gallery-main{height:420px;width:100%;object-fit:cover;border-radius:14px}
.gallery-thumb{height:82px;width:100%;object-fit:cover;border-radius:10px;cursor:pointer;opacity:.75}
.gallery-thumb.active,.gallery-thumb:hover{opacity:1;outline:3px solid var(--main)}
.cost-table td{padding:.55rem .25rem;border-bottom:1px dashed var(--line)}
.amen{display:flex;gap:8px;align-items:center;padding:7px 0;font-size:.93rem}
.amen i{color:var(--main)}
.post-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;height:100%}
.post-card img{height:170px;width:100%;object-fit:cover}
footer{background:#0b3d37;color:#cfe6e2}
footer a{color:#cfe6e2}footer a:hover{color:#fff}
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:2000}
.floating-call{position:fixed;bottom:20px;left:20px;z-index:1050;display:flex;flex-direction:column;gap:10px}
.floating-call a{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.page-head{background:var(--bg);padding:34px 0;border-bottom:1px solid var(--line)}
.empty-box{border:2px dashed var(--line);border-radius:14px;padding:44px;text-align:center;color:var(--muted)}
@media(max-width:768px){.gallery-main{height:250px}.hero{padding:44px 0 54px}}