/* BẢN ĐỒ DỰ ÁN (#ban-do-du-an)
   Bản đồ bên trái, bên phải là bộ lọc miền / tỉnh / loại hình và danh sách dự án.
   Điện thoại: bản đồ ở trên, bộ lọc và danh sách cuộn bên dưới. */
/* Độ rộng khung danh sách trên máy tính, dùng chung cho câu nối giữa các màn */
:root{
    --pmap-panel-w: 46vw;
}
#ban-do-du-an{
    --pin-w: 28px;
    --pmap-gold: #f5aa58;
    --pmap-gold-dark: #8a6a2f;
    --pmap-line: rgba(34, 34, 34, .1);
}
#ban-do-du-an [hidden]{
    display: none !important;
}
#ban-do-du-an .section-content{
    display: block;
}
/* Tiêu đề góc nằm trên bản đồ, góc trên bên trái, tránh nút chatbot góc dưới bên phải */
#ban-do-du-an .section-heading.absolute{
    top: var(--space-5);
    bottom: auto;
    left: 0;
    right: auto;
    pointer-events: none;
    transition: filter .3s;
}
/* Đang mở khung thông tin trên bản đồ: ẩn tiêu đề góc và lớp sáng dưới nó cho khỏi che khung */
#ban-do-du-an.has-pop .section-heading.absolute{
    filter: opacity(0);
}
#ban-do-du-an.has-pop .pmap-map::after{
    opacity: 0;
}
#ban-do-du-an button{
    font-family: var(--body-font);
    color: inherit;
}
#ban-do-du-an button:focus-visible,
#ban-do-du-an a:focus-visible,
#ban-do-du-an .pmap-card:focus-visible{
    outline: 2px solid var(--pmap-gold);
    outline-offset: 2px;
}
.pmap{
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Bản đồ */
.pmap-map{
    position: relative;
    flex: 0 0 auto;
    height: 42vh;
    height: 42svh;
    min-height: 15rem;
    max-height: 28rem;
    overflow: hidden;
    background: #e9e9e6;
}
#map_canvas.pmap-canvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #e9e9e6;
}
.pmap-surface{
    position: absolute;
    inset: 0;
}
#ban-do-du-an .pmap-canvas img{
    max-width: none;
}
/* Nền sáng mờ dưới tiêu đề góc cho dễ đọc, chỉ phủ góc trên bên trái để không che nút phóng to */
.pmap-map::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: min(75%, 34rem);
    height: 7rem;
    background: radial-gradient(ellipse at 0 0, rgba(250, 250, 250, .95) 0%, rgba(250, 250, 250, .7) 40%, rgba(250, 250, 250, 0) 72%);
    z-index: 2;
    pointer-events: none;
    transition: opacity .3s;
}
.pmap-map.is-loading::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #e9e9e6 linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 70%);
    background-size: 200% 100%;
    animation: pmap-shimmer 1.4s linear infinite;
    pointer-events: none;
}
@keyframes pmap-shimmer{
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}

/* Khung bộ lọc + danh sách */
.pmap-panel{
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-4) 0;
    background: var(--color-white);
}
.pmap-head{
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-3);
}
#ban-do-du-an .pmap-head .title{
    font-size: var(--fs-xl);
    line-height: 1.1;
}
.pmap-sub{
    display: none;
    font-size: var(--fs-xl);
    line-height: 1.2;
    background: linear-gradient(90deg, rgba(167, 123, 52, 1) 0%, rgba(245, 170, 88, 1) 49%, rgba(167, 123, 52, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pmap-scroll{
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: var(--space-2);
    /* chừa chỗ cho nút thuyết minh và chatbot nằm chồng góc dưới bên phải */
    padding-bottom: 9.5rem;
}
.pmap-filters{
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--pmap-line);
    background: var(--color-white);
}

/* Miền: 4 ô số liệu */
.pmap-tabs{
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--color-white);
    border-bottom: 1px solid rgba(34, 34, 34, .12);
}
.pmap-tab{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2) var(--space-1) var(--space-3);
    background: none;
    border: 0;
    cursor: pointer;
    text-align: center;
}
.pmap-tab-num{
    display: block;
    font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
    line-height: 1;
    color: var(--color-black);
    transition: color .25s;
}
.pmap-tab-name{
    display: block;
    margin-top: 4px;
    font-size: .6875rem;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--gray-color);
}
.pmap-tab::after{
    content: '';
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--color-red);
    transform: scaleX(0);
    transition: transform .3s;
}
.pmap-tab:hover .pmap-tab-num,
.pmap-tab.is-active .pmap-tab-num{
    color: var(--color-red);
}
.pmap-tab.is-active .pmap-tab-name{
    color: var(--color-black);
}
.pmap-tab.is-active::after{
    transform: scaleX(1);
}
.pmap-tab.is-empty{
    opacity: .45;
}
.pmap-tab:disabled{
    opacity: .35;
    cursor: default;
}

