/* Trang "Gần tôi" - dùng chung biến với home-shortcodes.css */

.nearby-page {
    --hx-primary: #078537;
    --hx-dark: #005f2c;
    --hx-lime: #c7ff5b;
    --hx-orange: #f58006;
    --hx-soft: #eef8f0;
    --hx-border: #dce9df;
    --hx-text: #13251a;
    --hx-muted: #65736b;
    --hx-shadow: 0 14px 34px -12px rgba(6, 60, 30, .18);
    padding: 28px 0;
    color: var(--hx-text);
}

.nearby-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* Sidebar */
.nearby-title-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.nearby-title-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--hx-soft);
    color: var(--hx-primary);
    font-size: 1.2rem;
}

.nearby-title-block h1 { margin: 0; font-size: 1.4rem; font-weight: 900; }
.nearby-title-block p { margin: 2px 0 0; color: var(--hx-muted); font-size: .82rem; }

.nearby-location-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    margin-bottom: 20px;
    border: 1px solid var(--hx-border);
    border-radius: 14px;
    background: #fff;
}

.nearby-location-label { color: var(--hx-muted); font-size: .74rem; font-weight: 700; }
.nearby-location-value { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .92rem; }
.nearby-location-value i { color: var(--hx-primary); }

.nearby-location-update {
    align-self: flex-start;
    border: 0;
    background: transparent;
    color: var(--hx-primary);
    font-weight: 800;
    font-size: .78rem;
    cursor: pointer;
    padding: 0;
}

.nearby-filter-block { margin-bottom: 22px; }
.nearby-filter-block h2 { margin: 0 0 10px; font-size: .92rem; font-weight: 900; }
.nearby-filter-block .home-section-head { margin-bottom: 10px; }
.nearby-filter-block .home-section-head h2 { margin: 0; }

.nearby-clear-category {
    border: 0;
    background: transparent;
    color: var(--hx-primary);
    font-weight: 800;
    font-size: .78rem;
    cursor: pointer;
}

.nearby-radius-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.nearby-radius-btn {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--hx-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.nearby-radius-btn strong { font-size: .82rem; font-weight: 800; }
.nearby-radius-btn span { color: var(--hx-muted); font-size: .72rem; }

.nearby-radius-btn.is-active {
    background: var(--hx-primary);
    border-color: var(--hx-primary);
}

.nearby-radius-btn.is-active strong,
.nearby-radius-btn.is-active span { color: #fff; }

.nearby-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.nearby-category-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid var(--hx-border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: center;
}

.nearby-category-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: .96rem;
}

.nearby-category-btn strong { font-size: .78rem; font-weight: 800; }

.nearby-category-btn.is-active {
    border-color: var(--hx-primary);
    box-shadow: 0 0 0 1px var(--hx-primary);
}

.nearby-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.nearby-time-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--hx-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.nearby-time-btn i { color: var(--hx-primary); }
.nearby-time-btn strong { display: block; font-size: .78rem; font-weight: 800; }
.nearby-time-btn small { display: block; color: var(--hx-muted); font-size: .68rem; }

.nearby-time-btn.is-active {
    background: var(--hx-soft);
    border-color: var(--hx-primary);
}

.nearby-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: var(--hx-primary);
    color: #fff;
    font-weight: 800;
    font-size: .86rem;
    cursor: pointer;
}

.nearby-apply-btn:hover { background: var(--hx-dark); }

/* Cột bản đồ */
.nearby-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.nearby-search {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 44px;
    border: 1px solid var(--hx-border);
    border-radius: 10px;
    background: #fff;
    color: var(--hx-muted);
}

.nearby-search input { flex: 1; border: 0; outline: 0; font-size: .88rem; }

.nearby-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nearby-quick-filters button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--hx-border);
    border-radius: 10px;
    background: #fff;
    color: var(--hx-text);
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
}

.nearby-quick-filters button.is-active {
    background: var(--hx-primary);
    border-color: var(--hx-primary);
    color: #fff;
}

.nearby-map-wrap {
    position: relative;
    border: 1px solid var(--hx-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--hx-shadow);
}

.nearby-map { height: 560px; }

.nearby-center-marker span {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #2563eb;
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .3);
}

.nearby-marker b {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
    color: #fff;
    font-size: .8rem;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .25);
}

.nearby-marker b i { transform: rotate(-45deg); }

.nearby-map-legend {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 401;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .3);
    max-width: 180px;
}

.nearby-map-legend strong { display: block; margin-bottom: 8px; font-size: .82rem; }
.nearby-map-legend ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.nearby-map-legend li { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--hx-text); }

.nearby-legend-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.nearby-map-footer {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.nearby-map-footer button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--hx-border);
    border-radius: 999px;
    background: #fff;
    color: var(--hx-dark);
    font-weight: 800;
    font-size: .84rem;
    cursor: pointer;
}

/* Gợi ý cho bạn */
.nearby-suggestions { margin-top: 32px; }
.nearby-suggestions .home-section-head h2 { display: flex; align-items: baseline; gap: 8px; }
.nearby-suggestions .home-section-head h2 small { color: var(--hx-muted); font-size: .74rem; font-weight: 600; }

