/* Star rating icon color */
.text-star { color: #F59E0B; }

/* Modal order form */
.modal { display: none; background: rgba(0,0,0,.45); }
.modal.is-open { display: flex; align-items: stretch; }
.modal-content { width: 100%; height: 100%; overflow-y: auto; }
body.modal-open { overflow: hidden; }

@media (min-width: 1024px) {
    .modal.is-open { align-items: center; justify-content: center; }
    .modal-content { width: 700px; height: auto; max-height: 90vh; border-radius: 1rem; }
}

/* Xem thêm SVG icon rotation */
button svg { transition: transform .3s ease; }
/* h-[300px] — not in prebuilt Tailwind */
.h-\[300px\] { height: 300px; }

/* Nav dropdown */
.nav-item { position: relative; }
.nav-item > a {
    display: block; padding: 6px 4px; font-weight: 500;
    color: #242424; text-decoration: none; white-space: nowrap;
    transition: color .25s;
}
.nav-item > a:hover { color: #266bd9; }
.nav-item > a::after {
    content: ''; display: block; height: 2px;
    background: #266bd9; transform: scaleX(0);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    transform-origin: left;
}
.nav-item:hover > a::after { transform: scaleX(1); }

.nav-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0;
    background: #fff; border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    min-width: 200px; padding: 8px 0; z-index: 100;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .35s cubic-bezier(.4,0,.2,1),
                transform .35s cubic-bezier(.4,0,.2,1),
                visibility .35s;
}
.nav-item:hover .nav-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a {
    display: block; padding: 9px 20px; color: #242424;
    text-decoration: none; font-size: 15px; font-weight: 400;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.nav-dropdown a:hover {
    background: #f5f7ff; color: #266bd9;
}
.nav-dropdown .dropdown-divider {
    height: 1px; background: #f0f0f0; margin: 4px 0;
}
/* Arbitrary color — not in prebuilt Tailwind CSS */
.text-\[\#f95b04\] { color: #266bd9; }
/* Orange accent dot for "hot" items */
.nav-dropdown a.hot::after {
    content: 'HOT';
    margin-left: 6px; font-size: 10px; font-weight: 700;
    color: #fff; background: rgb(255 91 0);
    padding: 1px 5px; border-radius: 4px; vertical-align: middle;
}

#navigation {
    margin: 20px 0px
}
#navigation span{
    color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
}

/* ── Carousel (tours, reviews, partners) ── */
/* Mobile */
.carousel-btn-prev { left: -16px; }
.carousel-btn-next { right: -16px; }

/* Desktop */
@media (min-width: 1024px) {
    .carousel-btn-prev { left: -44px; }
    .carousel-btn-next { right: -44px; }
}

.carousel-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    display: flex;
    gap: 0;
    scrollbar-width: none;
}
.carousel-wrap::-webkit-scrollbar { display: none; }

.carousel-item {
    flex-shrink: 0;
    scroll-snap-align: start;
    width: 100%; /* mobile: 1 item per view */
}

/* PC (>=1024px): 4 items per view với gap 24px
   4w + 3*24 = 100%  →  w = calc(25% - 18px) */
@media (min-width: 1024px) {
    .carousel-wrap { gap: 24px; }
    .carousel-item { width: calc(25% - 18px); }
}

/* Partners: natural image width on all sizes */
.carousel-item--auto {
    width: auto;
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* Nội dung bài viết — khôi phục margin mặc định cho các thẻ bị reset */
.content-body p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

@media (max-width: 1023px) {
    .hero-slider .flex-grow-0 {
        height: 180px !important;
    }
}

@media (min-width: 1024px) {
    .hero-slider .flex-grow-0 {
        height: 600px !important;
    }
    .hero-slider .flex-grow-0 > .w-full {
        height: 100% !important;
    }
    .hero-slider img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}