:root,
        html {
            background-color: #FAF6F0;
            overscroll-behavior: none !important;
            overscroll-behavior-x: none !important;
        }

        body,
        #editModal,
        #addModal,
        #placeDetailModal,
        #fullGalleryModal,
        #photoLightboxModal,
        .custom-scrollbar,
        form {
            overscroll-behavior: none !important;
            overscroll-behavior-x: none !important;
        }

        body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #FAF6F0;
            color: #2D2723;
        }

        .font-serif {
            font-family: 'Lora', Georgia, serif;
        }

        /* Ẩn scrollbar */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Tắt nút xóa mặc định của trình duyệt để tránh bị chồng chéo với nút xóa tùy chỉnh */
        input::-webkit-search-cancel-button,
        input::-webkit-search-decoration,
        input::-webkit-search-results-button,
        input::-webkit-search-results-decoration {
            -webkit-appearance: none;
            display: none;
        }

        /* Thanh bộ lọc có thể vuốt/kéo ngang khi danh sách nút dài hơn khung. */
        .filter-scroll-track {
            scrollbar-width: thin;
            scrollbar-color: #D6B58B transparent;
            overscroll-behavior-x: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;
            cursor: grab;
        }

        .filter-scroll-track::-webkit-scrollbar {
            height: 5px;
        }

        /* Hiệu ứng chuyển đổi chế độ xem Grid / List siêu mượt và nịnh mắt */
        #placesGrid {
            transition: min-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes view-fade-out {
            0% {
                opacity: 1;
                transform: scale(1);
                filter: blur(0px);
            }
            100% {
                opacity: 0;
                transform: scale(0.985) translateY(4px);
                filter: blur(2px);
            }
        }

        .view-switching {
            animation: view-fade-out 0.14s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            pointer-events: none;
        }

        @keyframes card-stagger-in {
            0% {
                opacity: 0;
                transform: translateY(16px) scale(0.975);
                filter: blur(2.5px);
            }
            60% {
                filter: blur(0px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0px);
            }
        }

        .card-enter {
            animation: card-stagger-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
            will-change: transform, opacity, filter;
        }

        /* ================= HIỆU ỨNG THẺ QUÁN (PLACE CARDS) ================= */
        .place-card {
            position: relative;
            transform: translateY(0) scale(1);
            transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                        border-color 0.28s ease !important;
            z-index: 1;
            -webkit-tap-highlight-color: transparent;
        }

        /* 1. CHỈ ÁP DỤNG HIỆU ỨNG PHÓNG TO (HOVER SCALE & LIFT) TRÊN DESKTOP (MÁY TÍNH CÓ CHUỘT RÊ) */
        @media (hover: hover) and (pointer: fine) {
            .place-card:hover {
                transform: translateY(-8px) scale(1.08) !important;
                box-shadow: 0 24px 44px -10px rgba(50, 35, 20, 0.22), 0 10px 20px -5px rgba(50, 35, 20, 0.1) !important;
                border-color: #D6B58B !important;
                z-index: 25 !important;
            }

            /* Chế độ danh sách (List view - thẻ ngang) trên PC */
            .flex-row.place-card:hover {
                transform: translateY(-5px) scale(1.045) !important;
                box-shadow: 0 18px 36px -8px rgba(50, 35, 20, 0.18), 0 8px 16px -4px rgba(50, 35, 20, 0.08) !important;
            }

            .place-card:active {
                transform: translateY(-2px) scale(1.02) !important;
                box-shadow: 0 10px 20px -5px rgba(50, 35, 20, 0.14) !important;
                transition-duration: 0.12s !important;
            }

            /* Dòng cảm nhận: Mặc định ẩn, chỉ hiện mượt mà khi rê chuột vào quán trên PC */
            .card-review-overlay {
                opacity: 0;
                transform: translateY(6px);
                transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
                pointer-events: none;
            }

            .place-card:hover .card-review-overlay {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 2. TRÊN THIẾT BỊ DI ĐỘNG & MÀN HÌNH CẢM ỨNG (MOBILE / TOUCH):
           - Tắt hoàn toàn hiệu ứng phóng to (hover zoom) gây giật màn hình hoặc đơ trạng thái
           - Thay bằng hiệu ứng chạm nhún (tap press) cực êm chuẩn app iOS / Android cao cấp
           - Dòng review hiển thị tự nhiên, nhẹ nhàng trên ảnh để lướt xem rất chill và có mood */
        @media (hover: none), (pointer: coarse), (max-width: 640px) {
            .place-card {
                transform: none !important;
            }

            .place-card:hover {
                transform: none !important;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
                border-color: #EFE8DF !important;
                z-index: 1 !important;
            }

            .flex-row.place-card:hover {
                transform: none !important;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
            }

            /* Tắt phóng to ảnh bên trong thẻ khi chạm trên mobile */
            .place-card:hover img {
                transform: none !important;
            }

            /* Hiệu ứng nhún nhẹ tinh tế khi ngón tay chạm vào (Tap feedback chuẩn app) */
            .place-card:active {
                transform: scale(0.982) !important;
                box-shadow: 0 2px 6px -1px rgba(60, 42, 25, 0.08) !important;
                transition: transform 0.08s ease-out !important;
            }

            /* Trên mobile: Dòng review hiển thị tự nhiên, thanh lịch trên ảnh */
            .card-review-overlay {
                opacity: 1 !important;
                transform: translateY(0) !important;
                pointer-events: none;
            }

            .card-review-quote {
                font-size: 11.5px !important;
                line-height: 1.35 !important;
            }
        }

        @property --border-angle {
            syntax: '<angle>';
            inherits: false;
            initial-value: 0deg;
        }

        @keyframes rotate-border-beam {
            0% {
                --border-angle: 0deg;
            }
            100% {
                --border-angle: 360deg;
            }
        }

        /* ================= THẺ QUÁN ĐÃ ĐI: VIỀN XANH CHẠY VÒNG QUANH KHUNG KHI RÊ CHUỘT ================= */
        /* Mặc định chưa rê chuột: Giữ nguyên khung viền tự nhiên như các thẻ quán khác */
        .place-card.is-visited {
            border-color: #EFE8DF;
            position: relative;
        }

        /* Dải viền xanh sáng chuyển động chạy vòng quanh khung thẻ quán */
        .place-card.is-visited::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 1rem; /* Khớp chuẩn rounded-2xl (16px) */
            padding: 2.5px;
            background: conic-gradient(
                from var(--border-angle),
                transparent 0deg,
                transparent 160deg,
                rgba(134, 239, 172, 0.2) 220deg,
                #86EFAC 280deg,
                #4ADE80 330deg,
                #86EFAC 360deg
            );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            -webkit-mask-composite: destination-out;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            z-index: 30;
            opacity: 0;
            transition: opacity 0.3s ease;
            animation: rotate-border-beam 2.2s linear infinite;
        }

        /* Khi rê chuột vào quán đã đi (Desktop): Hiện dải viền xanh chạy vòng vòng quanh khung */
        @media (hover: hover) and (pointer: fine) {
            .place-card.is-visited:hover {
                border-color: rgba(134, 239, 172, 0.35) !important;
                box-shadow: 0 24px 44px -10px rgba(74, 222, 128, 0.3) !important;
            }
            .place-card.is-visited:hover::after {
                opacity: 1;
            }
            .flex-row.place-card.is-visited:hover {
                border-color: rgba(134, 239, 172, 0.35) !important;
                box-shadow: 0 18px 36px -8px rgba(74, 222, 128, 0.25) !important;
            }
        }

        /* Trên thiết bị cảm ứng (Mobile): Chạy dải sáng khi chạm vào */
        @media (hover: none), (pointer: coarse), (max-width: 640px) {
            .place-card.is-visited:active {
                border-color: rgba(134, 239, 172, 0.35) !important;
                box-shadow: 0 4px 12px rgba(74, 222, 128, 0.25) !important;
            }
            .place-card.is-visited:active::after {
                opacity: 1;
            }
        }

        /* Dòng cảm nhận / trích dẫn ngắn phong cách tạp chí chuẩn đẹp, siêu sắc nét */
        .card-review-quote {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            font-style: italic;
            font-weight: 600;
            color: #FFFFFF;
            letter-spacing: -0.012em;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 5px rgba(0, 0, 0, 0.85);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Skeleton loader shimmer khi chuyển trang */
        @keyframes skeleton-shimmer {
            0%   { background-position: -400px 0; }
            100% { background-position: 400px 0; }
        }

        .skeleton-shimmer {
            background: linear-gradient(90deg, #f0ebe5 25%, #faf6f0 50%, #f0ebe5 75%);
            background-size: 800px 100%;
            animation: skeleton-shimmer 1.5s infinite linear;
            border-radius: 12px;
        }

        .filter-scroll-track::-webkit-scrollbar-track {
            background: transparent;
        }

        .filter-scroll-track::-webkit-scrollbar-thumb {
            background: #D6B58B;
            border-radius: 999px;
        }

        .filter-scroll-track.is-dragging {
            cursor: grabbing;
            user-select: none;
            scroll-behavior: auto;
        }

        .filter-scroll-arrow {
            z-index: 2;
            width: 28px;
            height: 28px;
            border: 1px solid #E6DDD2;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.96);
            color: #8B5E2B;
            box-shadow: 0 2px 8px rgba(80, 50, 20, 0.14);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.2s, transform 0.2s, background 0.2s;
        }

        .filter-scroll-arrow:hover {
            background: #FFF9F1;
            transform: scale(1.06);
        }

        .filter-scroll-arrow.hidden {
            display: none;
        }

        /* Filter pill style */
        .filter-pill {
            cursor: pointer;
            user-select: none;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .filter-pill.active {
            background-color: #B57324 !important;
            color: #FFFFFF !important;
            border-color: #B57324 !important;
            box-shadow: 0 2px 8px rgba(181, 115, 36, 0.25);
        }

        .filter-pill:not(.active):hover {
            border-color: #B57324;
            color: #B57324;
        }

        @keyframes live-ping {
            0% {
                transform: scale(1);
                opacity: 0.85;
            }
            70%, 100% {
                transform: scale(2.2);
                opacity: 0;
            }
        }

        .status-dot-ping {
            animation: live-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

        /* Thanh Header nằm ở đầu trang (Không trôi theo khi cuộn) */
        #mainHeader {
            position: relative;
            width: 100%;
            z-index: 20;
        }

        #mainHeaderInner {
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 8px 30px rgba(45, 35, 25, 0.07), 0 1px 3px rgba(45, 35, 25, 0.05);
            border: 1px solid rgba(239, 232, 223, 0.95);
        }