.page-id-185 .entry-title,
.page-id-182 .entry-title,
body:has(.hpw-property-detail) .entry-title { display:none; }

.hpw-property-detail {
    --pd-green-dark:var(--hpw-brand-deep);
    --pd-green:var(--hpw-brand-ink);
    --pd-mint:#1D9E75;
    --pd-soft:#f3faf7;
    --pd-line:#dcebe4;
    --pd-text:#17251f;
    --pd-muted:#607568;
    max-width: 1080px;
    margin: 0 auto 42px;
    /* v4.29.0: ฟอนต์อีโมจิท้าย stack — ดูเหตุผลใน admin.css */
    font-family: var(--hpw-font);
    color: var(--pd-text);
}
.hpw-pd-breadcrumb {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin:18px 0 14px;
    padding:10px 14px;
    border:1px solid rgba(var(--hpw-brand-deep-rgb),.12);
    border-radius:999px;
    background:#f7fcf9;
    color:var(--pd-muted);
    font-size:13px;
}
.hpw-pd-breadcrumb a {
    color:var(--pd-green);
    font-weight:900;
    text-decoration:none !important;
}
.hpw-pd-breadcrumb span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.hpw-admin-edit-link {
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    background:#fbbf24;
    color:var(--hpw-brand-dark) !important;
    font-weight:950;
    text-decoration:none !important;
    box-shadow:0 8px 18px rgba(var(--hpw-brand-deep-rgb),.14);
}
.hpw-admin-edit-link:hover { background:#ffd56a; transform:translateY(-1px); }
.hpw-pd-hero {
    display:grid;
    grid-template-columns:minmax(0, .95fr) minmax(320px, 1.05fr);
    gap:0;
    overflow:hidden;
    border:1px solid var(--pd-line);
    border-radius:22px;
    background:linear-gradient(135deg,var(--pd-green-dark),var(--pd-green));
    box-shadow:0 18px 48px rgba(var(--hpw-brand-deep-rgb),.14);
    margin:28px 0;
}
.hpw-pd-hero-img { width:100%; height:100%; min-height:330px; object-fit:cover; display:block; }
.hpw-pd-hero-placeholder {
    min-height:330px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 28%),
        radial-gradient(circle at 82% 84%, rgba(251,191,36,.18), transparent 34%),
        linear-gradient(135deg,var(--hpw-brand-dark) 0%,var(--hpw-brand-deep) 48%,var(--hpw-brand-ink) 100%);
}
.hpw-pd-hero-placeholder::before {
    content:"";
    position:absolute;
    inset:22px;
    border:1px dashed rgba(255,255,255,.24);
    border-radius:20px;
    z-index:0;
}
.hpw-pd-hero-placeholder::after {
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-74px;
    bottom:-74px;
    border-radius:999px;
    background:rgba(251,191,36,.15);
    z-index:0;
}
.hpw-pd-hero-placeholder-logo {
    position:absolute;
    z-index:1;
    width:min(52%,270px);
    max-height:175px;
    object-fit:contain;
    opacity:.16;
    filter:brightness(1.18) drop-shadow(0 18px 32px rgba(0,0,0,.28));
}
.hpw-pd-hero-placeholder-copy {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:min(82%,360px);
    padding:26px 22px;
    border-radius:24px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 22px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16);
    text-align:center;
    color:#fff;
    backdrop-filter:blur(8px);
}
.hpw-pd-hero-placeholder-copy span {
    color:#fbbf24;
    font-size:11px;
    font-weight:950;
    letter-spacing:.16em;
}
.hpw-pd-hero-placeholder-copy strong {
    color:#fff;
    font-size:clamp(28px,4.5vw,44px);
    line-height:1;
    text-shadow:0 3px 18px rgba(0,0,0,.24);
}
.hpw-pd-hero-placeholder-copy small {
    color:rgba(255,255,255,.78);
    font-size:13px;
    font-weight:800;
}
.hpw-pd-hero-body { padding:34px; color:#fff; align-self:center; }
.hpw-pd-eyebrow { color:#54e0af; font-size:11px; font-weight:900; letter-spacing:2.4px; text-transform:uppercase; margin-bottom:10px; }
.hpw-pd-hero h1 { color:#fff; font-size:clamp(28px,4vw,48px); line-height:1.12; margin:0 0 14px; font-weight:900; }
.hpw-pd-address { color:rgba(255,255,255,.82); font-size:15px; line-height:1.7; margin:0 0 18px; }
.hpw-pd-stats { display:flex; flex-wrap:wrap; gap:10px; }
.hpw-pd-stats span,
.hpw-pd-stats a { display:inline-flex; align-items:center; gap:5px; padding:9px 12px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.08); color:#fff; font-size:13px; text-decoration:none !important; }
.hpw-pd-stats a { cursor:pointer; transition:background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.hpw-pd-stats a:hover,
.hpw-pd-stats a:focus-visible { background:rgba(84,224,175,.2); border-color:rgba(84,224,175,.54); color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12); outline:none; }
.hpw-pd-stats strong { color:#54e0af; font-size:18px; }
.hpw-pd-section { margin:24px 0; padding:26px; border:1px solid var(--pd-line); border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(var(--hpw-brand-deep-rgb),.07); }
.hpw-pd-section h2 { margin:0 0 16px; color:var(--pd-green-dark); font-size:22px; font-weight:900; }
.hpw-pd-section-lead { margin:-6px 0 16px; color:var(--pd-muted); font-size:14px; line-height:1.7; }
.hpw-pd-map-section .hpw-map-wrapper { box-shadow:none; border-color:var(--pd-line); }
.hpw-pd-map-section .hpw-map-header {
    padding-top:22px;
    padding-bottom:16px;
    background:linear-gradient(135deg,#053622 0%,#0b5b3b 52%,#16845d 100%);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.14);
}
.hpw-pd-map-section .hpw-map-eyebrow { color:#67f0bb; text-shadow:0 1px 2px rgba(0,0,0,.34); }
.hpw-pd-map-section .hpw-map-title {
    color:#fff !important;
    text-shadow:0 2px 10px rgba(0,0,0,.34);
    letter-spacing:.01em;
}
.hpw-pd-map-section .hpw-map-logo { filter:brightness(1.25) drop-shadow(0 3px 8px rgba(0,0,0,.36)); }
.hpw-pd-map-section .hpw-map-stats {
    margin-top:18px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.12);
}
.hpw-pd-map-section .hpw-map-stat-val { color:#6ff3bf; text-shadow:0 1px 8px rgba(0,0,0,.22); }
.hpw-pd-map-section .hpw-map-stat-label { color:rgba(255,255,255,.9); font-weight:800; }
.hpw-pd-content { font-size:16px; line-height:1.9; }
.hpw-pd-content :first-child { margin-top:0; }
.hpw-pd-content :last-child { margin-bottom:0; }
.hpw-pd-video { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:16px; background:#111; }
.hpw-pd-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* YouTube auto-embed ใน description */
.hpw-yt-embed-wrap { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:#111; margin:16px 0; }
.hpw-yt-embed-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.hpw-pd-layout-img { width:100%; max-height:720px; object-fit:contain; border-radius:16px; border:1px solid var(--pd-line); background:var(--pd-soft); display:block; }
.hpw-pd-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.hpw-pd-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; border:1px solid var(--pd-line); display:block; }
.hpw-pd-section-headline{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.hpw-pd-section-headline span{display:block;color:#0fa676;font-size:11px;font-weight:900;letter-spacing:.12em}.hpw-pd-section-headline h2{margin:2px 0 0!important}.hpw-pd-section-headline p{margin:0;color:var(--pd-muted);font-size:14px;max-width:430px;text-align:right}.hpw-pd-carousel{position:relative}.hpw-pd-carousel-stage{position:relative;border-radius:22px;overflow:hidden;background:#082f23;box-shadow:0 18px 44px rgba(8,47,35,.16)}.hpw-pd-main-photo{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}.hpw-pd-main-photo img{display:block;width:100%;height:min(62vw,560px);min-height:360px;object-fit:cover}.hpw-pd-main-photo:after{content:"คลิกเพื่อดูภาพใหญ่";position:absolute;left:18px;bottom:18px;padding:8px 12px;border-radius:999px;background:rgba(8,47,35,.72);color:#fff;font-size:13px;font-weight:800;backdrop-filter:blur(8px)}.hpw-pd-photo-count{position:absolute;right:18px;bottom:18px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.9);color:#0b6042;font-weight:900;font-size:13px}.hpw-pd-car-btn{position:absolute;top:50%;z-index:4;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#0b6042;font-size:34px;line-height:1;box-shadow:0 10px 25px rgba(0,0,0,.20);cursor:pointer}.hpw-pd-car-btn.is-prev{left:14px}.hpw-pd-car-btn.is-next{right:14px}.hpw-pd-car-btn:hover{background:#0b6042;color:#fff}.hpw-pd-thumb-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:14px 2px 2px;scrollbar-width:thin}.hpw-pd-thumb{flex:0 0 124px;height:82px;padding:0;border:2px solid transparent;border-radius:14px;overflow:hidden;background:#f3faf6;cursor:pointer;opacity:.72;scroll-snap-align:center}.hpw-pd-thumb img{width:100%;height:100%;object-fit:cover;display:block}.hpw-pd-thumb.is-active{opacity:1;border-color:#0fa676;box-shadow:0 0 0 3px rgba(15,166,118,.14)}.hpw-pd-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(4,18,14,.94);z-index:99999;padding:34px}.hpw-pd-lightbox.is-open{display:flex}.hpw-pd-lightbox figure{margin:0;max-width:min(1180px,92vw);max-height:90vh;display:grid;gap:12px}.hpw-pd-lightbox figure img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:18px;box-shadow:0 22px 60px rgba(0,0,0,.5);background:#111}.hpw-pd-lightbox figcaption{display:flex;justify-content:space-between;gap:18px;color:#fff;font-size:14px}.hpw-pd-lb-counter{font-weight:900;color:#9ff0cf}.hpw-pd-lb-close,.hpw-pd-lb-btn{position:absolute;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;backdrop-filter:blur(8px)}.hpw-pd-lb-close{top:22px;right:24px;width:46px;height:46px;font-size:30px}.hpw-pd-lb-btn{top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:42px}.hpw-pd-lb-btn.is-prev{left:24px}.hpw-pd-lb-btn.is-next{right:24px}.hpw-pd-lb-btn:disabled{opacity:.28;cursor:not-allowed}.hpw-pd-lb-close:hover,.hpw-pd-lb-btn:not(:disabled):hover{background:#0fa676;color:#062119}
/* Premium gallery controls refresh */
.hpw-pd-carousel-stage { border-radius:24px; box-shadow:0 24px 70px rgba(8,47,35,.18); }
.hpw-pd-main-photo { border-radius:24px; overflow:hidden; }
.hpw-pd-main-photo img { transition:opacity .2s ease; }
.hpw-pd-car-btn {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:54px!important;
    height:54px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.72)!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.86)!important;
    color:#07583b!important;
    font-size:34px!important;
    line-height:1!important;
    font-weight:500!important;
    box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
    backdrop-filter:blur(12px);
}
.hpw-pd-car-btn.is-prev { left:24px!important; }
.hpw-pd-car-btn.is-next { right:24px!important; }
.hpw-pd-car-btn:hover { background:#07583b!important; color:#fff!important; transform:translateY(-50%) scale(1.04)!important; }
.hpw-pd-thumb-shell { position:relative; margin-top:12px; padding:0 46px; border-radius:22px; background:linear-gradient(180deg,#ffffff,#f6fbf8); border:1px solid rgba(var(--hpw-brand-deep-rgb),.10); box-shadow:0 14px 36px rgba(var(--hpw-brand-deep-rgb),.08); overflow:hidden; }
.hpw-pd-thumb-shell:before,
.hpw-pd-thumb-shell:after { content:''; position:absolute; top:0; bottom:0; width:54px; z-index:2; pointer-events:none; opacity:0; transition:opacity .2s ease; }
.hpw-pd-thumb-shell:before { left:46px; background:linear-gradient(90deg,#f8fbf9,rgba(248,251,249,0)); }
.hpw-pd-thumb-shell:after { right:46px; background:linear-gradient(270deg,#f8fbf9,rgba(248,251,249,0)); }
.hpw-pd-thumb-shell.has-overflow:not(.at-start):before,
.hpw-pd-thumb-shell.has-overflow:not(.at-end):after { opacity:1; }
.hpw-pd-thumb-row { padding:14px 4px!important; gap:12px!important; scroll-behavior:smooth; scrollbar-width:none; }
.hpw-pd-thumb-row::-webkit-scrollbar { display:none; }
.hpw-pd-thumb { flex:0 0 132px!important; height:84px!important; border-radius:16px!important; border:2px solid transparent!important; opacity:.7!important; transform:translateZ(0); transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease!important; }
.hpw-pd-thumb:hover { opacity:1!important; transform:translateY(-2px); }
.hpw-pd-thumb.is-active { opacity:1!important; border-color:#10b981!important; box-shadow:0 0 0 4px rgba(16,185,129,.16), 0 12px 24px rgba(6,95,70,.16)!important; }
.hpw-pd-thumb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; display:none; align-items:center; justify-content:center; width:34px; height:58px; padding:0; border:0; border-radius:14px; background:#07583b; color:#fff; font-size:30px; line-height:1; box-shadow:0 10px 22px rgba(7,88,59,.22); cursor:pointer; }
.hpw-pd-thumb-shell.has-overflow .hpw-pd-thumb-nav { display:flex; }
.hpw-pd-thumb-nav.is-prev { left:8px; }
.hpw-pd-thumb-nav.is-next { right:8px; }
.hpw-pd-thumb-shell.at-start .hpw-pd-thumb-nav.is-prev,
.hpw-pd-thumb-shell.at-end .hpw-pd-thumb-nav.is-next { opacity:.34; pointer-events:none; }
.hpw-pd-thumb-nav:hover { background:#10b981; color:#052e22; }
.hpw-pd-lightbox { background:rgba(3,14,11,.92)!important; backdrop-filter:blur(12px); padding:38px 88px!important; }
.hpw-pd-lightbox figure { width:min(1180px,88vw); }
.hpw-pd-lightbox figure img { border-radius:24px!important; box-shadow:0 30px 90px rgba(0,0,0,.68)!important; }
.hpw-pd-lb-close,
.hpw-pd-lb-btn { display:flex!important; align-items:center!important; justify-content:center!important; padding:0!important; border:1px solid rgba(255,255,255,.14)!important; background:rgba(255,255,255,.14)!important; box-shadow:0 18px 44px rgba(0,0,0,.28); }
.hpw-pd-lb-close { width:48px!important; height:48px!important; line-height:1!important; }
.hpw-pd-lb-btn { width:62px!important; height:62px!important; font-size:46px!important; line-height:1!important; }
.hpw-pd-lb-btn.is-prev { left:24px!important; }
.hpw-pd-lb-btn.is-next { right:24px!important; }
.hpw-pd-lb-close:hover,
.hpw-pd-lb-btn:not(:disabled):hover { background:#10b981!important; color:#052e22!important; }
/* v3.55.0: Toolbar กรอง/เรียงลำดับห้อง (ลูกค้าเลือกเอง) */
.hpw-pd-unit-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 16px; padding:11px 13px; background:linear-gradient(180deg,#f7fcf9,#eef8f2); border:1px solid var(--pd-line); border-radius:14px; }
.hpw-pd-tb-filter { display:flex; gap:6px; flex-wrap:wrap; }
.hpw-pd-tb-chip { cursor:pointer; border:1px solid rgba(29,158,117,.3); background:#fff; color:var(--pd-green-dark); font-size:12.5px; font-weight:800; padding:6px 13px; border-radius:999px; transition:all .16s; font-family:inherit; }
.hpw-pd-tb-chip:hover { border-color:rgba(29,158,117,.6); background:#f0fbf6; }
.hpw-pd-tb-chip.is-active { background:var(--pd-green); border-color:var(--pd-green); color:#fff; box-shadow:0 4px 12px rgba(var(--hpw-brand-deep-rgb),.16); }
.hpw-pd-tb-sort { display:flex; align-items:center; gap:7px; margin-left:auto; font-size:12.5px; font-weight:800; color:var(--pd-text); }
.hpw-pd-tb-sort span { white-space:nowrap; opacity:.75; }
.hpw-pd-sort-select { font-family:inherit; font-size:12.5px; font-weight:700; color:var(--pd-green-dark); padding:7px 30px 7px 12px; border:1px solid rgba(29,158,117,.35); border-radius:10px; background-color:#fff; -webkit-appearance:none; appearance:none; cursor:pointer; transition:border-color .16s; }
.hpw-pd-sort-select:hover, .hpw-pd-sort-select:focus { border-color:var(--pd-green); outline:none; }
.hpw-pd-tb-count { font-size:11.5px; font-weight:800; color:var(--pd-green); background:rgba(29,158,117,.1); padding:5px 11px; border-radius:999px; white-space:nowrap; }
@media (max-width:560px){ .hpw-pd-tb-sort{ margin-left:0; width:100%; } .hpw-pd-sort-select{ flex:1; } .hpw-pd-tb-count{ order:-1; } }
.hpw-pd-unit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
/* v3.39.1: unit card compact — ลดความสูง (thumb เตี้ย, gap/padding/font เล็ก) */
.hpw-pd-unit-card { display:flex; flex-direction:column; gap:5px; padding:9px; border:1px solid var(--pd-line); border-radius:13px; background:linear-gradient(180deg,#f7fcf9,#eef8f2); color:var(--pd-text); text-decoration:none !important; transition:transform .18s, box-shadow .18s, border-color .18s; }
.hpw-pd-unit-card *, .hpw-pd-unit-card:hover * { text-decoration:none !important; }
.hpw-pd-unit-card:hover { transform:translateY(-3px); border-color:rgba(29,158,117,.5); box-shadow:0 12px 24px rgba(var(--hpw-brand-deep-rgb),.12); color:var(--pd-text); }
.hpw-pd-unit-thumb {
    width:100%;
    aspect-ratio:16/10;
    border-radius:11px;
    overflow:hidden;
    background:#e5eee9;
    position:relative;
    display:grid;
    place-items:center;
}
.hpw-pd-unit-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.hpw-pd-unit-thumb.is-placeholder {
    isolation:isolate;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,.18), transparent 30%),
        radial-gradient(circle at 86% 82%, rgba(251,191,36,.18), transparent 36%),
        linear-gradient(135deg,var(--hpw-brand-dark) 0%,var(--hpw-brand-deep) 52%,var(--hpw-brand-ink) 100%);
}
.hpw-pd-unit-thumb.is-placeholder::before {
    content:"";
    position:absolute;
    inset:9px;
    border:1px dashed rgba(255,255,255,.26);
    border-radius:10px;
    z-index:0;
}
.hpw-pd-unit-thumb.is-placeholder .hpw-pd-unit-placeholder-logo {
    position:absolute;
    z-index:1;
    width:68%;
    height:50%;
    object-fit:contain;
    opacity:.18;
    filter:brightness(1.16) drop-shadow(0 10px 20px rgba(0,0,0,.25));
}
.hpw-pd-unit-thumb.is-placeholder span {
    position:relative;
    z-index:2;
    width:auto;
    max-width:86%;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    font-size:12px;
    font-weight:950;
    letter-spacing:.02em;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.hpw-pd-unit-card strong { font-size:13.5px; line-height:1.3; color:var(--pd-green-dark); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hpw-pd-unit-card > span { width:max-content; padding:2px 7px; border-radius:999px; background:#dcfce7; color:#15803d; font-size:10px; font-weight:900; }
/* ★ v4.28.0: ถอดกฎสี badge ต่อสถานะทั้งชุดออก
   selector เดิม (.hpw-pd-unit-card > span.hpw-ls-badge--vacant) มีน้ำหนัก 0,2,1
   ซึ่งชนะกฎที่ทะเบียนสร้าง (.hpw-pd-unit-status.hpw-ls-badge--<คีย์> = 0,2,0)
   สีบนการ์ดห้องในหน้านี้จึงไม่ใช่สีจากทะเบียน — "มีผู้เช่า" ขึ้นแดงที่นี่แต่
   ขึ้นน้ำเงินในหน้าอื่น และ "จองแล้ว" ไม่เคยได้เหลืองของตัวเองเลย
   (สองบรรทัด --external / --future ตายไปแล้วตั้งแต่ชื่อคลาสเปลี่ยนไปใช้
   คีย์จริง external_occupied / future_project) */
.hpw-pd-unit-card.has-promo { background:linear-gradient(180deg,#fffdf2 0%,#effcf5 100%); border-color:rgba(245,158,11,.26); box-shadow:0 14px 32px rgba(120,83,4,.08); }
/* v3.56.0: ริบบิ้น "ว่าง" มุมบนซ้ายของรูป (เฉพาะห้องว่าง) */
.hpw-pd-unit-vacant-ribbon { position:absolute; top:10px; left:10px; z-index:4; display:inline-flex; align-items:center; gap:3px; padding:4px 12px; border-radius:999px; background:linear-gradient(135deg,#22c55e,#15803d); color:#fff; font-size:11.5px; font-weight:950; letter-spacing:.02em; box-shadow:0 8px 20px rgba(21,128,61,.35); border:1.5px solid rgba(255,255,255,.65); animation:hpwVacantPulse 2.2s ease-in-out infinite; }
@keyframes hpwVacantPulse { 0%,100%{ box-shadow:0 8px 20px rgba(21,128,61,.35); } 50%{ box-shadow:0 8px 26px rgba(21,128,61,.6); } }
@media (prefers-reduced-motion: reduce){ .hpw-pd-unit-vacant-ribbon{ animation:none; } }
.hpw-pd-unit-promo-badge { position:absolute; top:10px; right:10px; z-index:3; display:inline-flex; align-items:center; max-width:calc(100% - 20px); min-height:28px; padding:0 10px; border-radius:999px; background:linear-gradient(135deg,#facc15,#f59e0b); color:#3f2d00; font-size:11px; font-weight:950; box-shadow:0 10px 22px rgba(120,83,4,.18); }
.hpw-pd-unit-specs { display:flex; flex-wrap:wrap; gap:3px; margin-top:1px; }
.hpw-pd-unit-specs b { padding:3px 6px; border-radius:999px; background:#fff; border:1px solid rgba(15,107,73,.12); color:#24433a; font-size:10px; font-weight:800; line-height:1; }
.hpw-pd-unit-utilities { display:block; color:#5e7169; font-size:10px; line-height:1.35; }
.hpw-pd-unit-price-wrap { margin-top:auto; display:flex; flex-direction:column; gap:3px; padding-top:1px; }
.hpw-pd-unit-price-wrap.is-promo { padding:6px; border-radius:11px; background:rgba(255,251,235,.76); border:1px solid rgba(245,158,11,.18); }
.hpw-pd-unit-old-price { display:inline-flex; align-items:center; gap:5px; width:max-content; max-width:100%; padding:4px 7px; border-radius:999px; background:#fff; border:1px solid rgba(239,68,68,.12); color:#64748b; font-size:10.5px; font-weight:900; line-height:1; }
.hpw-pd-unit-old-price del { color:#ef4444; text-decoration-thickness:2px; }
.hpw-pd-unit-card em { color:var(--pd-green); font-style:normal; font-size:13.5px; line-height:1; font-weight:950; letter-spacing:-.02em; }
.hpw-pd-unit-promo-dates { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:2px; }
.hpw-pd-unit-promo-dates span { display:flex; align-items:center; justify-content:center; min-height:22px; padding:3px 5px; border-radius:8px; background:#fff7d6; color:#7c4a03; font-size:9.5px; line-height:1.1; font-weight:900; white-space:nowrap; }
.hpw-pd-no-units {
    padding:28px;
    border:1px dashed rgba(var(--hpw-brand-deep-rgb),.22);
    border-radius:16px;
    background:linear-gradient(135deg,#f7fcf9,#eef8f2);
    color:var(--pd-green-dark);
    font-size:18px;
    font-weight:900;
    text-align:center;
}
/* Overview / project picker — Happy Realestate inspired */
.hpw-property-overview { max-width: 1180px; }
.hpw-po-unit-slider {
    position:relative;
    max-width:1180px;
    margin:28px auto 10px;
    padding:28px clamp(18px,3vw,42px) 30px;
    border-radius:34px;
    background:radial-gradient(circle at 18% 22%,rgba(16,185,129,.22),transparent 30%),linear-gradient(135deg,#042419 0%,#07583b 48%,#eaf8f0 48.2%,#ffffff 100%);
    box-shadow:0 32px 80px rgba(4,47,34,.20);
    overflow:hidden;
}
.hpw-po-slider-head { display:flex; align-items:end; justify-content:space-between; gap:18px; color:#fff; margin-bottom:18px; position:relative; z-index:2; }
.hpw-po-slider-head span { display:block; color:#94f3c5; font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.hpw-po-slider-head strong { display:block; font-size:clamp(24px,3vw,40px); line-height:1.05; letter-spacing:-.04em; text-shadow:0 14px 28px rgba(0,0,0,.18); }
.hpw-po-slider-frame { position:relative; z-index:2; padding:0 58px 12px; }
.hpw-po-slider-track { display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 0 18px; scrollbar-width:none; }
.hpw-po-slider-track::-webkit-scrollbar { display:none; }
.hpw-po-slide-card { flex:0 0 100%; scroll-snap-align:center; display:grid; grid-template-columns:minmax(320px,48%) 1fr; min-height:360px; background:rgba(255,255,255,.96); border-radius:28px; overflow:hidden; color:#0f172a; text-decoration:none !important; box-shadow:0 24px 54px rgba(15,23,42,.18); border:1px solid rgba(255,255,255,.82); transform:scale(.965); opacity:.62; transition:transform .28s ease, box-shadow .28s ease, opacity .28s ease; }
.hpw-po-slide-card.is-active { transform:scale(1); opacity:1; }
.hpw-po-slide-card:hover { transform:scale(1) translateY(-3px); box-shadow:0 32px 70px rgba(15,23,42,.23); text-decoration:none !important; }
.hpw-po-slide-card * { text-decoration:none !important; }
.hpw-po-slider-count-1 { position:relative; }
.hpw-po-slider-count-1 .hpw-po-slider-arrow { opacity:.56; }
.hpw-po-slider-count-1 .hpw-po-slider-thumbs { max-width:max-content; }
.hpw-po-slider-arrow { position:absolute; top:50%; z-index:5; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:52px; height:52px; padding:0; border:1px solid rgba(255,255,255,.76); border-radius:999px; background:rgba(255,255,255,.88); color:#07583b; font-size:36px; line-height:1; box-shadow:0 18px 38px rgba(4,47,34,.22); backdrop-filter:blur(12px); cursor:pointer; }
.hpw-po-slider-arrow.is-prev { left:0; }
.hpw-po-slider-arrow.is-next { right:0; }
.hpw-po-slider-arrow:hover { background:#07583b; color:#fff; transform:translateY(-50%) scale(1.05); }
.hpw-po-slider-thumbs { position:relative; z-index:4; width:max-content; max-width:min(620px,92%); margin:0 auto; display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.74); border:1px solid rgba(6,95,70,.12); box-shadow:0 18px 42px rgba(4,47,34,.12); backdrop-filter:blur(14px); overflow-x:auto; scrollbar-width:none; }
.hpw-po-slider-thumbs::-webkit-scrollbar { display:none; }
.hpw-po-slider-thumb { flex:0 0 auto; width:62px; height:46px; padding:0; border:2px solid transparent; border-radius:14px; overflow:hidden; background:#ecfdf5; box-shadow:0 8px 18px rgba(6,95,70,.10); cursor:pointer; opacity:.64; transition:opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.hpw-po-slider-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.hpw-po-slider-thumb span { display:grid; place-items:center; width:100%; height:100%; color:#047857; font-weight:950; font-size:12px; }
.hpw-po-slider-thumb:hover,
.hpw-po-slider-thumb.is-active { opacity:1; transform:translateY(-2px); border-color:#10b981; box-shadow:0 0 0 4px rgba(16,185,129,.16),0 12px 24px rgba(6,95,70,.16); }
.hpw-po-slide-media { position:relative; aspect-ratio:auto; min-height:360px; background:linear-gradient(135deg,#064e3b,#10b981); display:grid; place-items:center; color:#fff; overflow:hidden; }
.hpw-po-slide-media img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .35s ease; }
.hpw-po-slide-card:hover .hpw-po-slide-media img { transform:scale(1.025); }
.hpw-po-slide-media.is-empty strong { font-size:42px; letter-spacing:-.04em; }
.hpw-po-slide-media.is-empty small { margin-top:4px; display:block; color:#dcfce7; }
.hpw-po-slide-badge, .hpw-po-slide-promo { position:absolute; top:12px; left:12px; padding:7px 11px; border-radius:999px; font-size:12px; font-weight:900; background:rgba(255,255,255,.92); color:#05603a; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.hpw-po-slide-promo { left:auto; right:12px; background:#facc15; color:#3f2d00; }
.hpw-po-slide-body { padding:16px 17px 18px; }
.hpw-po-slide-body span { display:block; color:#047857; font-size:12px; font-weight:900; margin-bottom:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hpw-po-slide-body h3 { margin:0 0 12px; font-size:18px; line-height:1.35; min-height:48px; color:#0f172a; }
.hpw-po-slide-price-wrap { margin:0 0 12px; padding:12px; border-radius:18px; background:linear-gradient(135deg,#f8fffb,#ecfdf5); border:1px solid rgba(16,185,129,.16); }
.hpw-po-slide-price-wrap.is-promo { background:linear-gradient(135deg,#fffbeb 0%,#ecfdf5 100%); border-color:rgba(245,158,11,.24); box-shadow:0 12px 26px rgba(4,120,87,.08); }
.hpw-po-slide-old-price { display:inline-flex; align-items:center; gap:6px; width:max-content; max-width:100%; margin:0 0 7px; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.78); border:1px solid rgba(239,68,68,.14); color:#64748b; font-size:12px; font-weight:900; }
.hpw-po-slide-old-price del { color:#ef4444; text-decoration-thickness:2px; }
.hpw-po-slide-body p { margin:0; color:#047857; font-size:25px; line-height:1; font-weight:950; letter-spacing:-.04em; }
.hpw-po-slide-body p small { color:#64748b; font-size:13px; font-weight:800; letter-spacing:0; }
.hpw-po-slide-promo-window { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed rgba(120,83,4,.20); }
.hpw-po-slide-promo-window span { display:flex; flex-direction:column; gap:3px; padding:8px 9px; border-radius:13px; background:rgba(255,255,255,.78); border:1px solid rgba(16,185,129,.14); }
.hpw-po-slide-promo-window small { color:#92400e; font-size:10px; font-weight:950; letter-spacing:.04em; text-transform:uppercase; }
.hpw-po-slide-promo-window strong { color:#064e3b; font-size:13px; line-height:1; font-weight:950; white-space:nowrap; }
.hpw-po-slide-body em { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 13px; border-radius:999px; background:#ecfdf5; color:#047857; font-style:normal; font-weight:900; }
.hpw-po-hero {
    padding: 64px 28px 34px;
    text-align: center;
    background: #fff;
}
.hpw-po-kicker {
    color: var(--pd-green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hpw-po-hero h1 {
    margin: 0 auto 14px;
    max-width: 860px;
    color: #222;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;
    font-weight: 900;
}
.hpw-po-lead {
    max-width: 900px;
    margin: 0 auto;
    color: #1f2933;
    font-size: 18px;
    line-height: 1.85;
    font-weight: 700;
}
.hpw-po-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hpw-po-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 170px;
    padding: 12px 22px;
    border-radius: 7px;
    text-decoration:none;
    font-size: 15px;
    font-weight: 900;
    transition: transform .18s, box-shadow .18s, background .18s;
}
.hpw-po-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,104,55,.14); }
.hpw-po-btn-primary { background:#006b3c; color:#fff; }
.hpw-po-btn-ghost { background:#eef8f2; color:#006b3c; border:1px solid #cdebdc; }
.hpw-po-intro {
    max-width: 930px;
    margin: 0 auto 26px;
    padding: 4px 28px 12px;
    color:#111;
}
.hpw-po-intro h2 { margin:0 0 12px; font-size:22px; font-weight:800; text-decoration: underline; text-underline-offset: 4px; }
.hpw-po-hero iframe,
.hpw-po-intro iframe,
.hpw-po-hero .wp-video,
.hpw-po-intro .wp-video {
    display:block;
    width:min(100%, 860px) !important;
    max-width:100%;
    aspect-ratio:16/9;
    height:auto !important;
    margin:22px auto;
    border:0;
    border-radius:22px;
    box-shadow:0 22px 55px rgba(15,23,42,.16);
    overflow:hidden;
}
.hpw-po-copy { font-size:17px; line-height:1.85; }
.hpw-po-copy p { margin: 0 0 12px; }
.hpw-po-copy ul { list-style:none; padding:0; margin:0; }
.hpw-po-copy li { position:relative; padding-left:30px; margin: 8px 0; }
.hpw-po-copy li:before { content:'✓'; position:absolute; left:0; top:0; color:#111; font-weight:900; }
.hpw-po-map {
    margin: 24px auto 70px;
    padding: 0 28px;
}
.hpw-po-map .hpw-map-wrap,
.hpw-po-map .hpw-map-box,
.hpw-po-map .hpw-map { border-radius: 0; }
.hpw-po-section-head { margin: 0 0 14px; }
.hpw-po-section-head span { color:#006b3c; font-size:13px; font-weight:900; }
.hpw-po-section-head h2 { margin:3px 0 0; color:#222; font-size:30px; line-height:1.25; font-weight:900; }
.hpw-po-section-head p { margin:8px auto 0; max-width:720px; color:#607568; font-size:15px; line-height:1.7; }
.hpw-po-section-head-center { text-align:center; }
.hpw-po-projects { padding: 0 28px 70px; }
.hpw-po-type-filter {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:22px auto 8px;
    max-width:980px;
}
.hpw-po-type-filter a {
    --type-color:#0f766e;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--type-color) 28%,#d8eadf);
    background:#fff;
    color:#24463a;
    font-size:13px;
    font-weight:900;
    text-decoration:none !important;
    box-shadow:0 10px 24px rgba(var(--hpw-brand-deep-rgb),.07);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.hpw-po-type-filter a:hover,
.hpw-po-type-filter a.is-active {
    transform:translateY(-2px);
    background:var(--type-color);
    color:#fff;
    box-shadow:0 16px 34px color-mix(in srgb,var(--type-color) 22%,transparent);
}
/* v3.41.3: กรณีการ์ดน้อยกว่าจำนวนคอลัมน์ — จัดกึ่งกลางแทนชิดซ้าย/ยืดเต็ม
   ใช้ auto-fit + minmax(กว้างคงที่) + justify-content:center
   → การ์ดกว้างคงที่ไม่ยืด และกลุ่มกึ่งกลางเมื่อไม่เต็มแถว */
.hpw-po-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap:28px 22px;
    margin-top:28px;
    justify-content:center;
}
/* จำกัดจำนวนคอลัมน์สูงสุดต่อแถว (กันการ์ดเล็กเกินไปตอน item เยอะ) — auto-fit จะลดเองเมื่อ item น้อย */
.hpw-po-grid-cols-1 { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),480px)); }
.hpw-po-grid-cols-2 { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); max-width:760px; margin-inline:auto; }
.hpw-po-grid-cols-3 { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); max-width:1120px; margin-inline:auto; }
.hpw-po-grid-cols-4 { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.hpw-po-grid-cols-5 { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.hpw-po-grid-cols-6 { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.hpw-po-card {
    display:flex;
    flex-direction:column;
    min-height:100%;
    border:1px solid rgba(var(--hpw-brand-deep-rgb),.12);
    border-radius:22px;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%);
    color:#172033;
    text-decoration:none !important;
    overflow:hidden;
    box-shadow:0 10px 26px rgba(12,55,39,.06);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.hpw-po-card *, .hpw-po-card:hover * { text-decoration:none !important; }
.hpw-po-card:hover { transform:translateY(-6px); border-color:rgba(15,118,82,.34); box-shadow:0 22px 48px rgba(12,55,39,.15); }
.hpw-po-thumb {
    aspect-ratio:4/3;
    background:linear-gradient(135deg,#eff8f3,#ffffff);
    border-bottom:1px solid rgba(var(--hpw-brand-deep-rgb),.10);
    overflow:hidden;
    position:relative;
    isolation:isolate;
}
.hpw-po-thumb:before {
    content:'';
    position:absolute;
    inset:auto 0 0;
    height:42%;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(5,31,22,.46));
    opacity:.8;
    pointer-events:none;
    z-index:1;
}
.hpw-po-thumb:after {
    content:'';
    position:absolute;
    inset:12px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:16px;
    opacity:0;
    transform:scale(.985);
    transition:opacity .22s ease,transform .22s ease;
    z-index:2;
    pointer-events:none;
}
.hpw-po-card:hover .hpw-po-thumb:after { opacity:1; transform:scale(1); }
.hpw-po-thumb img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.01); transition:transform .32s ease,filter .32s ease; }
.hpw-po-card:hover .hpw-po-thumb img { transform:scale(1.055); filter:saturate(1.05) contrast(1.02); }
.hpw-po-thumb-badge {
    position:absolute;
    z-index:4;
    left:12px;
    bottom:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    max-width:calc(100% - 24px);
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.72);
    color:var(--hpw-brand-deep);
    font-size:11.5px;
    font-weight:950;
    line-height:1;
    box-shadow:0 10px 22px rgba(0,0,0,.16);
    backdrop-filter:blur(10px);
}
.hpw-po-thumb-badge:before { content:""; width:7px; height:7px; border-radius:999px; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.16); }
.hpw-po-thumb-badge.is-full:before { background:#94a3b8; box-shadow:none; }
.hpw-po-thumb-badge--promo {
    left:auto;
    right:12px;
    bottom:12px;
    background:#fbbf24;
    border-color:rgba(255,255,255,.58);
    color:#3b2700;
}
.hpw-po-thumb-badge--promo:before { background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.hpw-po-thumb-badge--featured {
    left:12px;
    top:12px;
    bottom:auto;
    background:rgba(var(--hpw-brand-deep-rgb),.88);
    border-color:rgba(255,255,255,.22);
    color:#fff;
}
.hpw-po-thumb-badge--featured:before { background:#fbbf24; box-shadow:none; }
.hpw-po-thumb.is-empty {
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 20% 12%, rgba(255,255,255,.18), transparent 28%),
        radial-gradient(circle at 88% 88%, rgba(251,191,36,.16), transparent 34%),
        linear-gradient(135deg,#062f21 0%,#0d5138 54%,#168458 100%);
}
.hpw-po-thumb.is-empty:before {
    inset:0;
    height:auto;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.14));
    border:0;
    border-radius:0;
    opacity:1;
}
.hpw-po-thumb-placeholder {
    position:relative;
    z-index:3;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:20px;
    color:#fff;
    text-align:center;
}
.hpw-po-placeholder-logo {
    position:absolute;
    z-index:0;
    width:72%;
    height:56%;
    object-fit:contain;
    opacity:.12;
    filter:brightness(1.2) drop-shadow(0 18px 34px rgba(0,0,0,.32));
}
.hpw-po-thumb-placeholder strong {
    position:relative;
    z-index:1;
    color:#fff;
    font-size:clamp(32px,3.3vw,44px);
    line-height:1;
    font-weight:950;
    letter-spacing:.015em;
    text-shadow:0 10px 28px rgba(0,0,0,.28);
}
.hpw-po-thumb-placeholder small {
    position:relative;
    z-index:1;
    display:inline-flex;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.24);
    color:#fff;
    font-size:12px;
    font-weight:950;
    letter-spacing:.01em;
    backdrop-filter:blur(8px);
    box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.hpw-po-card-body { padding:18px 18px 20px; text-align:left; display:flex; flex-direction:column; flex:1; }
/* ★ v4.48.0 — ชิปรหัสกับชิปประเภทเคยเป็น div ในกล่อง flex แนวตั้ง จึงตกคนละแถว
   กินความสูงไปฟรี ๆ ใบละ ~28px · ห่อเป็นแถวเดียวแล้วได้ที่นั้นคืนทั้งกริด */
.hpw-po-tags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:9px; }
.hpw-po-code { color:#0b7a54; font-size:12px; font-weight:950; padding:4px 9px; border-radius:999px; background:#ecfdf5; border:1px solid #bbf7d0; letter-spacing:.02em; white-space:nowrap; }
.hpw-po-type-badge {
    --type-color:#0f766e;
    max-width:100%;
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin:0;
    padding:4px 9px;
    border-radius:999px;
    background:color-mix(in srgb,var(--type-color) 12%,#fff);
    border:1px solid color-mix(in srgb,var(--type-color) 30%,#d8eadf);
    color:var(--type-color);
    font-size:11.5px;
    font-weight:950;
}
/* ★★★ v4.48.0 — เลิก min-height
   ของเดิมจอง 92px ให้หัวข้อและ 40px ให้บรรทัดที่อยู่ **ทุกใบ** เพื่อให้แถว
   ราคาของแต่ละใบอยู่ระดับเดียวกัน · ผลคือการ์ดที่ชื่อบรรทัดเดียวมีที่ว่าง
   เปล่า ๆ ใต้ชื่อเกือบ 70px (เห็นชัดในภาพที่ผู้ใช้ส่งมา)
   ★ ตัวที่ทำให้แถวล่างตรงกันจริง ๆ คือ .hpw-po-foot { margin-top:auto }
     ซึ่งดันทั้งก้อน ราคา+สถานะ+ปุ่ม ไปชิดล่างของการ์ดที่กริดยืดสูงเท่ากันอยู่แล้ว
     — จัดแนวด้วยโครง ไม่ใช่ด้วยการจองที่เผื่อกรณีที่ยาวที่สุด */
.hpw-po-card h3 {
    margin:0;
    color:#101827;
    font-size:17px;
    line-height:1.35;
    font-weight:950;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.hpw-po-excerpt {
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:7px 0 0;
    color:#5b6b65;
    font-size:12.5px;
    line-height:1.55;
}
.hpw-po-excerpt.is-address { color:#4b5f58; }
.hpw-po-pin { margin-right:4px; font-size:11.5px; opacity:.85; }
/* ★ ก้อนล่าง = "แถบตัดสินใจ" — ราคา สถานะ ปุ่ม อยู่ด้วยกันและชิดล่างเสมอ
   ทำให้ทุกใบในแถวเดียวกันมีเส้นราคา/ปุ่มตรงกันโดยไม่ต้องจองความสูงข้างบน */
.hpw-po-foot { margin-top:auto; padding-top:12px; }
.hpw-po-start-price {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:4px;
    margin:0;
    padding:10px 0 0;
    border-top:1px solid #eef5f1;
}
.hpw-po-start-price span { flex-basis:100%; color:#789086; font-size:10.5px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.hpw-po-start-price strong { color:#05704d; font-size:20px; line-height:1; font-weight:950; }
.hpw-po-start-price small { color:#5f756c; font-size:11.5px; font-weight:850; }
.hpw-po-meta { display:flex; justify-content:flex-start; align-items:center; gap:8px; margin-top:0; padding-top:10px; color:#3c4a45; font-size:12.5px; }
.hpw-po-vacant { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; background:#dcfce7; color:#047857; border:1px solid #86efac; font-weight:950; }
.hpw-po-vacant::before { content:""; width:7px; height:7px; border-radius:999px; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.13); }
.hpw-po-full { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; background:#f1f5f9; color:#475569; border:1px solid #cbd5e1; font-weight:950; }
.hpw-po-full::before { content:""; width:7px; height:7px; border-radius:999px; background:#94a3b8; }
.hpw-po-card-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:12px;
    padding:10px 12px;
    border-radius:999px;
    background:linear-gradient(135deg,#0f6b4a,#10875f);
    color:#fff;
    font-size:13px;
    font-weight:950;
    box-shadow:0 10px 22px rgba(15,107,74,.16);
    transition:transform .18s ease, box-shadow .18s ease;
}
.hpw-po-card:hover .hpw-po-card-cta { transform:translateY(-1px); box-shadow:0 14px 28px rgba(15,107,74,.24); }
.hpw-po-card-cta:after { content:""; width:8px; height:8px; border-radius:999px; background:#9ff0cf; box-shadow:0 0 0 4px rgba(159,240,207,.18); }
.hpw-pd-empty-card { padding:32px; border:1px solid var(--pd-line); border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(var(--hpw-brand-deep-rgb),.08); }
.hpw-pd-inline-btn { display:inline-flex; align-items:center; justify-content:center; margin-top:10px; padding:11px 18px; border-radius:999px; background:#0b6b49; color:#fff !important; font-weight:800; text-decoration:none !important; box-shadow:0 10px 22px rgba(11,107,73,.18); }
.hpw-pd-inline-btn:hover { background:#084f38; color:#fff !important; transform:translateY(-1px); }
.hpw-pd-project-grid { display:grid; gap:10px; margin-top:18px; }
.hpw-pd-project-link { display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--pd-line); border-radius:14px; color:var(--pd-text); text-decoration:none; background:var(--pd-soft); }
.hpw-pd-project-link strong { color:var(--pd-green-dark); }
.hpw-pd-project-link span { color:var(--pd-muted); font-size:13px; }
@media (max-width: 900px) {
    .hpw-pd-hero { grid-template-columns:1fr; }
    .hpw-pd-hero-img,
    .hpw-pd-hero-placeholder { min-height:240px; }
    .hpw-pd-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hpw-pd-unit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hpw-po-grid,
    .hpw-po-grid-cols-4,
    .hpw-po-grid-cols-5,
    .hpw-po-grid-cols-6 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
    .hpw-pd-section-headline{display:block}.hpw-pd-section-headline p{text-align:left;margin-top:6px}.hpw-pd-main-photo img{height:420px;min-height:300px}.hpw-pd-thumb{flex-basis:104px;height:70px}
}
@media (max-width: 560px) {
    .hpw-pd-hero-body, .hpw-pd-section { padding:18px; }
    .hpw-pd-hero-placeholder { min-height:220px; }
    .hpw-pd-hero-placeholder::before { inset:12px; border-radius:14px; }
    .hpw-pd-hero-placeholder-copy { width:min(82%,280px); padding:18px 16px; gap:6px; border-radius:20px; }
    .hpw-pd-hero-placeholder-copy span { font-size:9px; letter-spacing:.13em; }
    .hpw-pd-hero-placeholder-copy strong { font-size:clamp(28px,9vw,38px); }
    .hpw-pd-hero-placeholder-copy small { font-size:11.5px; }
    .hpw-pd-gallery, .hpw-pd-unit-grid { grid-template-columns:1fr; }
    .hpw-pd-main-photo img{height:300px;min-height:260px}.hpw-pd-car-btn{width:42px!important;height:42px!important;font-size:28px!important}.hpw-pd-car-btn.is-prev{left:10px!important}.hpw-pd-car-btn.is-next{right:10px!important}.hpw-pd-thumb-shell{padding:0 38px;margin-top:10px;border-radius:18px}.hpw-pd-thumb{flex-basis:96px!important;height:64px!important}.hpw-pd-thumb-nav{width:28px;height:48px;font-size:24px;border-radius:12px}.hpw-pd-thumb-nav.is-prev{left:6px}.hpw-pd-thumb-nav.is-next{right:6px}.hpw-pd-main-photo:after{display:none}.hpw-pd-lightbox{padding:18px 58px!important}.hpw-pd-lb-btn{width:46px!important;height:46px!important;font-size:34px!important}.hpw-pd-lb-btn.is-prev{left:8px!important}.hpw-pd-lb-btn.is-next{right:8px!important}.hpw-pd-lightbox figcaption{display:block;text-align:center}.hpw-pd-lb-close{top:12px;right:12px}
    .hpw-po-unit-slider { margin:18px 0 6px; padding:20px 14px 24px; border-radius:24px; background:linear-gradient(160deg,#062f22 0%,#0b6d45 46%,#ffffff 46.2%,#f4fbf7 100%); }
    .hpw-po-slider-head { align-items:flex-start; flex-direction:column; gap:4px; }
    /* frame: ไม่มี padding ด้านข้าง — arrow absolute ลอยทับ card */
    .hpw-po-slider-frame { padding:0 0 8px; overflow:visible; }
    /* card เต็ม track — บังคับ grid column ด้วย max-width + min-width:0 */
    .hpw-po-slide-card { grid-template-columns:1fr; grid-template-rows:auto 1fr; min-height:0; flex:0 0 100%; width:100%; max-width:100%; min-width:0; border-radius:20px; }
    .hpw-po-slide-card > * { min-width:0; }
    /* รูปสูง 52vw — cover เต็มกรอบ */
    .hpw-po-slide-media { min-height:0; height:clamp(160px,52vw,220px); width:100%; aspect-ratio:unset; }
    .hpw-po-slide-media img { object-fit:cover; width:100%; height:100%; }
    /* arrow วงกลม 34px ติดกับขอบบน section (ไม่ออกนอก) */
    .hpw-po-slider-arrow { width:34px; height:34px; font-size:22px; border-radius:999px; opacity:.90; top:35%; }
    .hpw-po-slider-arrow.is-prev { left:0; }
    .hpw-po-slider-arrow.is-next { right:0; }
    .hpw-po-slider-thumbs { max-width:100%; gap:7px; padding:8px 10px; border-radius:18px; justify-content:center; margin:0; }
    .hpw-po-slider-thumb { width:48px; height:36px; border-radius:11px; }
    .hpw-po-slider-count-1:after { display:none; }
    .hpw-po-slide-body h3 { font-size:16px; min-height:auto; }
    .hpw-po-slide-price-wrap { padding:10px; border-radius:16px; }
    .hpw-po-slide-body p { font-size:22px; }
    .hpw-po-slide-promo-window { grid-template-columns:1fr; gap:6px; }
    .hpw-po-slide-promo-window span { padding:7px 8px; }
    .hpw-po-hero { padding:42px 16px 24px; }
    .hpw-po-lead { font-size:15px; }
    .hpw-po-intro, .hpw-po-map, .hpw-po-projects { padding-left:16px; padding-right:16px; }
    .hpw-po-grid,
    .hpw-po-grid-cols-1,
    .hpw-po-grid-cols-2,
    .hpw-po-grid-cols-3,
    .hpw-po-grid-cols-4,
    .hpw-po-grid-cols-5,
    .hpw-po-grid-cols-6 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    .hpw-po-card h3 { font-size:14px; -webkit-line-clamp:3; }
    /* ★ v4.48.0 — เดิมซ่อนบรรทัดที่อยู่ทิ้งทั้งบรรทัดบนมือถือ
       แต่ "อยู่ที่ไหน" คือคำถามแรกของคนหาโกดัง และมือถือคือที่ที่คนถามมากที่สุด
       เก็บไว้ 2 บรรทัดแทนการตัดทิ้ง (ที่ที่ได้คืนจากการถอด min-height พอให้อยู่แล้ว) */
    .hpw-po-excerpt { -webkit-line-clamp:2; font-size:11.5px; margin-top:5px; }
    .hpw-po-tags { gap:5px; margin-bottom:7px; }
    .hpw-po-code, .hpw-po-type-badge { font-size:10.5px; padding:3px 7px; }
    .hpw-po-start-price strong { font-size:17px; }
    .hpw-po-thumb-badge { padding:6px 8px; font-size:10.5px; }
    .hpw-po-thumb-badge--promo { top:12px; bottom:auto; }
    .hpw-pd-unit-price-wrap.is-promo { padding:7px; }
    .hpw-pd-unit-promo-dates { grid-template-columns:1fr; }
    .hpw-pd-unit-promo-dates span { justify-content:flex-start; }
}

.hpw-po-spotlight {
    margin:38px 0 0;
    padding:26px;
    border-radius:28px;
    border:1px solid rgba(var(--hpw-brand-deep-rgb),.12);
    background:linear-gradient(135deg,#ffffff 0%,#f5fbf8 100%);
    box-shadow:0 22px 54px rgba(var(--hpw-brand-deep-rgb),.10);
    overflow:hidden;
    position:relative;
    isolation:isolate;
}
.hpw-po-spotlight:before {
    content:"";
    position:absolute;
    inset:auto -80px -130px auto;
    width:280px;
    height:280px;
    border-radius:999px;
    background:rgba(29,158,117,.10);
    z-index:-1;
}
.hpw-po-spotlight--promo {
    border-color:rgba(251,191,36,.32);
    background:
        radial-gradient(circle at 92% 12%,rgba(251,191,36,.18),transparent 26%),
        linear-gradient(135deg,#fffdf4 0%,#f5fbf8 72%);
}
.hpw-po-spotlight--featured {
    background:
        radial-gradient(circle at 8% 12%,rgba(var(--hpw-brand-deep-rgb),.12),transparent 28%),
        linear-gradient(135deg,#f7fcf9 0%,#ffffff 72%);
}
.hpw-po-spotlight-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}
.hpw-po-spotlight-head span {
    display:block;
    color:#0f8d67;
    font-size:11px;
    font-weight:950;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.hpw-po-spotlight--promo .hpw-po-spotlight-head span { color:#b77900; }
.hpw-po-spotlight-head h2 {
    margin:3px 0 5px;
    color:#10241d;
    font-size:clamp(25px,3vw,36px);
    line-height:1.12;
    font-weight:950;
}
.hpw-po-spotlight-head p {
    max-width:680px;
    margin:0;
    color:#607568;
    font-size:14px;
    line-height:1.7;
}
.hpw-po-spotlight-all {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:10px 15px;
    border-radius:999px;
    border:1px solid rgba(var(--hpw-brand-deep-rgb),.14);
    background:#fff;
    color:#0f6b4a !important;
    font-size:13px;
    font-weight:950;
    text-decoration:none !important;
    box-shadow:0 10px 24px rgba(var(--hpw-brand-deep-rgb),.08);
}
.hpw-po-spotlight-all:hover { transform:translateY(-1px); box-shadow:0 16px 30px rgba(var(--hpw-brand-deep-rgb),.13); }
.hpw-po-spotlight-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}
.hpw-po-spot-cols-1 .hpw-po-spotlight-grid { grid-template-columns:repeat(1,minmax(0,1fr)); }
.hpw-po-spot-cols-2 .hpw-po-spotlight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hpw-po-spot-cols-3 .hpw-po-spotlight-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hpw-po-spot-cols-4 .hpw-po-spotlight-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.hpw-po-spot-card {
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:22px;
    border:1px solid rgba(var(--hpw-brand-deep-rgb),.12);
    background:#fff;
    color:#14251f !important;
    text-decoration:none !important;
    box-shadow:0 14px 32px rgba(var(--hpw-brand-deep-rgb),.08);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hpw-po-spot-card:hover {
    transform:translateY(-4px);
    border-color:rgba(29,158,117,.36);
    box-shadow:0 22px 44px rgba(var(--hpw-brand-deep-rgb),.15);
}
.hpw-po-spot-media {
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    overflow:hidden;
    background:var(--hpw-brand-deep);
}
.hpw-po-spot-media img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .28s ease;
}
.hpw-po-spot-card:hover .hpw-po-spot-media img { transform:scale(1.055); }
.hpw-po-spot-media.is-empty {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:
        radial-gradient(circle at 22% 16%,rgba(255,255,255,.18),transparent 32%),
        linear-gradient(135deg,#062f21,#11724d);
    color:#fff;
}
.hpw-po-spot-media.is-empty strong { font-size:30px; font-weight:950; letter-spacing:.03em; }
.hpw-po-spot-media.is-empty small { padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.16); font-size:12px; font-weight:850; }
.hpw-po-spot-badge {
    position:absolute;
    left:10px;
    top:10px;
    max-width:calc(100% - 20px);
    padding:6px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    color:#0f6b4a;
    font-size:11px;
    font-weight:950;
    line-height:1.1;
    box-shadow:0 8px 18px rgba(0,0,0,.14);
}
.hpw-po-spotlight--promo .hpw-po-spot-badge { background:#fbbf24; color:#3b2700; }
.hpw-po-spot-body {
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-width:0;
    padding:16px;
}
.hpw-po-spot-prop {
    color:#0f8d67;
    font-size:11px;
    font-weight:950;
    letter-spacing:.03em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.hpw-po-spot-body h3 {
    margin:5px 0 9px;
    color:#13251f;
    font-size:15px;
    line-height:1.38;
    font-weight:950;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.hpw-po-spot-price {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:5px;
    margin-top:auto;
}
.hpw-po-spot-price strong { color:#0f6b4a; font-size:22px; font-weight:950; line-height:1; }
.hpw-po-spot-price small { color:#607568; font-size:12px; font-weight:800; }
.hpw-po-spot-price del { color:#94a3a0; font-size:12px; font-weight:800; }
.hpw-po-spot-dates {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
}
.hpw-po-spot-dates span {
    padding:5px 8px;
    border-radius:999px;
    background:#fff8db;
    color:#835600;
    font-size:11px;
    font-weight:900;
}
.hpw-po-spot-link {
    margin-top:12px;
    color:#0f6b4a;
    font-size:13px;
    font-weight:950;
}
@media (max-width:980px) {
    .hpw-po-spotlight { margin:32px 16px 0; padding:20px; border-radius:24px; }
    .hpw-po-spotlight-head { align-items:flex-start; flex-direction:column; }
    .hpw-po-spotlight-grid,
    .hpw-po-spot-cols-1 .hpw-po-spotlight-grid,
    .hpw-po-spot-cols-2 .hpw-po-spotlight-grid,
    .hpw-po-spot-cols-3 .hpw-po-spotlight-grid,
    .hpw-po-spot-cols-4 .hpw-po-spotlight-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .hpw-po-spotlight { padding:18px; }
    .hpw-po-spot-media { aspect-ratio:16/9; }
    .hpw-po-spotlight-head h2 { font-size:28px; }
}
@media (prefers-reduced-motion: reduce) {
    .hpw-po-slide-card,
    .hpw-po-slide-media img,
    .hpw-po-slider-thumb,
    .hpw-po-slider-arrow,
    .hpw-pd-thumb,
    .hpw-pd-main-photo img { transition:none; }
    .hpw-po-slide-card,
    .hpw-po-slide-card:hover,
    .hpw-po-slide-card:hover .hpw-po-slide-media img,
    .hpw-po-slider-thumb:hover,
    .hpw-po-slider-arrow:hover,
    .hpw-pd-thumb:hover { transform:none; }
    .hpw-po-slider-track,
    .hpw-pd-thumb-row { scroll-behavior:auto; }
}

/* v4.0.2: ตัวเลขบนชิปกรอง + ชิป "เปิดจองล่วงหน้า"
   ตัวเลขช่วยตัดสินใจก่อนกด (กดแล้วเจอหน้าว่างคือเสียเวลาเปล่า) และสีม่วง
   ของโครงการในอนาคตใช้ชุดเดียวกับหมุดบนแผนที่ คนจึงเชื่อมโยงได้เอง */
.hpw-pd-tb-chip b { font-weight:800; opacity:.62; margin-left:3px; }
.hpw-pd-tb-chip.is-active b { opacity:.85; }
.hpw-pd-tb-chip.is-future { border-color:rgba(124,58,237,.34); color:#6d28d9; }
.hpw-pd-tb-chip.is-future:hover { border-color:rgba(124,58,237,.62); background:#f6f2ff; }
.hpw-pd-tb-chip.is-future.is-active { background:#7c3aed; border-color:#7c3aed; color:#fff; box-shadow:0 4px 12px rgba(124,58,237,.22); }

/* ============================================================
   ★ v4.13.0 — "คาดว่าจะว่างวันที่" บนการ์ดห้องในกริด
   ห้องที่ไม่ว่างวันนี้ อาจเป็นห้องที่ใช่ในอีกสองเดือน — ถ้าไม่บอก
   คนเลือกห้องจะข้ามไปทั้งใบ · ออกแบบให้อ่านจบใน 1 วินาที:
   ไอคอนปฏิทิน + วันที่ตัวหนา + "อีกประมาณ ..." ที่คิดให้แล้ว
============================================================ */
.hpw-pd-unit-card > span.hpw-pd-unit-free {
    width:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 7px;
    padding:7px 9px;
    border:1px solid #fed7aa;
    border-radius:11px;
    background:linear-gradient(135deg,#fff7ed,#ffedd5);
    color:#9a3412;
    font-size:11px;
    font-weight:700;
    line-height:1.35;
}
.hpw-pd-free-ico { font-size:13px; line-height:1; }
/* ป้ายกับวันที่อยู่บรรทัดเดียวกันได้ก็อยู่ ไม่ได้ก็ตกบรรทัด — การ์ดในกริดแคบ
   ลงได้ถึง ~200px การล็อกเป็น 3 คอลัมน์ทำให้ตัวเลขวันที่ถูกบีบจนอ่านยาก */
.hpw-pd-free-body { flex:1 1 auto; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 6px; min-width:0; }
.hpw-pd-free-body small { font-size:10px; font-weight:800; opacity:.8; white-space:nowrap; }
.hpw-pd-free-body b { font-size:13.5px; font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hpw-pd-free-in {
    flex:0 0 auto;
    padding:3px 8px; border-radius:999px; white-space:nowrap;
    background:rgba(154,52,18,.11); color:#9a3412; font-size:10px; font-weight:900;
}
/* ว่างภายใน 90 วัน = ข่าวดีสำหรับคนที่กำลังหา ยกระดับให้เห็นชัดกว่า */
.hpw-pd-unit-card > span.hpw-pd-unit-free.is-soon {
    border-color:#86efac;
    background:linear-gradient(135deg,#f0fdf4,#dcfce7);
    color:#15803d;
}
.hpw-pd-unit-free.is-soon .hpw-pd-free-in { background:rgba(21,128,61,.12); color:#15803d; }

/* ป้ายบนหัวเรื่องโครงการ — "เต็ม" / "เปิดจองล่วงหน้า" ไม่ใช่เลข 0 */
.hpw-pd-stats .hpw-pd-stat-avail.hpw-po-full strong   { color:#fecaca; font-size:15px; }
.hpw-pd-stats .hpw-pd-stat-avail.hpw-po-future strong { color:#ddd6fe; font-size:15px; }



/* ══════════════════════════════════════════════════════════════
   v4.25.1 — ป้ายสถานะบนรูปการ์ด + ชิปกรองต่อสถานะ
   --------------------------------------------------------------
   ★ ไม่มีชื่อสถานะอยู่ในไฟล์นี้เลย · สีมาทางตัวแปร --st ที่ PHP ใส่ให้
     ต่อชิป และผ่านกฎที่ hpw_status_inline_css('web') ประกอบจากทะเบียน
     สถานะใหม่จึงได้ป้าย+ชิปที่มีสีเองทันที
   ══════════════════════════════════════════════════════════════ */
/* ★ ความจำเพาะต้องชนะ .hpw-pd-unit-thumb.is-placeholder span (0,2,1) ซึ่งตั้ง
   position:relative ให้ span ทุกตัวในกรอบรูปสำรอง — ป้ายสถานะเป็น span เหมือนกัน
   จึงถูกดึงกลับเข้า flow แล้วไปโผล่กลางกรอบแทนมุมซ้ายบน (ของเดิมก็เป็นแบบนี้
   มาตลอดกับการ์ดที่ไม่มีรูป แต่ไม่มีใครสังเกตเพราะมีแค่ป้ายเดียว) */
.hpw-pd-unit-thumb .hpw-pd-unit-ribbon,
.hpw-pd-unit-thumb.is-placeholder .hpw-pd-unit-ribbon,
.hpw-pd-unit-ribbon {
    position:absolute; top:10px; left:10px; z-index:4;
    display:inline-flex; align-items:center; gap:3px;
    padding:4px 12px; border-radius:999px;
    background:#64748b; color:#fff;
    font-size:11.5px; font-weight:950; letter-spacing:.02em;
    box-shadow:0 8px 20px rgba(15,23,42,.28);
    border:1.5px solid rgba(255,255,255,.65);
    max-width:calc(100% - 20px);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ★ ห้องว่างคือสิ่งที่คนเปิดหน้านี้มาหา — ให้เต้นเบา ๆ ตัวเดียว
   ถ้าให้ทุกป้ายเต้น จะไม่มีอะไรเด่นเลย ซึ่งแย่กว่าไม่มีอะไรเต้น */
.hpw-pd-unit-ribbon.is-vacant { animation:hpwVacantPulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .hpw-pd-unit-ribbon{ animation:none; } }

.hpw-pd-tb-chip[data-filter^="st:"] {
    border-color:color-mix(in srgb, var(--st, #64748b) 38%, transparent);
    color:var(--st, #334155);
}
.hpw-pd-tb-chip[data-filter^="st:"]:hover {
    border-color:color-mix(in srgb, var(--st, #64748b) 66%, transparent);
    background:color-mix(in srgb, var(--st, #64748b) 8%, transparent);
}
.hpw-pd-tb-chip[data-filter^="st:"].is-active {
    background:var(--st, var(--hpw-brand-deep)); border-color:var(--st, var(--hpw-brand-deep)); color:#fff;
    box-shadow:0 4px 12px color-mix(in srgb, var(--st, var(--hpw-brand-deep)) 26%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .hpw-pd-tb-chip[data-filter^="st:"].is-active { background:var(--hpw-brand-deep); border-color:var(--hpw-brand-deep); }
}