/* =====================================================
   NEXTTOUR - Main Stylesheet
   =====================================================
   Character: Trustworthy, Professional, Adventurous
   Theme Colors:
     Primary Blue: #228bf6
     Primary Navy: #052f75
     Accent Orange: #F97316
   Bootstrap: v5.3.3
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@100;200;300;400;500;600;700;800&display=swap');

/* === CSS Variables === */
:root {
    --nt-primary: #2157cb; /* ปุ่ม BAr */
    --nt-primary-dark: #0f5faf; /* BAR Top/Bottom */
    --nt-primary-light: #376de1;
    --nt-secondary: #0055ba;
    --nt-secondary-light: #0f4baa;
    --nt-accent: #df9404;
    --nt-accent-dark: #a76f04;
    --nt-accent-light: #f1a107;
    --nt-text: #19283d;
    --nt-text-light: #263345;
    --nt-text-muted: #96b7788;
    --nt-bg-light: #ffffff;
    --nt-bg-gray: #DBEAFE;
    --nt-white: #ffffff;
    --nt-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --nt-shadow-hover: 0 8px 25px rgba(34, 139, 246, 0.15);
    --nt-radius: 10px;
    --nt-radius-sm: 20px;
    --nt-radius-lg: 30px;
    --nt-transition: all 0.3s ease;
    /* Brand palette aliases */
    --color-primary-navy: #052f75;
    --color-primary-cyan: #228bf6;
    --color-accent-orange: #f99c16;
    --color-accent-sky: #DBEAFE;
    --color-text-main: #334155;
    --color-bg-main: #F8FAFC;
    --color-white: #FFFFFF;
}

/* === Base Styles === */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 90%; }

body {
    font-family: 'Sarabun',Tahoma, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16.2px !important;
    line-height: 1.6;
    color: var(--nt-text);
    background: var(--nt-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sarabun', Tahoma, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nt-text);
}

a {
    color: var(--nt-primary-dark);
    text-decoration: none;
    transition: var(--nt-transition);
}
a:hover { color: var(--nt-primary); }

/* === Topbar === */
.nt-topbar {
    background: var(--nt-primary);
    color: white;
    font-size: 12.6px;
    padding: 8px 0;
}
.nt-topbar a { color: rgba(255,255,255,0.9); }
.nt-topbar a:hover { color: white; }
.nt-topbar i { margin-right: 5px; }

/* === Navbar === */
.nt-navbar {
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.nt-navbar-menubar {
    background: var(--nt-secondary);
    padding: 10px 0;
}
.nt-navbar-menubar .navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}
.nt-navbar-menubar .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}
.nt-navbar-menubar .nav-link {
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 14.4px;
    padding: 10px 16px !important;
    border-radius: var(--nt-radius-sm);
    transition: var(--nt-transition);
}
.nt-navbar-menubar .nav-link:hover,
.nt-navbar-menubar .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.15);
}
.nt-navbar-menubar .dropdown-menu {
    border: none;
    box-shadow: var(--nt-shadow);
    border-radius: var(--nt-radius);
    padding: 10px 10px;
}
.nt-navbar-menubar .dropdown-item {
    padding: 10px 20px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--nt-text);
    transition: var(--nt-transition);
}
.nt-navbar-menubar .dropdown-item:hover {
    background: var(--nt-bg-gray);
    color: var(--nt-primary);
}

/* === Logo + Search Bar === */
.nt-navbar-bottombar {
    background: var(--nt-white);
    padding: 25px 0 25px;
    max-height: 200px;
    overflow: hidden;
    overflow-anchor: none;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.25s ease;
}
.nt-navbar.nt-scrolled-down .nt-navbar-bottombar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}
.nt-navbar-bottombar .container {
    position: relative;
}
.nt-navbar-bottombar .navbar-brand img { height: 45px; }

.nt-navbar-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 480px;
}
.nt-navbar-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.nt-navbar-search-input-wrap i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nt-primary);
    font-size: 16px;
    pointer-events: none;
}
.nt-navbar-search-form .form-control {
    height: 50px;
    width: 100%;
    border: none;
    border-radius: 35px;
    background: #f2f3f9;
    padding: 0 20px 0 46px;
    box-shadow: none;
}
.nt-navbar-search-form .form-control:focus {
    box-shadow: 0 0 0 3px rgba(34, 139, 246, 0.15);
    background: #eef0f7;
}
.nt-navbar-search-form .form-control::placeholder {
    opacity: 1;
    transition: opacity 0.2s ease;
}
.nt-navbar-search-form .form-control:focus::placeholder {
    opacity: 0;
}
.nt-navbar-search-form button {
    flex: none;
    height: 50px;
    padding: 0 28px;
    border: none;
    border-radius: 35px;
    background: var(--nt-primary);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--nt-transition);
}
.nt-navbar-search-form button:hover {
    background: var(--nt-primary-dark);
}

@media (min-width: 992px) {
    .nt-navbar-search-form {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: clamp(300px, 34vw, 480px);
    }
}

/* === Mobile Top Bar: hamburger + logo + search icon === */
.nt-navbar-mobile-toprow {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}
.nt-navbar-mobile-brand img { height: 30px; }
.nt-navbar-mobile-search-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--nt-primary-dark);
    font-size: 20px;
    padding: 6px 4px;
    line-height: 1;
}
@media (max-width: 991.98px) {
    .nt-navbar-menubar {
        background: var(--nt-white);
        padding: 10px 0;
        box-shadow: 0 1px 0 var(--nt-bg-gray);
    }
    .nt-navbar-menubar .container {
        position: relative;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .nt-navbar-menubar .navbar-toggler {
        border: none;
        box-shadow: none;
        color: var(--nt-primary-dark);
        font-size: 20px;
        padding: 6px 4px;
        line-height: 1;
    }
    .nt-navbar-menubar .navbar-toggler:focus {
        box-shadow: none;
    }
    .nt-navbar-mobile-brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    .nt-navbar-mobile-search-toggle {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
    }
    #navMain {
        flex-basis: 100%;
    }
    #navMain.show,
    #navMain.collapsing {
        background: var(--nt-secondary);
        border-radius: var(--nt-radius);
        padding: 10px;
        margin-top: 10px;
    }
}

/* === Mobile Search Popup === */
.nt-mobile-search-popup {
    max-height: 0;
    overflow: hidden;
    background: var(--nt-white);
    box-shadow: 0 1px 0 var(--nt-bg-gray);
    transition: max-height 0.25s ease;
}
.nt-mobile-search-popup.show {
    max-height: 100px;
}
.nt-mobile-search-popup .container {
    padding-top: 12px;
    padding-bottom: 12px;
}
.nt-mobile-search-popup .nt-navbar-search-form {
    width: 100%;
    max-width: none;
}

/* === Country Mega Menu === */
.nt-navbar-menubar .container {
    position: relative;
}
.nt-country-menu {
    position: static !important;
}
.nt-country-dropdown {
    position: absolute !important;
    left: 50% !important;
    top: 100% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 1040px;
    max-width: 95vw;
    padding: 20px;
    margin: 0;
}
.nt-country-dropdown .dropdown-item {
    border-radius: 5px;
    white-space: normal;
    padding: 8px 12px;
}
@media (max-width: 991px) {
    .nt-country-menu .dropdown-menu {
        position: static !important;
        float: none;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: none;
        box-shadow: none;
        border: 1px solid var(--nt-bg-gray);
        margin-top: 4px;
    }
}

/* === Buttons === */
.btn {
    font-family: 'Sarabun', sans-serif;
    font-weight: 600;
    border-radius: var(--nt-radius-sm);
    padding: 10px 24px;
    transition: var(--nt-transition);
}

