/*
 * Nghiệp vụ điểm đến — nhịp thị giác tham chiếu bố cục Flamingo Cát Bà:
 * hero full-bleed → nền trắng/nhạt xen kẽ → dải ưu đãi nền tối → card ảnh 4:3.
 *
 * Dựng lại bằng CSS của mình. Không copy stylesheet, markup hay ảnh của họ.
 *
 * Mọi màu lấy từ biến của theme (`partials/css-variable-declare.blade.php`), đổ từ
 * Theme Options — đổi màu trong /admin là đổi cả site, không sửa file này.
 */

:root {
    --lyn-section-y: clamp(48px, 6vw, 96px);
    --lyn-radius: 14px;
    --lyn-shadow: 0 6px 24px rgba(0, 0, 0, .07);
    --lyn-shadow-hover: 0 14px 38px rgba(0, 0, 0, .12);
    --lyn-tint: rgba(var(--primary-color-rgb), .04);
}

/* ── FONT: Be Vietnam Pro cho TOÀN SITE (đủ dấu tiếng Việt) ──────────────
   style.css của Travlla hard-code Figtree (body) + Afacad (heading) — hai font
   này thiếu glyph tiếng Việt nên chữ có dấu bị lỗi. Override tại đây (nạp sau). */
/* ⚠️ GỐC RỄ lỗi "chỗ đậm chỗ nhạt": style.css của Travlla áp `font-family: Afacad` cho
   ~96 selector (h1-h6 + nhiều .trv-*). Afacad CHỈ có glyph latin, KHÔNG có tiếng Việt →
   ký tự VN 2-dấu (ưỡ, ậ, ị) fallback sang Segoe UI (đậm khác) → đậm/nhạt không đều.
   Ép TẤT CẢ dùng Be Vietnam Pro (đủ dấu). `!important` để thắng mọi rule Afacad/Figtree. */
*,
body,
button,
input,
select,
textarea,
.site-button,
h1, h2, h3, h4, h5, h6,
[class*="trv-"],
.section-title,
.widget-title {
    /* Dùng TOKEN thay vì hardcode 'Inter': đổi font ở :root là cả site theo.
       Trước đây hardcode nên khi chuyển sang Montserrat, body vẫn kẹt Inter. */
    font-family: var(--font-body) !important;
}

/* Chừa Kaushan Script (accent trang trí) — giữ font của nó. */
[class*="kaushan"],
.trv-nl-large-text span {
    font-family: 'Kaushan Script', cursive !important;
}

/* ⚠️ CẤM font-synthesis (browser tự "bôi đậm/nghiêng" giả khi thiếu weight):
   nếu để bật, lúc font 700 chưa tải xong browser faux-bold weight 400, và ký tự tiếng Việt
   2-dấu (ậ, ưỡ, ị) bị đậm khác ký tự thường → "chỗ đậm chỗ nhạt". Cấm đi thì chữ đồng nhất. */
* {
    font-synthesis: none;
    -webkit-font-synthesis: none;
}


/* Tiêu đề đậm hơn thân bài để giữ tương phản thị giác của resort. */
h1, h2, h3, h4, h5, h6,
.section-title {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ── Nền site: kem ấm thay xanh teal cũ (#efffff của Travlla) ────────────
   Tone resort cao cấp: cam nhấn trên nền kem. */
body {
    background-color: var(--lyn-surface) !important;
    color: var(--text-color);
}

/* Section nền nhạt xen kẽ → dùng kem đậm hơn một chút để phân nhịp mà vẫn ấm. */
.lyn-section.bg-light {
    background: #f3ece2 !important;
}

/* Các vùng nền xanh teal cứng còn sót của Travlla (#efffff / #dbeeee) → kem. */
.trv-search-st1-wrap,
.trv-client-section,
.trv-testimo-bx-wrap,
.trv-guide-bx1-wrap,
.trv-guide-det-wrap {
    background-color: var(--lyn-surface) !important;
}

/* Booking bar wrapper nằm ngay dưới hero — nền kem cho liền mạch với section dưới. */
.lyn-hero-resort-search {
    background-color: var(--lyn-surface);
}

/* ── Nhịp section: trắng / nhạt xen kẽ ─────────────────────────────── */
.lyn-section {
    padding-block: var(--lyn-section-y);
}

.lyn-section.bg-light {
    background: var(--lyn-tint) !important;
}

.lyn-section .section-head {
    max-width: 680px;
    margin-inline: auto;
}

.lyn-section .sub-title {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .8rem;
}

/* Tiêu đề section màu CAM — điểm nhấn chính kiểu Onsen Fuji (cam ở title). */
.lyn-section .section-title {
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.2;
}

.lyn-section .section-description {
    color: var(--text-color);
}

/* ── Card ──────────────────────────────────────────────────────────── */
.lyn-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: var(--lyn-radius);
    box-shadow: var(--lyn-shadow);
    transition: transform .28s ease, box-shadow .28s ease;
}

.lyn-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--lyn-shadow-hover);
}

/* Ảnh tỉ lệ cố định → không CLS khi ảnh tải xong (docx §12 Core Web Vitals) */
.lyn-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    /* Nền placeholder gradient than-nâu ấm khi CHƯA có ảnh thật (KHUC_MAC A4 — chờ ảnh brand).
       Tone trầm sang, cam chỉ hé nhẹ ở góc. Không dùng ảnh xám "520×780" hay ảnh tour sai mood. */
    background:
        radial-gradient(110% 110% at 85% 8%, rgba(var(--primary-color-rgb), .28), transparent 50%),
        linear-gradient(150deg, #3a2c22 0%, #24201c 60%, #1c1a17 100%);
}

/* Biểu tượng dịu ở giữa placeholder — gợi "ảnh sẽ có", không phải lỗi vỡ ảnh. */
.lyn-card-media::after {
    content: '\F646'; /* bi-image của Bootstrap Icons */
    font-family: 'bootstrap-icons';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: rgba(255, 255, 255, .55);
    z-index: 0;
}

/* Khi có ảnh thật, ảnh phủ kín và che biểu tượng placeholder. */
.lyn-card-media img {
    position: relative;
    z-index: 1;
}

/* Ảnh rỗng (chưa gán) → ẩn thẻ img để lộ nền gradient + biểu tượng, không hiện icon vỡ. */
.lyn-card-media img[src=""],
.lyn-card-media img:not([src]) {
    display: none;
}

.lyn-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.lyn-card:hover .lyn-card-media img {
    transform: scale(1.06);
}

.lyn-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* Tên card màu xám đậm; hover thành cam (Onsen: tiêu đề card là điểm nhấn khi tương tác). */
.lyn-card-body h3 a,
.lyn-card-body h2 a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color .2s ease;
}

.lyn-card-body h3 a:hover,
.lyn-card-body h2 a:hover {
    color: var(--primary-color);
}

.lyn-card-body .list-inline {
    margin-bottom: .5rem;
}

.lyn-card-body .list-inline-item {
    font-size: .82rem;
}

.lyn-card-body .d-flex:last-child {
    margin-top: auto;
}

/* ── Giá ───────────────────────────────────────────────────────────── */
.lyn-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1.2;
}

.lyn-price strong {
    color: var(--primary-color);
    font-size: 1.15rem;
}

.lyn-price small {
    font-size: .75rem;
}

/* ── Dải ưu đãi nền tối (nhịp của trang tham chiếu) ─────────────────── */
.lyn-offers {
    background: var(--heading-color) !important;
}

.lyn-offers .section-title,
.lyn-offers .section-description {
    color: #fff;
}

.lyn-offers .sub-title {
    color: var(--secondary-color);
}

.lyn-card-offer {
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}

.lyn-card-offer .lyn-price strong {
    color: var(--secondary-color);
}

/* ── 5 lý do chọn ──────────────────────────────────────────────────── */
.lyn-highlight i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-inline: auto;
    border-radius: 50%;
    background: var(--lyn-tint);
    color: var(--primary-color);
    font-size: 1.6rem;
}

.lyn-highlight h3 {
    color: var(--heading-color);
    font-weight: 600;
}

/* ── Hero trang chi tiết: full-bleed, có lớp phủ để chữ đọc được ────── */
.lyn-hero {
    position: relative;
    overflow: hidden;
    max-height: 62vh;
}

.lyn-hero img {
    width: 100%;
    height: 62vh;
    object-fit: cover;
}

.lyn-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, transparent 45%);
}

/* ── Nội dung trang chi tiết ────────────────────────────────────────── */
.lyn-content {
    color: var(--text-color);
    line-height: 1.75;
}

.lyn-content h2,
.lyn-content h3 {
    color: var(--heading-color);
}

/* ── Booking bar: nút "Kiểm tra giá" / "Gọi tư vấn" ─────────────────
   `.srch-btn` gốc của theme là nút TRÒN chỉ chứa icon (bo 999px + có ::before/shadow
   tạo viền tròn). Ở đây nút có CHỮ nên phải reset hình tròn thành nút chữ nhật bo nhẹ,
   và tắt ::before để không bị "viền đôi" oval méo. */
.trv-search-st1 .srch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 150px;
    height: 50px;
    padding: 0 26px !important;
    border-radius: 8px !important;
    background: var(--primary-color) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    text-decoration: none;
    border: 0 !important;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), .25) !important;
}

