:root {
  --color-primary: #236f50;
  --color-secondary: #4a7c6b;
  --color-accent: #d14b65;
  --color-bg: #ffffff;
  --color-surface: #eef4ef;
  --color-text: #16261f;
  --color-text-muted: #50645c;
  --color-text-light: #8a9c94;
  --color-border: #d6e1da;
  --font-family-body: "Manrope", sans-serif;
  --font-family-display: "Fraunces", serif;
  --radius-md: 12px;
  --radius-lg: 24px;
  --shadow-lg: 0 18px 40px rgba(22, 38, 31, 0.15);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font-family-body); color: var(--color-text); margin: 0; padding-bottom: 120px; min-height: 100vh; }

/* Background động đặc sắc */
.unique-bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; overflow: hidden; }
.bg-image-layer { 
  position: absolute; width: 115%; height: 115%; top: -7.5%; left: -7.5%;
  background: url('https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&fit=crop&w=1600&q=80') center/cover;
  filter: blur(10px) brightness(0.7); animation: bgPan 40s linear infinite alternate;
}
@keyframes bgPan { from { transform: translate(0,0); } to { transform: translate(-40px, -30px); } }
.bg-gradient-overlay { 
  position: absolute; width: 100%; height: 100%; 
  background: linear-gradient(135deg, rgba(240,249,247,0.85) 0%, rgba(35,111,80,0.3) 100%); 
}
.particle { position: absolute; background: rgba(255,255,255,0.4); border-radius: 50%; filter: blur(2px); animation: float 15s infinite linear; }
.p1 { width: 60px; height: 60px; top: 15%; left: 10%; }
.p2 { width: 100px; height: 100px; top: 70%; left: 80%; animation-delay: -5s; }
@keyframes float { 0% { transform: translateY(0); opacity: 0; } 50% { opacity: 0.6; } 100% { transform: translateY(-150px); opacity: 0; } }

/* Cards & Layout */
.container { padding: 0 20px; }
.content-card { 
  background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(31, 156, 115, 0.12);
}
.main-header { margin: 20px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: var(--radius-lg); }
.brand-container h1 { font-family: var(--font-family-display); font-size: 1.4rem; color: var(--color-primary); }
.brand-container h1 span { color: var(--color-accent); }

.hero-section { padding: 25px; margin-bottom: 25px; border-radius: var(--radius-lg); }
.hero-section h2 { font-family: var(--font-family-display); font-size: 1.8rem; margin: 10px 0; }
.badge-soft { background: rgba(209,75,101,0.1); color: var(--color-accent); padding: 4px 12px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; border: 1px solid rgba(209,75,101,0.2); }

/* Grid Layout đặc sắc */
.grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.place-card { grid-column: span 1; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.art-highlight { grid-column: span 2; } /* Card Art Street chiếm trọn 1 dòng để show ảnh to */

.place-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); }

.image-wrapper { width: 100%; height: 160px; overflow: hidden; position: relative; }
.art-highlight .image-wrapper { height: 220px; } /* Ảnh Art Street to hơn */
.image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.place-card:hover img { transform: scale(1.1); }

.status-tag { position: absolute; top: 12px; right: 12px; background: var(--color-primary); color: white; padding: 4px 10px; border-radius: 8px; font-size: 0.7rem; font-weight: 800; }
.status-tag.accent { background: var(--color-accent); }

.card-body { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.card-body h3 { font-family: var(--font-family-display); font-size: 1.1rem; margin-bottom: 5px; }
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 15px; }

/* Buttons & Links */
.btn-brand { background: linear-gradient(120deg, var(--color-primary), #1a533c); color: white; border: 0; border-radius: 50px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.btn-outline-brand { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); border-radius: 50px; padding: 6px 12px; font-weight: 700; cursor: pointer; font-size: 0.8rem; }
.link-brand { color: var(--color-primary); font-weight: 700; font-size: 0.85rem; cursor: pointer; }

/* Bottom Dock */
.bottom-nav { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); width: 85%; max-width: 400px; display: flex; justify-content: space-around; padding: 12px; border-radius: 40px; z-index: 100; box-shadow: var(--shadow-lg); }
.nav-link { text-decoration: none; font-size: 1.4rem; transition: 0.3s; filter: grayscale(1); }
.nav-link.active { filter: grayscale(0); transform: translateY(-8px) scale(1.2); }