/* === Form Fields (default, unless overridden per-section) === */
.form-control,
.form-select {
    border-radius: var(--nt-radius-sm);
}

.btn-primary {
    background: var(--nt-primary);
    border-color: var(--nt-primary);
}
.btn-primary:hover {
    background: var(--nt-primary-dark);
    border-color: var(--nt-primary-dark);
}

.btn-secondary {
    background: var(--nt-secondary);
    border-color: var(--nt-secondary);
}

.btn-accent {
    background: var(--nt-accent);
    border-color: var(--nt-accent);
    color: #333;
}
.btn-accent:hover {
    background: var(--nt-accent-dark);
    border-color: var(--nt-accent-dark);
    color: #333;
}

.btn-outline-primary {
    border: 2px solid var(--nt-primary);
    color: var(--nt-primary);
}
.btn-outline-primary:hover {
    background: var(--nt-primary);
    border-color: var(--nt-primary);
    color: white;
}

.btn-outline-light {
    border: 2px solid white;
    color: white;
}
.btn-outline-light:hover {
    background: white;
    color: var(--nt-primary);
}

/* === Hero Carousel === */
.nt-hero-carousel,
.nt-hero-carousel .carousel-inner,
.nt-hero-carousel .carousel-item {
    width: 100%;
}

    .nt-hero-carousel .carousel-item img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: unset;
    }

    .nt-hero-carousel .carousel-control-prev,
    .nt-hero-carousel .carousel-control-next {
        width: 50px;
        height: 50px;
        background: var(--nt-primary);
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.9;
    }

    .nt-hero-carousel .carousel-control-prev { left: 20px; }
    .nt-hero-carousel .carousel-control-next { right: 20px; }
    .nt-hero-carousel .carousel-indicators button {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: white;
        opacity: 0.6;
    }

        .nt-hero-carousel .carousel-indicators button.active {
            background: var(--nt-accent);
            opacity: 1;
        }

.nt-results-hero{
    position:relative;overflow:hidden;border-radius:5px;padding:24px 26px;margin-bottom:28px;
}
.nt-results-hero > *{position:relative;z-index:1;}
.nt-results-title{font-size:clamp(1.35rem,1.8vw,1.85rem);font-weight:800;margin-bottom:.35rem;}
.nt-results-sub{color:rgba(25,36,35,.68);margin:0;}
.nt-results-sub strong{color:var(--nt-primary-dark);}

/* === Search Box === */
.nt-search-shell {
    padding-top: 24px;
    padding-bottom: 8px;
    border-radius: 5px;
}
.nt-search-section {
    background: rgba(255,255,255,0.85);
    padding: 48px 0 56px;
    position: relative;
    margin-top: 0;
}
.nt-search-box {
    background: white;
    border-radius: var(--nt-radius-lg);
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.nt-search-box > *{position:relative;z-index:1;}
.nt-search-box .form-control,
.nt-search-box .form-select {
    border: 2px solid var(--nt-primary);
    border-radius: var(--nt-radius-sm);
    padding: 12px 16px;
    font-size: 13.5px;
}
.nt-search-box .form-control:focus,
.nt-search-box .form-select:focus {
    border-color: var(--nt-primary);
    box-shadow: 0 0 0 3px rgba(34, 139, 246, 0.1);
}

.nt-search-box .btn-search {
    background: var(--nt-primary);
    border: none;
    color: white;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: var(--nt-radius-sm);
}
.nt-search-box .btn-search:hover {
    background: var(--nt-primary);
}

/* === Section Headers === */
.nt-section-header {
    margin-bottom: 30px;
}
.nt-section-title {
    font-size: 25.2px;
    font-weight: 700;
    color: var(--nt-text);
    position: relative;
    display: inline-block;
}
.nt-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--nt-primary);
    border-radius: 2px;
}
.nt-section-title i {
    color: var(--nt-primary);
    margin-right: 10px;
}

/* === Tour Card === */
.nt-tour-card {
    background: white;
    border: none;
    border-radius: var(--nt-radius);
    overflow: hidden;
    box-shadow: var(--nt-shadow);
    transition: var(--nt-transition);
    height: 100%;
}
.nt-tour-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--nt-shadow-hover);
}
.nt-tour-card .card-img-wrapper {
    position: relative;
    overflow: hidden;
}
.nt-tour-card .card-img-top {
    height: auto;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.nt-tour-card:hover .card-img-top {
    transform: scale(1.08);
}
    .nt-tour-card .badge-hot {
        position: absolute;
        top: 12px;
        right: 12px;
        background: #d41313;
        color: white;
        padding: 6px 12px;
        border-radius: 15px;
        font-size: 10.8px;
        font-weight: 600;
    }

    .nt-tour-card .badge-rec {
        position: absolute;
        top: 12px;
        right: 12px;
        background: #186116;
        color: white;
        padding: 6px 12px;
        border-radius: 15px;
        font-size: 10.8px;
        font-weight: 600;
    }

    .nt-tour-card .badge-new {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #3db307;
        color: white;
        padding: 6px 12px;
        border-radius: 15px;
        font-size: 10.8px;
        font-weight: 600;
    }
.nt-tour-card .card-body {
    padding: 20px;
}
    .nt-tour-card .card-title {
        font-size: 15.3px;
        font-weight: 600;
        color: var(--nt-primary-dark);
        margin-bottom: 12px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.nt-tour-card .card-title a {
    color: inherit;
    text-decoration: none;
}
.nt-tour-card .card-title a:hover {
    color: var(--nt-primary);
}
.nt-tour-card .tour-meta {
    font-size: 12.6px;
    color: var(--nt-text-light);
    margin-bottom: 6px;
}
.nt-tour-card .tour-meta i {
    color: var(--nt-secondary);
    margin-right: 6px;
    width: 16px;
}
.nt-tour-card .card-footer {
    background: var(--nt-bg-light);
    border: none;
    padding: 15px 20px;
}
.nt-tour-card .price-label {
    font-size: 12.8px;
    color: var(--nt-text-muted);
}
.nt-tour-card .price-value {
    font-size: 19.8px;margin-top:-5px;
    font-weight: 700;
    color: var(--nt-primary-dark);
}

/* === Tour Card Schedule/Price Rows === */
.nt-sched-list {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    text-decoration: none;
    color: inherit;
}
.nt-sched-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 4px;
    margin: 0 -4px;
    border-bottom: 1px solid var(--nt-bg-gray);
    min-height: 34px;
}
.nt-sched-row:last-child {
    border-bottom: none;
}
.nt-sched-row.is-empty {
    border-bottom-color: transparent;
}
.nt-sched-date {
    font-size: 13.6px;
    color: var(--nt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nt-sched-price {
    flex: none;
    background: var(--nt-primary);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 4px 12px;
    border-radius: 35px;
    white-space: nowrap;
}
.nt-sched-row.is-past .nt-sched-date {
    color: var(--nt-text-muted);
}
.nt-sched-row.is-past .nt-sched-price {
    background: #dcdfe4;
    color: #7a828e;
}
.nt-tour-card .btn-detail {
    background: var(--nt-primary-dark);
    border: none;
    color: white;
    padding: 8px 18px;
    border-radius: var(--nt-radius-sm);
    font-size: 12.6px;
    font-weight: 600;
}
.nt-tour-card .btn-detail:hover {
    background: var(--nt-primary-dark);
}

/* === Zone Card === */
.nt-zone-card {
    position: relative;
    border-radius: var(--nt-radius);
    overflow: hidden;
    box-shadow: var(--nt-shadow);
    transition: var(--nt-transition);
    height: 100%;
}
.nt-zone-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--nt-shadow-hover);
}
.nt-zone-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.nt-zone-card:hover img {
    transform: scale(1.1);
}
    .nt-zone-card .zone-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(5, 47, 117, 0.82);
        padding: 10px 10px 10px;
        color: white;
    }
