/* ========================================================
   CSS CHUNG CỦA BÀI BÁO EMAGAZINE
   ======================================================== */
:root {
    --color-bds: #0288d1;  /* Xanh dương - BĐS nhà ở */
    --color-noxh: #2e7d32; /* Xanh lá - Nhà ở xã hội */
    --color-kcn: #ef6c00;  /* Cam - Khu Công Nghiệp */
    --color-other: #6a1b9a; /* Tím - Hạ tầng / Khác */
}

body {
    background-color: #ffffff;
    color: #000000;
    overflow-x: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

.drop-cap::first-letter {
    font-size: 4rem;
    font-weight: 800;
    float: left;
    line-height: 1;
    margin-right: 0.5rem;
    color: theme('colors.brand');
    padding-top: 0.2rem;
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================
   CSS CHO BẢN ĐỒ INTERACTIVE
   ======================================================== */
.map-container {
    position: relative;
    width: 1350px;
    max-width: 100%;
    height: fit-content;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    padding: 40px 80px; 
    box-sizing: border-box;
    margin: 0 auto;
}

.map-image { width: 100%; display: block; border-radius: 8px; opacity: 0.95; }
.map-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

.pin {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    transform: translate(-50%, -50%); z-index: 10;
    box-shadow: 0 0 0 2px #ffffff, 0 2px 5px rgba(0,0,0,0.3);
    transition: all 0.3s ease; cursor: pointer;
}
.pin:hover { transform: translate(-50%, -50%) scale(1.6); z-index: 60 !important; }
.pin::before, .pin::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
    background-color: transparent; border: 2px solid; border-radius: 50%;
    transform: translate(-50%, -50%); z-index: -1; opacity: 0;
}
.pin.scrolling::before { animation: radarPulse 2.2s infinite cubic-bezier(0.215, 0.610, 0.355, 1); }
.pin.scrolling::after { animation: radarPulse 2.2s infinite 1.1s cubic-bezier(0.215, 0.610, 0.355, 1); }

@keyframes radarPulse { 0% { width: 10px; height: 10px; opacity: 0.8; } 100% { width: 45px; height: 45px; opacity: 0; } }

.info-box {
    position: absolute; background: rgba(255, 255, 255, 0.98); border-left: 4px solid;
    padding: 10px 12px; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    width: 200px; z-index: 5; box-sizing: border-box; transition: all 0.3s ease;
    white-space: normal; word-wrap: break-word; cursor: default;
}
.info-box:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.15); transform: scale(1.03); z-index: 50 !important; }
.info-box .project-name { font-size: 13px; font-weight: 700; color: #111111; margin: 0 0 5px 0; line-height: 1.3; font-family: 'Plus Jakarta Sans', sans-serif;}
.info-box .meta-item { font-size: 11px; color: #4ea; margin: 3px 0; display: flex; line-height: 1.4; font-family: 'Plus Jakarta Sans', sans-serif;}
.info-box .meta-label { font-weight: 600; color: #777777; min-width: 58px; display: inline-block; }
.info-box .meta-val { color: #333333; }

.type-bds .pin { background-color: var(--color-bds); }
.type-bds .pin::before, .type-bds .pin::after { border-color: var(--color-bds); }
.type-bds .info-box { border-left-color: var(--color-bds); }
.type-bds line { stroke: var(--color-bds); }

.type-noxh .pin { background-color: var(--color-noxh); }
.type-noxh .pin::before, .type-noxh .pin::after { border-color: var(--color-noxh); }
.type-noxh .info-box { border-left-color: var(--color-noxh); }
.type-noxh line { stroke: var(--color-noxh); }

.type-kcn .pin { background-color: var(--color-kcn); }
.type-kcn .pin::before, .type-kcn .pin::after { border-color: var(--color-kcn); }
.type-kcn .info-box { border-left-color: var(--color-kcn); }
.type-kcn line { stroke: var(--color-kcn); }

.type-other .pin { background-color: var(--color-other); }
.type-other .pin::before, .type-other .pin::after { border-color: var(--color-other); }
.type-other .info-box { border-left-color: var(--color-other); }
.type-other line { stroke: var(--color-other); }

.map-legend-box {
    position: absolute; top: 55%; right: 80px; background: rgba(255, 255, 255, 0.98);
    padding: 15px 18px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    z-index: 100; border: 1px solid #e8eef3; pointer-events: none;
}
.legend-box-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: #222; text-transform: uppercase; letter-spacing: 0.5px; }
.legend-box-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 12px; color: #444; font-weight: 500; }
.legend-box-item:last-child { margin-bottom: 0; }
.legend-box-color { width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,0.2); }

/* Hiệu ứng chuyển cảnh cho việc lọc */
.project-wrapper { transition: opacity 0.3s ease; }