/* Source: guests/souvenir.blade.php */
.souvenir-page {
            --sv-navy: #0b2430;
            --sv-teal: #116873;
            --sv-gold: #e3ab49;
            --sv-cream: #f5f0e5;
            --sv-ink: #18313a;
            color: var(--sv-ink);
            background: #f9fbfa;
            font-family: "Noto Sans Thai", sans-serif
        }

        .sv-section-head>div>span,
        .sv-cta span {
            color: var(--sv-gold);
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .17em
        }

        .sv-search-wrap {
            position: relative;
            z-index: 3;
            margin-top: -55px
        }

        .sv-search-card {
            background: #fff;
            border-radius: 12px;
            padding: 28px;
            box-shadow: 0 18px 55px rgba(10, 38, 47, .17)
        }

        .sv-search-row {
            display: grid;
            grid-template-columns: minmax(260px, 1fr) 290px auto;
            gap: 18px;
            align-items: end
        }

        .sv-field>span {
            display: block;
            margin-bottom: 7px;
            font-size: .82rem;
            font-weight: 700;
            color: #5b6e75
        }

        .sv-field>div {
            height: 50px;
            border: 1px solid #dbe4e2;
            border-radius: 7px;
            display: flex;
            align-items: center;
            padding: 0 15px;
            background: #fbfcfc
        }

        .sv-field i {
            color: var(--sv-gold);
            margin-right: 10px
        }

        .sv-field input,
        .sv-field select {
            width: 100%;
            border: 0;
            outline: 0;
            background: transparent;
            color: var(--sv-ink)
        }

        .sv-search-button {
            height: 50px;
            border: 0;
            border-radius: 7px;
            padding: 0 28px;
            background: var(--sv-gold);
            color: #1d3036;
            font-weight: 800
        }

        .sv-search-button i {
            margin-right: 8px
        }

        .sv-filter-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding-top: 22px;
            margin-top: 22px;
            border-top: 1px solid #edf1ef
        }

        .sv-filters {
            display: flex;
            gap: 8px;
            overflow-x: auto
        }

        .sv-filter {
            white-space: nowrap;
            border: 1px solid #dde5e3;
            background: #fff;
            border-radius: 25px;
            padding: 8px 14px;
            color: #64767d
        }

        .sv-filter.is-active {
            background: var(--sv-navy);
            border-color: var(--sv-navy);
            color: #fff
        }

        .sv-filter i {
            margin-right: 6px;
            color: var(--sv-gold)
        }

        .sv-result-count {
            white-space: nowrap;
            color: #718087;
            font-size: .88rem
        }

        .sv-main {
            padding: 78px 0 95px
        }

        .sv-section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            margin-bottom: 28px
        }

        .sv-section-head h2 {
            font-size: 2rem;
            color: var(--sv-navy);
            font-weight: 800;
            margin: 4px 0
        }

        .sv-section-head p {
            color: #78878d;
            margin: 0
        }

        .sv-section-head>a {
            display: flex;
            gap: 8px;
            align-items: center;
            color: var(--sv-teal);
            font-weight: 700
        }

        .sv-featured-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
            margin-bottom: 80px
        }

        .sv-featured-card,
        .sv-card {
            background: #fff;
            border: 1px solid #e5ebe9;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 11px 33px rgba(17, 46, 55, .07);
            transition: .25s
        }

        .sv-featured-card:hover,
        .sv-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 42px rgba(17, 46, 55, .13)
        }

        .sv-featured-image,
        .sv-card__image {
            position: relative;
            display: block;
            height: 245px;
            overflow: hidden
        }

        .sv-featured-image img,
        .sv-card__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .4s
        }

        .sv-featured-card:hover img,
        .sv-card:hover img {
            transform: scale(1.05)
        }

        .sv-featured-image>span,
        .sv-card__badge {
            position: absolute;
            left: 15px;
            top: 15px;
            padding: 6px 11px;
            border-radius: 20px;
            background: var(--sv-gold);
            color: #193037;
            font-size: .74rem;
            font-weight: 800
        }

        .sv-featured-image>span i {
            margin-right: 5px
        }

        .sv-featured-body {
            padding: 20px
        }

        .sv-featured-body>small {
            color: var(--sv-teal);
            font-weight: 700
        }

        .sv-featured-body h3,
        .sv-card h3 {
            font-size: 1.16rem;
            margin: 6px 0 10px
        }

        .sv-featured-body h3 a,
        .sv-card h3 a {
            color: var(--sv-navy)
        }

        .sv-featured-body p {
            color: #76868c;
            margin: 0 0 9px
        }

        .sv-featured-body p i,
        .sv-location i {
            color: var(--sv-gold);
            margin-right: 7px
        }

        .sv-featured-body strong {
            color: #a66c16
        }

        .sv-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px
        }

        .sv-card__image {
            height: 225px
        }

        .sv-card__body {
            padding: 21px
        }

        .sv-location {
            color: #718087;
            font-size: .86rem;
            margin: 0 0 12px
        }

        .sv-description {
            color: #65767d;
            line-height: 1.65;
            height: 54px;
            overflow: hidden
        }

        .sv-card__footer {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 12px;
            padding-top: 15px;
            margin-top: 15px;
            border-top: 1px solid #edf1ef
        }

        .sv-card__footer span small,
        .sv-card__footer span strong {
            display: block
        }

        .sv-card__footer span small {
            font-size: .68rem;
            color: #89969a
        }

        .sv-card__footer span strong {
            color: #a66c16
        }

        .sv-card__footer>a {
            display: flex;
            align-items: center;
            gap: 7px;
            color: var(--sv-teal);
            font-weight: 750;
            font-size: .85rem
        }

        .sv-empty {
            grid-column: 1/-1;
            text-align: center;
            padding: 70px 20px;
            color: #78878d
        }

        .sv-empty>i {
            font-size: 2.5rem;
            color: var(--sv-gold)
        }

        .sv-empty h3 {
            color: var(--sv-navy);
            margin: 13px 0 4px
        }

        .sv-empty button {
            margin-top: 14px;
            border: 0;
            border-radius: 6px;
            padding: 9px 15px;
            background: var(--sv-navy);
            color: #fff
        }

        .sv-cta {
            padding: 68px 0;
            background: var(--sv-navy);
            color: #fff
        }

        .sv-cta .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px
        }

        .sv-cta h2 {
            margin: 6px 0;
            color: #fff;
            font-size: 2rem
        }

        .sv-cta p {
            margin: 0;
            color: #afbdc1
        }

        .sv-cta a {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 13px 20px;
            border-radius: 7px;
            background: #fff;
            color: var(--sv-navy);
            font-weight: 800
        }

        @media(max-width:991px) {
            .sv-search-row {
                grid-template-columns: 1fr 1fr
            }

            .sv-search-button {
                grid-column: 1/-1
            }

            .sv-featured-grid,
            .sv-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:575px) {
            .sv-search-wrap {
                margin-top: -45px
            }

            .sv-search-card {
                padding: 19px
            }

            .sv-search-row {
                grid-template-columns: 1fr
            }

            .sv-search-button {
                grid-column: auto
            }

            .sv-filter-row,
            .sv-section-head,
            .sv-cta .container {
                align-items: flex-start;
                flex-direction: column
            }

            .sv-filter-row {
                width: 100%;
                min-width: 0
            }

            .sv-filters {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                padding-bottom: 4px;
                overscroll-behavior-x: contain
            }

            .sv-filter {
                flex: 0 0 auto
            }

            .sv-main {
                padding-top: 55px
            }

            .sv-featured-grid,
            .sv-grid {
                grid-template-columns: 1fr
            }

            .sv-featured-grid {
                margin-bottom: 60px
            }

            .sv-featured-image,
            .sv-card__image {
                height: 235px
            }

            .sv-cta {
                text-align: center
            }

            .sv-cta .container {
                align-items: center
            }

        }