.nt-zone-card .zone-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}
.nt-zone-card .zone-count {
    font-size: 12.6px;
    opacity: 0.9;
}

/* === Zone Grid (limited with "show all") === */
.nt-zone-grid-limit > div:nth-child(n+21) {
    display: none;
}
.nt-zone-grid-limit.show-all > div:nth-child(n+21) {
    display: block;
}

/* === Collapsible Description (with "read all") === */
.nt-desc-collapse {
    max-height: 500px;
    overflow: hidden;
    position: relative;
}
.nt-desc-collapse::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}
.nt-desc-collapse.show-all {
    max-height: none;
}
.nt-desc-collapse.show-all::after {
    display: none;
}
.nt-desc-toggle {
    margin-top: 12px;
}

/* === Page Header === */
.nt-page-header {
    background: var(--nt-primary-dark);
    color: white;
    padding: 50px 0;
    position: relative;
    overflow: hidden;
    border-radius: 0px !important;
}
.nt-page-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;

    border-radius: 50%;
}
.nt-page-header h1 {
    font-size: 28.8px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}
.nt-page-header .breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
}
.nt-page-header .breadcrumb-item a {
    color: rgba(255,255,255,0.8);
}
.nt-page-header .breadcrumb-item.active {
    color: white;
}
.nt-page-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.5);
}


/* === Group References Section === */
.nt-ref-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.nt-ref-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* Tablet */
@media (max-width: 991px) {
    .nt-ref-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .nt-ref-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* === Why Us Section === */
.nt-why-section {
    background: var(--nt-primary);
    padding: 80px 0;
    margin-bottom:80px;
    color: white;
}
.nt-why-card {
    background: rgba(255,255,255,0.1);
    border-radius: var(--nt-radius);
    padding: 35px 25px;
    text-align: center;
    transition: var(--nt-transition);
    height: 100%;
}
.nt-why-card:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-5px);
}
    .nt-why-card .icon-box {
        width: 80px;
        height: 80px;
        background: var(--nt-accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 28.8px;
        color: white;
    }
    .nt-why-card h5 {
        font-weight: 700;
        margin-bottom: 10px;
        color: white;
    }
.nt-why-card p {
    font-size: 12.6px;
    opacity: 0.9;
    margin: 0;
}

/* === Pagination === */
.nt-pagination-wrap {
    margin-top: 2rem;
}
.nt-pagination .page-link {
    border: none;
    border-radius: var(--nt-radius-sm);
    padding: 10px 16px;
    margin: 0 3px;
    color: var(--nt-text);
    font-weight: 500;
    transition: var(--nt-transition);
}
.nt-pagination .page-link:hover {
    background: var(--nt-bg-light);
    color: var(--nt-primary);
}
.nt-pagination .page-item.active .page-link {
    background: var(--nt-primary);
    color: white;
}

/* === Alert === */
.nt-alert-info {
    background: var(--nt-bg-light);
    border: 1px solid rgba(34, 139, 246, 0.2);
    border-radius: var(--nt-radius);
    color: var(--nt-primary-dark);
    padding: 20px;
}

/* === Footer === */
.nt-footer {
    background: var(--nt-primary);
    color: rgba(255,255,255,0.8);
    padding: 60px 0 0;
}
.nt-footer h5 {
    color: white;
    font-weight: 700;
    margin-bottom: 20px;
}
.nt-footer a {
    color: rgba(255,255,255,0.7);
    display: block;
    padding: 6px 0;
    transition: var(--nt-transition);
}
.nt-footer a:hover {
    color: var(--nt-accent);
    padding-left: 5px;
}
    .nt-footer .social-links a {
        display: inline-flex;
        width: 40px;
        height: 40px;
        background: var(--nt-primary-dark);
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        font-size: 16.2px;
    }
.nt-footer .social-links a:hover {
    background: var(--nt-primary);
    color: white;
}
.nt-footer-bottom {
    background: var(--nt-primary-dark);
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 13px;
}

/* === Tour Detail === */
.nt-tour-detail .tour-banner {
    height: 400px;
    object-fit: cover;
    border-radius: var(--nt-radius);
}
.nt-tour-detail .info-card {
    background: white;
    border-radius: var(--nt-radius);
    box-shadow: var(--nt-shadow);
    transition: var(--nt-transition);
    padding: 25px;
    margin-bottom: 20px;
}
.nt-tour-detail .info-card h5 {
    color: var(--nt-primary);
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--nt-bg-light);
}
.nt-tour-detail .schedule-table th {
    background: var(--nt-primary);
    color: white;
}
.nt-tour-detail .schedule-table .badge-available {
    background: #28a745;
}
.nt-tour-detail .schedule-table .badge-full {
    background: #dc3545;
}
.nt-tour-detail .price-box {
    background: var(--nt-accent);
    border-radius: var(--nt-radius);
    padding: 25px;
    text-align: center;
}
.nt-tour-detail .price-box .price-label {
    font-size: 12.6px;
    color: #666;
}
.nt-tour-detail .price-box .price-value {
    font-size: 32.4px;
    font-weight: 700;
    color: #333;
}
.nt-tour-detail .contact-box {
    background: var(--nt-primary);
    color: white;
    border-radius: var(--nt-radius);
    padding: 25px;
}
.nt-tour-detail .btn-line {
    background: #06c755;
    color: white;
    border: none;
}
.nt-tour-detail .btn-line:hover {
    background: #05a847;
}

/* === Tour List Card (Horizontal) === */
.nt-tour-list-card {
    background: white;
    border-radius: var(--nt-radius);
    overflow: hidden;
    box-shadow: var(--nt-shadow);
    transition: var(--nt-transition);
    margin-bottom: 25px;
    width: 100%;
    height: auto;
}
.nt-tour-list-card:hover {
    box-shadow: var(--nt-shadow-hover);
}
.nt-tour-list-card .tour-image {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}
.nt-tour-list-card .tour-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.nt-tour-list-card:hover .tour-image img {
    transform: scale(1.05);
}
.nt-tour-list-card .tour-image .watermark {
    position: absolute;
    top: 10px;
    left: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 12.6px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.nt-tour-list-card .tour-content {
    padding: 20px 25px;
}
    .nt-tour-list-card .tour-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--nt-primary);
        margin-bottom: 8px;
        line-height: 1.4;
    }