/* Tắt vòng tròn trang trí ::before/::after của nút search gốc (gây oval/viền đôi). */
.trv-search-st1 .srch-btn::before,
.trv-search-st1 .srch-btn::after {
    display: none !important;
}

.trv-search-st1 .srch-btn:hover {
    background: var(--primary-color-hover) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(var(--primary-color-rgb), .32) !important;
}

.trv-search-st1 .form-group label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-color);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.trv-search-st1 input[type="date"],
.trv-search-st1 input[type="number"],
.trv-search-st1 input[type="text"],
.trv-search-st1 select {
    border: 0;
    box-shadow: none;
    padding-inline: 0;
    font-weight: 600;
    color: var(--heading-color);
}

/* Số khách: hai ô người lớn / trẻ em, cần nhãn phụ để không thành "2  0" vô nghĩa */
.lyn-guests {
    display: flex;
    gap: 10px;
}

.lyn-guests label {
    margin-bottom: 0;
    font-size: .68rem;
}

@media (max-width: 991.98px) {
    .lyn-hero img {
        height: 40vh;
    }

    .trv-search-st1 .srch-btn {
        width: 100%;
    }
}

/* ── Banner đầu trang = hero full-bleed ─────────────────────────────
   Ảnh nền là ảnh của chính bản ghi (đặt qua Theme::set trong
   functions/hospitality-single.php). Không còn máy bay / khinh khí cầu. */
.lyn-page-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(320px, 42vw, 560px);
    padding-block: clamp(56px, 8vw, 110px);
    background-size: cover;
    background-position: center;
    background-color: var(--heading-color);
    color: #fff;
}

.lyn-page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .58) 100%);
}

.lyn-page-banner .container {
    position: relative;
    z-index: 1;
}

.lyn-page-banner--plain {
    min-height: 220px;
    background-image: linear-gradient(120deg, var(--primary-color), var(--heading-color));
}

.lyn-page-banner-title {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.9rem, 3.6vw, 3.2rem);
    line-height: 1.15;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.lyn-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
}

.lyn-breadcrumb li + li::before {
    content: '/';
    margin-right: 8px;
    opacity: .5;
}

.lyn-breadcrumb a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.lyn-breadcrumb a:hover {
    color: #fff;
}

.lyn-breadcrumb li[aria-current] {
    color: rgba(255, 255, 255, .75);
}

/* Nút cuộn lên: icon thay ảnh trang trí */
.scroltop i {
    font-size: 1.1rem;
    line-height: 1;
}

/* ── Honeypot chống spam ────────────────────────────────────────────
   Không dùng display:none — nhiều bot bỏ qua field bị ẩn kiểu đó.
   Đẩy ra ngoài khung nhìn để bot vẫn "thấy" và điền vào. */
.lyn-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lyn-lead .form-label {
    font-weight: 600;
    color: var(--heading-color);
    font-size: .88rem;
}

.lyn-lead {
    background: var(--lyn-tint);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO RESORT — mood wellness resort (tham chiếu bố cục Flamingo).
   Full-bleed ảnh + overlay tối dịu, tiêu đề thanh lịch, không trang trí
   adventure (chữ viền rỗng / mưa / mây / vòng xoay của Travlla).
   ═══════════════════════════════════════════════════════════════════════ */
.lyn-hero-resort {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(88vh, 820px);
    overflow: hidden;
    isolation: isolate;
}

.lyn-hero-resort-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    /* Nền than đen ấm khi chưa có ảnh hero thật (KHUC_MAC A4) — SANG, không phủ cam.
       Cam chỉ hé ở một góc làm điểm nhấn, đúng nguyên tắc "cam là màu nhấn". */
    background-color: var(--lyn-ink);
    background-image:
        radial-gradient(70% 90% at 88% 12%, rgba(var(--primary-color-rgb), .32), transparent 55%),
        linear-gradient(160deg, #2b2019 0%, #1c1c1c 55%, #14100d 100%);
    transform: scale(1.04);
    animation: lyn-hero-zoom 18s ease-out forwards;
}

@keyframes lyn-hero-zoom {
    to { transform: scale(1); }
}

/* Overlay: tối ấm dần xuống đáy để chữ trắng đọc rõ + gợi chiều sâu resort (tone than/nâu).
   Lớp ĐỈNH đậm hơn (0-18%) để logo + menu (header transparent) nổi rõ trên ảnh sáng —
   không làm tối cả ảnh, phần giữa vẫn sáng đẹp. */
.lyn-hero-resort-overlay {
    position: absolute;
    inset: 0;
    /* Lớp tối phủ ĐỀU toàn bộ DẢI TRÊN (nơi header: logo + menu + switcher) — đậm ở đỉnh,
       nhạt dần xuống 30% để phần ảnh giữa/dưới vẫn sáng đẹp. Không dùng radial góc để
       logo/menu nổi đều trên cả chiều ngang. */
    background:
        linear-gradient(180deg, rgba(12, 10, 8, .78) 0%, rgba(12, 10, 8, .62) 12%, rgba(14, 11, 9, .3) 24%, rgba(15, 12, 10, .06) 36%, rgba(15, 12, 10, .74) 100%);
}

.lyn-hero-resort-inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(90px, 14vh, 180px);
    max-width: 820px;
    color: #fff;
}

.lyn-hero-resort-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 18px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, .08);
}

.lyn-hero-resort-title {
    margin: 0 0 20px;
    color: #fff;
    font-weight: 700;
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 1.08;
    letter-spacing: -.01em;
    /* KHÔNG text-shadow: hero giờ nền SÁNG. Shadow blur trên chữ tối làm ký tự có dấu
       (nhiều nét: ư, ơ, ậ) chồng bóng → nhìn đậm hơn ký tự thường. Bỏ đi cho đều. */
}

/* Dòng phụ (subtitle) nhẹ hơn, xuống dòng — nhịp tiêu đề của resort cao cấp. */
.lyn-hero-resort-title span {
    display: block;
    margin-top: 10px;
    font-size: clamp(1.05rem, 2vw, 1.7rem);
    font-weight: 400;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .92);
}

.lyn-hero-resort-desc {
    max-width: 560px;
    margin: 0 0 30px;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .9);
}

.lyn-hero-resort-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Booking bar nổi đè lên đáy hero (nhịp Flamingo: sticky/floating booking). */
.lyn-hero-resort-search {
    position: relative;
    z-index: 3;
    margin-top: clamp(-56px, -4vw, -40px);
}

/* ── Nút chuẩn của nghiệp vụ — teal của brand, KHÔNG dùng xanh lá của Travlla ── */
.lyn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: 6px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
    cursor: pointer;
}

/* Nút CTA cam nhưng THANH (bo góc nhỏ, bớt bóng) — nhẹ nhàng kiểu Onsen. */
.lyn-btn-primary {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), .22);
}

.lyn-btn-primary:hover {
    background: var(--primary-color-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--primary-color-rgb), .3);
}

.lyn-btn-outline {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
    backdrop-filter: blur(3px);
}

.lyn-btn-outline:hover {
    background: #fff;
    color: var(--heading-color);
    transform: translateY(-2px);
}

/* Ép nút xanh lá của Travlla trên trang chủ về teal brand (site-button, srch-btn). */
.lyn-hero-resort-search .srch-btn,
.trv-search-st1 .srch-btn {
    background: var(--primary-color) !important;
    box-shadow: 0 8px 22px rgba(var(--primary-color-rgb), .34);
}

.lyn-hero-resort-search .srch-btn:hover,
.trv-search-st1 .srch-btn:hover {
    background: var(--primary-color-hover) !important;
}

/* ── Tinh chỉnh card cho sang hơn (mood resort) ─────────────────────────── */
.lyn-card {
    border: 1px solid rgba(var(--primary-color-rgb), .06);
}

.lyn-card-body {
    padding: 22px;
    gap: 6px;
}

/* Nút trong card về outline teal thay vì nút đặc rực rỡ. */
.lyn-card .btn-primary,
.lyn-card .btn-outline-primary {
    border-radius: 999px;
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: transparent;
    font-weight: 600;
    padding-inline: 18px;
}

.lyn-card .btn-primary:hover,
.lyn-card .btn-outline-primary:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Badge "Bể khoáng riêng" — teal nhạt thay vì xám. */
.lyn-card .badge.bg-light {
    background: rgba(var(--primary-color-rgb), .1) !important;
    color: var(--primary-color) !important;
    font-weight: 600;
}

/* ── Section heading: nhịp thoáng hơn, gạch trang trí dưới tiêu đề ──────── */
.lyn-section .section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 16px;
}

.lyn-section .section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 54px;
    height: 3px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: var(--secondary-color);
}

/* Icon "vì sao chọn" — vòng tròn viền teal, sang hơn nền phẳng. */
.lyn-highlight i {
    border: 1.5px solid rgba(var(--primary-color-rgb), .18);
    box-shadow: inset 0 0 0 6px rgba(var(--primary-color-rgb), .04);
}

