#vn-wrapper path {
    transition: fill 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}
#vn-wrapper path:hover {
    fill: #FF0000 !important;
    filter: brightness(1.2);
}
#vn-wrapper path.visited {
    fill: #2ecc71 !important;
}
#vn-wrapper path.planning {
    fill: #f1c40f !important;
}
.map-popup {
    position: absolute;
    display: none;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    padding: 10px;
    z-index: 9999;
    font-family: Arial, sans-serif;
    border: 1px solid #e0e0e0;
}
.map-popup-title {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 8px;
    text-align: center;
    color: #333333;
}
.map-popup-buttons {
    display: flex;
    gap: 6px;
}
.btn-map {
    border: none;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-visited {
    background: #2ecc71;
    color: white;
}
.btn-visited:hover { background: #27ae60; }

.btn-planning {
    background: #f1c40f;
    color: white;
}
.btn-planning:hover { background: #d4ac0d; }

.btn-reset {
    background: #e0e0e0;
    color: #333;
}
.btn-reset:hover { background: #d0d0d0; }
.map-responsive {
    width: 100%;
    height: auto;
    max-width: 800px;
    margin: 0 auto;
    display: block;
}
#vn-wrapper {
    width: 100%;
    height: 100%;
}
@keyframes introScan {
    0% { fill: #D8D8D8; }
    25% { fill: #00b894; filter: brightness(1.2); }
    50% { fill: #f1c40f; }
	75% { fill: #d15353; }
    100% { fill: #D8D8D8; }
}
.intro-flash {
    animation: introScan 1.2s ease-in-out;
}
.map-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.map-user-badge {
    position: absolute;
    top: 15%;
    right: 25%;
    transform: translate(50%, -50%);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 184, 148, 0.2);
    padding: 3px 5px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 100;
    pointer-events: none;
    text-align: center;
}
.map-user-badge .user-name {
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #2d3436;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}
.map-user-badge .user-website {
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: #b2bec3;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: lowercase;
}
.map-user-badge .user-stats {
    font-family: 'Courier New', Courier, monospace;
    font-size: 26px;
    font-weight: 900;
    color: #00b894;
    line-height: 1;
}
@media (max-width: 480px) {
    .map-user-badge {
        padding: 8px 12px;
        min-width: 60px;
    }
    .map-user-badge .user-name { font-size: 13px; }
    .map-user-badge .user-website { font-size: 10px; }
    .map-user-badge .user-stats { font-size: 20px; }
}
/* Hiệu ứng cho dòng tên có thể chỉnh sửa */
.map-user-badge {
    pointer-events: auto; 
}
.user-name {
    outline: none;
    cursor: text;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
    display: inline-block;
    min-width: 80px;
}
.user-name:hover {
    background: rgba(0, 184, 148, 0.08);
}
.user-name:focus {
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(0, 184, 148, 0.3);
}
.user-name:empty:before {
    content: attr(placeholder);
    color: #b2bec3;
    font-weight: normal;
}
/* Khối chia sẻ */
.map-share-box {
    margin-top: 10px;
    border-top: 1px dashed #e0e0e0;
    padding-top: 8px;
	text-align: center;
}
.map-share-box .share-title {
	text-align: center;
    font-size: 10px;
    color: #95a5a6;
    display: block;
    margin-bottom: 5px;
    font-family: Arial, sans-serif;
}
.share-icons {
    display: flex;
    justify-content: center;
    gap: 8px;
}
/* Style nút chung */
.share-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
    padding: 5px;
}
.share-btn:hover {
    transform: scale(1.15);
}
.share-btn svg {
    width: 100%;
    height: 100%;
    fill: white;
}
.fb { background: #1877F2; }
.fb:hover { background: #145dbf; }
.tw { background: #000000; }
.tw:hover { background: #222222; }
.zl { 
    background: #0068FF; 
    color: white; 
    font-family: 'Arial Black', sans-serif;
    font-weight: 900;
}
zl:hover { background: #0052cc; }
.zl .zalo-text {
    font-size: 14px;
    line-height: 1;
    font-style: italic;
}
.sharekhac{background: #00b894;}
.copybtn{ background: crimson; }
.share-btn-main {
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.share-btn-main:hover { background: #009475; }

/* CSS cho thông báo Pop-up nhỏ dưới màn hình Desktop */
.toast-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 99999;
}
.toast-message.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.is-capturing .map-share-box {
    display: none !important;
}
.is-capturing .map-user-badge {
    box-shadow: none !important;
    background: rgba(255, 255, 255, 1) !important;
}
#vn-wrapper path.active-selecting {
    fill: #d15353 !important;
    filter: brightness(1.2);
}
.section-checkin .map-container{
	overflow: clip;
    background: azure;
}