:root {
        --sky: #00aeef;
        --sky-dark: #0086c3;
        --navy: #003f7f;
        --red-pin: #e8192c;
        --card-radius: 22px;
        --photo-radius: 16px;
      }
      * {
        box-sizing: border-box;
      }
      body {
        font-family: "Sarabun", sans-serif;
        background: linear-gradient(160deg, var(--navy) 0%, var(--sky) 100%);
        background-attachment: fixed;
        margin: 0;
      }

      /* NAVBAR */
      .navbar-custom {
        background: #1050a8;
        padding: 6px 0;
      }
      .navbar-custom .nav-link {
        color: #fff !important;
        font-weight: 600;
        font-size: 15px;
        padding: 6px 14px !important;
        border-radius: 6px;
        transition: background 0.2s;
      }
      .navbar-custom .nav-link:hover {
        background: rgba(255, 255, 255, 0.15);
      }
      .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.4);
      }
      .navbar-toggler-icon {
        filter: invert(1);
      }

      /* HERO */
      .hero {
        background: var(--navy) url("/img/breadcrumb-bg.jpg") center top / cover
          no-repeat;
        /* min-height: clamp(380px, 90vh, 560px); */
        min-height: 80vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;
      }
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.15) 0%,
          rgba(0, 0, 0, 0.45) 100%
        );
        pointer-events: none;
      }
      .hero .container {
        position: relative;
        z-index: 1;
        padding: 80px 0;
      }
      .hero-title {
        font-size: clamp(2.4rem, 6vw, 4rem);
        font-weight: 800;
        color: #fff;
        text-shadow: 0 3px 16px rgba(0, 0, 0, 0.5);
        margin-bottom: 28px;
      }
      .search-bar {
        background: #fff;
        border-radius: 50px;
        padding: 6px 6px 6px 20px;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        max-width: 560px;
      }
      .search-bar input {
        border: none;
        outline: none;
        flex: 1;
        font-size: 15px;
        font-family: "Sarabun", sans-serif;
      }
      .search-bar .btn {
        border-radius: 40px;
        background: var(--sky);
        color: #fff;
        font-weight: 700;
        padding: 8px 22px;
      }

      /* SECTION HEADER */
      .section-header {
        font-size: 1.6rem;
        font-weight: 800;
        color: #fff;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .section-header::before {
        content: "";
        display: block;
        width: 6px;
        height: 1.6rem;
        background: #fff;
        border-radius: 3px;
      }

      /* CATEGORY PILLS */
      .category-pills .btn {
        border-radius: 30px;
        font-weight: 600;
        font-size: 14px;
        margin: 4px;
        padding: 6px 20px;
        background: #fff;
        transition: all 0.2s;
      }
      .category-pills .btn.active {
        background: var(--sky);
        border-color: var(--sky);
        color: #fff;
      }

      /* MARKET CARDS */
      .market-card {
        border-radius: 0 var(--card-radius) var(--card-radius)
          var(--card-radius);
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 20, 50, 0.22);
        background: #c8dff4;
        padding: 10px;
        transition:
          transform 0.25s,
          box-shadow 0.25s;
        cursor: pointer;
        height: 100%;
      }
      .market-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 34px rgba(0, 20, 50, 0.3);
      }
      .market-card .thumb {
        position: relative;
        height: 190px;
        border-radius: 0 var(--photo-radius) var(--photo-radius)
          var(--photo-radius);
        overflow: hidden;
      }
      .thumb-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.6rem;
      }
      .thumb-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
      }
      .thumb-img-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
      }
      .badge-cat {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 30px;
        padding: 3px 12px 3px 3px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        max-width: calc(100% - 20px);
      }
      .badge-cat .bc-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #cfe3b8;
      }
      .badge-cat .bc-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .badge-cat .bc-label {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--navy);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .thumb-title-overlay {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 34px 14px 12px;
        background: linear-gradient(to top, rgba(0, 20, 50, 0.85), transparent);
      }
      .thumb-title-overlay .tt-title {
        color: #fff;
        font-weight: 800;
        font-size: 1rem;
        line-height: 1.3;
        text-align: right;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .card-tags {
        margin-top: 6px;
        padding: 0 2px;
        font-size: 11.5px;
        color: var(--sky-dark);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .card-meta {
        font-size: 13px;
        color: var(--navy);
        margin-top: 8px;
        padding: 0 2px;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .card-meta i {
        color: var(--sky-dark);
        flex-shrink: 0;
      }
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .card-col {
        animation: fadeUp 0.35s ease both;
      }

      /* PAGINATION */
      .pagination .page-link {
        font-family: "Sarabun", sans-serif;
        font-weight: 600;
        color: var(--navy);
        border-radius: 8px !important;
        margin: 0 3px;
      }
      .pagination .page-item.active .page-link {
        background: var(--sky);
        border-color: var(--sky);
      }
      .result-count {
        color: rgba(255, 255, 255, 0.85);
        font-size: 14px;
        margin-bottom: 1rem;
      }
      .empty-state {
        text-align: center;
        padding: 60px 0;
        color: #aaa;
      }
      .empty-state .icon {
        font-size: 4rem;
      }

      /* FOOTER */
      footer {
        background: var(--navy);
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        padding: 32px 0;
      }
      footer a {
        color: var(--sky);
        text-decoration: none;
      }
      .footer-logo {
        font-size: 1.4rem;
        font-weight: 800;
        color: #fff;
      }

      /* ═══════════════════════════════════
       DETAIL MODAL OVERLAY
    ═══════════════════════════════════ */
      .detail-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0, 20, 50, 0.7);
        backdrop-filter: blur(4px);
        overflow-y: auto;
      }
      .detail-overlay.open {
        display: block;
      }
      .detail-panel {
        background: linear-gradient(160deg, var(--navy) 0%, var(--sky) 100%);
        min-height: 100vh;
        max-width: 1100px;
        margin: 0 auto;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
        position: relative;
      }

      /* hero banner inside detail */
      .detail-hero {
        height: 340px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 7rem;
      }
      .detail-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(0, 20, 50, 0.8) 0%,
          transparent 60%
        );
      }
      .detail-hero-title {
        position: absolute;
        bottom: 24px;
        left: 32px;
        right: 80px;
        color: #fff;
        font-size: clamp(1.4rem, 3vw, 2.2rem);
        font-weight: 800;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
        line-height: 1.2;
      }
      .detail-back-btn {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 10;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: #fff;
        border-radius: 50px;
        padding: 8px 18px;
        font-weight: 700;
        cursor: pointer;
        font-family: "Sarabun", sans-serif;
        font-size: 14px;
        transition: background 0.2s;
      }
      .detail-back-btn:hover {
        background: rgba(255, 255, 255, 0.35);
      }

      /* info chips */
      .info-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
      }
      .info-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: #fff;
        border-radius: 30px;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--navy);
        box-shadow: 0 2px 8px rgba(0, 20, 50, 0.18);
      }
      .info-chip i {
        color: var(--sky);
        font-size: 16px;
      }

      /* PHOTO GALLERY */
      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 160px;
        grid-auto-rows: 140px;
        gap: 8px;
        border-radius: 16px;
        overflow: hidden;
      }
      .gallery-grid .g-cell {
        overflow: hidden;
        cursor: pointer;
        position: relative;
      }
      .gallery-grid .g-cell:first-child {
        grid-column: 1/3;
        grid-row: 1/2;
      }
      .gallery-grid .g-cell:nth-child(2) {
        grid-column: 3/4;
        grid-row: 1/2;
      }
      .gallery-grid .g-cell:nth-child(3) {
        grid-column: 4/6;
        grid-row: 1/2;
      }
      /* รูปที่ 4 เป็นต้นไป: ปล่อยให้ grid auto-place ต่อแถวเองอัตโนมัติ
         (ไม่ fix grid-row ตายตัว เพื่อให้ล้นแถวได้ไม่จำกัดจำนวน) */
      .g-cell .g-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.4rem;
        transition: transform 0.3s;
      }
      .g-cell:hover .g-inner {
        transform: scale(1.07);
      }
      .g-cell .g-label {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 20, 50, 0.7));
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        padding: 16px 8px 6px;
      }

      /* DESCRIPTION */
      .detail-desc {
        font-size: 15px;
        line-height: 1.9;
        color: rgba(255, 255, 255, 0.92);
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
        border-left: 4px solid #fff;
        padding-left: 16px;
        margin-bottom: 24px;
      }

      /* TRAVEL & EXPERIENCE CARDS */
      .tip-card {
        border-radius: 14px;
        padding: 18px 20px;
        margin-bottom: 16px;
        display: flex;
        gap: 14px;
        align-items: flex-start;
        box-shadow: 0 6px 20px rgba(0, 20, 50, 0.2);
      }
      .tip-card.travel {
        background: #e8f4fd;
        border-left: 5px solid #1976d2;
      }
      .tip-card.experience {
        background: #fff8e1;
        border-left: 5px solid #f9a825;
      }
      .tip-icon {
        font-size: 1.8rem;
        line-height: 1;
        flex-shrink: 0;
      }
      .tip-title {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 6px;
        color: #555;
      }
      .tip-body {
        font-size: 14.5px;
        line-height: 1.85;
        color: #333;
      }

      /* SOCIAL / DIGITAL CHANNELS */
      .social-section {
        margin-bottom: 24px;
      }
      .social-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 12px;
      }
      .social-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 30px;
        font-size: 13.5px;
        font-weight: 600;
        text-decoration: none;
        transition:
          transform 0.15s,
          opacity 0.15s;
      }
      .social-btn:hover {
        transform: translateY(-2px);
        opacity: 0.88;
      }
      .social-btn.facebook {
        background: #1877f2;
        color: #fff;
      }
      .social-btn.tiktok {
        background: #010101;
        color: #fff;
      }
      .social-btn.web {
        background: var(--navy);
        color: #fff;
      }
      .social-btn svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
        flex-shrink: 0;
      }

      /* ISO PAPER MAP BLOCK */
      .iso-map-block {
        margin: 32px 0 8px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.13);
      }
      .iso-map-block .iso-map-header {
        background: var(--navy);
        color: #fff;
        padding: 14px 22px;
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .iso-map-block .iso-map-body {
        background: #fff;
        padding: 32px 24px 28px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* NEARBY ROUTE SECTION */
      .route-section {
        background: linear-gradient(135deg, #e3f2fd 0%, #e8f5e9 100%);
        border: 1.5px solid #b3d8f7;
        border-radius: 20px;
        padding: 28px 24px;
        margin-top: 32px;
        box-shadow: 0 8px 28px rgba(0, 20, 50, 0.25);
      }
      .route-header {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--navy);
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .route-badge {
        background: var(--sky);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        border-radius: 20px;
        padding: 2px 10px;
      }
      .route-subtitle {
        font-size: 13px;
        color: #555;
        margin-bottom: 20px;
      }

      /* SVG route map */
      .route-map-wrap {
        position: relative;
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
      }
      .route-map-wrap svg {
        width: 100%;
        height: auto;
        display: block;
      }

      /* Google Maps embed */
      .gmap-wrap {
        border-radius: 16px;
        overflow: hidden;
        margin-top: 20px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
      }
      .gmap-wrap iframe {
        width: 100%;
        height: 320px;
        border: none;
        display: block;
      }
      .gmap-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        margin-top: 24px;
      }
      .gmap-title {
        font-size: 1rem;
        font-weight: 800;
        color: var(--navy);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .gmap-open-btn {
        background: var(--sky);
        color: #fff;
        border: none;
        border-radius: 20px;
        padding: 6px 16px;
        font-size: 13px;
        font-weight: 700;
        font-family: "Sarabun", sans-serif;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .gmap-open-btn:hover {
        background: var(--sky-dark);
        color: #fff;
      }

      /* nearby card strip */
      .nearby-strip {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: thin;
      }
      .nearby-strip::-webkit-scrollbar {
        height: 4px;
      }
      .nearby-strip::-webkit-scrollbar-thumb {
        background: var(--sky);
        border-radius: 4px;
      }
      .nearby-card {
        min-width: 160px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s;
        flex-shrink: 0;
      }
      .nearby-card:hover {
        transform: translateY(-4px);
      }
      .nearby-card .nc-thumb {
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.2rem;
      }
      .nearby-card .nc-body {
        padding: 8px 10px 10px;
      }
      .nearby-card .nc-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--navy);
        margin-bottom: 3px;
        line-height: 1.3;
      }
      .nearby-card .nc-dist {
        font-size: 11px;
        color: #888;
      }

      /* LIGHTBOX */
      .lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(0, 0, 0, 0.92);
        align-items: center;
        justify-content: center;
      }
      .lightbox.open {
        display: flex;
      }
      .lightbox-inner {
        position: relative;
        max-width: 700px;
        width: 90%;
      }
      .lightbox-box {
        width: 100%;
        height: 400px;
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8rem;
      }
      .lightbox-close {
        position: absolute;
        top: -40px;
        right: 0;
        color: #fff;
        font-size: 28px;
        cursor: pointer;
        background: none;
        border: none;
        line-height: 1;
      }
      .lightbox-nav {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 16px;
      }
      .lightbox-nav button {
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: #fff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 20px;
        cursor: pointer;
        transition: background 0.2s;
      }
      .lightbox-nav button:hover {
        background: rgba(255, 255, 255, 0.3);
      }
      .lightbox-counter {
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
        text-align: center;
        margin-top: 8px;
        font-family: "Sarabun", sans-serif;
      }

      @media (max-width: 768px) {
        .gallery-grid {
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: 130px 120px;
          grid-auto-rows: 120px;
        }
        .gallery-grid .g-cell:first-child {
          grid-column: 1/3;
          grid-row: 1/2;
        }
        .gallery-grid .g-cell:nth-child(2) {
          grid-column: 3/4;
          grid-row: 1/2;
        }
        .gallery-grid .g-cell:nth-child(3) {
          grid-column: 1/2;
          grid-row: 2/3;
        }
        .gallery-grid .g-cell:nth-child(4) {
          grid-column: 2/4;
          grid-row: 2/3;
        }
        /* รูปที่ 5 เป็นต้นไป: ปล่อยให้ grid auto-place ต่อแถวเองอัตโนมัติ */
        .detail-hero {
          height: 240px;
          font-size: 4.5rem;
        }
        .hero {
          aspect-ratio: 1920 / 960;
          min-height: 0;
          height: auto;
        }
        .hero .container {
          padding: 16px 0;
        }
        .hero-title {
          font-size: 1.6rem;
          margin-bottom: 8px;
        }
        .search-bar {
          padding: 4px 4px 4px 16px;
        }
        .search-bar .btn {
          padding: 6px 16px;
          font-size: 13px;
        }
      }