.nearby-combo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.nearby-combo-card {
    border: 1px solid var(--hx-border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--hx-shadow);
}

.nearby-combo-img {
    position: relative;
    height: 130px;
    background: var(--hx-soft);
}

.nearby-combo-img img,
.nearby-combo-img .home-img-fallback { width: 100%; height: 100%; object-fit: cover; }

.nearby-combo-img em {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    font-style: normal;
}

.nearby-combo-body { padding: 14px; }
.nearby-combo-body h3 { margin: 0 0 6px; font-size: .96rem; font-weight: 900; }
.nearby-combo-body p { margin: 0 0 10px; color: var(--hx-muted); font-size: .78rem; line-height: 1.4; }

.nearby-combo-tags { display: flex; gap: 6px; margin-bottom: 12px; }
.nearby-combo-tags span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    font-size: .7rem;
}

.nearby-combo-body .home-outline-btn { width: 100%; justify-content: center; padding: 9px 16px; font-size: .8rem; }

/* Địa điểm gần bạn */
.nearby-results-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    margin-top: 36px;
    align-items: start;
}

.nearby-results-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.nearby-results-tabs button {
    padding: 8px 16px;
    border: 1px solid var(--hx-border);
    border-radius: 999px;
    background: #fff;
    color: var(--hx-text);
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
}

.nearby-results-tabs button.is-active {
    background: var(--hx-primary);
    border-color: var(--hx-primary);
    color: #fff;
}

.nearby-results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.nearby-item-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--hx-border);
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: var(--hx-text);
    transition: box-shadow .15s ease, transform .15s ease;
}

.nearby-item-card:hover { transform: translateY(-2px); box-shadow: var(--hx-shadow); }

.nearby-item-img {
    position: relative;
    flex: 0 0 auto;
    width: 120px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--hx-soft);
}

.nearby-item-img img,
.nearby-item-img .home-img-fallback { width: 100%; height: 100%; object-fit: cover; }
.nearby-item-img .cbkp-favorite-button { width: 26px; height: 26px; top: 4px; right: 4px; font-size: .7rem; }

.nearby-item-body strong { display: block; font-size: .86rem; font-weight: 800; line-height: 1.3; }
.nearby-item-type { display: block; font-size: .72rem; font-weight: 800; margin: 2px 0; }

.nearby-item-meta {
    display: flex;
    gap: 10px;
    color: var(--hx-muted);
    font-size: .74rem;
}

.nearby-item-meta i { margin-right: 3px; color: var(--hx-orange); }
.nearby-item-meta i.fa-location-dot { color: var(--hx-primary); }

/* Sidebar phụ (thời tiết/mẹo/khẩn cấp) */
.nearby-side-column { display: flex; flex-direction: column; gap: 16px; }

.nearby-weather-card,
.nearby-tips-card,
.nearby-emergency-card {
    padding: 18px;
    border: 1px solid var(--hx-border);
    border-radius: 14px;
    background: #fff;
}

.nearby-weather-card > strong,
.nearby-tips-card > strong,
.nearby-emergency-card > strong { display: block; margin-bottom: 10px; font-size: .88rem; font-weight: 900; }

.nearby-weather-place { display: block; margin-bottom: 8px; color: var(--hx-muted); font-size: .76rem; }

.nearby-weather-main { display: flex; align-items: center; gap: 10px; }
.nearby-weather-main i { font-size: 2rem; color: var(--hx-primary); }
.nearby-weather-main span { font-size: 1.6rem; font-weight: 900; }

.nearby-weather-card p { margin: 6px 0 12px; color: var(--hx-muted); font-size: .82rem; }

.nearby-weather-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--hx-border);
}

.nearby-weather-grid span { display: block; color: var(--hx-muted); font-size: .66rem; }
.nearby-weather-grid strong { display: block; font-size: .8rem; font-weight: 800; }

.nearby-tips-card ul { margin: 0; padding-left: 18px; }
.nearby-tips-card li { margin-bottom: 8px; color: var(--hx-text); font-size: .8rem; line-height: 1.4; }

.nearby-emergency-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.nearby-emergency-card li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .82rem;
}

.nearby-emergency-card li span { color: var(--hx-text); }
.nearby-emergency-card li span i { color: var(--hx-orange); margin-right: 6px; }
.nearby-emergency-card li a {
    padding: 3px 12px;
    border-radius: 999px;
    background: #fdeceb;
    color: #d92d20;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 1200px) {
    .nearby-combo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .nearby-layout { grid-template-columns: 1fr; }
    .nearby-results-section { grid-template-columns: 1fr; }
    .nearby-map { height: 420px; }
}

@media (max-width: 575.98px) {
    .nearby-category-grid,
    .nearby-radius-grid,
    .nearby-time-grid { grid-template-columns: 1fr 1fr; }
    .nearby-combo-grid { grid-template-columns: 1fr; }
    .nearby-results-grid { grid-template-columns: 1fr; }
}