.nt-tour-list-card .tour-title a {
    color: inherit;
    text-decoration: none;
}
.nt-tour-list-card .tour-title a:hover {
    color: var(--nt-primary-dark);
}
.nt-tour-list-card .tour-price {
    font-size: 13.5px;
    margin-bottom: 15px;
}
.nt-tour-list-card .tour-price .price-label {
    color: var(--nt-primary);
}
    .nt-tour-list-card .tour-price .price-value {
        font-size: 22.5px;
        font-weight: 700;
        color: var(--nt-primary);
        margin-left: 5px;
    }
    .nt-tour-list-card .tour-description {
        color: var(--nt-primary);
        font-size: 13.5px;
        line-height: 1.7;
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
.nt-tour-list-card .btn-readmore {
    background: var(--nt-primary);
    border: none;
    color: white;
    padding: 12px 28px;
    border-radius: var(--nt-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: var(--nt-transition);
}
.nt-tour-list-card .btn-readmore:hover {
    background: var(--nt-primary-dark);
    transform: translateX(5px);
}
.nt-tour-list-card .btn-readmore i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}
.nt-tour-list-card .btn-readmore:hover i {
    transform: translateX(3px);
}

/* === Schedule Months === */
.schedule-months {
    margin-bottom: 15px;
}
.schedule-month-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}
.schedule-month-badge {
    background: var(--nt-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 14.4px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.schedule-dates {
    color: var(--nt-primary);
    font-size: 12.6px;
    line-height: 1.8;
}
.schedule-dates .date-item {
    display: inline;
}
.schedule-dates .date-separator {
    color: var(--nt-text-muted);
    margin: 0 3px;
}
.schedule-more-link {
    color: var(--nt-primary);
    font-size: 14.4px;
    cursor: pointer;
    display: inline-block;
    margin-top: 5px;
}
    .schedule-more-link:hover {
        color: var(--nt-primary-dark);
        text-decoration: underline;
    }

/* === Info Card (General) === */
.info-card {
    background: white;
    border-radius: var(--nt-radius);
    box-shadow: var(--nt-shadow);
    transition: var(--nt-transition);
    padding: 25px;
    margin-bottom: 20px;
}
.info-card h5 {
    color: var(--nt-primary);
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--nt-bg-light);
}

.nt-empty-state{border-radius:5px;padding:24px;}

/* === Responsive Tour List Card === */
@media (min-width: 992px) {
    .nt-tour-list-card .row { align-items: stretch; }
    .nt-tour-list-card .tour-image img { width: 100%;height: auto;min-height: 200px; }
    .nt-tour-list-card .tour-content { padding: 16px 20px; }
    .nt-tour-list-card .tour-title {
        font-size: 15.3px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .nt-tour-list-card .tour-description {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
@media (max-width: 767px) {
    .schedule-month-row { flex-direction: column;gap: 5px; }
}

/* === Utilities === */
.bg-nt-primary { background: var(--nt-primary) !important; }
.bg-nt-secondary { background: var(--nt-secondary) !important; }
.bg-nt-accent { background: var(--nt-accent) !important; }
.bg-nt-light { background: var(--nt-bg-light) !important; }
.text-nt-primary { color: var(--nt-primary) !important; }
.text-nt-secondary { color: var(--nt-secondary) !important; }
.text-nt-accent { color: var(--nt-accent) !important; }

/* === Responsive === */
@media (max-width: 991px) {
    .nt-page-header { padding: 40px 0; }
    .nt-page-header h1 { font-size: 23.4px; }
    .nt-search-section { margin-top: 0; }
    .nt-search-box { padding: 20px; }
    .nt-search-shell{padding-top:16px;}
    .nt-results-hero{padding:20px 18px;border-radius:5px;}
}
@media (max-width: 767px) {
    body { font-size: 13.5px; }
    .nt-tour-card .card-img-top { height: auto; }
    .nt-zone-card img { height: auto; }
    .nt-section-title { font-size: 19.8px; }
    .nt-search-shell .container, main .container{padding-left:16px;padding-right:16px;}
    main.py-5{padding-top:1.5rem !important;}
}


/* =====================================================
   Liquid Glass Layer (iOS-inspired) - non-destructive overrides
   ===================================================== */
:root {
    --nt-glass-bg: rgba(255, 255, 255, 0.52);
    --nt-glass-strong: rgba(255, 255, 255, 0.72);
    --nt-glass-border: rgba(255, 255, 255, 0.48);
    --nt-glass-shadow: 0 18px 45px rgba(5, 47, 117, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06);
    --nt-glass-shadow-hover: 0 24px 60px rgba(5, 47, 117, 0.16), 0 12px 28px rgba(0, 0, 0, 0.10);
    --nt-glass-blur: 18px;
    --nt-glass-sat: 165%;
}

body.nt-liquid {
    background: var(--nt-bg-light);
    color: var(--nt-text);
}

    body.nt-liquid .nt-topbar,
    body.nt-liquid .nt-tour-card,
    body.nt-liquid .nt-zone-card,
    body.nt-liquid .info-card,
    body.nt-liquid .nt-tour-detail .info-card,
    body.nt-liquid .nt-tour-list-card,
    body.nt-liquid .nt-alert-info,
    body.nt-liquid .nt-page-header,
    body.nt-liquid .nt-why-card,
    body.nt-liquid .nt-footer .social-links a {
        background: rgba(255,255,255,0.85);
        border: 1px solid rgba(255,255,255,0.40);
        box-shadow: var(--nt-glass-shadow);
        backdrop-filter: blur(var(--nt-glass-blur)) saturate(var(--nt-glass-sat));
        -webkit-backdrop-filter: blur(var(--nt-glass-blur)) saturate(var(--nt-glass-sat));
    }
    body.nt-liquid .nt-pagination .page-link {
        min-width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--nt-radius-sm);
        margin: 0 4px;
    }
    body.nt-liquid .nt-topbar {
        background: var(--nt-primary-dark);
        border: 1px solid rgba(255,255,255,0.18);
        box-shadow: 0 14px 36px rgba(5,47,117,0.18);
    }

    body.nt-liquid .nt-navbar {
        position: sticky;
        top: 0;
        z-index: 1040;
        box-shadow: 0 12px 34px rgba(5, 47, 117, 0.10), 0 2px 10px rgba(0,0,0,0.04);
    }

        body.nt-liquid .nt-navbar-bottombar .navbar-brand img {
            height: 45px;
            filter: drop-shadow(0 10px 18px rgba(0,0,0,0.08));
        }

    body.nt-liquid .btn,
    body.nt-liquid .nt-tour-card .btn-detail,
    body.nt-liquid .nt-tour-list-card .btn-readmore {
        border-radius: var(--nt-radius-sm);
        box-shadow: 0 10px 24px rgba(34,139,246,.18);
    }
    body.nt-liquid .nt-search-box {
        border-radius: 5px;
        padding: 24px;
        background: rgba(255,255,255,0.90) !important;
        border: 1px solid rgba(255,255,255,.40);
        box-shadow: 0 22px 60px rgba(5,47,117,.12), 0 10px 24px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.10);
        backdrop-filter: blur(22px) saturate(175%);
        -webkit-backdrop-filter: blur(22px) saturate(175%);
    }

    body.nt-liquid .btn-primary,
    body.nt-liquid .nt-tour-card .btn-detail,
    body.nt-liquid .nt-tour-list-card .btn-readmore {
        background: var(--nt-primary-dark);
        border-color: rgba(255,255,255,0.34);
    }

    body.nt-liquid .btn-accent {
        background: var(--nt-accent);
        border-color: rgba(255,255,255,0.34);
        box-shadow: 0 10px 24px rgba(249,115,22,.20);
    }

    body.nt-liquid .btn-primary:hover,
    body.nt-liquid .btn-secondary:hover,
    body.nt-liquid .btn-accent:hover,
    body.nt-liquid .btn-outline-primary:hover,
    body.nt-liquid .nt-tour-card:hover,
    body.nt-liquid .nt-zone-card:hover,
    body.nt-liquid .nt-tour-list-card:hover,
    body.nt-liquid .nt-why-card:hover,
    body.nt-liquid .info-card:hover,
    body.nt-liquid .nt-tour-detail .info-card:hover {
        box-shadow: var(--nt-glass-shadow-hover);
    }

    body.nt-liquid .nt-hero-carousel {
        padding: 22px 0 0;
    }

        body.nt-liquid .nt-hero-carousel .carousel-inner {
            overflow: hidden;
            border-radius: 0px;
            box-shadow: 0 24px 70px rgba(5,47,117,0.16), 0 12px 24px rgba(0,0,0,0.08);
            border: 1px solid rgba(255,255,255,0.56);
        }

        body.nt-liquid .nt-hero-carousel .carousel-item {
            background: rgba(255,255,255,0.20);
        }

            body.nt-liquid .nt-hero-carousel .carousel-item img {
                border-radius: 0px;
            }

        body.nt-liquid .nt-hero-carousel .carousel-control-prev,
        body.nt-liquid .nt-hero-carousel .carousel-control-next {
            background: rgba(255,255,255,0.34);
            border: 1px solid rgba(255,255,255,0.40);
            box-shadow: 0 10px 24px rgba(0,0,0,0.10);
            backdrop-filter: blur(16px) saturate(160%);
            -webkit-backdrop-filter: blur(16px) saturate(160%);
        }

        body.nt-liquid .nt-hero-carousel .carousel-indicators button {
            border: 1px solid rgba(255,255,255,0.50);
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        }

    body.nt-liquid .nt-search-section {
        background: var(--nt-primary-dark);
        padding: 48px 0 56px;
        position: relative;
        margin-top: 0;
    }

    body.nt-liquid .nt-search-box .form-control,
    body.nt-liquid .nt-search-box .form-select {
        min-height: 52px;
        border-radius: var(--nt-radius-sm);
        background: rgba(255,255,255,.62);
        border: 1px solid rgba(255,255,255,.42);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 18px rgba(5,47,117,.05);
    }
    body.nt-liquid .nt-search-box .form-control:focus,
    body.nt-liquid .nt-search-box .form-select:focus{
        border-color:rgba(4,96,180,.38);
        box-shadow:0 0 0 4px rgba(4,96,180,.12), inset 0 1px 0 rgba(255,255,255,.75), 0 10px 22px rgba(5,47,117,.08);
    }
    body.nt-liquid .nt-search-box::after {
        content: none;
    }
    body.nt-liquid .nt-section-title::after {
        height: 3px;
        width: 72px;
        background: var(--nt-primary);
        box-shadow: 0 6px 18px rgba(4,96,180,.18);
    }

    body.nt-liquid .btn-search{
        min-height:52px;
        border-radius:var(--nt-radius-sm);
        font-weight:700;
        background:var(--nt-primary);
        border:1px solid rgba(255,255,255,.34);
        color:white;
        box-shadow:0 14px 28px rgba(249,115,22,.22), inset 0 1px 0 rgba(255,255,255,.45);
    }
    body.nt-liquid .btn-search:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(249,115,22,.28), inset 0 1px 0 rgba(255,255,255,.48);}

    body.nt-liquid .nt-tour-card,
    body.nt-liquid .nt-zone-card,
    body.nt-liquid .nt-tour-list-card,
    body.nt-liquid .info-card,
    body.nt-liquid .nt-tour-detail .info-card,
    body.nt-liquid .nt-why-card,
    body.nt-liquid .nt-alert-info,
    body.nt-liquid .nt-page-header {
        position: relative;
        overflow: hidden;
        border-radius: 5px;
    }

        body.nt-liquid .nt-tour-card .card-body,
        body.nt-liquid .nt-tour-card .card-footer,
        body.nt-liquid .nt-tour-list-card .tour-content {
            background: transparent;
        }

        body.nt-liquid .nt-tour-card .card-footer {
            border-top: 1px solid rgba(255,255,255,0.36);
        }

        body.nt-liquid .nt-zone-card .zone-overlay {
            background: rgba(5,47,117,0.65);
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
        }

    body.nt-liquid .nt-page-header {
        background: rgba(5,47,117,0.85);
    }

    body.nt-liquid .nt-why-section {
        background: rgba(5,47,117,0.92);
    }

    body.nt-liquid .nt-why-card {
        background: rgba(255,255,255,0.16);
        border-color: rgba(255,255,255,0.24);
    }

    body.nt-liquid .nt-footer {
        background: rgba(5,47,117,0.97);
    }

        body.nt-liquid .nt-footer .social-links a {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.14);
        }

    body.nt-liquid .bg-nt-light {
        background: rgba(244,247,250,0.80) !important;
    }
    body.nt-liquid .nt-alert-info.nt-empty-state {
        background: rgba(250,252,253,.60) !important;
        border: 1px solid rgba(255,255,255,.42);
        box-shadow: 0 16px 36px rgba(5,47,117,.08), inset 0 1px 0 rgba(255,255,255,.56);
    }

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    body.nt-liquid .nt-topbar,
    body.nt-liquid .nt-search-box,
    body.nt-liquid .nt-tour-card,
    body.nt-liquid .nt-zone-card,
    body.nt-liquid .info-card,
    body.nt-liquid .nt-tour-detail .info-card,
    body.nt-liquid .nt-tour-list-card,
    body.nt-liquid .nt-alert-info,
    body.nt-liquid .nt-page-header,
    body.nt-liquid .nt-why-card,
    body.nt-liquid .nt-pagination .page-link,
    body.nt-liquid .nt-footer .social-links a {
        background: rgba(255,255,255,0.94);
    }
}