@media (max-width: 991.98px) {
    .lyn-hero-resort {
        min-height: 74vh;
    }

    .lyn-hero-resort-search {
        margin-top: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLL-REVEAL — animation tinh tế khi cuộn (nhịp resort sang trọng).
   Element khởi đầu mờ + dịch nhẹ; IntersectionObserver (js/hospitality-reveal.js)
   thêm .is-revealed khi vào viewport → fade-up. Không dùng thư viện/CDN.
   ═══════════════════════════════════════════════════════════════════════ */
/* AN TOÀN: chỉ ẩn để chờ reveal KHI JS đã sẵn sàng (class trên <html>).
   Nếu JS lỗi/không nạp → không có class → nội dung hiện bình thường, không kẹt trắng. */
.lyn-reveal-ready .lyn-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.lyn-reveal-ready .lyn-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* Trễ dần cho các item trong lưới → hiệu ứng "chạy" mượt thay vì bật cùng lúc. */
.lyn-reveal-ready .lyn-reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.lyn-reveal-ready .lyn-reveal-stagger.is-revealed > * {
    opacity: 1;
    transform: none;
}

.lyn-reveal-stagger.is-revealed > *:nth-child(1) { transition-delay: .05s; }
.lyn-reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: .13s; }
.lyn-reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: .21s; }
.lyn-reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: .29s; }
.lyn-reveal-stagger.is-revealed > *:nth-child(5) { transition-delay: .37s; }
.lyn-reveal-stagger.is-revealed > *:nth-child(6) { transition-delay: .45s; }

/* Tôn trọng người dùng tắt chuyển động (accessibility). */
@media (prefers-reduced-motion: reduce) {
    .lyn-reveal-ready .lyn-reveal,
    .lyn-reveal-ready .lyn-reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .lyn-hero-resort-media {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   DỌN CHẤT TRAVLLA Ở FOOTER + NÚT CTA + NEWSLETTER (mood resort teal).
   ═══════════════════════════════════════════════════════════════════════ */

/* Bỏ ảnh palm silhouette Travlla ở footer-dark.
   ⚠️ TRƯỚC ĐÂY phủ gradient teal (#0b3b40 → #072d31) !important. Nay footer
   theo bản tham khảo Hoiana là nền KEM (#fff8f0, xem design-system.css), mà
   background-image LUÔN VẼ ĐÈ LÊN background-color → nền kem bị che hoàn toàn.
   → chỉ cần bỏ ảnh nền, không phủ gradient. */
.footer-dark {
    background-image: none !important;
}

/* Logo footer dạng chữ khi chưa có ảnh logo thật. */
.lyn-footer-logo-text {
    font-family: Georgia, 'Times New Roman', serif; /* đồng bộ wordmark header */
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: .01em;
    line-height: 1.2;
    display: inline-block;
}

/* Nút "Gửi tin nhắn"/"Đặt bàn"… của shortcode [cta] — ép về teal, bỏ xanh lá Travlla. */
.site-button,
.butn-bg-shape,
.wt-contact-form .site-button,
.contact-form .site-button {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 999px !important;
}

.site-button:hover,
.butn-bg-shape:hover {
    background: var(--primary-color-hover) !important;
    color: #fff !important;
}

/* Newsletter: bỏ nền vàng chói (style.css đặt màu vàng ở .container BÊN TRONG),
   dùng teal dịu sang trọng. */
.trv-subscribe-nl,
.trv-subscribe-nl.trv-full-bx,
.trv-subscribe-nl .container {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--heading-color) 100%) !important;
}

/* Dải nền nhạt phía trên newsletter (::after) — đổi cho khớp nền trang, không lệch màu. */
.trv-subscribe-nl::after {
    background-color: transparent !important;
}

.trv-subscribe-nl .trv-nl-large-text,
.trv-subscribe-nl .trv-nl-large-text span,
.trv-subscribe-nl .trv-nl-title {
    color: #fff !important;
}

.trv-subscribe-nl .ftr-nw-subcribe-btn {
    background: var(--secondary-color) !important;
    color: var(--heading-color) !important;
}

/* ── Cột nút hành động nổi BÊN PHẢI (kiểu Onsen Fuji) ────────────────────
   Gọi · Email · Facebook · YouTube · Zalo — nút tròn cam brand, xếp dọc. */
.lyn-actions {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.lyn-actions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Nút bung (FAB) — chỉ dùng trên mobile; ẩn ở desktop.
   Dùng selector ghép (.lyn-action.lyn-actions-toggle) để thắng .lyn-action bất kể thứ tự. */
.lyn-action.lyn-actions-toggle {
    display: none;
    border: 0;
    cursor: pointer;
}

.lyn-actions-toggle .lyn-actions-toggle-close { display: none; }

.lyn-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 1.35rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(var(--primary-color-rgb), .4);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.lyn-action:hover {
    color: #fff;
    background: var(--primary-color-hover);
    transform: scale(1.1);
    box-shadow: 0 10px 24px rgba(var(--primary-color-rgb), .5);
}

.lyn-action--zalo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Vòng sóng nhấp nháy quanh nút gọi — gợi "đang chờ bạn gọi". */
.lyn-action--call::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    animation: lyn-action-pulse 2s ease-out infinite;
}

@keyframes lyn-action-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lyn-action--call::before { animation: none; }
}

/* ── MOBILE: thu cả cụm về MỘT nút bung (FAB) để không đè lên nội dung.
   Đặt trên thanh đặt phòng cố định (≈84px) một khoảng an toàn. ────────── */
@media (max-width: 767.98px) {
    .lyn-actions {
        right: 14px;
        top: auto;
        bottom: 100px;
        transform: none;
        gap: 12px;
    }

    .lyn-action { width: 46px; height: 46px; font-size: 1.2rem; }

    /* Hiện nút bung; ẩn danh sách cho tới khi mở. */
    .lyn-action.lyn-actions-toggle { display: inline-flex; }

    .lyn-actions-list {
        position: absolute;
        right: 0;
        bottom: calc(100% + 12px);
        align-items: center;
        /* Ẩn mượt: co về nút bung, chặn tương tác khi đóng. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px) scale(.9);
        transform-origin: bottom center;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .lyn-actions.is-open .lyn-actions-list {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    /* Khi mở: nút bung đổi sang biểu tượng đóng (X). */
    .lyn-actions.is-open .lyn-actions-toggle-open { display: none; }
    .lyn-actions.is-open .lyn-actions-toggle-close { display: inline-block; }

    /* Nút gọi trong danh sách vẫn nhấp nháy; nút bung thì không cần vòng sóng. */
    .lyn-actions-toggle.lyn-action::before { content: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER — bố cục thoáng kiểu Flamingo (NAP rõ, đường kẻ phân cách,
   newsletter khối riêng, khoảng thở rộng). Nền teal đậm đã set ở trên.
   ═══════════════════════════════════════════════════════════════════════ */
.footer-dark {
    /* Đệm ĐỈNH 56px. KHÔNG đặt padding-bottom: khối copyright (.footer-bottom)
       là phần tử CUỐI, nên padding-bottom của footer dồn hết vào đáy nó → cộng
       với padding-block 24px của .footer-bottom thành 80px, trong khi trên
       đường kẻ chỉ 24px. Để .footer-bottom (24/24) tự lo cân hai bên đường kẻ. */
    padding-top: 56px !important;
    padding-bottom: 0 !important;
    color: #cfe3e4;
}

.footer-dark .footer-top {
    /* style.css gốc đặt padding 80px/64px cho .footer-top → cộng với padding
       56px của footer thành 136px ở TRÊN, trong khi dưới chỉ 24+56 = 80px.
       Ép cả hai về 24px (cần !important vì rule gốc đặc hiệu hơn) → khoảng
       trên/dưới đường kẻ cân nhau. */
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

/* Đường kẻ mảnh phân cách các khối (như Flamingo). */
.footer-dark .footer-top + * {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 40px;
}

.footer-dark .widget {
    margin-bottom: 28px;
}

/* Tiêu đề cột — chữ hoa nhẹ, khoảng cách chữ, gạch dưới ngắn. */
.footer-dark .widget-title {
    position: relative;
    margin-bottom: 22px;
    padding-bottom: 14px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.footer-dark .widget-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background: var(--secondary-color);
    border-radius: 2px;
}

.footer-dark .widget_services ul li {
    margin-bottom: 12px;
}

.footer-dark .widget_services ul li a {
    color: #cfe3e4;
    transition: color .2s ease, padding-left .2s ease;
}

.footer-dark .widget_services ul li a:hover {
    color: #fff;
    padding-left: 5px;
}

/* Giới thiệu + social */
.footer-dark .widget_about p {
    color: #a9cfd0;
    line-height: 1.75;
    margin-bottom: 22px;
}

.footer-dark .social-icons {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* ⚠️ Base Travlla tô NỀN #ffaa0d (vàng-cam) lên chính thẻ <li> (vòng tròn 46px) —
   ĐÂY là "màu vàng-cam thứ 2" ở footer (khác vàng đồng --secondary). Ép <li> trong
   suốt, để thẻ <a> làm vòng tròn accent. */
.footer-dark .social-icons li {
    background-color: transparent !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

/* Vòng tròn social = vàng đồng (--secondary-color) → ĐỒNG BỘ với gạch tiêu đề, icon
   liên hệ, số điện thoại. Footer chỉ còn MỘT màu accent. Hover đậm hơn + nhấc nhẹ. */
.footer-dark .social-icons li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--secondary-color) !important;
    color: #0b3b40 !important;   /* icon màu teal đậm nổi trên nền vàng đồng */
    transition: filter .2s ease, transform .2s ease;
}

.footer-dark .social-icons li a:hover {
    filter: brightness(1.08);
    transform: translateY(-3px);
}

/* NAP — icon tròn + chữ, thoáng */
.footer-dark .widget_address li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    color: #cfe3e4;
}

.footer-dark .widget_address .trv-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--secondary-color);
}

.footer-dark .widget_address a,
.footer-dark .widget_address span {
    color: #cfe3e4;
}

/* Số điện thoại (.trv-contact) — base Travlla để font cursive + màu #ffaa0d (vàng-cam)
   LỆCH hẳn với vàng đồng (--secondary-color) của cả footer. Đồng bộ: cùng màu vàng đồng,
   font sạch (không cursive), cỡ vừa → footer chỉ còn MỘT màu accent nhất quán. */
.footer-dark .trv-contact {
    color: var(--secondary-color) !important;
    font-family: inherit !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}

.footer-dark .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    /* margin-top 24px CỘNG với padding-block 24px → khoảng TRÊN đường kẻ thành
       48px trong khi dưới chỉ 24px → lệch. Bỏ margin, để padding lo cả hai bên. */
    padding-block: 24px;
}

