body { font-family: Tahoma, "Noto Sans Thai", sans-serif; }
.room-card { border-radius: 14px; transition: .2s; }
.room-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.room-available { border-top: 5px solid #28a745; }
.room-occupied { border-top: 5px solid #dc3545; }
.room-reserved { border-top: 5px solid #ffc107; }
.room-maintenance { border-top: 5px solid #6c757d; }
.status-dot { width:10px; height:10px; display:inline-block; border-radius:50%; margin-right:5px; }
.table td, .table th { vertical-align: middle; }
/* ===== ผังบ้านเช่า 19 ห้อง ===== */
.site-plan-card {
    border-radius: 16px;
    overflow: hidden;
}
.site-plan {
    background: #f5f7fb;
    border: 1px solid #e4e8ef;
    border-radius: 14px;
    padding: 22px;
}
.room-map-row {
    display: grid;
    grid-template-columns: repeat(10, minmax(82px, 1fr));
    gap: 10px;
}
.room-map-row.bottom {
    grid-template-columns: repeat(9, minmax(82px, 1fr));
}
.room-map-aisle {
    margin: 18px 0;
    min-height: 74px;
    border: 2px dashed #c8d0dc;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7d8796;
    background: #fff;
    font-weight: 600;
    letter-spacing: .5px;
}
.room-box {
    min-height: 120px;
    border-radius: 12px;
    padding: 12px 10px;
    color: #fff;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    transition: .18s ease;
    border: 3px solid rgba(255,255,255,.55);
}
.room-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
    color: #fff;
}
.room-box.available { background: #28a745; }
.room-box.occupied { background: #dc3545; }
.room-box.reserved { background: #f0ad00; }
.room-box.maintenance { background: #6c757d; }

.room-box .room-number {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}
.room-box .room-status {
    font-size: 14px;
    font-weight: 700;
}
.room-box .room-person {
    font-size: 12px;
    opacity: .95;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plan-legend .badge {
    padding: 8px 12px;
    margin-right: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}
.legend-square {
    width: 11px;
    height: 11px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 5px;
}
.legend-green { background:#28a745; }
.legend-red { background:#dc3545; }
.legend-yellow { background:#f0ad00; }
.legend-gray { background:#6c757d; }

@media (max-width: 1200px) {
    .room-map-row { grid-template-columns: repeat(5, minmax(90px, 1fr)); }
    .room-map-row.bottom { grid-template-columns: repeat(5, minmax(90px, 1fr)); }
}
@media (max-width: 768px) {
    .site-plan { padding: 12px; }
    .room-map-row,
    .room-map-row.bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .room-box { min-height: 100px; }
}

/* ===== ผังบ้านเช่าตามแบบจริง ===== */
.custom-plan-card {
    border-radius: 16px;
    overflow: hidden;
}
.custom-plan-wrap {
    background: #f3f4f6;
    border: 1px solid #dde3ea;
    border-radius: 16px;
    padding: 18px;
    overflow-x: auto;
}
.actual-plan {
    min-width: 980px;
}
.road-top {
    margin-left: 70px;
    height: 56px;
    border: 5px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    font-weight: 700;
    margin-bottom: 24px;
}
.plan-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.road-side {
    width: 58px;
    min-height: 390px;
    border: 5px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: #ffffff;
    font-weight: 700;
    padding: 8px 0;
}
.plan-content {
    flex: 1;
}
.block-line {
    border: 5px solid #000;
    background: #fff;
    padding: 14px 12px;
}
.block-top {
    margin-bottom: 8px;
}
.room-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: nowrap;
}
.two-section {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 8px;
}
.block-vertical {
    width: 96px;
    min-height: 232px;
    padding: 8px 8px;
    display: flex;
    justify-content: center;
}
.room-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.block-bottom {
    width: 370px;
    min-height: 100px;
    margin-top: 132px;
    display: flex;
    align-items: center;
}
.room-node,
.room-node-empty {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    transition: .18s ease;
    position: relative;
}
.room-node {
    color: #fff !important;
    border: 4px solid rgba(255,255,255,.75);
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.room-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.room-node.available { background: #28a745; }
.room-node.occupied { background: #dc3545; }
.room-node.reserved { background: #f0ad00; }
.room-node.maintenance { background: #6c757d; }
.room-node-empty {
    color: #f47b20;
    background: #fff;
    border: 4px solid #f47b20;
}
.room-tooltip-text {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    margin-top: 2px;
}
.status-mini {
    display: inline-block;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 700;
}
.extra-room-list .badge {
    font-size: 13px;
    padding: 8px 10px;
    margin-right: 6px;
    margin-bottom: 6px;
}
.legend-box .badge {
    padding: 9px 12px;
    margin-right: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}

@media (max-width: 992px) {
    .custom-plan-wrap {
        padding: 12px;
    }
}

/* ===== ภาพสถานที่จริง ===== */
.hero-property {
    position: relative;
    min-height: 340px;
    border-radius: 18px;
    overflow: hidden;
    background: #dfe8f3;
    margin-bottom: 20px;
}
.hero-property img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9,24,53,0.15), rgba(9,24,53,0.65));
}
.hero-content {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    color: #fff;
    z-index: 2;
}
.hero-content h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
}
.hero-content p {
    margin-bottom: 12px;
    max-width: 700px;
}
.thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.thumb-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #f6f8fb;
    border: 1px solid #e5e8ef;
}
.thumb-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}
.thumb-caption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(0,0,0,.58);
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
}
.property-info-list li {
    margin-bottom: 10px;
}
.public-card {
    border-radius: 16px;
}
@media (max-width: 991px) {
    .thumb-grid {
        grid-template-columns: 1fr;
    }
    .hero-property img {
        height: 280px;
    }
    .hero-property {
        min-height: 280px;
    }
    .hero-content h2 {
        font-size: 24px;
    }
}

/* ===== จุดอ้างอิงบ้านเจ้าของ ===== */
.owner-house-card {
    width: 210px;
    min-height: 150px;
    border: 5px solid #000;
    background: linear-gradient(180deg, #fff7d6, #ffe8a3);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.owner-house-card .owner-title {
    font-size: 16px;
    font-weight: 800;
    color: #7a5100;
    margin-bottom: 6px;
}
.owner-house-card .owner-no {
    display: inline-block;
    background: #fff;
    border: 2px solid #d2a11d;
    color: #7a5100;
    font-size: 18px;
    font-weight: 800;
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 8px;
}
.owner-house-card .owner-note {
    font-size: 12px;
    line-height: 1.35;
    color: #664c12;
}
.right-zone {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.right-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.plan-note-box {
    border: 1px dashed #adb5bd;
    background: #fafbfc;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    color: #5d6671;
}
@media (max-width: 1200px) {
    .actual-plan { min-width: 1150px; }
}

/* ===== V6 public page ===== */
.public-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,.92);
    color: #174ea6;
    font-weight: 700;
    border-radius: 999px;
    padding: 8px 14px;
    margin-bottom: 10px;
}
.contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 10px 14px;
    margin: 0 8px 8px 0;
    text-decoration: none !important;
    font-size: 14px;
}
.contact-chip:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.section-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 6px;
}
.section-subtitle {
    color: #6b7280;
    margin-bottom: 16px;
}
.available-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.available-card {
    border: 1px solid #e6ebf2;
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.available-card .room-no {
    font-size: 22px;
    font-weight: 800;
    color: #0f4ac7;
}
.available-card .room-price {
    font-size: 22px;
    font-weight: 800;
    color: #16a34a;
}
.facility-list li {
    margin-bottom: 8px;
}
.info-block {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.notice-box {
    border-radius: 14px;
    padding: 14px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}
.footer-mini {
    color: #6b7280;
    font-size: 13px;
}
@media (max-width: 991px) {
    .available-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== V7 โซนห้องริมทางเข้า ===== */
.zone-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e8f2ff;
    color: #1658b8;
    border: 1px solid #b9d6ff;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}
.entrance-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 72px;
    border: 3px dashed #2f80ed;
    background: #eef6ff;
    color: #1769c2;
    font-weight: 800;
    border-radius: 12px;
    font-size: 13px;
    text-align: center;
    line-height: 1.25;
    padding: 8px;
}
.top-zone-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.top-zone-row .block-top {
    flex: 1;
    margin-bottom: 0;
}
.zone-description {
    color: #6b7280;
    font-size: 12px;
    margin-top: 8px;
}

/* ===== V9 โซนด้านใน ===== */
.inner-zone-wrap {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.owner-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.owner-connector {
    min-height: 58px;
    border: 2px dashed #d2a11d;
    border-radius: 12px;
    background: #fffaf0;
    color: #8a6400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.zone-label-green {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e9f9ef;
    color: #198754;
    border: 1px solid #b7e4c7;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}

/* =========================================================
   V10 - ผังจริง: ถนนซอยต่อจากถนนใหญ่ตรงห้อง 35/13
   ========================================================= */
.v10-plan-card {
    border-radius: 18px;
    overflow: hidden;
}
.v10-plan-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
}
.v10-site-plan {
    position: relative;
    min-width: 1180px;
    height: 760px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #d8e1e8;
    background:
        radial-gradient(circle at 15% 20%, rgba(76,140,72,.10) 0 4px, transparent 5px),
        radial-gradient(circle at 80% 72%, rgba(76,140,72,.10) 0 4px, transparent 5px),
        #f4f0e7;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.6);
}

/* ถนนใหญ่ */
.v10-main-road {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 92px;
    background: #8d949a;
    border-bottom: 4px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: 900;
    z-index: 1;
}
.v10-main-road::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 50%;
    border-top: 4px dashed rgba(255,255,255,.95);
}
.v10-main-road span {
    position: relative;
    z-index: 2;
    background: #8d949a;
    padding: 0 24px;
}

/* ถนนซอย: ลงจากถนนใหญ่ตรง 35/13 แล้วเลี้ยวเข้าด้านใน */
.v10-alley-vertical {
    position: absolute;
    top: 88px;
    left: 214px;
    width: 92px;
    height: 500px;
    background: #969da3;
    border-left: 4px solid #fff;
    border-right: 4px solid #fff;
    z-index: 1;
}
.v10-alley-vertical::after {
    content: "";
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 50%;
    border-left: 4px dashed rgba(255,255,255,.94);
}

.v10-alley-horizontal {
    position: absolute;
    left: 214px;
    top: 520px;
    width: 760px;
    height: 92px;
    background: #969da3;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    z-index: 1;
}
.v10-alley-horizontal::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 50%;
    border-top: 4px dashed rgba(255,255,255,.94);
}

.v10-road-label {
    position: absolute;
    z-index: 6;
    background: rgba(255,255,255,.94);
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 2px 7px rgba(0,0,0,.07);
}
.v10-road-label.entrance {
    top: 104px;
    left: 195px;
}
.v10-road-label.inner {
    top: 544px;
    left: 500px;
}

/* ลูกศรจากถนนใหญ่เข้าซอย */
.v10-entry-arrow {
    position: absolute;
    top: 92px;
    left: 235px;
    z-index: 7;
    color: #dc2626;
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}
.v10-entry-text {
    position: absolute;
    top: 126px;
    left: 180px;
    z-index: 7;
    color: #dc2626;
    font-size: 13px;
    font-weight: 900;
    background: #fff;
    padding: 4px 8px;
    border-radius: 999px;
}

/* ป้ายชื่อโซน */
.v10-zone-pill {
    position: absolute;
    z-index: 7;
    border-radius: 999px;
    padding: 7px 14px;
    color: #fff;
    background: #0f5fad;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 3px 9px rgba(0,0,0,.13);
}
.v10-zone-top-pill {
    top: 103px;
    left: 645px;
    transform: translateX(-50%);
}
.v10-zone-side-pill {
    top: 270px;
    left: 315px;
}
.v10-zone-inner-pill {
    top: 626px;
    left: 520px;
}

/* กลุ่มห้องด้านบน */
.v10-top-rooms {
    position: absolute;
    top: 145px;
    left: 355px;
    right: 26px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    z-index: 4;
}

/* ห้องฝั่งซอย เริ่ม 35/13 จากถนนใหญ่ แล้วเข้าไป 35/12, 35/11, 35/10 */
.v10-side-rooms {
    position: absolute;
    top: 158px;
    left: 318px;
    width: 126px;
    display: grid;
    grid-template-rows: repeat(4, 82px);
    gap: 3px;
    z-index: 4;
}

/* ห้องด้านใน */
.v10-inner-rooms {
    position: absolute;
    left: 395px;
    top: 625px;
    width: 420px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    z-index: 4;
}

/* กล่องห้อง */
.v10-room {
    position: relative;
    min-height: 80px;
    border: 2px solid #29445f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #172a3d !important;
    text-decoration: none !important;
    font-weight: 900;
    box-shadow: 0 2px 5px rgba(0,0,0,.08);
    transition: .18s ease;
    overflow: hidden;
}
.v10-room:hover {
    transform: translateY(-3px);
    z-index: 20;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.v10-room.zone-top   { background: #f8d7da; }
.v10-room.zone-side  { background: #d9ebff; }
.v10-room.zone-inner { background: #dcf1dc; }

.v10-room .room-code {
    font-size: 17px;
    line-height: 1;
}
.v10-room .room-state {
    margin-top: 7px;
    font-size: 10px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
}
.v10-room::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: -2px;
    width: 20px;
    height: 26px;
    border: 2px solid #29445f;
    border-bottom: 0;
    background: rgba(255,255,255,.88);
}
.v10-room.available   { box-shadow: inset 0 5px 0 #22a447, 0 2px 5px rgba(0,0,0,.08); }
.v10-room.occupied    { box-shadow: inset 0 5px 0 #dc3545, 0 2px 5px rgba(0,0,0,.08); }
.v10-room.reserved    { box-shadow: inset 0 5px 0 #f0ad00, 0 2px 5px rgba(0,0,0,.08); }
.v10-room.maintenance { box-shadow: inset 0 5px 0 #6c757d, 0 2px 5px rgba(0,0,0,.08); }

.v10-room .status-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 7px;
    top: 7px;
    margin: 0;
    border: 2px solid rgba(255,255,255,.95);
}
.v10-room.available .status-dot   { background:#22a447; }
.v10-room.occupied .status-dot    { background:#dc3545; }
.v10-room.reserved .status-dot    { background:#f0ad00; }
.v10-room.maintenance .status-dot { background:#6c757d; }
.v10-room-missing { opacity:.65; cursor:default; }

/* บ้านเจ้าของ */
.v10-owner {
    position: absolute;
    right: 78px;
    top: 350px;
    width: 235px;
    height: 165px;
    background: #fff1b8;
    border: 3px solid #9c6b28;
    border-radius: 10px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b4914;
    box-shadow: 0 8px 18px rgba(0,0,0,.13);
}
.v10-owner::before {
    content:"";
    position:absolute;
    top:-53px;
    left:20px;
    width:0;
    height:0;
    border-left:95px solid transparent;
    border-right:95px solid transparent;
    border-bottom:56px solid #b96c3b;
    filter: drop-shadow(0 -2px 0 #7f4424);
}
.v10-owner .owner-code {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}
.v10-owner .owner-title {
    font-size: 15px;
    font-weight: 900;
    margin-top: 7px;
}
.v10-owner .owner-sub {
    font-size: 11px;
    margin-top: 4px;
}

/* ทางแยกเข้าบ้านเจ้าของ */
.v10-owner-drive {
    position: absolute;
    top: 520px;
    right: 174px;
    width: 92px;
    height: 92px;
    background: #969da3;
    border-left: 4px solid #fff;
    border-right: 4px solid #fff;
    z-index: 1;
}
.v10-owner-drive::after {
    content:"";
    position:absolute;
    left:50%;
    top:10px;
    bottom:10px;
    border-left:4px dashed rgba(255,255,255,.94);
}

/* ต้นไม้ตกแต่ง */
.v10-tree {
    position:absolute;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#76a85e;
    box-shadow:
        14px 6px 0 -5px #4f8a45,
        -11px 8px 0 -7px #4f8a45;
    opacity:.9;
    z-index:2;
}
.v10-tree.t1 { left:125px; top:120px; }
.v10-tree.t2 { right:20px; top:128px; }
.v10-tree.t3 { right:25px; bottom:28px; }
.v10-tree.t4 { left:322px; bottom:24px; }
.v10-tree.t5 { left:905px; top:300px; }

/* legend */
.v10-legend {
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    font-size:12px;
}
.v10-legend-item {
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.v10-swatch {
    width:22px;height:15px;border:1px solid #789;border-radius:3px;
}
.v10-swatch.top { background:#f8d7da; }
.v10-swatch.side { background:#d9ebff; }
.v10-swatch.inner { background:#dcf1dc; }
.v10-swatch.owner { background:#fff1b8; }
.v10-key-dot {
    width:9px;height:9px;border-radius:50%;display:inline-block;
}
.v10-key-dot.available { background:#22a447; }
.v10-key-dot.occupied { background:#dc3545; }
.v10-key-dot.reserved { background:#f0ad00; }
.v10-key-dot.maintenance { background:#6c757d; }

.v10-note {
    font-size:12px;
    color:#6b7280;
}

/* =========================================================
   V12 fix - แก้ป้ายและห้องซ้อนกัน
   ========================================================= */
.v10-site-plan {
    min-width: 1240px;
    height: 790px;
}

/* ขยับป้ายทางเข้าออกจากห้อง */
.v10-road-label.entrance {
    top: 110px;
    left: 68px;
}
.v10-entry-arrow {
    top: 96px;
    left: 248px;
}
.v10-entry-text {
    top: 132px;
    left: 150px;
}

/* ขยับป้ายโซน */
.v10-zone-top-pill {
    top: 108px;
    left: 760px;
}
.v10-zone-side-pill {
    top: 328px;
    left: 58px;
}
.v10-zone-inner-pill {
    top: 585px;
    left: 610px;
}

/* ขยับกลุ่มห้องไม่ให้ชนกัน */
.v10-top-rooms {
    top: 148px;
    left: 470px;
    right: 28px;
}
.v10-side-rooms {
    top: 158px;
    left: 320px;
    width: 132px;
}
.v10-inner-rooms {
    left: 470px;
    top: 640px;
    width: 420px;
}

/* ขยับถนนด้านในและบ้านเจ้าของ */
.v10-alley-horizontal {
    left: 214px;
    top: 535px;
    width: 820px;
}
.v10-road-label.inner {
    top: 560px;
    left: 470px;
}
.v10-owner-drive {
    top: 535px;
    right: 150px;
    width: 96px;
}
.v10-owner {
    right: 70px;
    top: 355px;
}

/* ปรับต้นไม้ไม่ให้บังส่วนสำคัญ */
.v10-tree.t4 { left: 350px; bottom: 18px; }
.v10-tree.t5 { left: 930px; top: 300px; }

/* มือถือ/จอเล็ก */
@media (max-width: 1400px) {
    .v10-plan-scroll {
        overflow-x: auto;
    }
}

/* =========================================================
   V13 - ย้ายตำแหน่งตามภาพที่ผู้ใช้ขีดไว้
   ========================================================= */
.v10-site-plan {
    min-width: 1420px;
    height: 820px;
}

/* ทางเข้าซอยและถนนคงเดิม แต่ขยายถนนด้านในให้กว้างพอ */
.v10-alley-horizontal {
    left: 214px;
    top: 540px;
    width: 980px;
}
.v10-road-label.inner {
    top: 570px;
    left: 445px;
}

/* ขยับแนวห้องด้านบนไปทางขวา เพื่อเปิดพื้นที่ให้ห้องฝั่งซอย */
.v10-zone-top-pill {
    top: 108px;
    left: 910px;
}
.v10-top-rooms {
    top: 148px;
    left: 610px;
    right: 28px;
}

/* ย้ายแนวห้องฝั่งซอยไปตามช่องที่ผู้ใช้ขีดไว้ */
.v10-zone-side-pill {
    top: 360px;
    left: 425px;
}
.v10-side-rooms {
    top: 285px;
    left: 455px;
    width: 130px;
    display: grid;
    grid-template-rows: repeat(4, 82px);
    gap: 10px;
}

/* ย้ายโซนห้องด้านในขึ้นไปเหนือถนน */
.v10-zone-inner-pill {
    top: 455px;
    left: 690px;
}
.v10-inner-rooms {
    left: 640px;
    top: 445px;
    width: 420px;
    gap: 10px;
}

/* บ้านเจ้าของและถนนเข้าบ้านให้สัมพันธ์กับผังใหม่ */
.v10-owner {
    right: 90px;
    top: 360px;
}
.v10-owner-drive {
    top: 540px;
    right: 170px;
    width: 96px;
}

/* ขยับป้ายทางเข้าให้อ่านง่าย */
.v10-road-label.entrance {
    top: 110px;
    left: 68px;
}
.v10-entry-arrow {
    top: 96px;
    left: 248px;
}
.v10-entry-text {
    top: 132px;
    left: 150px;
}

/* จัดลำดับ z-index ให้ป้ายไม่ทับห้อง */
.v10-zone-pill,
.v10-road-label,
.v10-entry-arrow,
.v10-entry-text {
    z-index: 8;
}
.v10-top-rooms,
.v10-side-rooms,
.v10-inner-rooms,
.v10-owner {
    z-index: 5;
}

/* ปรับต้นไม้ตกแต่ง */
.v10-tree.t4 { left: 350px; bottom: 20px; }
.v10-tree.t5 { left: 1120px; top: 315px; }

/* =========================================================
   V14 - ผังตามข้อมูลล่าสุดของผู้ใช้
   ========================================================= */
.v14-plan-card {
    border-radius: 18px;
    overflow: hidden;
}
.v14-plan-scroll {
    overflow-x: auto;
    padding-bottom: 8px;
}
.v14-site-plan {
    position: relative;
    min-width: 1420px;
    height: 830px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #d8e1e8;
    background:
        radial-gradient(circle at 15% 20%, rgba(76,140,72,.10) 0 4px, transparent 5px),
        radial-gradient(circle at 80% 72%, rgba(76,140,72,.10) 0 4px, transparent 5px),
        #f4f0e7;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.6);
}

.v14-main-road {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 92px;
    background: #8d949a;
    border-bottom: 4px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: 900;
    z-index: 1;
}
.v14-main-road::after {
    content:"";
    position:absolute;
    left:28px; right:28px; top:50%;
    border-top:4px dashed rgba(255,255,255,.95);
}
.v14-main-road span {
    position:relative;
    z-index:2;
    background:#8d949a;
    padding:0 24px;
}

/* ถนนซอยหลัก */
.v14-alley-vertical {
    position:absolute;
    top:92px;
    left:170px;
    width:92px;
    height:560px;
    background:#969da3;
    border-left:4px solid #fff;
    border-right:4px solid #fff;
    z-index:1;
}
.v14-alley-vertical::after {
    content:"";
    position:absolute;
    top:25px; bottom:25px; left:50%;
    border-left:4px dashed rgba(255,255,255,.94);
}

/* ถนนด้านในจาก 35/13 */
.v14-inner-road {
    position:absolute;
    left:262px;
    top:585px;
    width:930px;
    height:92px;
    background:#969da3;
    border-top:4px solid #fff;
    border-bottom:4px solid #fff;
    z-index:1;
}
.v14-inner-road::after {
    content:"";
    position:absolute;
    left:28px; right:28px; top:50%;
    border-top:4px dashed rgba(255,255,255,.94);
}

.v14-road-label {
    position:absolute;
    z-index:8;
    background:rgba(255,255,255,.95);
    color:#374151;
    border:1px solid #d1d5db;
    border-radius:999px;
    padding:6px 12px;
    font-size:12px;
    font-weight:800;
    box-shadow:0 2px 7px rgba(0,0,0,.07);
}
.v14-road-label.entrance { top:112px; left:58px; }
.v14-road-label.inner { top:548px; left:500px; }

.v14-entry-arrow {
    position:absolute;
    top:96px;
    left:203px;
    z-index:8;
    color:#dc2626;
    font-size:25px;
    font-weight:900;
    line-height:1;
}
.v14-entry-text {
    position:absolute;
    top:132px;
    left:132px;
    z-index:8;
    color:#dc2626;
    font-size:13px;
    font-weight:900;
    background:#fff;
    padding:4px 8px;
    border-radius:999px;
}

.v14-zone-pill {
    position:absolute;
    z-index:8;
    border-radius:999px;
    padding:7px 14px;
    color:#fff;
    background:#0f5fad;
    font-size:13px;
    font-weight:900;
    box-shadow:0 3px 9px rgba(0,0,0,.13);
}
.v14-zone-top-pill { top:112px; left:900px; transform:translateX(-50%); }
.v14-zone-side-pill { top:350px; left:295px; }
.v14-zone-inner-pill { top:470px; left:720px; }

/* ห้อง */
.v14-top-rooms {
    position:absolute;
    top:150px;
    left:360px;
    right:28px;
    display:grid;
    grid-template-columns:repeat(9, 1fr);
    gap:3px;
    z-index:4;
}

.v14-side-rooms {
    position:absolute;
    top:150px;
    left:280px;
    width:110px;
    display:grid;
    grid-template-rows:repeat(5, 82px);
    gap:3px;
    z-index:4;
}

.v14-inner-rooms {
    position:absolute;
    left:470px;
    top:475px;
    width:470px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    z-index:4;
}

.v14-room {
    position:relative;
    min-height:80px;
    border:2px solid #29445f;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#172a3d !important;
    text-decoration:none !important;
    font-weight:900;
    box-shadow:0 2px 5px rgba(0,0,0,.08);
    transition:.18s ease;
    overflow:hidden;
}
.v14-room:hover {
    transform:translateY(-3px);
    z-index:20;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.v14-room.zone-top { background:#f8d7da; }
.v14-room.zone-side { background:#d9ebff; }
.v14-room.zone-inner { background:#dcf1dc; }

.v14-room .room-code { font-size:17px; line-height:1; }
.v14-room .room-state {
    margin-top:7px;
    font-size:10px;
    line-height:1;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(255,255,255,.9);
}
.v14-room::after {
    content:"";
    position:absolute;
    left:10px;
    bottom:-2px;
    width:20px;
    height:26px;
    border:2px solid #29445f;
    border-bottom:0;
    background:rgba(255,255,255,.88);
}
.v14-room.available   { box-shadow: inset 0 5px 0 #22a447, 0 2px 5px rgba(0,0,0,.08); }
.v14-room.occupied    { box-shadow: inset 0 5px 0 #dc3545, 0 2px 5px rgba(0,0,0,.08); }
.v14-room.reserved    { box-shadow: inset 0 5px 0 #f0ad00, 0 2px 5px rgba(0,0,0,.08); }
.v14-room.maintenance { box-shadow: inset 0 5px 0 #6c757d, 0 2px 5px rgba(0,0,0,.08); }
.v14-room .status-dot {
    position:absolute;
    width:10px;
    height:10px;
    right:7px;
    top:7px;
    margin:0;
    border:2px solid rgba(255,255,255,.95);
    border-radius:50%;
}
.v14-room.available .status-dot { background:#22a447; }
.v14-room.occupied .status-dot { background:#dc3545; }
.v14-room.reserved .status-dot { background:#f0ad00; }
.v14-room.maintenance .status-dot { background:#6c757d; }
.v14-room-missing { opacity:.65; cursor:default; }

/* บ้านเจ้าของตรงข้าม/เยื้องช่วง 35/15-35/20 */
.v14-owner {
    position:absolute;
    left:1010px;
    top:430px;
    width:235px;
    height:165px;
    background:#fff1b8;
    border:3px solid #9c6b28;
    border-radius:10px;
    z-index:4;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#6b4914;
    box-shadow:0 8px 18px rgba(0,0,0,.13);
}
.v14-owner::before {
    content:"";
    position:absolute;
    top:-53px;
    left:20px;
    width:0;
    height:0;
    border-left:95px solid transparent;
    border-right:95px solid transparent;
    border-bottom:56px solid #b96c3b;
    filter:drop-shadow(0 -2px 0 #7f4424);
}
.v14-owner .owner-code { font-size:28px; font-weight:900; line-height:1; }
.v14-owner .owner-title { font-size:15px; font-weight:900; margin-top:7px; }
.v14-owner .owner-sub { font-size:11px; margin-top:4px; }

.v14-tree {
    position:absolute;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#76a85e;
    box-shadow:14px 6px 0 -5px #4f8a45, -11px 8px 0 -7px #4f8a45;
    opacity:.9;
    z-index:2;
}
.v14-tree.t1 { left:108px; top:150px; }
.v14-tree.t2 { right:16px; top:152px; }
.v14-tree.t3 { right:38px; bottom:26px; }
.v14-tree.t4 { left:380px; bottom:30px; }
.v14-tree.t5 { left:760px; top:305px; }

.v14-legend {
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    font-size:12px;
}
.v14-legend-item { display:inline-flex; align-items:center; gap:7px; }
.v14-swatch {
    width:22px;
    height:15px;
    border:1px solid #789;
    border-radius:3px;
}
.v14-swatch.top { background:#f8d7da; }
.v14-swatch.side { background:#d9ebff; }
.v14-swatch.inner { background:#dcf1dc; }
.v14-swatch.owner { background:#fff1b8; }

.v14-key-dot {
    width:9px; height:9px; border-radius:50%; display:inline-block;
}
.v14-key-dot.available { background:#22a447; }
.v14-key-dot.occupied { background:#dc3545; }
.v14-key-dot.reserved { background:#f0ad00; }
.v14-key-dot.maintenance { background:#6c757d; }

.v14-note {
    font-size:12px;
    color:#6b7280;
}

.property-plan-wrap {
    border: 1px solid #e4e9ef;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fbff;
    padding: 10px;
}

.property-plan-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    transition: .2s ease;
}

.property-plan-link:hover .property-plan-img {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.property-plan-hint {
    font-size: 13px;
    color: #6c757d;
    margin-top: 10px;
    text-align: center;
}