@media (max-width: 991px) {
    body.nt-liquid .nt-navbar-bottombar .navbar-brand img {
        height: 38px;
    }

    body.nt-liquid .nt-hero-carousel {
        padding-top: 14px;
    }

    body.nt-liquid .nt-search-section {
        margin-top: 0;
        padding-top: 18px;
    }
    body.nt-liquid .nt-search-box{padding:18px;border-radius:5px;}
}

@media (max-width: 767px) {
    body.nt-liquid {
        background: var(--nt-bg-light);
    }
    body.nt-liquid .nt-search-box,
    body.nt-liquid .nt-tour-card,
    body.nt-liquid .nt-zone-card,
    body.nt-liquid .nt-tour-list-card,
    body.nt-liquid .info-card,
    body.nt-liquid .nt-tour-detail .info-card,
    body.nt-liquid .nt-why-card,
    body.nt-liquid .nt-page-header {
        border-radius: 5px;
    }
    body.nt-liquid .nt-hero-carousel .carousel-control-prev,
    body.nt-liquid .nt-hero-carousel .carousel-control-next {
        width: 42px;
        height: 42px;
    }
    body.nt-liquid .nt-search-box .row > div{margin-bottom:.1rem;}
}

/* =========================
   LINE Popup Bar
   ========================= */

.nt-line-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    display: none;
    padding: 5px 30px;
    background-color: #00b900;
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border-top: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.10);
}

.nt-line-popup-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    flex-wrap: wrap;
}

.nt-line-icon {
    width: 32px;
    flex-shrink: 0;
}

.nt-line-text {
    font-size: 15px;
    color: var(--nt-white);
}
.nt-line-text-at {
    font-size: 17px !important;
}

.nt-line-close {
    position: absolute;
    top: 45%;
    right: 14px;
    transform: translateY(-50%);
    border: none;
    background: none;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: var(--nt-white) !important;
}

@media (max-width: 767px) {
    .nt-line-popup {
        padding: 10px 44px;
    }
    .nt-line-popup-content {
        gap: 8px;
    }
    .nt-line-icon {
        width: 24px;
    }
    .nt-line-text {
        font-size: 12.6px;
    }
    .nt-line-btn {
        padding: 6px 12px;
        font-size: 12.6px;
    }
    .nt-line-close {
        right: 10px;
        font-size: 18px;
    }
}

/* =========================
   Back to Top
   ========================= */

