:root{
  --brand:#ff385c;
  --text:#222;
  --muted:#666;
  --line:#eaeaea;
  --bg:#ffffff;
  --card:#fafafa;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans Thai",sans-serif;color:var(--text);background:var(--bg)}

/* Header */
.navbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);
}
.logo{font-weight:800;color:var(--brand);font-size:20px}
.main-nav{display:flex;gap:18px;align-items:center}
.main-nav a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:999px}
.main-nav a.active,.main-nav a:hover{background:#f6f6f6}
.user-menu{display:flex;gap:8px;align-items:center}
.host-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer}
.icon-btn{background:#fff;border:1px solid var(--line);width:36px;height:36px;border-radius:50%;cursor:pointer}

/* Search */
.search-wrap{display:flex;justify-content:center;padding:16px 10px;background:#fff}
.search-bar{
  display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 12px;max-width:980px;width:100%;box-shadow:0 2px 12px rgba(0,0,0,.05)
}
.search-bar input{border:none;outline:none;padding:10px 14px;border-radius:999px;background:#f7f7f7;flex:1;min-width:120px}
.search-btn{background:var(--brand);border:none;color:#fff;border-radius:50%;width:44px;height:44px;font-size:18px;cursor:pointer}

/* Sections */
.section{padding:18px 20px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section h2{font-size:20px;margin:6px 0}
.scroll-ctrl{display:flex;gap:6px}
.arrow{border:none;background:#fff;border:1px solid var(--line);width:32px;height:32px;border-radius:50%;cursor:pointer}
.arrow:hover{background:#f6f6f6}

/* Cards */
.cards{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;padding:6px 2px}
.card{
  position:relative;min-width:320px;max-width:320px;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.06)
}
.card img{width:100%;height:210px;object-fit:cover;display:block}
.wish{
  position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.95);
  border:none;border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer
}
.c-body{padding:10px 12px}
.c-body h3{font-size:15px;line-height:1.35;margin:0 0 6px}
.meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.price{font-weight:600;color:#000}
.rate{color:#000}

/* Transit block */
.transit{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:24px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff
}
@media(min-width:1100px){.transit{grid-template-columns:repeat(6,1fr)}}
.t-col{min-width:220px}
.t-head{font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.t-head .ico{font-size:18px}
.t-col ul{list-style:none;padding:0;margin:0}
.t-col li{color:var(--muted);margin:4px 0;font-size:14px}

/* Footer */
.footer{background:#f7f7f7;border-top:1px solid var(--line);margin-top:10px}
.f-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px}
.f-grid h4{margin:0 0 8px}
.f-grid a{display:block;color:#333;text-decoration:none;margin:6px 0}
.f-grid a:hover{text-decoration:underline}
.f-bottom{
  display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)
}
.f-lang{display:flex;gap:12px}