.footer-dark .copyrights-text {
    color: #a9cfd0;
    font-size: .9rem;
}

/* Newsletter bar: gọn hơn, chữ cân, form bo tròn. */
.trv-subscribe-nl.trv-full-bx {
    padding-block: 40px;
}

.trv-subscribe-nl .trv-nl-large-text {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
}

/* ── Trang Liên hệ: dọn trang trí Travlla trong shortcode [cta] contact-detail ── */
/* Ẩn ảnh người kéo vali (ảnh du lịch Travlla) — không hợp resort. */
.trv-con-pic {
    display: none !important;
}

/* Icon liên hệ: đồng bộ teal brand thay vì hồng/xanh loạn màu của Travlla. */
.trv-contact-info .trv-icon-bx,
.trv-contact-info.icon-2 .trv-icon-bx,
.trv-contact-info.icon-3 .trv-icon-bx {
    background: var(--primary-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TINH THẦN ONSEN FUJI — cam TIẾT CHẾ ở title/menu/link, nền trắng thoáng.
   ═══════════════════════════════════════════════════════════════════════ */

/* Menu chính: chữ CAM (như Onsen Fuji). Áp cho header nền sáng.
   ⚠️ font-weight CỐ ĐỊNH 600 — KHÔNG đổi khi hover/active. Đổi weight làm chữ rộng ra →
   xô các mục kế bên (giật layout). Nổi bật bằng MÀU + GẠCH CHÂN, không bằng weight. */
.header-nav > ul > li > a,
.header-nav .nav > li > a {
    color: var(--primary-color) !important;
    font-weight: 600;
    position: relative;
}

/* Gạch chân cam: 1 phần tử ::after cho MỌI mục, mặc định ẩn (scaleX 0), trượt vào khi
   hover/active. transform + transition = animation mượt, KHÔNG chiếm layout nên không giật.
   `left/right: 12px` = trừ padding của <a> → gạch ôm sát chữ. `bottom: 6px` = sát chân chữ. */
.header-nav > ul > li > a::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.header-nav > ul > li > a:hover::after,
.header-nav > ul > li.current-menu-item > a::after,
.header-nav > ul > li.current-menu-parent > a::after,
.header-nav > ul > li.active > a::after {
    transform: scaleX(1);
}

/* Sub-title (chữ nhỏ trên tiêu đề) — cam nhạt hơn, giữ vai trò accent. */
.lyn-section .sub-title {
    color: var(--primary-color);
    opacity: .95;
}

/* Link "Xem tất cả / Xem ngay" — cam text, không nền (kiểu Onsen). */
.lyn-section .btn-link,
.lyn-view-more {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.lyn-section .btn-link:hover,
.lyn-view-more:hover {
    color: var(--primary-color-hover);
    text-decoration: underline;
}

/* Giá phòng — cam (điểm nhấn số quan trọng). */
.lyn-price strong {
    color: var(--primary-color);
}

/* ── HERO mặc định (chưa có ảnh thật): dùng GRADIENT THAN TỐI sang trọng (rule gốc ở
   .lyn-hero-resort-media). KHÔNG dùng nền sáng nữa — nền sáng làm menu cam + chữ cam
   chìm/mờ, và ảnh seed độ phân giải thấp phóng lên hero bị nhòe. Gradient CSS luôn sắc
   nét, chữ trắng + overlay tối đọc rõ, menu nổi bật. Thay ảnh thật (≥1920px) qua admin
   là hero tự chuyển sang ảnh. --}} */

/* ═══════════════════════════════════════════════════════════════════════
   MENU VIẾT HOA + BỘ CHỌN CƠ SỞ (kiểu Flamingo).
   ═══════════════════════════════════════════════════════════════════════ */

/* Menu chính VIẾT HOA (giữ text gốc có dấu đúng, chỉ đổi hiển thị). */
.header-nav > ul > li > a {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .86rem;
}

/* ── Bộ chọn cơ sở/điểm đến — nút "📍 Lynntimes ▾" góc phải (kiểu Flamingo) ── */
.lyn-dest-switcher {
    position: relative;
}

.lyn-dest-switcher .trv-switcher-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--primary-color);
    border-radius: 8px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

/* Hover: chỉ đổi MÀU CHỮ (design-system.css lo). Trước đây đổ nền
   var(--primary-color) vì nó là NÚT; nay là MỤC MENU nên đổ nền sẽ nuốt mất
   gạch chân gold (cùng màu) và lệch hẳn với các mục menu khác. */
.lyn-dest-switcher .trv-switcher-toggle:hover {
    background: transparent;
}

.lyn-dest-switcher-icon,
.lyn-dest-switcher .trv-switcher-caret {
    color: var(--primary-color);
    font-size: 1rem;
    transition: color .2s ease;
}

.lyn-dest-switcher .trv-switcher-current {
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Nút đủ rộng để chứa tên điểm đến dài nhất → popup CĂN THẲNG bằng nút, không lệch. */
.lyn-dest-switcher .trv-switcher-toggle {
    min-width: 190px;
    justify-content: space-between;
}

/* Dropdown: RỘNG ĐÚNG BẰNG NÚT (width 100% của container), căn thẳng 2 mép. */
.lyn-dest-switcher-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px !important;
    list-style: none;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 10px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14) !important;
}

.lyn-dest-switcher-menu li a {
    display: block;
    padding: 10px 14px;
    border-radius: 7px;
    color: var(--heading-color);
    font-weight: 500;
    font-size: .86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.lyn-dest-switcher-menu li a:hover {
    background: rgba(var(--primary-color-rgb), .08);
    color: var(--primary-color);
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER: nền trắng khi cuộn (sticky) — thay teal #066168 hard-code của Travlla.
   Menu cam + dropdown cơ sở đọc rõ trên nền trắng cả khi ở hero lẫn khi cuộn.
   ═══════════════════════════════════════════════════════════════════════ */
.sticky-header.is-fixed {
    background-color: #fff !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .08);
}

/* Khi header dính (nền trắng): menu vẫn cam, logo text đậm màu chữ. */
.sticky-header.is-fixed .header-nav > ul > li > a {
    color: var(--primary-color) !important;
}

.sticky-header.is-fixed .logo-header .logo-text,
.sticky-header.is-fixed .logo-header a {
    color: var(--heading-color);
}

/* ── Khi sticky (nền trắng): switcher ngôn ngữ/tiền tệ + hamburger + search phải
   ĐỔI SANG MÀU TỐI, không thì chữ trắng (cho hero tối) tàng hình trên nền trắng. ── */
.sticky-header.is-fixed .trv-switchers .trv-switcher-current,
.sticky-header.is-fixed .trv-switchers .trv-switcher-symbol,
.sticky-header.is-fixed .trv-switchers .trv-switcher-caret,
.sticky-header.is-fixed .trv-switchers .svg-icon,
.sticky-header.is-fixed .trv-switchers a {
    color: var(--heading-color) !important;
}
/* Nút hamburger (icon-bar) + nút search: chuyển sang tối. */
.sticky-header.is-fixed .navbar-toggler .icon-bar {
    background: var(--heading-color) !important;
}
.sticky-header.is-fixed .extra-nav a,
.sticky-header.is-fixed .extra-nav i,
.sticky-header.is-fixed .header-search-icon,
.sticky-header.is-fixed .site-search-btn {
    color: var(--heading-color) !important;
}
/* Bộ chọn điểm đến khi sticky: viền + chữ tối. */
.sticky-header.is-fixed .lyn-dest-switcher .trv-switcher-toggle {
    color: var(--heading-color) !important;
    border-color: rgba(0, 0, 0, .18) !important;
}
.sticky-header.is-fixed .lyn-dest-switcher-icon,
.sticky-header.is-fixed .lyn-dest-switcher .trv-switcher-caret {
    color: var(--heading-color) !important;
}

/* Logo text ở header (khi chưa có ảnh logo) — màu chữ đậm, không bị chìm. */
.logo-header .logo-text {
    color: var(--heading-color);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
}

/* ── WORDMARK điểm đến (khi mini-site chưa có logo ảnh → hiện tên điểm đến dạng chữ).
   Cùng "quy tắc màu" như logo ảnh: TRẮNG trên header trong suốt (hero tối), TỐI khi
   header sticky/nền trắng. Chữ serif cho gần thần thái logo thương hiệu. ── */
.logo-header .lyn-destination-wordmark {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.1;
    letter-spacing: .01em;
    white-space: nowrap;
    color: #fff; /* mặc định: header trong suốt trên hero tối */
}
/* Header sticky (nền trắng) hoặc trang con nền đặc → wordmark chữ tối. */
.sticky-header.is-fixed .logo-header .lyn-destination-wordmark,
.header-style-1.header-inner .logo-header .lyn-destination-wordmark {
    color: var(--heading-color);
}
@media (max-width: 991.98px) {
    .logo-header .lyn-destination-wordmark { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STICKY BOOKING BAR — dưới chân web, ẩn/hiện theo hướng cuộn (kiểu Flamingo).
   ═══════════════════════════════════════════════════════════════════════ */
.lyn-sticky-booking {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Cao nhất: trên header (999) VÀ trên box giá `.sticky-top` của Bootstrap (1020) —
       nếu không, box "Gọi tư vấn" ở trang chi tiết trượt xuống ĐÈ lên thanh đặt phòng. */
    z-index: 1050;
    background: var(--heading-color);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* Chừa chỗ cho thanh đặt phòng cố định ở đáy — CHỈ đệm phần <main> (nội dung), KHÔNG
   đệm cả body. Đệm body làm lộ dải trắng thừa dưới footer khi thanh tự ẩn ở cuối trang.
   Footer nằm ngoài <main> nên vẫn sát đáy. */
main {
    padding-bottom: 84px;
}

/* Box giá sticky ở trang chi tiết: giữ dưới thanh đặt phòng (thanh mới là trên cùng). */
.sticky-top {
    z-index: 1000;
}

.lyn-sticky-booking.is-hidden {
    transform: translateY(100%);
}

.lyn-sb-form {
    display: flex;
    align-items: stretch;
    gap: 1px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
    background: rgba(255, 255, 255, .06);
}

.lyn-sb-field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 12px 16px;
}

/* Vạch ngăn CHỈ giữa các field (field đứng sau field khác) → field ĐẦU không có
   border trái. Dùng adjacent-sibling thay vì :first-child vì trước field đầu có
   input ẩn (@csrf, honeypot) khiến :first-child KHÔNG khớp field điểm đến. */
.lyn-sb-field + .lyn-sb-field { border-left: 1px solid rgba(255, 255, 255, .1); }
/* 128px: nhãn "SỐ KHÁCH" (uppercase + tracking .05em) chiếm 83px chữ THẬT —
   đo bằng Range, không phải bounding box của thẻ (thẻ display:block nên giãn
   theo ô và che mất phần chữ tràn).
   92px cũ trừ padding 20px mỗi bên chỉ còn 52px → chữ tràn, hở phải chỉ 12px
   trong khi hở trái 21px → nhìn như chèn vào vạch ngăn.
   128px - 40px padding = 88px, đủ cho 83px chữ và cân hai bên. */
.lyn-sb-field--num { flex: 0 0 128px; }

.lyn-sb-field label {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.lyn-sb-field label i { color: var(--primary-color); margin-right: 3px; }

.lyn-sb-field select,
.lyn-sb-field input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: .9rem;
    font-weight: 500;
    padding: 0;
    outline: none;
    cursor: pointer;
    text-overflow: ellipsis;
}

.lyn-sb-field select option { color: var(--heading-color); }
.lyn-sb-field input::placeholder { color: rgba(255, 255, 255, .5); }

.lyn-sb-submit {
    flex: 0 0 auto;
    align-self: stretch;
    padding: 0 34px;
    border: 0;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .2s ease;
    white-space: nowrap;
}

.lyn-sb-submit:hover { background: var(--primary-color-hover); }

/* Sticky bar FULL-WIDTH (không chừa góc phải → không bị hụt góc xấu).
   Cột actions Gọi/Zalo nằm giữa màn theo chiều dọc nên không đè lên bar ở đáy. */

/* Mobile: gọn thành nút "Đặt phòng" nổi (không nhồi cả form vào 1 dòng). */
@media (max-width: 991.98px) {
    .lyn-sb-form {
        flex-wrap: wrap;
        padding: 8px;
        gap: 6px;
    }
    .lyn-sb-field {
        flex: 1 1 44%;
        border-left: 0;
        padding: 6px 10px;
        background: rgba(255, 255, 255, .05);
        border-radius: 6px;
    }
    .lyn-sb-field--num { flex: 1 1 44%; }
    .lyn-sb-submit {
        flex: 1 1 100%;
        padding: 12px;
        border-radius: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER NEWSLETTER (trong cột, kiểu Flamingo) + DẢI LOGO CƠ SỞ CHẠY.
   ═══════════════════════════════════════════════════════════════════════ */

/* Đường kẻ ngăn giữa NAP (trên) và hàng Newsletter/liên kết (dưới). */
.lyn-footer-lower {
    margin-top: 8px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Newsletter trong footer: khối dọc gọn. */
.lyn-footer-newsletter .widget-title {
    margin-bottom: 12px;
}

.lyn-newsletter-desc {
    color: #a9b4c0;
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.lyn-newsletter-form {
    display: flex;
    max-width: 340px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
}

.lyn-newsletter-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 12px 16px;
    font-size: .9rem;
    outline: none;
}

.lyn-newsletter-form input::placeholder { color: rgba(255, 255, 255, .5); }

.lyn-newsletter-btn {
    flex: 0 0 auto;
    border: 0;
    padding: 0 22px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

.lyn-newsletter-btn:hover { background: var(--primary-color-hover); }

/* ── Dải cơ sở chạy phải→trái (marquee) ─────────────────────────────────── */
.lyn-marquee-section {
    padding-block: clamp(40px, 6vw, 72px);
    background: var(--lyn-surface);
    overflow: hidden;
}

/* Sub-title nhỏ cam trên tiêu đề (đồng bộ .sub-title các section). */
.lyn-marquee-sub {
    display: block;
    text-align: center;
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .8rem;
    margin-bottom: 8px;
}

.lyn-marquee-title {
    text-align: center;
    color: var(--primary-color);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    margin-bottom: 36px;
}

.lyn-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.lyn-marquee-track {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: max-content;
    padding-block: 6px;
    animation: lyn-marquee-scroll 45s linear infinite;
}

.lyn-marquee:hover .lyn-marquee-track {
    animation-play-state: paused;
}

@keyframes lyn-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── CARD cơ sở (ảnh + tên + địa chỉ) — kiểu Flamingo ─────────────────── */
.lyn-resort-card {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 340px;
    height: 210px;
    border-radius: var(--lyn-radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--lyn-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}

.lyn-resort-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lyn-shadow-hover);
}

.lyn-resort-card-media {
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, #3a2c22, #1c1a17);
}

.lyn-resort-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.lyn-resort-card:hover .lyn-resort-card-media img {
    transform: scale(1.06);
}

/* Overlay tối dưới đáy để chữ nổi trên ảnh. */
.lyn-resort-card-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 40px 18px 16px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
    color: #fff;
}

.lyn-resort-card-name {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
}

.lyn-resort-card-addr {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
}

.lyn-resort-card-addr i {
    color: var(--secondary-color);
    margin-top: 2px;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .lyn-marquee-track { animation: none; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TIN TỨC & SỰ KIỆN — carousel card ảnh lớn (kiểu Flamingo).
   ═══════════════════════════════════════════════════════════════════════ */
.lyn-news-card {
    background: #fff;
    border-radius: var(--lyn-radius);
    overflow: hidden;
    box-shadow: var(--lyn-shadow);
    transition: transform .28s ease, box-shadow .28s ease;
    height: 100%;
}

.lyn-news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--lyn-shadow-hover);
}

.lyn-news-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background:
        radial-gradient(110% 110% at 85% 8%, rgba(var(--primary-color-rgb), .25), transparent 50%),
        linear-gradient(150deg, #3a2c22 0%, #24201c 60%, #1c1a17 100%);
}

.lyn-news-media::after {
    content: '\F646';
    font-family: 'bootstrap-icons';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, .5);
    z-index: 0;
}

.lyn-news-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.lyn-news-card:hover .lyn-news-media img { transform: scale(1.06); }

.lyn-news-body { padding: 20px 22px 24px; }

.lyn-news-title {
    font-size: 1.08rem;
    line-height: 1.4;
    margin: 0 0 10px;
}

.lyn-news-title a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color .2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lyn-news-title a:hover { color: var(--primary-color); }

.lyn-news-desc {
    color: var(--text-color);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lyn-news-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-color);
    font-size: .82rem;
    opacity: .8;
}

.lyn-news-meta i { color: var(--primary-color); }

/* Mũi tên owl — tròn viền cam, hai bên */
.lyn-news-owl .owl-nav {
    margin: 0;
}

.lyn-news-owl .owl-nav button.owl-prev,
.lyn-news-owl .owl-nav button.owl-next {
    position: absolute;
    top: 42%;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff !important;
    color: var(--primary-color) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    font-size: 1.2rem;
    transition: background .2s ease, color .2s ease;
}

.lyn-news-owl .owl-nav button.owl-prev { left: -22px; }
.lyn-news-owl .owl-nav button.owl-next { right: -22px; }

.lyn-news-owl .owl-nav button:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* Dots owl — cam */
.lyn-news-owl .owl-dots { margin-top: 28px; text-align: center; }

.lyn-news-owl .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    background: rgba(var(--primary-color-rgb), .3);
    transition: background .2s ease, width .2s ease;
}

.lyn-news-owl .owl-dots .owl-dot.active span {
    background: var(--primary-color);
    width: 24px;
    border-radius: 5px;
}

@media (max-width: 991.98px) {
    .lyn-news-owl .owl-nav button.owl-prev { left: 4px; }
    .lyn-news-owl .owl-nav button.owl-next { right: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER — menu 1 hàng gọn, không tràn/đè nội dung (trang con dùng chung style-1).
   ═══════════════════════════════════════════════════════════════════════ */
/* Ép header layout ngang từ desktop (không chờ tới xxl 1400px mới hàng ngang). */
@media (min-width: 992px) {
    .header-style-1 .main-bar {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        gap: 20px;
    }
    .header-style-1 .header-nav {
        flex: 1 1 auto;
    }
    .header-style-1 .header-nav > ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 4px;
        margin: 0;
    }
    .header-style-1 .header-nav > ul > li > a {
        padding: 10px 12px;
        font-size: .82rem;
        white-space: nowrap;
    }
    /* Logo + khối bên phải không co, menu ở giữa co giãn. */
    .header-style-1 .logo-header,
    .header-style-1 .extra-nav {
        flex: 0 0 auto;
    }
}

/* Màn trung bình-lớn (992-1600): logo + 7 menu (tiếng Việt dài) + 3 switcher rất chật.
   Nén menu + padding main-bar + logo để KHÔNG đè logo/switcher (tránh overflow flex). */
@media (min-width: 992px) and (max-width: 1600px) {
    .header-style-1 .main-bar { padding-left: 20px !important; padding-right: 20px !important; }
    .header-style-1 .header-nav > ul > li > a {
        padding: 8px 8px;
        font-size: .76rem;
        letter-spacing: 0;
    }
    .header-style-1 .logo-header .logo-header-inner img { max-height: 38px !important; max-width: 190px !important; object-fit: contain; }
}
/* ≤1450: nén mạnh hơn (menu font nhỏ, gap sát) để 6 mục + switcher vừa 1 hàng. */
@media (min-width: 992px) and (max-width: 1450px) {
    .header-style-1 .main-bar { padding-left: 14px !important; padding-right: 14px !important; }
    .header-style-1 .header-nav > ul > li > a {
        padding: 6px 6px;
        font-size: .7rem;
    }
    .header-style-1 .logo-header {
        margin-right: 12px; /* khoảng an toàn để menu KHÔNG đè logo */
    }
    .header-style-1 .logo-header .logo-header-inner img { max-height: 36px !important; max-width: 175px !important; object-fit: contain; }
    /* Switcher ngôn ngữ/tiền tệ nhỏ lại cho gọn. */
    .header-style-1 .trv-switcher-language,
    .header-style-1 .trv-switcher-currency { font-size: .72rem; }
}

/* Logo LUÔN nổi trên menu (nếu chật, menu không che logo). */
.header-style-1 .logo-header { position: relative; z-index: 3; }

/* ═══════════════════════════════════════════════════════════════════════
   HEADER TRANG PHỤ (.header-inner) — nền đặc, CHIẾM CHỖ, không đè banner.
   Theme gốc đặt .header-style-1 { position:absolute; top:35px } để nổi trên hero
   (đúng cho trang chủ). Trang phụ có banner riêng → header phải relative + nền trắng,
   nếu không nó phủ đè lên tiêu đề "Ẩm thực"/"Phòng nghỉ" + breadcrumb.
   ═══════════════════════════════════════════════════════════════════════ */
.header-style-1.header-inner {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
}
/* Sticky sau khi cuộn: giữ nền trắng, bám sát mép (theme gốc cho is-fixed left/right 35px). */
.header-style-1.header-inner.is-fixed {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff;
}
/* Menu/logo trang phụ: chữ tối trên nền trắng (không phải cam nhạt khó đọc). */
.header-style-1.header-inner .header-nav > ul > li > a,
.header-style-1.header-inner .logo-header a,
.header-style-1.header-inner .site-button-link {
    color: var(--heading-color);
}
/* Active + hover: chỉ đổi MÀU sang cam (KHÔNG đổi weight → không giật). Gạch chân do
   rule chung `.header-nav ... a::after` lo (đã bao cả .header-inner), có animation trượt. */
.header-style-1.header-inner .header-nav > ul > li > a:hover,
.header-style-1.header-inner .header-nav > ul > li.current-menu-item > a,
.header-style-1.header-inner .header-nav > ul > li.current-menu-parent > a,
.header-style-1.header-inner .header-nav > ul > li.active > a {
    color: var(--primary-color) !important;
}

/* ── MỌI switcher (điểm đến / ngôn ngữ / tiền tệ) trên header trang phụ ──
   Theme gốc để chữ switcher trắng (cho hero tối) → trên nền trắng bị tàng hình.
   Ép chữ + icon + caret + symbol màu tối cho tất cả switcher khi header nền trắng. */
.header-inner .trv-switchers .trv-switcher-current,
.header-inner .trv-switchers .trv-switcher-symbol,
.header-inner .trv-switchers .trv-switcher-caret,
.header-inner .trv-switchers .svg-icon,
.header-inner .trv-switchers a,
.header-inner .trv-switchers > .trv-switcher > span:first-child {
    color: var(--heading-color) !important;
}
/* Bộ chọn điểm đến giờ là MỘT MỤC MENU (không viền, không nền — xem design-system.css
   §"SWITCHER ĐIỂM ĐẾN = MỘT MỤC MENU"). Trang phụ nền trắng → chữ trung tính. */
.header-inner .lyn-dest-switcher .trv-switcher-toggle {
    color: var(--heading-color);
}
.header-inner .lyn-dest-switcher-icon,
.header-inner .lyn-dest-switcher .trv-switcher-caret {
    color: var(--heading-color);
}
/* Hover/mở: gold ĐẬM (#af7432) — đủ tương phản trên nền trắng. KHÔNG dùng #fff
   (di sản từ hồi switcher là nút-có-nền: nền trắng + chữ trắng → chữ biến mất). */
.header-inner .lyn-dest-switcher .trv-switcher-toggle:hover,
.header-inner .lyn-dest-switcher .trv-switcher-toggle:hover .trv-switcher-current,
.header-inner .lyn-dest-mega:hover .trv-switcher-toggle,
.header-inner .lyn-dest-mega:hover .trv-switcher-current,
.header-inner .lyn-dest-mega.is-open .trv-switcher-toggle,
.header-inner .lyn-dest-mega.is-open .trv-switcher-current {
    color: #af7432 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIÊU ĐỀ WIDGET (vd "Tin tức & Sự kiện" trên /blog) — CAM đồng bộ section-title,
   không để teal cũ của Travlla lạc phong cách.
   ═══════════════════════════════════════════════════════════════════════ */
/* (Rule tiêu đề blog cũ đã chuyển sang .lyn-news-page scoped ở design-system.css — bỏ ở đây
   để tránh áp .widget-title không-scope.) */
/* Nhãn tác giả "Qua System Admin" trên card blog: ẩn (chưa có tác giả thật, gây rối). */
.trv-blog-st3 .trv-post-author,
.trv-blog-st3 [class*="author"] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   NÚT .btn-primary (Bootstrap mặc định xanh dương) → CAM brand.
   Các trang chi tiết (onsen, phòng) dùng nút Bootstrap `.btn.btn-primary` → mặc định
   xanh #0d6efd, lạc phong cách cam. Ép về màu brand cho đồng bộ toàn site.
   ═══════════════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-primary:focus {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--primary-color-hover, #d8351a) !important;
    border-color: var(--primary-color-hover, #d8351a) !important;
}
/* Nút outline xanh (nếu có) → outline cam. */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CTA LIÊN HỆ (style-contact) — LUXURY. Bỏ dải teal mờ + ảnh leo núi + form kem trơ
   của Travlla. Cột trái ảnh resort + overlay gradient sang, cột phải form tối tinh tế.
   ═══════════════════════════════════════════════════════════════════════ */
/* Rộng BẰNG container các section trên (.container = max-width 1320px tại ≥1200px) để
   liền mạch từ Tin tức xuống Liên hệ — không full-bleed tràn mép như bản Travlla.
   `margin-block` chừa khoảng trên/dưới cho thoáng (không sát khung). */
.trv-contact-form {
    max-width: 1320px;
    margin-inline: auto;
    margin-block: clamp(32px, 4vw, 56px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
}
/* Lề ngang khớp container Bootstrap (~12px) để 2 mép thẳng hàng với các section trên. */
@media (max-width: 1343px) {
    .trv-contact-form { margin-inline: 12px; }
}

/* Tăng padding trong 2 cột cho nội dung không dính sát viền khung. */
.trv-contact-form .trv-cot-media-info { padding: 56px 48px !important; }
.trv-contact-form .trv-contact-right-part { padding: 56px 48px !important; }
.trv-contact-form > .row {
    --bs-gutter-x: 0;
    align-items: stretch;
}

/* ── Cột trái: ảnh resort + overlay gradient than ấm (không teal) ── */
.trv-cot-media-section {
    position: relative;
    min-height: 480px;
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    align-items: flex-end;
}
/* Xoá mọi lớp phủ teal cũ của Travlla, thay bằng gradient sang trọng. */
.trv-cot-media-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, rgba(28, 26, 23, .35) 0%, rgba(28, 26, 23, .82) 100%);
}
/* Chấm nhấn cam mờ ở góc trên (điểm brand). */
.trv-cot-media-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 90% 0%, rgba(var(--primary-color-rgb), .28), transparent 55%);
    pointer-events: none;
}
/* Gỡ khung teal mờ Travlla (rgba(6,97,104,.51) + blur + bo 30px + absolute) — chỉ để
   text nằm trực tiếp trên gradient ảnh, không khung lồng. */
.trv-cot-media-section .trv-cot-media-info {
    position: relative !important;
    inset: auto !important;
    z-index: 1;
    padding: 44px !important;
    color: #fff;
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    width: 100%;
}
.trv-cot-media-info .trv-subtitle {
    color: var(--secondary-color);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .82rem;
    margin-bottom: 10px;
}
.trv-cot-media-info .trv-title {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.2;
    margin-bottom: 22px;
}
.trv-contact-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.trv-contact-info-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .9);
    font-size: .95rem;
}
.trv-contact-info-list li a { color: inherit; text-decoration: none; }
.trv-contact-info-list li a:hover { color: #fff; }
.trv-contact-info-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--secondary-color);
    font-size: 1.05rem;
}

/* ── Cột phải: form nền trắng sạch (bỏ nền kem + dải teal) ── */
.trv-contact-form .trv-contact-right-part,
.trv-contact-form > .row > [class*="col-"]:last-child {
    height: 100%;
    background: #fff !important;
}
.trv-contact-right-part {
    padding: 44px !important;
    display: flex;
    align-items: center;
}
.trv-contact-right-part::before,
.trv-contact-right-part::after { display: none !important; } /* bỏ dải trang trí Travlla */
/* .trv-form của Travlla có nền kem #fff8eb + bo 30px + padding 60px → gỡ về trắng phẳng. */
.trv-contact-right-part .trv-form {
    width: 100%;
    background: #fff !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.trv-contact-right-part .trv-head-title {
    color: var(--primary-color) !important;
    font-weight: 700;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    margin-bottom: 8px;
}
.trv-contact-right-part .trv-head-discription {
    color: var(--text-color);
    margin-bottom: 24px;
}
/* Input: viền tinh tế, bo nhẹ, focus cam. */
.trv-cons-contact-form .form-control {
    height: 52px;
    padding: 0 18px;
    margin-bottom: 14px;
    border: 1.5px solid #e6e0d8;
    border-radius: 10px;
    background: #faf8f5;
    font-size: .95rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.trv-cons-contact-form textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: 14px 18px;
    resize: vertical;
}
.trv-cons-contact-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), .12);
    background: #fff;
    outline: none;
}
/* Nút gửi: cam đặc, bo, không dùng butn-bg-shape oval của Travlla. */
.trv-cons-contact-form .site-button {
    margin-top: 6px;
    padding: 14px 40px;
    border-radius: 10px;
    background: var(--primary-color) !important;
    color: #fff !important;
    font-weight: 600;
    border: none;
    transition: background .2s ease, transform .2s ease;
}
.trv-cons-contact-form .site-button:hover {
    background: var(--primary-color-hover, #d8351a) !important;
    transform: translateY(-2px);
}
/* Ẩn hiệu ứng ::before/::after "shape" oval của .butn-bg-shape (Travlla). */
.trv-cons-contact-form .butn-bg-shape::before,
.trv-cons-contact-form .butn-bg-shape::after { display: none !important; }

@media (max-width: 991px) {
    .trv-cot-media-section { min-height: 300px; }
    .trv-cot-media-info,
    .trv-contact-right-part { padding: 28px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGO ẢNH gọn + header không tràn (switcher ngôn ngữ/tiền tệ không bị đẩy khuất).
   Logo chuẩn "LYNNTIMES / THANH THUY" (chữ serif, ngang ~4.8:1) → giới hạn CHIỀU CAO
   để cân với hàng menu, cho phép chiều rộng rộng hơn (wordmark dài) mà vẫn chừa chỗ
   cho menu + switcher + hamburger trên 1 hàng.
   ═══════════════════════════════════════════════════════════════════════ */
.header-style-1 .logo-header {
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;   /* logo canh giữa dọc → thẳng hàng với menu/hamburger */
    height: auto !important; /* huỷ height:70px của style.css gốc (làm logo cao quá) */
}
.header-style-1 .logo-header .logo-header-inner,
.header-style-1 .logo-header a {
    display: flex;
    align-items: center;
}
/* Logo header: giới hạn theo CHIỀU CAO cho cân với menu.
   KHÔNG ép height cứng — để mỗi logo tự co theo tỉ lệ trong khung max-height × max-width.
   Logo brand 1 dòng (9.3:1) rất dẹt: 36px sẽ làm chữ CAO GẤP ĐÔI logo 2 dòng → dùng
   max-height nhỏ hơn cho vừa, chữ ngang tầm menu. Logo 2 dòng (Thanh Thủy) cũng vẫn cân. */
.header-style-1 .logo-header .logo-header-inner img {
    max-height: 40px !important;
    width: auto !important;
    max-width: 210px !important;
    object-fit: contain;
}

/* ── MOBILE/TABLET (<992px): logo nhỏ + canh giữa dọc cho THẲNG HÀNG với hamburger.
   style.css gốc ép .logo-header{height:70px} khiến logo cao lệch — huỷ, dùng auto. ── */
@media (max-width: 991.98px) {
    /* Main-bar mobile: LỀ ngang để logo/hamburger không dính mép; canh giữa dọc.
       DOM: toggler đứng TRƯỚC logo → dùng order để LOGO bên trái, HAMBURGER bên phải. */
    .header-style-1 .main-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        min-height: 64px;
    }
    .header-style-1 .logo-header {
        order: 1;
        height: auto !important;
        width: auto !important;
        display: flex;
        align-items: center;
        float: none !important;
        margin: 0 !important;
    }
    .header-style-1 .logo-header .logo-header-inner img {
        max-height: 34px !important;
        max-width: 155px !important;
        object-fit: contain;
    }
    /* Hamburger: đẩy sang phải cùng hàng logo. GIỮ display:block để 3 gạch (.icon-bar)
       xếp DỌC — KHÔNG dùng flex (flex xếp 3 gạch nằm ngang → vỡ thành 1 vạch). */
    .header-style-1 .navbar-toggler {
        order: 2;
        margin: 0 0 0 auto !important;
        display: block !important;
        position: static !important;
        padding: 8px 0 8px 10px !important;
    }
    /* Menu (drawer) + cụm phải: khi mở drawer xổ xuống dòng dưới, chiếm cả hàng. */
    .header-style-1 .header-nav,
    .header-style-1 .extra-nav {
        order: 3;
        flex-basis: 100%;
    }
}

/* ── LOGO 2 BẢN theo nền header ────────────────────────────────────────────
   Logo chữ đỏ-đô/đen chìm trên hero tối. Nên: header TRONG SUỐT (đầu trang, trên
   hero tối) → hiện bản TRẮNG; header STICKY (đã cuộn, nền trắng) → hiện bản MÀU.
   2 <span> cùng chồng vị trí, chỉ đổi hiện/ẩn — không nhân đôi chiều cao. */
.logo-header-inner .logo-variant { display: inline-flex; align-items: center; }
.logo-header-inner .logo-variant img { display: block; }

/* Mặc định (header trong suốt trên hero): dùng bản trắng, ẩn bản màu. */
.header-style-1 .logo-variant--dark { display: none; }
.header-style-1 .logo-variant--light { display: inline-flex; }

/* Khi header dính nền trắng: đảo lại — hiện bản màu, ẩn bản trắng. */
.header-style-1.is-fixed .logo-variant--dark,
.sticky-header.is-fixed .logo-variant--dark { display: inline-flex; }
.header-style-1.is-fixed .logo-variant--light,
.sticky-header.is-fixed .logo-variant--light { display: none; }

/* Trang CON (header-inner, nền đặc trắng, KHÔNG transparent): luôn dùng bản màu. */
.header-style-1.header-inner .logo-variant--dark { display: inline-flex; }
.header-style-1.header-inner .logo-variant--light { display: none; }
/* Khối bên phải (switcher + lang + currency + search + hamburger) không co, luôn hiện đủ. */
.header-style-1 .extra-nav,
.header-style-1 .trv-switchers {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
}
/* Header row không cho tràn ngang — nếu chật thì menu (giữa) co lại, không đẩy switcher. */
@media (min-width: 992px) {
    .header-style-1 .main-bar {
        flex-wrap: nowrap;
        overflow: visible;
    }
    .header-style-1 .header-nav {
        min-width: 0; /* cho phép menu co khi chật, không đẩy 2 đầu */
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX menu ĐÈ LOGO: theme để .header-nav justify-content-end → menu dồn phải, khi rộng
   thì item đầu (TRANG CHỦ) tràn qua trái đè logo. Ép menu bắt đầu từ TRÁI (sau logo),
   chiếm khoảng giữa, không tràn qua logo.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .header-style-1 .header-nav.justify-content-end,
    .header-style-1 .header-nav {
        justify-content: center !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    .header-style-1 .header-nav > ul.nav {
        flex-wrap: nowrap;
        margin: 0;
        justify-content: center;
    }
    /* Menu không được tràn qua logo: đặt sau logo, có margin an toàn 2 đầu. */
    .header-style-1 .header-nav > ul.nav > li:first-child { margin-left: 0; }
}

/* Nút "Liên hệ ngay" ở cột trái CTA (trên ảnh tối) — viền trắng, hover nền cam. */
.trv-cot-media-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    padding: 13px 28px;
    border: 1.5px solid rgba(255, 255, 255, .8);
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.trv-cot-media-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}
.trv-cot-media-btn i { font-size: 1rem; transition: transform .22s ease; }
.trv-cot-media-btn:hover i { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════════════
   THANG CỠ CHỮ ĐỒNG NHẤT (type scale) — "các mục cùng cấp thì BẰNG NHAU"
   ---------------------------------------------------------------------------
   Vấn đề trước: mỗi component tự đặt font-size riêng (chỗ 1.6rem, chỗ clamp
   1.9-3.2rem, sidebar 20px…) → tiêu đề cùng vai trò lại to nhỏ khác nhau, nhìn
   lộn xộn. Ở đây định nghĩa MỘT thang bậc dùng chung (như Heading 1..6 trong
   Word) rồi map mọi tiêu đề về đúng cấp. Đổi 1 chỗ → đổi cả site.
   Chỉ chỉnh CỠ/nhịp, KHÔNG đổi font-family (Inter giữ nguyên theo yêu cầu).
   Nạp cuối hospitality.css nên thắng các rule cũ mà không cần sửa rải rác.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Bậc tiêu đề — responsive bằng clamp(min, vw, max). Tỉ lệ ~1.25 (major third). */
    --fs-h1: clamp(2.15rem, 4.2vw, 3.35rem);   /* Hero / banner trang */
    --fs-h2: clamp(1.72rem, 3.0vw, 2.4rem);    /* Tiêu đề section (H2) */
    --fs-h3: clamp(1.32rem, 2.0vw, 1.6rem);    /* Tiêu đề phụ / tên card lớn */
    --fs-h4: clamp(1.12rem, 1.5vw, 1.3rem);    /* H4 */
    --fs-h5: 1.08rem;                          /* H5 */
    --fs-h6: 0.95rem;                          /* H6 / nhãn nhỏ */
    --fs-body: 1rem;                           /* Thân bài */
    --fs-sub: 0.8rem;                          /* Nhãn phụ CHỮ HOA phía trên tiêu đề */

    --lh-tight: 1.18;   /* tiêu đề lớn */
    --lh-head: 1.25;    /* tiêu đề vừa */
    --lh-body: 1.6;     /* thân bài */
}

/* ── Bậc gốc h1..h6: mọi thẻ heading tuân theo thang, đồng nhất line-height ── */
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-head); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-head); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-head); }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-head); }
h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-head); }