/* Tỉnh/thành trong miền */
.pmap-provinces{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: var(--space-3);
}
.pmap-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(34, 34, 34, .15);
    border-radius: 999px;
    background: #fff;
    font-size: var(--fs-xs);
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .2s, color .2s, background-color .2s;
}
.pmap-chip small{
    font-size: .85em;
    color: var(--gray-color);
}
.pmap-chip:hover,
.pmap-chip.is-active{
    border-color: var(--color-red);
    color: var(--color-red);
}
.pmap-chip.is-active{
    background: rgba(227, 6, 19, .06);
}
.pmap-chip.is-active small{
    color: var(--color-red);
}
.pmap-chip.is-empty{
    opacity: .45;
}

/* Loại hình: ảnh với lớp tối phía dưới, đỏ chỉ là vạch nhấn, không phủ màng đỏ lên ảnh */
.pmap-types{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding-top: var(--space-3);
}
.pmap-type{
    position: relative;
    display: block;
    height: 4rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-black);
    isolation: isolate;
    cursor: pointer;
    text-align: left;
    transition: opacity .25s, box-shadow .25s;
}
.pmap-type img{
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s, filter .3s;
}
.pmap-type::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(34, 34, 34, .88), rgba(34, 34, 34, .35) 55%, rgba(34, 34, 34, 0));
}
.pmap-type::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}
.pmap-type-name{
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    bottom: var(--space-2);
    font-size: var(--fs-xs);
    line-height: 1.15;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--color-white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.pmap-type-count{
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 1.6rem;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(250, 250, 250, .92);
    color: var(--color-black);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: background-color .25s, color .25s;
}
.pmap-type:hover img{
    transform: scale(1.06);
}
.pmap-types.has-active .pmap-type:not(.is-active){
    opacity: .75;
}
.pmap-types.has-active .pmap-type:not(.is-active) img{
    filter: grayscale(1);
}
.pmap-type.is-active{
    box-shadow: 0 0 0 2px var(--color-red);
}
.pmap-type.is-active::after{
    transform: scaleX(1);
}
.pmap-type.is-active .pmap-type-count{
    background: var(--color-red);
    color: #fff;
}
.pmap-type.is-empty .pmap-type-count{
    opacity: .6;
}

/* Số dự án đang hiện + nút xem tất cả */
.pmap-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-top: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--gray-color);
}
.pmap-result strong{
    margin-right: 2px;
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: var(--fs-md);
    color: var(--color-red);
}
.pmap-reset{
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--fs-xs);
    color: var(--color-red) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Phân trang: máy tính mỗi trang vừa khít khung nên không phải cuộn */
.pmap-pager{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--gray-color);
    white-space: nowrap;
}
.pmap-page-num strong{
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: var(--fs-sm);
    color: var(--color-black);
}
#ban-do-du-an .pmap-page{
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(34, 34, 34, .15);
    border-radius: 50%;
    background: #fff;
    color: var(--color-black);
    cursor: pointer;
    transition: border-color .2s, color .2s, background-color .2s;
}
#ban-do-du-an .pmap-page:hover:not(:disabled){
    border-color: var(--color-red);
    color: var(--color-red);
}
#ban-do-du-an .pmap-page:disabled{
    opacity: .35;
    cursor: default;
}
.pmap-pager--foot{
    display: flex;
    justify-content: center;
    margin: var(--space-3) 0 0;
}

