/* Cấu hình thêm các style gốc vì Tailwind đã bao phủ hầu hết UI. 
Đảm bảo project sẵn sàng để mở rộng sau khi thêm file SCSS */

body {
    /* Mặc dù Tailwind đã có font-sans, cứ chắc chắn text mượt mà trên Win/Mac */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Các tuỳ chỉnh liên quan đến ảnh background, banner slider (nếu có sau này) */
.hero-bg {
    background-color: #000;
    background-image: url('https://images.unsplash.com/photo-1557427161-4701a0fa2cb8?q=80&w=2070&auto=format&fit=crop'); /* Hình ảnh Vịnh Hạ Long placeholder */
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    position: relative;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0, 0.4); 
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* Ẩn hiện accordion */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-active .accordion-content {
    max-height: 1000px; /* arbitrary max-height larger than content */
    transition: max-height 0.5s ease-in;
}

.accordion-active .accordion-icon {
    transform: rotate(180deg);
}

/* Ẩn scrollbar cho slider tours ngang */
.hide-scroll-bar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hide-scroll-bar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Tùy chỉnh nút Arrow của Swiper cho chuyên nghiệp */
.tour-swiper .swiper-button-next,
.tour-swiper .swiper-button-prev {
    background-color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #d32027; /* Màu primary Viettabi */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.tour-swiper .swiper-button-next:hover,
.tour-swiper .swiper-button-prev:hover {
    background-color: #d32027;
    color: white;
    transform: scale(1.05);
}

.tour-swiper .swiper-button-next::after,
.tour-swiper .swiper-button-prev::after {
    font-size: 20px;
    font-weight: bold;
}

/* Chỉnh vị trí tràn lề một chút để không che nội dung ảnh */
.tour-swiper .swiper-button-prev {
    left: 4px;
}
.tour-swiper .swiper-button-next {
    right: 4px;
}