/**
 * HMD Gallery 1.10.0 — giao diện trang dự án (featured_item)
 * Chỉ nạp trên trang dự án ở chế độ mới. Mọi lớp đều mang tiền tố .hmdp
 * để không đụng tới CSS của theme hay của album [hmd_gallery].
 */
.hmdp { --hmdp-c: #f36f21; --hmdp-ico: #e0a526; --hmdp-ink: #222; --hmdp-mute: #555; background: #fff; }
.hmdp .container { max-width: 1270px; }

/* Thanh tiêu đề: class của theme giữ nguyên, chỉ thêm phần xếp dọc trên mobile
   (template cũ cũng có đúng dòng này, viết inline). */
@media (max-width: 850px) {
    .hmdp .cusSH .portfolio-breadcrumb-title .page-title-inner { flex-direction: column !important; }
}

.hmdp-body { padding-top: 32px; padding-bottom: 48px; }

/* ── Khung thông số ── */
.hmdp-specs { background: #f3f3f3; border-radius: 6px; padding: 22px 24px; margin: 0 0 28px; }
.hmdp-specs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; margin: 0; }
.hmdp-spec { min-width: 0; }
.hmdp-spec--wide { grid-column: span 2; }
/* text-transform:none — theme Flatsome viết HOA mọi dt/dd, địa chỉ thành
   "CHUNG CƯ KOSMO TÂY HỒ, 161 XUÂN LA…" (thấy trên ảnh chụp kiểm thử). */
.hmdp .hmdp-spec dt { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--hmdp-ink); line-height: 1.3; text-transform: none; letter-spacing: 0; }
.hmdp .hmdp-spec dd { margin: 0 0 0 28px; font-size: 15px; color: var(--hmdp-mute); line-height: 1.5; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; }
.hmdp-ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--hmdp-ico); }
@media (max-width: 1024px) { .hmdp-specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
    .hmdp-specs { padding: 16px; }
    .hmdp-specs-grid { gap: 14px 16px; }
    .hmdp-spec dt { font-size: 14.5px; }
    .hmdp-spec dd { font-size: 14px; margin-left: 28px; }
}

/* ── Khung ảnh ──
   Khung 3:2 = đúng tỉ lệ đa số ảnh công trình (1200×800), nên ảnh ngang lấp
   đầy khung. Cao tối đa 78vh để khung không vượt màn hình laptop. Ảnh LUÔN hiện
   trọn (không cắt), phần thừa hai bên là nền mờ của chính ảnh đó.

   ⚠ Đừng viết aspect-ratio:3/2 + max-height: max-height bị "chuyển" sang chiều
   ngang qua aspect-ratio, khung CO HẸP lại (đo được 842px thay vì 1240px trên
   màn 1280). Tính thẳng chiều cao: bề ngang nội dung ÷ 1,5, chặn trên 78vh.
   Bề ngang nội dung = min(100vw, 1270px) − 30px lề của .container. */
