/* ============================================================================
   Trang chi tiết khách sạn (.hd2-*) — file CSS NGOÀI.
   Phần lớn style của trang hiện còn nằm inline trong user_2019/detail_hotel_api.php
   (legacy). File này là nơi đặt MỌI style mới cho trang theo luật CLAUDE.md;
   dần dần rút style cũ về đây khi có dịp.
   Nạp ở đầu detail_hotel_api.php, TRƯỚC block <style> legacy → rule legacy vẫn
   thắng khi trùng selector, các class mới dưới đây không đụng gì tới rule cũ.
   ============================================================================ */

/* ── Khối "Vị trí trên bản đồ" ở CỘT CHÍNH, giữa "Đánh giá" và "Chính sách"
   (client 2026-07-29). Trước đây bản đồ nằm trong sidebar 360px (.hd2-side-card
   #hd2SecLocation): bản đồ quá nhỏ, và thứ tự cuộn không khớp thứ tự tab
   (tab: Đánh giá → Vị trí → Chính sách, nhưng map lại ở đầu trang bên phải).
   Khối mới dùng chung vỏ .hd2-sec (thẻ trắng full-width) nên chỉ cần style
   riêng cho phần địa chỉ · khung nhúng bản đồ · link Google Maps. ───────────── */

.hd2-map-addr {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -6px 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hd-muted, #6b7280);
}

.hd2-map-addr i {
    margin-top: 3px;
    color: var(--hd-pink, #ed007f);
}

/* Bản đồ rộng ngang cột chính → tỉ lệ dẹt (21/9) vẫn đủ cao để nhìn đường phố;
   min-height chặn trường hợp cột hẹp làm khung bẹp dí. */
/* Cao theo viewport, chặn trên 420px (cột chính ~1150px, nếu để aspect-ratio 21/9
   thì cao gần 500px — quá đồ sộ so với các section khác; mà aspect-ratio + max-height
   lại làm khung TỰ CO CHIỀU NGANG để giữ tỉ lệ → hụt mép phải. Nên đặt height thẳng). */
.hd2-map-embed {
    position: relative;
    width: 100%;
    height: clamp(280px, 30vw, 420px);
    background: #e0e7ff;
    border-radius: 10px;
    overflow: hidden;
}

.hd2-map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.hd2-map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: var(--hd-pink, #ed007f);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.hd2-map-link:hover {
    text-decoration: underline;
}

/* ── Thẻ BẢN ĐỒ MINI ở cột phải (client 2026-07-30) ─────────────────────────
   Sau khi khối bản đồ dời xuống cột chính, cột phải chỉ còn thẻ điểm đánh giá cao 90px →
   hụt hơn 600px khoảng trắng. Thẻ này lấp lại: bản đồ nhỏ + tên mục + địa chỉ + link nhảy
   xuống #hd2SecLocation (bản đồ lớn). Dùng lại .hd2-side-map sẵn có nên tỉ lệ 16/9 giữ nguyên. */
.hd2-side-minimap-title {
    margin: 12px 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--hd-text, #1f2937);
}

.hd2-side-minimap-addr {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--hd-muted, #6b7280);
    /* Địa chỉ dài (số nhà + phường + tỉnh + quốc gia) chiếm hết thẻ → gói gọn 2 dòng. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hd2-side-minimap .nearby-link {
    margin-top: 10px;
    text-decoration: none;
}

/* Không còn card nào trong sidebar (khách sạn chưa có đánh giá) → bỏ luôn cột
   360px, tránh khoảng trắng chết bên phải. Specificity 0,2,0 nên thắng
   `.hd2-grid` legacy dù nạp trước. */
.hd2-grid.hd2-grid-nosb {
    grid-template-columns: 1fr;
}

@media (max-width: 767px) {
    .hd2-map-embed {
        height: 240px;
        max-width: 100%;
    }
}