/* Source: guests/schedules.blade.php */
.transport-page {
            --tr-navy: #0b2833;
            --tr-green: #0d665e;
            --tr-gold: #d9a746;
            --tr-cream: #f6f2e8;
            --tr-text: #1b333b;
            --tr-muted: #6b7d82;
            background: #fafbf9;
            color: var(--tr-text);
            font-family: "Noto Sans Thai", sans-serif
        }

     


           .tr-hero {
            position: relative;
           min-height: clamp(400px, 45vw, 440px);
            display: flex;
            align-items: center;
              background: linear-gradient(115deg, #092a35, #0b4b4d 60%, #0d665e);
            overflow: hidden
        }

        .tr-hero__pattern {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent 74%, rgba(217, 167, 70, .09) 75%, transparent 76%) 0 0/38px 38px
        }

        .tr-hero:after {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            right: -160px;
            bottom: -290px;
            border: 1px solid rgba(255, 255, 255, .16);
            border-radius: 50%
        }

        .tr-hero__inner {
            position: relative;
            z-index: 1;
            padding-top: 0;
            padding-bottom: 50px;
            color: #fff
        }

        .tr-breadcrumb {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 34px;
            color: #bfd0d2;
            font-size: .86rem
        }

        .tr-breadcrumb a {
            color: #fff
        }

        .tr-breadcrumb i {
            font-size: .52rem
        }

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

        .tr-hero h1 {
            max-width: 900px;
            margin: 8px 0 14px;
            color: #fff;
            font-size: clamp(2.4rem, 5vw, 4.4rem);
            font-weight: 800;
            line-height: 1.12
        }

        .tr-hero h1 small {
            display: block;
            margin-top: 12px;
            color: #fff;
            font-size: .43em;
            font-weight: 550
        }

        .tr-hero p {
            max-width: 730px;
            color: #c8d7d8;
            font-size: 1.04rem;
            line-height: 1.8
        }

        .tr-hero__features {
            display: flex;
            flex-wrap: wrap;
            gap: 13px 28px;
            margin-top: 25px
        }

        .tr-hero__features span {
            display: flex;
            align-items: center;
            gap: 8px
        }

        .tr-hero__features i {
            color: var(--tr-gold)
        }

        .tr-tools-wrap {
            position: relative;
            z-index: 3;
            margin-top: -57px
        }

        .tr-tools {
            display: grid;
            grid-template-columns: 235px minmax(280px, 1fr) auto;
            align-items: center;
            gap: 22px;
            padding: 25px 28px;
            background: #fff;
            border: 1px solid #e1e8e5;
            border-radius: 16px;
            box-shadow: 0 18px 50px rgba(12, 44, 53, .16)
        }

        .tr-tools>div>span,
        .tr-tools>div>strong {
            display: block
        }

        .tr-tools>div>span {
            color: var(--tr-gold);
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .12em
        }

        .tr-tools>div>strong {
            color: var(--tr-navy)
        }

        .tr-tools label {
            height: 53px;
            display: flex;
            align-items: center;
            padding: 0 15px;
            border: 1px solid #d9e2df;
            border-radius: 11px;
            background: #fbfcfc
        }

        .tr-tools label>i {
            color: var(--tr-gold);
            margin-right: 10px
        }

        .tr-tools input {
            min-width: 0;
            flex: 1;
            border: 0;
            outline: 0;
            background: transparent;
            font-family: inherit
        }

        .tr-tools label button {
            border: 0;
            background: transparent;
            color: #839095
        }

        .tr-count {
            white-space: nowrap;
            color: #78878c;
            font-size: .84rem
        }

        .tr-main {
            padding: 76px 0 90px
        }

        .tr-intro-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 17px;
            margin-bottom: 74px
        }

        .tr-intro-grid article {
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 14px;
            padding: 21px;
            border: 1px solid #e0e7e4;
            border-radius: 15px;
            background: #fff
        }

        .tr-intro-grid article>span {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            border-radius: 13px;
            background: #eaf3ef;
            color: var(--tr-green)
        }

        .tr-intro-grid strong {
            color: var(--tr-navy)
        }

        .tr-intro-grid p {
            margin: 3px 0 0;
            color: #77878c;
            font-size: .8rem;
            line-height: 1.55
        }

        .tr-section-head {
            margin-bottom: 27px
        }

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

        .tr-section-head p {
            margin: 0;
            color: #78888d
        }

        .tr-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 22px
        }

        .tr-card {
            min-width: 0;
            display: flex;
            flex-direction: column;
            padding: 23px;
            background: #fff;
            border: 1px solid #e0e7e4;
            border-radius: 17px;
            box-shadow: 0 9px 28px rgba(17, 47, 56, .065);
            transition: .22s
        }

        .tr-card:hover {
            transform: translateY(-5px);
            border-color: #c8d8d2;
            box-shadow: 0 17px 39px rgba(17, 47, 56, .12)
        }

        .tr-card__top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px
        }

        .tr-card__icon {
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            border-radius: 15px;
            background: #eaf3ef;
            color: var(--tr-green);
            font-size: 1.2rem
        }

        .tr-card__badge {
            padding: 5px 9px;
            border-radius: 20px;
            background: #fff6df;
            color: #946817;
            font-size: .67rem;
            font-weight: 750
        }

        .tr-card__body {
            flex: 1;
            padding: 19px 0
        }

        .tr-card h3 {
            margin: 0 0 9px;
            color: var(--tr-navy);
            font-size: 1.1rem;
            line-height: 1.5
        }

        .tr-card h3 a {
            color: inherit
        }

        .tr-card h3 p {
            margin: 0
        }

        .tr-card__body>p {
            margin: 0;
            color: #687a80;
            font-size: .84rem;
            line-height: 1.7
        }

        .tr-card__link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 15px;
            border-top: 1px solid #edf1ef;
            color: var(--tr-green);
            font-size: .84rem;
            font-weight: 750
        }

        .tr-empty {
            text-align: center;
            grid-column: 1/-1;
            padding: 65px 20px;
            color: #7c898d
        }

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

        .tr-empty h3 {
            margin: 12px 0 3px;
            color: var(--tr-navy)
        }

        .tr-empty p {
            margin: 0
        }

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

        .tr-help {
            margin-top: 55px;
            padding: 22px 25px;
            display: flex;
            align-items: center;
            gap: 16px;
            border: 1px solid #ddd4bd;
            border-radius: 16px;
            background: #fffaf0
        }

        .tr-help>span {
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: #f6e6c1;
            color: #9f6c19
        }

        .tr-help strong {
            color: var(--tr-navy)
        }

        .tr-help p {
            margin: 2px 0 0;
            color: #746f64;
            font-size: .84rem
        }

        .tr-help a {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 7px;
            color: var(--tr-green);
            font-weight: 700;
            white-space: nowrap
        }

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

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

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

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

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

        @media(max-width:991px) {
            .tr-tools {
                grid-template-columns: 1fr
            }

            .tr-tools>div {
                display: none
            }

            .tr-count {
                justify-self: end
            }

            .tr-intro-grid {
                grid-template-columns: 1fr
            }

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

        @media(max-width:767px) {
            .tr-hero {
                min-height: 620px
            }

            .tr-tools-wrap {
                margin-top: -46px
            }

            .tr-tools {
                padding: 19px
            }

            .tr-main {
                padding-top: 58px
            }

            .tr-help,
            .tr-cta .container {
                align-items: flex-start;
                flex-direction: column
            }

            .tr-help a {
                margin-left: 64px
            }

            .tr-cta {
                text-align: center
            }

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

        @media(max-width:540px) {
            .tr-hero h1 {
                font-size: 2.3rem
            }

            .tr-grid {
                grid-template-columns: 1fr
            }

            .tr-section-head h2 {
                font-size: 1.65rem
            }

            .tr-help a {
                margin-left: 0
            }
        }