/* Danh sách dự án */
.pmap-list{
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-3);
}
.pmap-card{
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2);
    background: #fff;
    border: 1px solid rgba(34, 34, 34, .08);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: box-shadow .25s, border-color .25s;
}
.pmap-card:hover,
.pmap-card.is-hover,
.pmap-card.is-group{
    border-color: rgba(167, 123, 52, .35);
    box-shadow: 0 8px 24px -12px rgba(34, 34, 34, .35);
}
.pmap-card.is-group{
    border-left-color: var(--pmap-gold);
}
.pmap-card.is-active{
    border-color: rgba(227, 6, 19, .25);
    border-left-color: var(--color-red);
    box-shadow: 0 0 0 1px rgba(227, 6, 19, .25), 0 10px 28px -14px rgba(227, 6, 19, .45);
}
.pmap-thumb{
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, #2b2b2b, #4a4a4a);
}
.pmap-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}
.pmap-card:hover .pmap-thumb img{
    transform: scale(1.06);
}
/* Tên dự án 2 dòng, dưới là nhãn loại hình và địa chỉ chung một dòng cho thẻ gọn, mỗi trang được nhiều thẻ hơn */
.pmap-body{
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "name name" "badge addr";
    align-items: center;
    gap: 4px 8px;
}
.pmap-body .pmap-badge{
    grid-area: badge;
    justify-self: start;
}
#ban-do-du-an .pmap-name{
    grid-area: name;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--body-font);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-black);
    transition: color .2s;
}
#ban-do-du-an .pmap-card.is-active .pmap-name{
    color: var(--color-red);
}
.pmap-addr{
    grid-area: addr;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: var(--gray-color);
}
.pmap-addr svg{
    flex: 0 0 auto;
    color: var(--color-red);
}
.pmap-addr span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pmap-badge{
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .6875rem;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pmap-badge--t0{
    color: var(--pmap-gold-dark);
}
.pmap-badge--t1{
    color: var(--color-black);
}
.pmap-badge--t2{
    color: var(--color-red);
}
#ban-do-du-an .pmap-go{
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-red);
    border-radius: 50%;
    color: var(--color-red);
    transition: background-color .2s, color .2s;
}
#ban-do-du-an .pmap-go:hover,
#ban-do-du-an .pmap-go:focus-visible{
    background: var(--color-red);
    color: #fff;
}
.pmap-empty{
    padding: var(--space-6) var(--space-4);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--gray-color);
}
#ban-do-du-an .pmap-empty p{
    margin-bottom: var(--space-4);
}
.pmap-empty .pmap-reset{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-5);
    border-radius: 999px;
    background: var(--color-red);
    color: #fff !important;
    font-size: var(--fs-xs);
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s;
}
.pmap-empty .pmap-reset:hover{
    background: var(--color-black);
}

/* Ghim, nhóm ghim */
.pmap-pin{
    position: relative;
    width: var(--pin-w);
    line-height: 0;
    cursor: pointer;
    transform-origin: 50% 100%;
    transition: transform .25s;
}
#ban-do-du-an .pmap-pin img{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3));
}
.pmap-pin:hover,
.pmap-pin.is-hover{
    transform: scale(1.15);
}
.pmap-pin.is-active{
    transform: scale(1.3);
}
.pmap-cluster{
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--color-red);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 0 0 5px rgba(245, 170, 88, .45), 0 6px 14px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
}
.pmap-cluster span{
    transform: translateY(1px);
}
.pmap-cluster:hover,
.pmap-cluster.is-hover{
    transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(245, 170, 88, .55), 0 8px 18px rgba(0, 0, 0, .3);
}
/* Google neo nội dung ghim ở giữa cạnh dưới: đẩy vòng tròn xuống cho tâm trùng vị trí */
.is-google .pmap-cluster{
    transform: translateY(50%);
}
.is-google .pmap-cluster:hover,
.is-google .pmap-cluster.is-hover{
    transform: translateY(50%) scale(1.12);
}
#ban-do-du-an .pmap-divicon{
    background: none;
    border: 0;
}
#ban-do-du-an .pmap-sea{
    width: 0 !important;
    height: 0 !important;
    pointer-events: none;
}
#ban-do-du-an .pmap-sea span{
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-family: var(--body-font);
    font-size: 12px;
    font-style: italic;
    letter-spacing: .04em;
    color: #7d8b99;
}