/* ── TIÊU ĐỀ SECTION (H2 nghiệp vụ): "Vì sao chọn", "Phòng nghỉ", "Ẩm thực",
   "Ưu đãi nổi bật", "Tin tức"… + tiêu đề khối liên hệ → CÙNG một cỡ = --fs-h2.
   Đây là nhóm sếp so sánh "phải bằng nhau". ────────────────────────────────── */
.lyn-section .section-title,
.section-title,
.trv-head-title,                       /* tiêu đề cột phải khối liên hệ */
.trv-cot-media-info .trv-title {       /* tiêu đề cột trái khối liên hệ */
    font-size: var(--fs-h2) !important;
    line-height: var(--lh-head) !important;
}
/* LƯU Ý: KHÔNG gộp .widget-title vào nhóm trên — class này dùng cho tiêu đề CỘT FOOTER
   ("Nhận ưu đãi", "Điểm đến", "Chính sách") và sidebar; chúng nhỏ hơn tiêu đề section.
   Giữ nguyên cỡ riêng của footer (1.05rem) / sidebar (--fs-h3). */

/* ── NHÃN PHỤ chữ hoa phía trên tiêu đề (sub-title / subtitle) → cùng 1 cỡ nhỏ ── */
.lyn-section .sub-title,
.sub-title,
.trv-cot-media-info .trv-subtitle {
    font-size: var(--fs-sub) !important;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ── TIÊU ĐỀ TRANG (hero mini-site / banner trang) → cấp H1 dùng chung ──────── */
.lyn-page-banner-title {
    font-size: var(--fs-h1) !important;
    line-height: var(--lh-tight) !important;
}

/* ── MÔ TẢ / thân đoạn dưới tiêu đề → cùng cỡ thân bài, dễ đọc ──────────────── */
.lyn-section .section-description,
.trv-head-discription {
    font-size: var(--fs-body) !important;
    line-height: var(--lh-body) !important;
}

/* Sidebar widget dùng chung cấp H3 (nhỏ hơn tiêu đề section một bậc, đồng nhất). */
.side-bar .widget-title {
    font-size: var(--fs-h3) !important;
    line-height: var(--lh-head) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KHỐI LIÊN HỆ — NÂNG CẤP SANG TRỌNG (luxury polish)
   Nâng thẩm mỹ khối "Gửi yêu cầu tư vấn": khung bo mềm + viền vàng mảnh, cột trái
   gradient sâu hơn, nhãn phụ có gạch vàng, input tối giản, nút gradient tinh tế.
   Chỉ tinh chỉnh thị giác — không đổi cấu trúc/markup.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Khung ngoài: bo tròn hơn, đổ bóng sâu + đường viền vàng mảnh (điểm sang trọng). */
.trv-contact-form {
    border-radius: 24px !important;
    box-shadow: 0 30px 80px rgba(28, 26, 23, .22) !important;
    border: 1px solid rgba(var(--primary-color-rgb), .06);
}

/* Cột trái: gradient sâu & ấm hơn cho ảnh nổi khối, chữ tương phản cao. */
.trv-cot-media-section::before {
    background: linear-gradient(150deg, rgba(24, 22, 20, .30) 0%, rgba(24, 22, 20, .74) 55%, rgba(18, 16, 14, .9) 100%) !important;
}

/* Nhãn phụ "LIÊN HỆ LYNNTIMES": thêm GẠCH VÀNG ngắn phía trước cho chỉn chu. */
.trv-cot-media-info .trv-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--secondary-color) !important;
}
.trv-cot-media-info .trv-subtitle::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--secondary-color);
    display: inline-block;
}

