/* =========================================================
   SINGLE TOUR LUXURY STYLES (FINAL V10)
   ========================================================= */

/* --- 1. LAYOUT GRID --- */
.ota-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; position: relative; }
.ota-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.ota-col-content { width: 66.666%; padding: 0 15px; }
.ota-col-sidebar { width: 33.333%; padding: 0 15px; }

/* --- 2. HERO HEADER SECTION --- */
.luxury-hero-section { position: relative; height: 500px; margin-top: -80px; display: flex; align-items: flex-end; justify-content: center; }
.hero-bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; }
.hero-dark-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%); z-index: 2; }
.hero-content-container { position: relative; z-index: 10; width: 100%; padding-bottom: 40px; }
.hero-info-card { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }

/* Title: Màu trắng & Bóng nhẹ */
.hero-title { 
    color: #fff !important; 
    font-size: 52px; font-weight: 700; margin-bottom: 20px; line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.hero-top-meta { display: flex; gap: 10px; margin-bottom: 15px; }

/* Badge: Location (Mờ) */
.meta-badge {
    padding: 6px 14px; border-radius: 30px; 
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(5px);
    color: #fff; border: 1px solid rgba(255,255,255,0.3);
    box-shadow: none;
}

/* Badge: Rating (Nền trắng - Chữ xanh Main) */
.meta-badge.rating {
    background: var(--color-gold);
    color: var(--color-primary); /* Chữ màu Main */
    border: none;
    font-weight: 800;
}
.meta-badge.rating i { color: var(--color-primary); }

.hero-attrs-row { display: flex; gap: 30px; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 15px; }
.ha-item { display: flex; align-items: center; gap: 10px; }
.ha-item i { font-size: 24px; color: var(--color-gold); }
.ha-item span { font-size: 11px; text-transform: uppercase; opacity: 0.8; display: block; }
.ha-item strong { font-size: 15px; display: block; font-weight: 600; }

/* --- 3. STICKY NAV --- */
.tour-nav-wrapper { background: #fff; position: sticky; top: 80px; z-index: 90; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-bottom: 1px solid #eee; }
.tour-anchor-menu { display: flex; gap: 18px; overflow-x: auto; padding: 0; margin: 0; }
.tour-anchor-menu a { padding: 18px 0; color: #666; font-weight: 700; font-size: 13px; text-transform: uppercase; border-bottom: 3px solid transparent; white-space: nowrap; }
.tour-anchor-menu a.active, .tour-anchor-menu a:hover { color: var(--color-primary); border-bottom-color: var(--color-gold); }

/* --- 4. BODY CONTENT BLOCKS --- */
.tour-body-wrapper { padding: 10px 0 80px; background-color: var(--bg-light); }
.content-section { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 10px; border: 1px solid var(--border-color); scroll-margin-top: 150px; }
.section-heading { font-size: 24px; color: var(--color-primary); margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; }

/* --- GALLERY GRID LAYOUT --- */
.fb-gallery-grid { display: flex; gap: 8px; height: 420px; border-radius: 12px; overflow: hidden; cursor: pointer; }
.g-item.big-item { flex: 2; height: 100%; position: relative; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; display: block; }
.g-item:hover img { transform: scale(1.03); }

/* Grid logic cho ảnh nhỏ */
.gallery-sub-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
/* Tự động lấp đầy nếu thiếu ảnh */
.g-item.sub-item:first-child:nth-last-child(1) { grid-row: span 2; grid-column: span 2; }
.g-item.sub-item:first-child:nth-last-child(2),
.g-item.sub-item:first-child:nth-last-child(2) ~ .g-item { grid-column: span 2; }

.sub-item { position: relative; overflow: hidden; }
.more-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: bold; pointer-events: none; }

/* Highlights */
.highlights-block-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hl-block { background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #eee; }
.hl-head { display: flex; align-items: center; gap: 10px; color: var(--color-primary); font-weight: 700; margin-bottom: 10px; }
.hl-content { font-size: 15px; color: #444; }

/* Content & PDF */
.desc-content { overflow: hidden; position: relative; transition: max-height 0.5s; }
.desc-content.collapsed { max-height: 300px; mask-image: linear-gradient(to bottom, black 60%, transparent 100%); }
.btn-read-more { width: 100%; background: #fff; border: 1px dashed #ccc; padding: 12px; color: var(--color-primary); font-weight: bold; cursor: pointer; margin-top: 15px; border-radius: 6px; }
.format-content p { margin-bottom: 15px; }
.format-content ul { list-style: disc; padding-left: 20px; margin-bottom: 20px; }
.format-content table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.format-content th, .format-content td { border: 1px solid #ddd; padding: 12px; }

.pdf-catalogue-box { margin-top: 30px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.pdf-head { background: #f0f0f0; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; }
.btn-fullscreen-pdf { font-size: 12px; color: var(--color-primary); text-decoration: none; font-weight: bold; }
.pdf-frame { width: 100%; height: 500px; border: none; }

/* Cabins */
.cabin-list { display: flex; flex-direction: column; gap: 20px; }
.cabin-card { display: flex; border: 1px solid #eee; border-radius: 12px; overflow: hidden; transition: 0.3s; }
.cabin-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.05); transform: translateY(-3px); }
.cc-img { width: 35%; position: relative; cursor: pointer; } 
.cc-img img { width: 100%; height: 100%; object-fit: cover; }
.zoom-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 30px; opacity: 0; transition: 0.3s; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 50%; }
.cc-img:hover .zoom-icon { opacity: 1; }
.cc-info { width: 40%; padding: 25px; border-right: 1px dashed #eee; }
.cc-info h4 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--color-primary); }
.cc-meta { display: flex; gap: 15px; margin-bottom: 10px; font-size: 13px; color: #666; }
.cc-features span.cf-tag { background: #f0f5f4; font-size: 11px; padding: 3px 8px; border-radius: 4px; margin-right: 5px; color: var(--color-primary); display: inline-block; margin-bottom: 5px; }
.cc-desc-toggle { font-size: 12px; color: var(--color-gold); cursor: pointer; margin-top: 10px; font-weight: 600; }
.cc-full-desc { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; font-size: 13px; color: #666; }

@media (max-width: 767px) {
    .cc-full-desc ul {
        grid-template-columns: 1fr; /* Về 1 cột */
        padding: 15px 15px 15px 35px !important;
    }
}
.cc-action { width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fbfbfb; padding: 20px; }
.cc-price .old-price { display: block; font-size: 13px; color: #999; text-decoration: line-through; }
.cc-price .sale-price { display: block; font-size: 26px; font-weight: 800; color: #d32f2f; text-shadow: 0 2px 5px rgba(211, 47, 47, 0.1); }
.btn-select-cabin { background: #fff; border: 1px solid var(--color-primary); color: var(--color-primary); padding: 8px 20px; border-radius: 30px; font-weight: bold; cursor: pointer; margin-top: 10px; transition: 0.2s; }
.btn-select-cabin:hover { background: var(--color-primary); color: #fff; }

/* =========================================================
   FIX ITINERARY LAYOUT (SMART ACCORDION)
   ========================================================= */

.timeline-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các ngày */
}

/* Khung bao ngoài mỗi ngày */
.timeline-row {
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    overflow: hidden; /* Bo góc mượt mà */
    transition: all 0.3s ease;
}

.timeline-row:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Hiệu ứng nổi nhẹ khi di chuột */
    border-color: #ddd;
}

/* Phần Header (Thanh ngang bấm được) */
.tm-head {
    display: flex; /* Dàn hàng ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: space-between; /* Đẩy các phần tử ra xa nhau */
    padding: 20px 25px;
    background: #fff;
    cursor: pointer;
    transition: 0.3s;
}

/* Badge: Day 1, Day 2... */
.day-badge {
    background: var(--color-primary); /* Màu xanh chủ đạo */
    color: #fff;
    padding: 6px 15px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap; /* Không xuống dòng */
    margin-right: 20px;
    box-shadow: 0 3px 8px rgba(1, 64, 52, 0.2);
}

/* Title: Tiêu đề nổi bật */
.itinerary-title {
    flex-grow: 1; /* Chiếm hết khoảng trống còn lại */
    margin: 0;
    font-size: 17px;
    font-weight: 800; /* Rất đậm để nổi bật */
    color: #333;
    line-height: 1.4;
    text-transform: capitalize; /* Viết hoa chữ cái đầu */
}

/* Icon Toggle (+/-) */
.toggle-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #f5f5f5;
    color: #666;
    font-size: 14px;
    margin-left: 15px;
    transition: 0.3s;
    flex-shrink: 0; /* Không bị co lại */
}

/* Trạng thái khi active (JS sẽ đổi class fa-plus thành fa-minus) */
.toggle-icon.fa-minus {
    background: var(--color-gold);
    color: #fff;
    transform: rotate(180deg);
}

/* Phần nội dung chi tiết (Mặc định ẩn) */
.tm-body {
    display: none; /* JS sẽ slideDown */
    padding: 25px 30px;
    border-top: 1px dashed #eee;
    background: #fafafa; /* Nền hơi xám nhẹ để tách biệt */
    color: #555;
    line-height: 1.8;
}

/* Responsive Mobile */
@media (max-width: 767px) {
    .tm-head {
        padding: 15px;
        align-items: flex-start; /* Mobile thì căn trên */
    }
    
    .day-badge {
        padding: 4px 10px;
        font-size: 11px;
        margin-right: 10px;
        margin-top: 2px; /* Căn chỉnh với dòng text đầu tiên */
    }
    
    .itinerary-title {
        font-size: 15px;
    }
}

/* =========================================================
   FIX INCLUSIONS / EXCLUSIONS LAYOUT (PROFESSIONAL UI)
   ========================================================= */

/* Grid container */
.inc-exc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia 2 cột */
    gap: 25px; /* Khoảng cách giữa 2 cột */
}

/* Style chung cho cả 2 cột */
.ie-col {
    padding: 25px; /* Tạo không gian bên trong */
    border-radius: 12px; /* Bo góc mềm mại */
    border: 1px solid transparent; /* Chuẩn bị viền */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hiệu ứng hover nhẹ */
.ie-col:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* --- STYLE CỘT INCLUDED (Xanh) --- */
.ie-col.included {
    background-color: #f1f8f6; /* Nền xanh bạc hà rất nhẹ */
    border-color: #dfefe9;
}

.ie-col.included .ie-title {
    color: var(--color-primary); /* Màu xanh chủ đạo */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}

/* --- STYLE CỘT EXCLUDED (Đỏ) --- */
.ie-col.excluded {
    background-color: #fff5f5; /* Nền đỏ hồng rất nhẹ */
    border-color: #ffe0e0;
}

.ie-col.excluded .ie-title {
    color: #c62828; /* Màu đỏ đậm */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}

/* --- LIST STYLING (Tạo dấu đầu dòng bằng Icon) --- */

/* Reset cơ bản */
.ie-list ul {
    margin: 0; padding: 0;
    list-style: none !important;
}

/* Style cho từng dòng (Thẻ P hoặc LI) */
.ie-list p, 
.ie-list li {
    position: relative;
    padding-left: 22px !important; /* Tăng từ 28px lên 35px để icon không đè chữ */
    margin-bottom: 12px;
    line-height: 1.6;
    color: #555;
    font-size: 15px;
    list-style: none !important;
}

/* Tạo icon giả lập bằng ::before */
.ie-list p::before,
.ie-list li::before {
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900;
    position: absolute;
    left: 0; /* Icon nằm sát lề trái */
    top: 2px; /* Căn chỉnh dọc cho khớp với dòng đầu tiên */
    width: 25px; /* Giới hạn chiều rộng icon */
    text-align: left;
    font-size: 16px;
}

/* Icon dấu tích cho cột Included */
.included .ie-list p::before,
.included .ie-list li::before {
    content: "\f00c"; /* Check icon */
    color: var(--color-primary);
}

/* Icon dấu X cho cột Excluded */
.excluded .ie-list p::before,
.excluded .ie-list li::before {
    content: "\f00d"; /* X mark icon */
    color: #c62828;
}
/* RESPONSIVE */
@media (max-width: 767px) {
    .inc-exc-grid {
        grid-template-columns: 1fr; /* Về 1 cột trên mobile */
        gap: 20px;
    }
    .ie-col { padding: 20px; }
}

/* =========================================================
   5. SIDEBAR BOOKING FORM (COMPACT VERSION)
   ========================================================= */

/* --- 1. STICKY WRAPPER --- */
.ota-col-sidebar { position: relative; }

.sticky-form-wrapper {
    position: -webkit-sticky; position: sticky;
    top: 90px; /* Đẩy lên sát header hơn một chút */
    z-index: 90;
    transition: top 0.3s;
    /* Scroll nội bộ nếu form vẫn quá dài */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
}
.sticky-form-wrapper::-webkit-scrollbar { display: none; }

.booking-form-card { 
    background: #fff; border-radius: 8px; /* Bo góc nhỏ hơn */
    overflow: hidden; border: 1px solid #e5e5e5; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); 
}

/* --- 2. COMPACT HEADER --- */
.bf-head-v2 { 
    background: var(--color-primary); 
    padding: 12px 15px; /* Padding mỏng lại */
    color: #fff; 
    text-align: center; 
}

/* Xếp tất cả lên 1 hàng ngang */
.bf-top-label { 
    display: flex; 
    flex-direction: row; /* Quan trọng: Xếp ngang */
    align-items: baseline; /* Căn chân chữ cho thẳng hàng */
    justify-content: center; /* Căn giữa */
    gap: 5px; 
    flex-wrap: wrap; /* Tự xuống dòng nếu tên giá quá dài trên màn nhỏ */
    margin-bottom: 0;
    line-height: 1.2;
}

/* Container giá cũng xếp ngang */
.price-container { 
    display: inline-flex; 
    align-items: baseline; 
    gap: 6px; 
}

/* Tinh chỉnh Font để vừa vặn trên 1 dòng */
.deal-tag { 
    font-size: 12px; font-weight: 600; 
    text-transform: uppercase; letter-spacing: 0.5px;
    opacity: 0.9; margin: 0;
}

.price-old { 
    font-size: 13px; color: #ccc; font-weight: 400;
    text-decoration: line-through; 
}

.price-val { 
    font-size: 22px; /* Size vừa đủ nổi bật mà không chiếm chỗ */
    font-weight: 800; 
    color: var(--color-gold); 
}

.unit { 
    font-size: 12px; opacity: 0.8; font-weight: 400;
}

/* Badge giảm giá: Nhỏ lại và nằm cạnh giá */
.discount-badge { 
    background: #d32f2f; color: #fff; 
    padding: 1px 4px; border-radius: 3px; 
    font-size: 10px; font-weight: 700; 
    transform: translateY(-2px); /* Đẩy lên nhẹ */
    display: inline-block;
}

/* Nút Select Cabin: Mảnh hơn nữa */
.btn-form-scroll {
    display: block; /* Vẫn nằm dòng riêng bên dưới */
    width: 100%;
    background: rgba(255,255,255,0.1); 
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff; 
    padding: 4px 10px; /* Padding siêu nhỏ */
    border-radius: 4px; /* Bo góc vuông vắn hơn để tiết kiệm diện tích */
    font-size: 11px; font-weight: 600; 
    cursor: pointer; transition: 0.2s;
    margin-top: 8px; /* Cách phần giá một chút */
    line-height: 1.2;
}
.btn-form-scroll:hover { background: #fff; color: var(--color-primary); }
.btn-form-scroll i { margin-left: 3px; font-size: 10px; }

/* --- 3. COMPACT BODY --- */
.bf-body { padding: 15px 15px 20px; } /* Padding hông nhỏ hơn */

.form-group { 
    margin-bottom: 10px; /* Giảm khoảng cách giữa các ô */
    position: relative; width: 100%; 
}

.form-group label { 
    display: block; font-size: 11px; font-weight: 700; color: #555; 
    margin-bottom: 4px; text-transform: uppercase; 
}

.req { color: #d32f2f; margin-left: 2px; }

/* Input Styles - Cao 40px thay vì 45-48px */
.clean-input, .fg-input, .guest-trigger, select.country-code { 
    width: 100%; height: 40px; /* Chiều cao chuẩn mới */
    border: 1px solid #ddd; border-radius: 4px; 
    display: flex; align-items: center; padding: 0 10px; 
    font-size: 13px; background: #fff; box-sizing: border-box; 
    font-family: var(--font-body); transition: 0.3s;
}

textarea.clean-input {
    height: auto; padding: 8px 10px; min-height: 60px; /* Textarea ngắn lại */
}

/* Phone Layout */
.phone-wrap { display: flex; gap: 8px; width: 100%; }
.country-code { flex: 0 0 32%; width: 32%; font-size: 12px; padding-left: 2px; }
.phone-wrap input[name="phone"] { flex: 1; width: auto; }

/* Icons */
.fg-input i, .guest-trigger i:first-child { color: #888; margin-right: 8px; font-size: 14px; }

/* Datepicker & Guest Input Text */
.datepicker-input, #guestText { 
    font-size: 13px; color: #333; font-weight: 500;
}

/* Submit Button */
.btn-submit-inquiry { 
    width: 100%; background: var(--color-gold); color: #000; 
    height: 45px; /* Giảm chiều cao nút */
    font-weight: 800; text-transform: uppercase; font-size: 13px;
    border: none; border-radius: 4px; cursor: pointer; 
    display: flex; align-items: center; justify-content: center; gap: 8px; 
    transition: 0.3s; margin-top: 10px; 
}
.btn-submit-inquiry:hover { background: #b59223; transform: translateY(-1px); }

.bf-security { 
    text-align: center; font-size: 10px; color: #2e7d32; 
    margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; 
}

/* Cabin Selected Box (Compact) */
.selected-cabin-box { 
    background: #e0f2f1; padding: 8px 10px; border-radius: 4px; margin-bottom: 10px; 
    display: flex; align-items: center; justify-content: space-between; 
    font-size: 12px; color: var(--color-primary); border: 1px solid #b2dfdb; 
}
.remove-cabin { cursor: pointer; color: #c62828; font-size: 14px; }

/* --- GUEST DROPDOWN UI FIX --- */
.guest-dropdown { 
    display: none; 
    position: absolute; top: 100%; left: 0; right: 0; 
    background: #fff; border: 1px solid #ccc; padding: 15px; 
    z-index: 1000; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-radius: 8px; 
    margin-top: 5px;
}

/* Hàng chứa: Flexbox tách 2 bên */
.gp-row { 
    display: flex; 
    justify-content: space-between; /* Đẩy 2 đầu */
    align-items: center; /* Căn giữa dọc */
    margin-bottom: 12px; 
    padding-bottom: 12px; 
    border-bottom: 1px dashed #eee; 
}
.gp-row:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Cột nhãn bên trái */
.gp-label { display: flex; flex-direction: column; text-align: left; }
.gp-label strong { font-size: 13px; color: #333; margin-bottom: 2px; }
.gp-label small { font-size: 11px; color: #888; }

/* Cụm điều khiển bên phải (Button - Input - Button) */
.gp-ctrl { 
    display: flex; 
    align-items: center; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    overflow: hidden; 
    height: 36px; /* Chiều cao cố định */
}

/* Nút bấm cộng trừ */
.gp-btn { 
    width: 36px; height: 36px; 
    display: flex; align-items: center; justify-content: center; 
    background: #f9f9f9; 
    cursor: pointer; 
    color: var(--color-primary); 
    font-size: 12px; 
    transition: 0.2s;
    user-select: none;
}
.gp-btn:hover { background: #eee; color: #000; }
.gp-btn:active { background: #ddd; }

/* Ô nhập liệu ở giữa */
.gp-input { 
    width: 45px !important; /* Độ rộng cố định */
    height: 36px !important; 
    border: none !important; /* Bỏ viền vì đã có viền cha */
    border-left: 1px solid #ddd !important; 
    border-right: 1px solid #ddd !important; 
    text-align: center; 
    font-weight: 700; 
    font-size: 14px; 
    color: #333;
    padding: 0 !important;
    background: #fff !important;
    border-radius: 0 !important;
    -moz-appearance: textfield; /* Ẩn mũi tên mặc định Firefox */
}
/* Ẩn mũi tên tăng giảm mặc định của browser */
.gp-input::-webkit-outer-spin-button,
.gp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Footer Button */
.gp-footer { margin-top: 10px; text-align: right; }
.gp-done { 
    display: inline-block; 
    background: var(--color-primary); color: #fff; 
    padding: 6px 20px; border-radius: 4px; 
    font-size: 12px; font-weight: 700; cursor: pointer; 
}
.gp-done:hover { background: var(--color-gold); color: #000; }

/* Submit Button */
.btn-submit-inquiry { 
    width: 100%; background: var(--color-gold); color: #000; 
    height: 50px; font-weight: 800; text-transform: uppercase; 
    border: none; border-radius: 6px; cursor: pointer; 
    display: flex; align-items: center; justify-content: center; gap: 8px; 
    transition: 0.3s; margin-top: 10px; font-size: 14px; 
}
.btn-submit-inquiry:hover { background: #b59223; transform: translateY(-2px); }
.bf-security { text-align: center; font-size: 11px; color: #2e7d32; margin-top: 12px; }

/* Cabin Selected Box */
.selected-cabin-box { 
    background: #e0f2f1; padding: 10px; border-radius: 6px; margin-bottom: 15px; 
    display: flex; align-items: center; justify-content: space-between; 
    font-size: 13px; color: var(--color-primary); border: 1px solid #b2dfdb; 
}
.remove-cabin { cursor: pointer; color: #c62828; }
/* FIX LIGHTBOX OVERLAY (PIONEER STYLE) */
.pioneer-lb-overlay {
    display: none; /* QUAN TRỌNG: Mặc định ẩn */
    position: fixed; inset: 0; 
    z-index: 99999; /* Z-index cao hơn header */
    flex-direction: column; 
    justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.pioneer-lb-overlay.active { opacity: 1; }

.pioneer-lb-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1;
}

.pioneer-lb-stage {
    position: relative; z-index: 10;
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding-bottom: 120px;
}

.pioneer-lb-img {
    max-width: 90vw; max-height: 80vh;
    object-fit: contain;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.pioneer-lb-close {
    position: absolute; top: 20px; right: 30px;
    color: #fff; font-size: 40px; cursor: pointer; z-index: 20;
    transition: 0.3s;
}
.pioneer-lb-close:hover { color: var(--color-gold); transform: rotate(90deg); }

.pioneer-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px;
    background: rgba(255,255,255,0.1); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; cursor: pointer; transition: 0.3s;
}
.pioneer-lb-nav:hover { background: var(--color-gold); color: #000; }
.pioneer-lb-nav.prev { left: 20px; }
.pioneer-lb-nav.next { right: 20px; }

/* Thumbnails */
.pioneer-lb-thumb-wrap {
    position: absolute; bottom: 0; left: 0; width: 100%;
    height: 100px; background: rgba(0,0,0,0.8);
    display: flex; align-items: center; justify-content: center;
    z-index: 15; border-top: 1px solid rgba(255,255,255,0.1);
}
.pioneer-lb-track {
    display: flex; gap: 10px; overflow-x: auto; 
    padding: 10px; max-width: 95%;
}
.pioneer-lb-t-item {
    height: 70px; width: 100px; object-fit: cover; 
    opacity: 0.4; border: 2px solid transparent; 
    border-radius: 4px; cursor: pointer; transition: 0.3s; flex-shrink: 0;
}
.pioneer-lb-t-item.active { opacity: 1; border-color: var(--color-gold); }

/* =========================================================
   FIX SUCCESS MODAL (NEW ID - NO CONFLICT)
   ========================================================= */
#pioneerSuccessModal {
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999999;
    background: rgba(0,0,0,0.85);
    
    /* Flexbox căn giữa */
    display: none; /* Mặc định ẩn bằng display none */
    align-items: center; justify-content: center;
}

/* Khi có class open thì hiện */
#pioneerSuccessModal.open {
    display: flex !important; 
    animation: fadeInModal 0.3s forwards;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

#pioneerSuccessModal .sm-content {
    background: #fff; padding: 40px; border-radius: 12px;
    text-align: center; max-width: 400px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
}

/* Nút close */
.sc-close {
    background: var(--color-primary, #014034); 
    color: #fff; border: none; 
    padding: 12px 35px; border-radius: 50px; 
    font-weight: 700; cursor: pointer; 
    font-size: 14px; margin-top: 15px;
    box-shadow: 0 5px 15px rgba(1, 64, 52, 0.2);
    transition: 0.2s;
}
.sc-close:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 20px rgba(1, 64, 52, 0.3); 
}
/* --- 7. RESPONSIVE (MOBILE FIXES) --- */
/* Đặt ở cuối file để ưu tiên override */
@media (max-width: 991px) {
    .ota-col-content, .ota-col-sidebar { width: 100%; }
    .sticky-form-wrapper { display: none; }
    .mobile-bottom-nav { display: flex; }
    
    .fb-gallery-grid { height: 250px; }
    .gallery-sub-grid { display: none; } /* Ẩn lưới ảnh nhỏ trên mobile */
    .g-item.big-item { flex: 1; }
    
    .highlights-block-grid, .inc-exc-grid { grid-template-columns: 1fr; }
    .cabin-card { flex-direction: column; }
    .cc-img, .cc-info, .cc-action { width: 100%; border: none; border-bottom: 1px solid #eee; }
    .cc-img { height: 200px; }
    .cc-action { flex-direction: row; justify-content: space-between; padding: 15px; }
    .cc-price { text-align: left; margin-bottom: 0; }
    .hero-title { font-size: 32px; }
    .hero-attrs-row { flex-wrap: wrap; }
}

/* =========================================================
   HIGHLIGHTS SECTION (RE-LAYOUT V13)
   ========================================================= */

/* 1. Grid Short Specs (4 cột - Nhỏ gọn) */
.hl-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Chia 4 cột */
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px dashed #eee; /* Đường ngăn cách với Activities */
    padding-bottom: 25px;
}

.hl-spec-item {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: 0.3s;
}
.hl-spec-item:hover {
    border-color: var(--color-gold);
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.hl-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
    font-weight: 700;
}

/* Icon Cha */
.hl-icon-img { width: 18px; height: 18px; object-fit: contain; }
.hl-icon-def { color: var(--color-gold); font-size: 14px; }

.hl-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.3;
}

/* 2. Activities (Full Width) */
.hl-long-block { margin-top: 20px; }

.hl-head-long {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; color: var(--color-primary);
    margin-bottom: 15px;
}
.hl-head-long img { width: 24px; height: 24px; }

.hl-act-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px; /* Khoảng cách hàng/cột */
}

.act-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #eee;
    font-size: 14px;
    color: #555;
}

/* Icon Con */
.act-icon { width: 16px; height: 16px; object-fit: contain; }
.act-dot { font-size: 6px; color: var(--color-gold); transform: translateY(-1px); }

/* Responsive Mobile */
@media (max-width: 991px) {
    .hl-specs-grid {
        grid-template-columns: repeat(2, 1fr); /* Mobile còn 2 cột */
    }
}
@media (max-width: 480px) {
    .hl-specs-grid {
        grid-template-columns: 1fr; /* Màn hình bé tí thì 1 cột */
    }
    .act-tag { width: 100%; border: none; padding: 0; background: transparent; } /* Activities xuống dòng list */
}

/* =========================================================
   8. SINGLE IMAGE LIGHTBOX (CABIN ZOOM)
   ========================================================= */
.lb-overlay {
    display: none; /* Mặc định ẩn */
    position: fixed; inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,0.9);
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.lb-overlay.active { opacity: 1; display: flex; }

.lb-content {
    position: relative;
    max-width: 90vw; max-height: 90vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; /* Để crop phần zoom thừa */
}

.lb-single-img {
    max-width: 100%; max-height: 90vh;
    object-fit: contain;
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    cursor: zoom-in; /* Con trỏ kính lúp */
    transition: transform 0.4s ease;
}

/* Class active để zoom */
.lb-single-img.zoomed {
    transform: scale(1.8); /* Zoom 1.8x */
    cursor: zoom-out;
}

.lb-close {
    position: absolute; top: 30px; right: 30px;
    color: #fff; font-size: 45px;
    cursor: pointer; z-index: 200;
    line-height: 1; transition: 0.3s;
    background: rgba(255,255,255,0.1);
    width: 60px; height: 60px; border-radius: 50%;
    text-align: center; line-height: 60px;
}
.lb-close:hover { background: rgba(255,255,255,0.2); color: var(--color-gold); transform: rotate(90deg); }


/* =========================================================
   9. FORMAT CONTENT (RICH TEXT STYLE)
   ========================================================= */
.format-content {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/* Paragraph */
.format-content p { margin-bottom: 15px; text-align: justify; }

/* Lists (Quan trọng cho mô tả tiện ích) */
.format-content ul, .format-content ol {
    margin-bottom: 20px;
    padding-left: 20px;
}
.format-content ul { list-style: disc outside; }
.format-content ol { list-style: decimal outside; }

.format-content li {
    margin-bottom: 8px;
    padding-left: 5px;
}

/* Headings trong mô tả */
.format-content h3, .format-content h4, .format-content h5 {
    color: var(--color-primary);
    margin-top: 25px; margin-bottom: 15px;
    font-weight: 700; line-height: 1.3;
}
.format-content h3 { font-size: 18px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.format-content h4 { font-size: 16px; }

/* Bold & Italic */
.format-content strong, .format-content b { font-weight: 700; color: #333; }
.format-content em, .format-content i { font-style: italic; }

/* Table */
.format-content table {
    width: 100%; border-collapse: collapse; margin: 20px 0;
    font-size: 14px;
}
.format-content th { background: #f4f5f7; font-weight: 700; text-align: left; }
.format-content th, .format-content td {
    border: 1px solid #e0e0e0; padding: 10px 15px;
}

/* =========================================================
   CABIN DETAIL MODAL (NEW POPUP STYLE)
   ========================================================= */

/* 1. Overlay & Backdrop */
.cabin-modal-overlay {
    display: none; /* Ẩn mặc định */
    position: fixed; inset: 0;
    z-index: 999999; /* Cao nhất */
    align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.cabin-modal-overlay.active { opacity: 1; display: flex; }

.cabin-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}

/* 2. Modal Container */
.cabin-modal-container {
    position: relative;
    background: #fff;
    width: 900px;
    max-width: 95vw;
    max-height: 90vh; /* Giới hạn chiều cao màn hình */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column; /* Xếp dọc: Ảnh trên, Chữ dưới */
    z-index: 10;
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 3. Header Image (Fixed Top) */
.cm-header-img {
    width: 100%;
    height: 350px; /* Chiều cao cố định cho ảnh */
    flex-shrink: 0; /* Không bị co lại */
    background: #000;
}
.cm-header-img img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* 4. Body Content (Scrollable) */
.cm-body {
    padding: 30px 40px;
    overflow-y: auto; /* Scroll nội bộ nếu dài */
    flex-grow: 1;
    background: #fff;
}

.cm-body h3 {
    font-size: 28px;
    color: var(--color-primary);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

/* Format nội dung mô tả bên trong popup */
.cm-body .format-content ul {
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Chia 2 cột trong popup cho đẹp */
    gap: 10px 30px;
}

/* 5. Close Button */
.cm-close {
    position: absolute; top: 15px; right: 15px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #333;
    cursor: pointer; z-index: 20;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.cm-close:hover { background: var(--color-gold); color: #fff; transform: rotate(90deg); }

/* Responsive Mobile */
@media (max-width: 767px) {
    .cm-header-img { height: 200px; }
    .cm-body { padding: 20px; }
    .cm-body h3 { font-size: 22px; }
    .cm-body .format-content ul { grid-template-columns: 1fr; } /* Về 1 cột trên mobile */
}

/* =========================================================
   FIX CABIN DETAIL CONTENT (LIST & GRID LAYOUT)
   ========================================================= */

/* Áp dụng cho cả Popup (.cm-body) và Accordion cũ (.cc-full-desc) */
.cm-body .format-content ul, 
.cc-full-desc ul {
    /* Tắt list-style mặc định vì nó xung đột với Grid */
    list-style: none !important; 
    padding: 0 !important;
    margin: 0;
    
    /* Layout dạng lưới 2 cột */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Chia 2 cột đều nhau */
    gap: 12px 30px; /* Khoảng cách: 12px hàng, 30px cột */
    
    /* Style khung nền */
    background: #f8f9fa;
    padding: 25px !important; 
    margin-top: 20px;
    border-radius: 8px;
    border: 1px solid #eef0f2;
}

/* Style cho từng dòng li */
.cm-body .format-content li, 
.cc-full-desc li {
    font-size: 15px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 0;
    position: relative; /* Để căn chỉnh dấu chấm */
    padding-left: 18px; /* Chừa chỗ cho dấu chấm */
}

/* TẠO DẤU CHẤM THỦ CÔNG (Chắc chắn hiển thị) */
.cm-body .format-content li::before, 
.cc-full-desc li::before {
    content: "•"; /* Ký tự dấu chấm */
    position: absolute;
    left: 0;
    top: -1px; /* Căn chỉnh vị trí dọc */
    color: var(--color-primary); /* Màu dấu chấm theo màu web */
    font-size: 18px; /* Kích thước dấu chấm */
    font-weight: bold;
    line-height: 1.5;
}

/* Làm đậm phần tiêu đề con (nếu bạn nhập kiểu "Size: 25m2") */
.cm-body .format-content li strong, 
.cc-full-desc li strong {
    color: var(--color-primary);
    font-weight: 700;
    margin-right: 5px;
}

/* Tiêu đề Cabin trong Popup */
#cmTitle {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 5px;
    border-bottom: none;
    padding-bottom: 0;
    line-height: 1.2;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 767px) {
    /* Trên mobile về lại 1 cột */
    .cm-body .format-content ul, 
    .cc-full-desc ul {
        grid-template-columns: 1fr;
        padding: 20px !important;
        gap: 10px;
    }
    
    /* Ảnh Popup Mobile nhỏ lại chút */
    .cm-header-img { height: 220px; }
}

/* =========================================================
   REVIEWS & QUESTIONS TABS (NEW UI)
   ========================================================= */

/* 1. Tabs Navigation */
.rq-tabs-nav {
    display: flex;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
}

.rq-tab-item {
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
    display: flex; align-items: center; gap: 8px;
}

.rq-tab-item:hover { color: var(--color-primary); }

.rq-tab-item.active {
    color: var(--color-primary);
}
.rq-tab-item.active::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 100%;
    height: 3px; background: var(--color-gold);
}

.count-badge {
    background: #eee; color: #555;
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
}
.rq-tab-item.active .count-badge { background: var(--color-gold); color: #fff; }

/* Tab Content Logic */
.rq-tab-content { display: none; animation: fadeIn 0.4s; }
.rq-tab-content.active { display: block; }


/* 2. REVIEWS UI */
.review-summary-box {
    display: flex; justify-content: space-between; align-items: center;
    background: #f9f9f9; padding: 25px; border-radius: 12px; margin-bottom: 30px;
}
.rs-left { display: flex; align-items: center; gap: 20px; }
.rs-score {
    font-size: 42px; font-weight: 800; color: #fff;
    background: var(--color-primary);
    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
}
.rs-text strong { display: block; font-size: 20px; color: var(--color-primary); }
.rs-text span { font-size: 14px; color: #666; }

.review-item {
    display: flex; gap: 20px; padding-bottom: 20px; margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.ri-avatar img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.ri-head { margin-bottom: 8px; }
.ri-head strong { font-size: 16px; margin-right: 10px; }
.ri-date { font-size: 12px; color: #999; }
.ri-stars { color: var(--color-gold); font-size: 12px; margin-top: 3px; }
.ri-body p { font-size: 15px; color: #444; line-height: 1.6; margin: 0; }


/* 3. Q&A UI (Chat Style) */
.qa-list { margin-bottom: 40px; }
.qa-item { margin-bottom: 25px; }

.qa-question, .qa-answer {
    display: flex; gap: 15px; margin-bottom: 10px;
}
.qa-answer { margin-left: 50px; /* Thụt đầu dòng câu trả lời */ }

.qa-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    background: #f0f0f0; color: #555;
    border-radius: 50%; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.qa-icon.admin { background: var(--color-primary); color: #fff; }

.qa-text {
    background: #f9f9f9; padding: 15px; border-radius: 12px; border-top-left-radius: 0;
    flex-grow: 1;
}
.qa-answer .qa-text { background: #eefbf8; border: 1px solid #d0e8e2; }

.qa-text strong { font-size: 14px; margin-right: 10px; }
.qa-text small { font-size: 11px; color: #999; }
.qa-text p { margin: 5px 0 0; font-size: 14px; color: #333; }
.badge-admin { background: var(--color-gold); color: #000; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 700; text-transform: uppercase; }

/* QA Form */
.qa-form-box { background: #fff; border: 1px solid #eee; padding: 25px; border-radius: 12px; }
.qa-form-box h4 { margin-top: 0; margin-bottom: 15px; color: var(--color-primary); }
.form-group-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }

/* Mobile Responsive */
@media (max-width: 767px) {
    .review-summary-box { flex-direction: column; text-align: center; gap: 15px; }
    .rs-left { flex-direction: column; gap: 10px; }
    .form-group-row { grid-template-columns: 1fr; }
    .qa-answer { margin-left: 20px; }
}

/* --- FIX REVIEW BUTTON & SCORE UI --- */

/* Nút Write Review đẹp hơn */
.btn-write-review {
    margin-left: auto;
    background: #fff;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    display: flex; align-items: center; gap: 8px;
}
.btn-write-review:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Hiển thị điểm số dạng thang 10 (Badges) */
.score-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* Ẩn sao cũ nếu không muốn dùng */
.ri-stars { display: none; } 

/* Style cho Badge Admin trả lời */
.badge-admin {
    background: var(--color-gold);
    color: #000;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: 800;
    text-transform: uppercase;
    margin-left: 5px;
}

/* =========================================================
   FIX: ẨN THANH BOOKING MOBILE TRÊN DESKTOP
   ========================================================= */
@media (min-width: 992px) {
    .mobile-bottom-nav {
        display: none !important; /* Bắt buộc ẩn khi màn hình lớn hơn 992px */
    }
}

/* =========================================================
   FIX SUCCESS MODAL (SIMPLE & STABLE)
   ========================================================= */
#pioneerSuccessModal {
    display: none; /* Mặc định ẩn */
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999999;
    background: rgba(0,0,0,0.85);
    align-items: center; justify-content: center;
}

/* Khi có class 'show-flex' thì hiện */
#pioneerSuccessModal.show-flex {
    display: flex !important; 
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#pioneerSuccessModal .sm-content {
    background: #fff; padding: 40px; border-radius: 12px;
    text-align: center; max-width: 400px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}