/* Khung thông tin trên bản đồ (điện thoại: gọn lại cho vừa bản đồ thấp) */
.pmap-pop{
    position: relative;
    width: 220px;
    font-family: var(--body-font);
    color: var(--color-black);
    text-align: left;
}
#ban-do-du-an .pmap-pop-close{
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(250, 250, 250, .92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    color: var(--color-black);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.pmap-pop-close:hover{
    color: var(--color-red) !important;
}
.pmap-pop-img{
    display: block;
    aspect-ratio: 5 / 2;
    overflow: hidden;
    background: linear-gradient(135deg, #2b2b2b, #4a4a4a);
}
.pmap-pop-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pmap-pop-body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: var(--space-2) var(--space-3) var(--space-3);
}
#ban-do-du-an .pmap-pop-name{
    margin: 0;
    font-family: var(--body-font);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.3;
}
#ban-do-du-an .pmap-pop-addr{
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.35;
    color: var(--gray-color);
}
#ban-do-du-an .pmap-pop-link{
    margin-top: 2px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-red);
}
#ban-do-du-an .pmap-pop-link:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pmap-pop--list .pmap-pop-body{
    padding-top: var(--space-4);
}
#ban-do-du-an .pmap-pop-count{
    margin: 0;
    padding-right: 2rem;
    font-size: var(--fs-md);
    color: var(--color-red);
}
.pmap-pop-list{
    width: 100%;
    max-height: 14rem;
    overflow: auto;
    overscroll-behavior: contain;
}
.pmap-pop-list li{
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid rgba(34, 34, 34, .08);
}
#ban-do-du-an .pmap-pop-list button{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border: 0;
    background: none;
    font-size: var(--fs-xs);
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
#ban-do-du-an .pmap-pop-list button:hover{
    color: var(--color-red);
}
#ban-do-du-an .pmap-pop-list a{
    flex: 0 0 auto;
    padding: 4px 6px;
    color: var(--color-red);
}
.pmap-dot{
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-black);
}
.pmap-dot--t0{
    background: #c79a52;
}
.pmap-dot--t2{
    background: var(--color-red);
}
/* Khung thông tin của Google */
#ban-do-du-an .gm-style .gm-style-iw-c{
    padding: 0 !important;
    border-radius: var(--radius-md) !important;
    max-height: none !important;
}
#ban-do-du-an .gm-style .gm-style-iw-d{
    overflow: hidden !important;
    padding: 0 !important;
    max-height: none !important;
}
#ban-do-du-an .gm-style .gm-style-iw-chr{
    display: none;
}
/* Leaflet */
#ban-do-du-an .leaflet-container{
    background: #e9e9e6;
    font-family: var(--body-font);
}
/* Nền Đại dương nhiều màu: chuyển xám nhạt cho khớp nền xám khi phóng gần và để ghim đỏ nổi bật */
#ban-do-du-an .hud-tiles-far{
    filter: grayscale(1) contrast(.42) brightness(1.42);
}
#ban-do-du-an .pmap-lpop .leaflet-popup-content-wrapper{
    padding: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45);
}
#ban-do-du-an .pmap-lpop .leaflet-popup-content{
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}
#ban-do-du-an .pmap-lpop .leaflet-popup-content p{
    margin: 0;
}
#ban-do-du-an .leaflet-bar{
    border: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
#ban-do-du-an .leaflet-bar a{
    width: 32px;
    height: 32px;
    line-height: 30px;
    color: var(--color-black);
}
#ban-do-du-an .leaflet-bar a:hover{
    color: var(--color-red);
}
#ban-do-du-an .leaflet-control-attribution{
    font-size: 10px;
    background: rgba(250, 250, 250, .8);
}
/* Điện thoại: nút chương nằm góc trên bên phải, nút phóng to đặt ngay dưới */
@media only screen and (max-width: 61.99rem){
    #ban-do-du-an .leaflet-top.leaflet-right{
        top: 3.5rem;
    }
}