/* Tiêu đề cột trái: nhẹ giãn dòng cho thanh thoát. */
.trv-cot-media-info .trv-title {
    letter-spacing: -.01em;
    margin-bottom: 26px !important;
}

/* Danh sách liên hệ: icon vòng tròn viền vàng mảnh thay nền xám → tinh tế hơn. */
.trv-contact-info-list { gap: 16px !important; }
.trv-contact-info-list i {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(var(--secondary-color-rgb, 201, 162, 75), .5);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .03);
}

/* Nút "Liên hệ ngay": nền kính mờ, viền vàng, hover đổ vàng sang. */
.trv-cot-media-btn {
    border-color: rgba(var(--secondary-color-rgb, 201, 162, 75), .7) !important;
    backdrop-filter: blur(2px);
    letter-spacing: .02em;
}
.trv-cot-media-btn:hover {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #1c1a17 !important;
}

/* ── Cột phải: nền trắng ngà ấm (không trắng phẳng) cho cảm giác cao cấp. ── */
.trv-contact-form .trv-contact-right-part,
.trv-contact-form > .row > [class*="col-"]:last-child {
    background: #fdfbf7 !important;
}
.trv-contact-right-part .trv-form { background: transparent !important; }

/* Tiêu đề form: thêm nhãn phụ ngầm + khoảng thở; mô tả xám dịu. */
.trv-contact-right-part .trv-head-title {
    letter-spacing: -.01em;
    margin-bottom: 10px !important;
}
.trv-contact-right-part .trv-head-discription {
    color: #7a726a !important;
    margin-bottom: 30px !important;
}

/* Input: nền trắng, viền mảnh, bo mềm; focus viền vàng-cam sang trọng. */
.trv-cons-contact-form .form-control {
    height: 54px;
    border: 1px solid #ece5da !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(28, 26, 23, .03);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.trv-cons-contact-form textarea.form-control { min-height: 130px; }
.trv-cons-contact-form .form-control::placeholder { color: #a89f95; }
.trv-cons-contact-form .form-control:focus {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--secondary-color-rgb, 201, 162, 75), .16) !important;
    background: #fff !important;
}

/* Nút gửi: gradient cam sâu, bo mềm, chữ giãn nhẹ + mũi tên; hover nhấc lên. */
.trv-cons-contact-form .site-button {
    margin-top: 8px;
    padding: 15px 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover, #d8351a) 100%) !important;
    letter-spacing: .02em;
    box-shadow: 0 10px 24px rgba(var(--primary-color-rgb), .28);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.trv-cons-contact-form .site-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(var(--primary-color-rgb), .36);
    filter: brightness(1.03);
}