.hmdp .hmdp-gallery.hmd-gallery-wrap { margin: 0 0 32px; }
.hmdp-stage { position: relative; background: #151515; border-radius: 6px; overflow: hidden; }
.hmdp-track {
    display: flex; overflow-x: auto; overflow-y: hidden; width: 100%;
    height: min(calc((min(100vw, 1270px) - 30px) / 1.5), 78vh, 780px);
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none; outline: none;
}
.hmdp-track::-webkit-scrollbar { display: none; }
.hmdp-track:focus-visible { box-shadow: inset 0 0 0 3px var(--hmdp-c); }

/* Hủy style ô lưới của .hmd-item (viền, nhấc lên khi rê chuột, hiệu ứng hiện) —
   ở đây lớp đó chỉ để khung xem ảnh lớn nhận ra ảnh. */
.hmdp .hmdp-slide.hmd-item {
    flex: 0 0 100%; position: relative; margin: 0; padding: 0; height: auto;
    scroll-snap-align: center; scroll-snap-stop: always;
    border: 0; border-radius: 0; background: transparent; overflow: hidden;
    transform: none; animation: none; transition: none; cursor: zoom-in;
}
.hmdp .hmdp-slide.hmd-item:hover { transform: none; border: 0; }
.hmdp-bg {
    position: absolute; inset: -40px; background: #151515 center / cover no-repeat;
    filter: blur(28px) brightness(.62) saturate(1.1); transform: scale(1.1);
}
.hmdp .hmdp-img {
    position: absolute; inset: 0; margin: auto; display: block;
    width: auto; height: auto; max-width: 100%; max-height: 100%;
    border-radius: 0; box-shadow: 0 0 40px rgba(0,0,0,.25);
}
.hmdp-slide.is-landscape .hmdp-img { box-shadow: none; }

.hmdp-nav {
    position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin: -23px 0 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: rgba(0,0,0,.42); color: #fff; cursor: pointer;
    transition: background .15s; min-height: 0; line-height: 1; box-shadow: none;
}
.hmdp-nav:hover, .hmdp-nav:focus-visible { background: rgba(0,0,0,.7); color: #fff; }
.hmdp-prev { left: 14px; }
.hmdp-next { right: 14px; }
.hmdp-counter, .hmdp-zoom {
    position: absolute; bottom: 12px; z-index: 3; pointer-events: none;
    background: rgba(0,0,0,.55); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1;
    padding: 6px 10px; border-radius: 12px; letter-spacing: .2px;
}
/* Bộ đếm ở góc TRÊN: góc dưới phải là chỗ logo chìm "HOÀN MỸ" của ảnh, đặt
   ở đó là che logo (thấy trên ảnh chụp mobile, ảnh ngang lấp đầy khung). */
.hmdp-counter { right: 12px; top: 12px; bottom: auto; }
.hmdp-zoom { left: 12px; display: flex; align-items: center; gap: 6px; font-weight: 500; }

/* Dải ảnh nhỏ: bản 300px, tỉ lệ 3:2, cuộn ngang. */
.hmdp-thumbs {
    position: relative; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
    padding: 10px 2px 6px; scrollbar-width: thin;
}
.hmdp .hmdp-thumb {
    flex: 0 0 auto; width: 118px; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden;
    opacity: .5; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .15s, outline-color .15s;
    display: block; background: #eee;
}
.hmdp .hmdp-thumb:hover { opacity: .85; }
.hmdp .hmdp-thumb.is-active { opacity: 1; outline-color: var(--hmdp-c); }
.hmdp .hmdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.hmdp-single .hmdp-thumbs { display: none; }

@media (max-width: 768px) {
    .hmdp-track { height: calc((100vw - 30px) * .75); }   /* khung 4:3 */
    .hmdp-stage { border-radius: 4px; }
    .hmdp-nav { width: 38px; height: 38px; margin-top: -19px; }
    .hmdp-prev { left: 8px; }
    .hmdp-next { right: 8px; }
    .hmdp-zoom { display: none; }
    .hmdp .hmdp-thumb { width: 84px; }
}

/* ── Nội dung ── */
.hmdp-content { margin: 0 0 32px; font-size: 16px; line-height: 1.65; color: var(--hmdp-ink); }
.hmdp-content > :last-child { margin-bottom: 0; }

/* ── Khối liên hệ ── */
.hmdp-cta {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center;
    margin: 0 0 44px; padding: 24px 28px; border-radius: 8px;
    background: #fff5ef; border: 1px solid #fbd9c4;
}
.hmdp .hmdp-cta-title { margin: 0 0 6px; font-size: 21px; line-height: 1.35; color: var(--hmdp-ink); text-transform: none; }
.hmdp-cta-text p { margin: 0; color: var(--hmdp-mute); font-size: 15px; line-height: 1.55; }
.hmdp-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hmdp .hmdp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; margin: 0;
    border-radius: 6px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
    color: #fff; transition: filter .15s;
}
.hmdp .hmdp-btn:hover { filter: brightness(.92); color: #fff; }
.hmdp-btn--main { background: var(--hmdp-c); }
.hmdp-btn--zalo { background: #0068ff; }
.hmdp-btn--call { background: #e53013; }
.hmdp-cta-links { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 1px dashed #f3c3a6; font-size: 14.5px; color: var(--hmdp-mute); }
.hmdp-cta-links a { color: var(--hmdp-c); font-weight: 600; }
@media (max-width: 900px) {
    .hmdp-cta { grid-template-columns: 1fr; padding: 20px; }
    .hmdp .hmdp-cta-title { font-size: 19px; }
    /* 2 nút xếp dọc, rộng hết hàng: "Nhận báo giá qua Zalo" dài, chia đôi hàng
       390px là tràn chữ (nút đặt white-space:nowrap). */
    .hmdp-cta-btns { display: grid; grid-template-columns: 1fr; }
    .hmdp .hmdp-btn { padding: 0 12px; }
}

/* ── Công trình cùng loại ── */
.hmdp .hmdp-related-title { margin: 0 0 16px; font-size: 20px; line-height: 1.35; color: var(--hmdp-ink); }
.hmdp-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hmdp .hmdp-card { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.hmdp-card-img { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #eee; }
.hmdp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; transition: transform .3s ease; }
.hmdp .hmdp-card:hover .hmdp-card-img img { transform: scale(1.04); }
.hmdp .hmdp-card-title { margin: 4px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--hmdp-ink); text-transform: none; letter-spacing: 0; }
.hmdp .hmdp-card:hover .hmdp-card-title { color: var(--hmdp-c); }
.hmdp-card-meta { font-size: 13px; color: #777; line-height: 1.4; }
@media (max-width: 1024px) { .hmdp-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
    .hmdp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .hmdp .hmdp-card-title { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .hmdp-card-img img, .hmdp-nav, .hmdp-thumb { transition: none; }
}