@media only screen and (min-width: 36rem){
    .pmap-tab-name{
        font-size: var(--fs-xs);
        letter-spacing: .06em;
    }
}
@media only screen and (min-width: 36rem) and (max-width: 61.99rem){
    .pmap-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Thẻ hẹp khi xếp 2 cột: nhãn loại hình và địa chỉ mỗi thứ một dòng */
    .pmap-body{
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "name" "badge" "addr";
    }
}
@media only screen and (min-width: 62rem){
    #ban-do-du-an{
        --pin-w: 34px;
    }
    .pmap{
        flex-direction: row;
    }
    .pmap-map{
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        min-height: 0;
        max-height: none;
    }
    .pmap-map::after{
        height: 10rem;
    }
    .pmap-panel{
        flex: 0 0 var(--pmap-panel-w);
        height: 100%;
        /* lề phải chừa chỗ cho thanh chương dọc */
        padding: var(--space-6) 5rem 0 var(--space-6);
        border-left: 1px solid rgba(167, 123, 52, .35);
    }
    #ban-do-du-an .pmap-head .title{
        font-size: clamp(1.5rem, .9rem + 1.6vw, 3rem);
    }
    .pmap-sub{
        display: block;
    }
    .pmap-scroll{
        margin-top: var(--space-4);
        padding-bottom: 6.5rem;
    }
    .pmap-pager--foot{
        display: none;
    }
    /* Câu nối giữa các màn: canh giữa phần bản đồ, không đè lên khung danh sách */
    body.pmap-on .story-bridge{
        right: var(--pmap-panel-w);
        max-width: calc(100vw - var(--pmap-panel-w) - 2rem);
    }
    .pmap-filters{
        position: sticky;
        top: 0;
        z-index: 3;
    }
    .pmap-tabs{
        position: static;
    }
    .pmap-type{
        height: clamp(3.5rem, 1.5rem + 5vh, 5rem);
    }
    .pmap-card{
        grid-template-columns: 5rem minmax(0, 1fr) auto;
        padding: 6px var(--space-2) 6px 6px;
    }
    /* Tên luôn giữ chỗ 2 dòng để các thẻ cao bằng nhau, chia trang cho vừa khung */
    #ban-do-du-an .pmap-name{
        min-height: 2.6em;
    }
    .pmap-pop{
        width: 260px;
    }
    .pmap-pop-img{
        aspect-ratio: 16 / 9;
    }
    .pmap-pop-body{
        gap: 6px;
        padding: var(--space-3);
    }
}
/* Khung bên phải còn hẹp (1024 - 1279px): tên miền nhỏ lại cho khỏi xuống dòng */
@media only screen and (min-width: 62rem) and (max-width: 79.99rem){
    .pmap-tab-name{
        font-size: .6875rem;
        letter-spacing: .02em;
    }
}
/* Ô loại hình hẹp (điện thoại, 1024 - 1279px): chữ sát hơn cho tên 2 chữ khỏi gãy lẻ */
@media only screen and (max-width: 79.99rem){
    .pmap-type-name{
        letter-spacing: .01em;
    }
}
@media only screen and (min-width: 80rem){
    :root{
        --pmap-panel-w: clamp(27rem, 44vw, 46rem);
    }
}
@media only screen and (min-width: 106.25rem){
    #ban-do-du-an .section-heading.absolute{
        top: var(--space-8);
    }
    .pmap-map::after{
        height: 13rem;
    }
    .pmap-panel{
        padding-top: var(--space-7);
    }
    .pmap-list{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pmap-card{
        grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    }
    .pmap-body{
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "name" "badge" "addr";
    }
}
/* Màn thấp (1280x720, 1024x768): thu gọn bộ lọc để danh sách còn chỗ */
@media only screen and (min-width: 62rem) and (max-height: 48rem){
    .pmap-sub{
        display: none;
    }
    .pmap-panel{
        padding-top: var(--space-4);
    }
    .pmap-scroll{
        margin-top: var(--space-3);
    }
    .pmap-tab{
        padding-top: var(--space-1);
        padding-bottom: var(--space-2);
    }
    .pmap-tab-num{
        font-size: 1.25rem;
    }
    .pmap-type{
        height: 3.5rem;
    }
}
@media (prefers-reduced-motion: reduce){
    #ban-do-du-an .pulse-ring,
    #ban-do-du-an .pulse-ring::before,
    #ban-do-du-an .pulse-ring::after,
    .pmap-map.is-loading::before{
        animation: none;
    }
    .pmap-card,
    .pmap-thumb img,
    .pmap-type,
    .pmap-type img,
    .pmap-pin,
    .pmap-cluster,
    .pmap-tab::after{
        transition: none;
    }
}
/* Trang in: chỉ giữ bản đồ, ô miền và ô loại hình làm chú thích, đặt giữa khung phải, ảnh loại hình to ra cho đầy trang */
.hudpr #ban-do-du-an .pmap-list,
.hudpr #ban-do-du-an .pmap-meta,
.hudpr #ban-do-du-an .pmap-provinces,
.hudpr #ban-do-du-an .pmap-empty,
.hudpr #ban-do-du-an .pmap-reset,
.hudpr #ban-do-du-an .pmap-pager{
    display: none !important;
}
.hudpr #ban-do-du-an .pmap-filters{
    border-bottom: 0;
}
.hudpr #ban-do-du-an .pmap-panel{
    justify-content: center;
}
.hudpr #ban-do-du-an .pmap-scroll{
    flex: 0 0 auto;
    overflow: visible;
    padding-bottom: 0;
}
.hudpr #ban-do-du-an .pmap-type{
    height: 11rem;
}