.nt-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9998;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nt-primary);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 10px 24px rgba(34,139,246,.30);
    transition: var(--nt-transition);
}
.nt-back-to-top:hover {
    background: var(--nt-primary-dark);
    color: #fff;
    transform: translateY(-3px);
}
@media (max-width: 767px) {
    .nt-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* =====================================================
   Tour Detail Page (tour/default.aspx)
   ===================================================== */
:root{
  --cp:#228bf6; --cpd:#052f75; --cpl:#DBEAFE; --cpl2:#BFDBFE;
  --ca:#F97316; --cal:#fff1e6; --cad:#EA580C;
  --cd:#162032; --ct:#3d4a5c; --cm:#7a8899;
  --cb:#e2e8f0; --cbg:#f7f9fc;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow:0 4px 18px rgba(0,0,0,.09);
  --shadow-lg:0 8px 32px rgba(0,0,0,.13);
  --shadow-color:0 6px 24px rgba(34,139,246,.15);
  --r:var(--nt-radius); --r-sm:var(--nt-radius-sm); --r-lg:var(--nt-radius-lg);
  --th:52px;
}

/* ── HERO ── */
.hero{position:relative;min-height:460px;display:flex;align-items:flex-end;overflow:hidden;background:var(--cpd)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 10s ease}
.hero:hover .hero-bg{transform:scale(1.04)}
.hero-ov{
  position:absolute;inset:0;
  background:rgba(5,15,35,.55)
}
.hero-ct{position:relative;z-index:2;padding:2.5rem 0 2rem;width:100%}
.bcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .45rem;margin-bottom:.9rem}
.bcrumb a{color:rgba(255,255,255,.6);font-size:1rem;text-decoration:none;transition:color .2s}
.bcrumb a:hover{color:#fff}
.bcrumb .sep{color:rgba(255,255,255,.25);font-size:.72rem}
.bcrumb .cur{color:rgba(255,255,255,.82);font-size:1rem}
.h-code{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--ca);color:#1a2332;font-weight:700;font-size:1rem;
  padding:.22rem .8rem;border-radius:5px;letter-spacing:.07em;margin-bottom:.65rem;
  box-shadow:0 2px 8px rgba(249,115,22,.4)
}
.h-title{
  font-family:'Sarabun',sans-serif;font-weight:500;
  font-size:clamp(1.35rem,3.2vw,2.1rem);color:#fff;line-height:1.28;
  margin-bottom:.85rem;text-shadow:0 2px 16px rgba(0,0,0,.4)
}
.h-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.h-meta-i{display:flex;align-items:center;gap:.38rem;color:rgba(255,255,255,.8);font-size:1rem}
.h-meta-i i{color:var(--ca);font-size:.82rem}
.h-meta-i a{color:rgba(255,255,255,.8);text-decoration:underline}
.h-price-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(34,139,246,.85);backdrop-filter:blur(8px);
  color:#fff;padding:.3rem 1rem;border-radius:5px;font-size:.84rem;font-weight:600;
  border:1px solid rgba(255,255,255,.2)
}
.h-price-pill strong{color:var(--ca);font-size:1rem}

/* ── STICKY TABS ── */
.ttabs{
  position:-webkit-sticky;position:sticky;top:var(--nh,0px);z-index:200;
  background:#fff;border-bottom:2px solid var(--cb);
  box-shadow:0 3px 14px rgba(0,0,0,.07)
}
.ttabs-inner{display:flex;overflow-x:auto;scrollbar-width:none}
.ttabs-inner::-webkit-scrollbar{display:none}
.ttab{
  display:flex;align-items:center;gap:.38rem;padding:.85rem 1.1rem;
  font-size:1rem;font-weight:600;color:var(--nt-text);white-space:nowrap;
  border-bottom:3px solid transparent;text-decoration:none;flex-shrink:0;
  transition:color .2s,border-color .2s;font-family:'Sarabun',sans-serif
}
.ttab i{font-size:.8rem}
.ttab:hover{color:var(--cp)}
.ttab.active{color:var(--cp);border-bottom-color:var(--cp)}

/* ── BODY LAYOUT ── */
.tour-body{padding:2.25rem 0 4.5rem;background:#fff}
.sec{scroll-margin-top:calc(var(--nh,0px) + var(--th,52px) + 14px);margin-bottom:2.5rem}

/* ── SECTION HEADING ── */
.sh{
  display:flex;align-items:center;gap:.55rem;
  font-family:'Sarabun',sans-serif;font-weight:700;
  font-size:1.1rem;color:var(--cd);
  padding:.7rem .9rem;margin-bottom:1.25rem;
  background:var(--cpl);
  border-left:4px solid var(--cp);border-radius:0 5px 5px 0
}
.sh i{color:var(--cp);font-size:1.2rem}
.sh-toggle{cursor:pointer;justify-content:space-between;user-select:none}
.sh-toggle span{display:flex;align-items:center;gap:.55rem}
.sh-arr{color:var(--cm);font-size:.75rem;transition:transform .3s;margin-left:auto}
.sh-toggle:not(.collapsed) .sh-arr{transform:rotate(180deg)}

/* ── INFO CHIPS ── */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#fff;border:1.5px solid var(--cb);
  padding:.4rem .95rem;border-radius:5px;font-size:1rem;color:var(--ct);
  box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s
}
.chip:hover{border-color:var(--cp);box-shadow:var(--shadow-color)}
.chip i{color:var(--cp);font-size:.8rem}
.chip strong{color:var(--cd);font-weight:600;margin-right:.1rem}

/* ── HIGHLIGHT BOX ── */
.hl-box{
  background:#dbeafe;
  border-left:4px solid var(--cp);border-radius:0 var(--r) var(--r) 0;
  padding:1.15rem 1.4rem;line-height:1.85;margin-top:.75rem;
  box-shadow:var(--shadow-sm)
}

/* ── SCHEDULE TABLE ── */
.sched-tbl{font-size:1rem;margin-bottom:0}
.sched-tbl thead tr{background:var(--cp)}
.sched-tbl thead th{font-weight:600;padding:.7rem .85rem;border:none;font-size:.95rem}
.sched-tbl tbody td{padding:.65rem .85rem;vertical-align:middle;border-color:var(--cb)}
.sched-tbl tbody tr{transition:background .15s}
.sched-tbl tbody tr:hover{background:var(--cpl)}
.sched-tbl .s-code{font-weight:700;color:var(--cp);font-size:.9rem}
.sched-tbl .s-date{font-weight:400;color:var(--cd)}
.sched-tbl .s-price{font-weight:400;color:var(--cp);font-size:.9rem}
.btn-book{
  background:var(--cp);color:#fff;border:none;
  padding:.35rem .9rem;border-radius:var(--r-sm);font-size:.9rem;font-weight:700;
  text-decoration:none;transition:all .2s;white-space:nowrap;display:inline-block
}
.btn-book:hover{background:var(--cpd);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,139,246,.35)}

/* ── ITINERARY ACCORDION ── */

/* Day accordion (isSubject=true) */
.day-item{
  border:1px solid var(--cb);border-radius:var(--r-sm);margin-bottom:.55rem;
  overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s;
}
.day-item:hover{box-shadow:var(--shadow)}
.day-hd{
  position:relative;display:flex;align-items:center;gap:.8rem;
  padding:.85rem 1.1rem;overflow:hidden;
  background:var(--cpl);
  cursor:pointer;user-select:none;transition:background .2s
}
.day-hd::before{
  content:attr(data-day);
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  font-family:'Sarabun',sans-serif;
  font-size:4rem;font-weight:800;line-height:1;letter-spacing:-.05em;
  color:rgba(34,139,246,.1);pointer-events:none;user-select:none
}
.day-hd:hover{background:#bfdbfe}
.day-hd:not(.collapsed){background:#93c5fd}
.day-hd:not(.collapsed)::before{color:rgba(34,139,246,.18)}
.day-num{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:3rem;padding:.5rem .6rem;
  background:var(--cp);color:#fff;border-radius:10px;
  box-shadow:0 2px 8px rgba(34,139,246,.4);
  line-height:1.1;position:relative;z-index:1
}
.day-num-lbl{font-size:.6rem;font-weight:500;opacity:.85;letter-spacing:.05em}
.day-num-n{font-size:1.6rem;font-weight:800;line-height:1}
.day-ttl{flex:1;color:var(--cd);font-size:0.95rem;line-height:1.4;position:relative;z-index:1}
.day-hd:not(.collapsed) .day-ttl{color:var(--cpd)}
.day-arr{color:var(--cm);transition:transform .3s;font-size:.85rem;flex-shrink:0;position:relative;z-index:1}
.day-hd:not(.collapsed) .day-arr{transform:rotate(180deg)}
.day-bd{padding:0;}
.day-content{ }

/* Sub-header accordion (TourScheduleSubjectID=1) ภายในวัน */
.sub-item{
  border:1px solid var(--cpl2);border-radius:var(--r-sm);
  margin:.4rem 0;overflow:hidden
}
.sub-hd{
  display:flex;align-items:center;gap:.55rem;
  padding:.6rem .85rem;
  background:#dbeafe;
  cursor:pointer;user-select:none;transition:background .18s
}
.sub-hd:hover{background:#bfdbfe}
.sub-hd:not(.collapsed){background:#93c5fd}
.sub-dot{color:var(--cp);font-size:1rem;flex-shrink:0}
.sub-ttl{flex:1;color:var(--cd);font-size:1rem;line-height:1.35}
.sub-hd:not(.collapsed) .sub-ttl{color:var(--cpd)}
.sub-arr{color:var(--cm);transition:transform .3s;font-size:.9rem;flex-shrink:0}
.sub-hd:not(.collapsed) .sub-arr{transform:rotate(180deg)}
.sub-bd{padding:.4rem .5rem .6rem .5rem;background:#fff}

/* รายการกิจกรรม */
.day-act{
  padding:.5rem 0 .45rem .0rem;
  transition:border-color .2s
}
.day-act:hover{border-left-color:var(--cp)}
.day-act-title{
  font-weight:400;color:var(--cd);font-size:0.9rem;
  margin-bottom:.15rem;display:flex;align-items:baseline;gap:.28rem
}
.day-act-title i{color:var(--cp);font-size:0.9rem;flex-shrink:0}
.day-act-detail{font-size:0.9rem;color:#5a6a7e;line-height:1.75;padding-left:.85rem}
.day-link{
  display:block;text-align:right;padding:.45rem 1.1rem;
  font-size:1rem;color:var(--cp);text-decoration:none;
  background:var(--cpl);
  border-top:1px solid var(--cb)
}
.day-link:hover{color:var(--cpd);text-decoration:underline}

/* ── PRICING ACCORDION ── */
.price-section{border:1px solid var(--cb);border-radius:5px;margin-bottom:.6rem;overflow:hidden;box-shadow:var(--shadow-sm)}
.price-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.1rem;cursor:pointer;transition:background .2s;
  background:var(--cal)
}
.price-hd:hover,.price-hd:not(.collapsed){background:#fed7aa}
.price-hd-left{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:center}
.price-code{
  background:var(--cp);color:#fff;font-size:.85rem;font-weight:700;
  padding:.18rem .6rem;border-radius:5px;box-shadow:0 2px 6px rgba(34,139,246,.3)
}
.price-date{font-size:0.95rem;color:var(--cd)}
.price-date strong{color:var(--nt-primary)}
.price-hd>i{color:var(--cm);transition:transform .3s;font-size:.75rem}
.price-hd:not(.collapsed)>i{transform:rotate(180deg)}
.price-bd{padding:.85rem .3rem;background:#fff}
.price-tbl{font-size:.9rem;margin-bottom:0}
.price-tbl thead tr{background:var(--cbg)}
.price-tbl th{font-weight:700;padding:.55rem .7rem;color:var(--cd);font-size:.9rem}
.price-tbl td{padding:.5rem .7rem;border-color:var(--cb);vertical-align:middle}
.price-tbl td:last-child{font-weight:700;color:var(--nt-primary);text-align:right}

/* ── SIDEBAR CARDS ── */
.sb-wrap{position:sticky;top:calc(var(--nh,0px) + var(--th,52px) + 16px)}
.sb-card{
  border:1px solid var(--cb);border-radius:var(--r);overflow:hidden;
  margin-bottom:1rem;background:#fff;box-shadow:var(--shadow)
}
.sb-header{
  display:flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;
  background:var(--cp);
  color:#fff;font-weight:700;font-size:.9rem
}
.sb-header i{font-size:.88rem}
.dl-box{padding:.8rem 1.1rem}
.dl-link{
  display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;
  background:var(--cpl);border-radius:var(--r-sm);text-decoration:none;
  color:var(--cd);font-size:.84rem;font-weight:600;transition:all .22s;
  margin-bottom:.4rem;border:1px solid var(--cpl2)
}
.dl-link:last-child{margin-bottom:0}
.dl-link:hover{background:var(--cp);color:#fff;border-color:var(--cp)}
.dl-link:hover i{color:#fff}
.dl-link i{color:var(--cp);font-size:.95rem;transition:color .22s}

/* ── CONDITIONS SIDEBAR ── */
.cond-section{border-bottom:1px solid var(--cb)}
.cond-section:last-child{border-bottom:none}
.cond-section img { width:100%; height:auto;}
.cond-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.1rem;cursor:pointer;background:#fff;transition:background .15s
}
.cond-hd:hover{background:var(--cbg)}
.cond-hd span{font-size:0.92rem;font-weight:200;color:var(--cd)}
.cond-hd>i{color:var(--cm);font-size:.72rem;transition:transform .3s;flex-shrink:0}
.cond-hd:not(.collapsed)>i{transform:rotate(180deg)}
.cond-bd{padding:.55rem 1.1rem .8rem;background:var(--cbg)}
.cond-item{
  display:flex;align-items:flex-start;gap:.45rem;padding:.3rem 0;
  font-size:0.9rem;color:var(--ct);line-height:1.65
}
.cond-item i{color:#16a34a;font-size:.8rem;flex-shrink:0;margin-top:.28rem}

/* ── CTA BOX ── */
.cta-box{
  padding:1.25rem;
  background:var(--cp);
  border-radius:var(--r);color:#fff;text-align:center;
  box-shadow:var(--shadow-color)
}
.cta-box h6{font-weight:700;margin-bottom:.85rem;font-size:1rem;color:white;}
.btn-line{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  background:#06C755;color:#fff;border:none;border-radius:var(--r-sm);
  padding:.65rem 1rem;font-weight:700;font-size:.88rem;text-decoration:none;
  margin-bottom:.5rem;transition:all .2s;box-shadow:0 4px 12px rgba(6,199,85,.35)
}
.btn-line:hover{background:#05a847;color:#fff;transform:translateY(-2px)}
.btn-tel{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  background:rgba(255,255,255,.15);color:#fff;
  border:1.5px solid rgba(255,255,255,.35);border-radius:var(--r-sm);
  padding:.6rem 1rem;font-weight:600;font-size:.88rem;text-decoration:none;transition:all .2s
}
.btn-tel:hover{background:rgba(255,255,255,.28);color:#fff}

/* ── GALLERY ── */
.gal-img{
  width:100%;height:175px;object-fit:cover;border-radius:var(--r-sm);
  cursor:pointer;display:block;transition:transform .28s,box-shadow .28s
}
.gal-img:hover{transform:scale(1.05);box-shadow:0 10px 28px rgba(0,0,0,.22)}

/* ── RICH CONTENT ── */
.rc{font-size:0.9rem;line-height:1.9;color:var(--ct)}
.rc img{max-width:100%;border-radius:var(--r-sm)}

/* ── COLLAPSE ENGINE (vanilla, ไม่ใช้ Bootstrap .collapse) ── */
.nt-collapse { overflow:hidden; transition:height .3s ease; }
.nt-collapse:not(.show) { height:0 !important; }
.nt-collapse.show { height:auto; }

@media(max-width:991px){
  .sb-wrap{position:static;margin-top:1.75rem}
  .sec{scroll-margin-top:calc(var(--nh,0px) + var(--th,52px) + 10px)}
  .hero{min-height:340px}
}
@media(max-width:576px){
  .h-title{font-size:1.22rem}
  .ttab{padding:.7rem .7rem;font-size:.79rem}
  .sched-tbl{font-size:.78rem}
  .sched-tbl thead th{padding:.55rem .55rem}
  .sched-tbl tbody td{padding:.55rem .55rem}
  .chips{gap:.38rem}
  .chip{font-size:.79rem;padding:.36rem .72rem}
  .price-date{font-size:.76rem}
  .sh{font-size:1rem;padding:.6rem .75rem}
  .day-hd{padding:.72rem .85rem}
  .day-ttl{font-size:.84rem}
}

/* =====================================================
   Error Page (error.aspx)
   ===================================================== */
.nt-error-section {
    min-height: calc(100vh);
    display: flex;
    align-items: center;
    padding: 80px 0;
    background: var(--nt-bg-light);
}
.nt-error-card {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    max-width: 680px;
    margin: 0 auto;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.45);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    box-shadow:
        0 26px 70px rgba(0,0,0,0.14),
        0 2px 0 rgba(255,255,255,0.45) inset,
        0 -1px 0 rgba(255,255,255,0.14) inset;
}
.nt-error-card::before { content:none; }
.nt-error-card::after { content:none; }
.nt-error-header {
    background: var(--nt-primary-dark);
    padding: 46px 40px 36px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.nt-error-header::before {
    content:'';
    position:absolute;
    top:-40px;
    right:-40px;
    width:220px;
    height:220px;
    background: rgba(255,255,255,0.08);
    border-radius:50%;
}
.nt-error-header::after {
    content:'';
    position:absolute;
    bottom:-70px;
    left:-40px;
    width:180px;
    height:180px;
    background: rgba(255,255,255,0.05);
    border-radius:50%;
}
.nt-error-code {
    font-size:76px;
    font-weight:700;
    letter-spacing:-2px;
}
.nt-error-title {
    font-size: 20px;
    font-weight: 600;
    opacity: 0.9;
    margin-top: 8px;
}
.nt-error-icon {
    width:76px;
    height:76px;
    background: rgba(255,255,255,0.22);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 16px;
    font-size:34px;
    backdrop-filter: blur(10px);
}
.nt-error-body {
    padding:36px 42px;
    text-align:center;
    font-size:15px;
}
.nt-error-section .form-control,
.nt-error-section .form-select {
    border: 2px solid #e9ecef;
    border-radius: var(--nt-radius-sm);
    font-size: 14px;
}
.nt-error-section .form-control:focus {
    border-color: var(--nt-primary);
    box-shadow: 0 0 0 3px rgba(34,139,246,0.12);
}
.nt-error-section code {
    background: #f0f4f3;
    color: var(--nt-primary-dark);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.88em;
}
@media (max-width: 575px) {
    .nt-error-header { padding: 30px 20px 24px; }
    .nt-error-body  { padding: 24px 20px; }
    .nt-error-code  { font-size: 54px; }
}

/* =====================================================
   Zone Detail Page (zone/default.aspx)
   ===================================================== */
.zone-hero {
    height: 350px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.zone-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(5,47,117,0.55);
}
.zone-hero .container { position: relative; z-index: 1; }

/* =====================================================
   Blog Detail Page (blog/view.aspx)
   ===================================================== */
.blog-hero {
    position: relative;
    height: 450px;
    background-size: cover;
    background-position: center;
}
.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.blog-hero .container {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 3rem;
}
.blog-hero h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.blog-hero .blog-meta {
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
}
.blog-hero .blog-meta i {
    margin-right: 0.25rem;
}
.blog-hero .breadcrumb {
    margin-bottom: 1rem;
}
.blog-hero .breadcrumb-item a {
    color: rgba(255,255,255,0.8);
}
.blog-hero .breadcrumb-item.active {
    color: #fff;
}
.blog-hero .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255,255,255,0.5);
}
.blog-content {
    background: #fff;
    border-radius: var(--nt-radius);
    box-shadow: var(--nt-shadow);
    padding: 2.5rem;
    margin-top: -80px;
    position: relative;
    z-index: 10;
}
.blog-content .lead {
    font-size: 1.15rem;
    color: var(--nt-text-light);
    line-height: 1.8;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}
.blog-content .blog-body {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--nt-text);
}
.blog-content .blog-body p {
    margin-bottom: 1.25rem;
}
.blog-content .blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nt-radius-sm);
    margin: 1rem 0;
}
.blog-content .blog-body h2,
.blog-content .blog-body h3,
.blog-content .blog-body h4 {
    color: var(--nt-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.share-section {
    background: var(--nt-bg-light);
    border-radius: var(--nt-radius);
    padding: 1.5rem;
    margin-top: 2rem;
}
.share-section h6 {
    color: var(--nt-text);
    font-weight: 600;
    margin-bottom: 1rem;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    margin-right: 0.5rem;
    transition: var(--nt-transition);
}
.share-btn:hover {
    transform: translateY(-3px);
    color: #fff;
}
.share-btn.facebook { background: #1877f2; }
.share-btn.twitter { background: #1da1f2; }
.share-btn.line { background: #06c755; }
.share-btn.copy { background: var(--nt-text-muted); }
.sidebar-card {
    background: #fff;
    border-radius: var(--nt-radius);
    box-shadow: var(--nt-shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.sidebar-card h5 {
    color: var(--nt-primary);
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--nt-bg-light);
}
.related-item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.related-item:last-child {
    border-bottom: none;
}
.related-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--nt-radius-sm);
    flex-shrink: 0;
}
.related-item .related-info {
    flex: 1;
}
.related-item .related-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nt-text);
    line-height: 1.4;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-item .related-title:hover {
    color: var(--nt-primary);
}
.related-item .related-date {
    font-size: 0.8rem;
    color: var(--nt-text-muted);
}
@media (max-width: 991px) {
    .blog-hero { height: 350px; }
    .blog-hero h1 { font-size: 1.5rem; }
    .blog-content { padding: 1.5rem; margin-top: -50px; }
}

/* =====================================================
   Blog List Page (blog/default.aspx)
   ===================================================== */
.nt-blog-card {
    background: white;
    border: none;
    border-radius:5px;
    overflow: hidden;
    box-shadow: var(--nt-shadow);
    transition: var(--nt-transition);
    height: 100%;
}
.nt-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--nt-shadow-hover);
}
.nt-blog-card .card-img-wrapper {
    position: relative;
    overflow: hidden;
}
.nt-blog-card .card-img-top {
    height: 220px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.nt-blog-card:hover .card-img-top {
    transform: scale(1.08);
}
.nt-blog-card .card-body {
    padding: 20px;
}
.nt-blog-card .blog-date {
    font-size: 13px;
    color: var(--nt-primary);
    margin-bottom: 10px;
}
.nt-blog-card .blog-date i {
    margin-right: 5px;
}
.nt-blog-card .card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--nt-text);
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nt-blog-card .card-title a {
    color: inherit;
    text-decoration: none;
}
.nt-blog-card .card-title a:hover {
    color: var(--nt-primary);
}
.nt-blog-card .card-text {
    font-size: 15px;
    color: var(--nt-text-light);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 15px;
}
.nt-blog-card .btn-readmore {
    color: var(--nt-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--nt-transition);
}
.nt-blog-card .btn-readmore i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}
.nt-blog-card .btn-readmore:hover {
    color: var(--nt-primary-dark);
}
.nt-blog-card .btn-readmore:hover i {
    transform: translateX(5px);
}